1 files changed, 152 insertions, 0 deletions
diff --git a/src/zoom/parsing.css b/src/zoom/parsing.css
new file mode 100644
index 0000000..0e6a95f
--- /dev/null
+++ b/src/zoom/parsing.css
@@ -0,0 +1,152 @@
+/* Clause parsing styles */
+.clauses-container {
+  display: inline-block;
+  margin: 1rem 0;
+  padding: 0.5rem;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.clause {
+  /* width: 90%; */
+  /* flex-wrap: wrap; */
+  display: flex;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  /* */
+  /* border-bottom: 0.5px solid var(--clause-underline-color); */
+  /* border-radius: 0.3rem; */
+}
+
+.clause-inner {
+  position: relative;
+}
+
+.clause-pos {
+  font-size: 0.7rem;
+  text-align: center;
+  border-bottom: 0.5px solid var(--clause-underline-color);
+  border-radius: 0.3rem;
+}
+
+.word-pos {
+  font-size: 0.7rem;
+  position: absolute;
+  top: -1rem;
+  left: 50%;
+  transform: translateX(-50%);
+
+}
+
+.clause.bottom {
+  border-bottom: 8px solid var(--clause-underline-color);
+  border-radius: 0.3rem;
+}
+
+.clause.underline {
+  /* Add text-decoration properties */
+  text-decoration-line: underline;
+  text-decoration-color: var(--clause-underline-color);
+  /* Use CSS variable */
+  text-decoration-thickness: 4px;
+  text-decoration-skip-ink: none;
+  /* Adjust thickness as needed */
+  text-underline-offset: 2px;
+}
+
+.clause.gradient {
+  text-decoration: none;
+  background-image: linear-gradient(to right, var(--clause-underline-color) 0%, black 100%);
+  background-position: 0 1.1em;
+  background-repeat: repeat-x;
+  background-size: 100% 4px;
+  display: inline;
+  /* Keep it as inline */
+}
+
+.clause.selected {
+  background-color: rgba(220, 200, 255, 0.3);
+  border-radius: 4px;
+}
+
+.clause:hover {
+  background-color: rgba(220, 200, 255, 0.2);
+  transform: translateY(-1px);
+}
+
+
+/* New rule to disable text-decoration based on class from component */
+.clause.no-underline {
+  text-decoration: none !important;
+  border-bottom: none;
+}
+
+.clause.punctuation {
+  margin: 0 0.05rem;
+  padding: 0;
+}
+
+.clause.leaf-node {
+  padding: 0.1rem 0.2rem;
+}
+
+.punctuation-leaf {
+  color: #666;
+  font-weight: normal;
+  margin: 0 0.05rem;
+}
+
+/* Improve spacing and styling for leaf nodes */
+.tree-leaf {
+  font-weight: 500;
+  color: #333;
+}
+
+.tree-leaf {
+  display: inline;
+  padding: 0.1rem 0.3rem 0 0.3rem;
+  margin: 0 0.1rem;
+  font-weight: 500;
+  color: #333;
+}
+
+/* Words container */
+.words-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+/* Mini spinner for clauses */
+.clause .mini-spinner {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin: 0 2px;
+}
+
+/* Tooltip for syntactic information */
+.syntax-tooltip {
+  position: absolute;
+  top: -30px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  z-index: 100;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.clause:hover .syntax-tooltip {
+  opacity: 1;
+}
+\ No newline at end of file