Changeset 35305 for main/trunk/model-interfaces-dev/atea/style

Timestamp:

2021-08-17T16:40:17+12:00 (3 years ago)

Author:

davidb

Message:

Add word editing.

Location:

main/trunk/model-interfaces-dev/atea/style

Files:

• asr.scss (modified) (3 diffs)
• material.scss (modified) (1 diff)

main/trunk/model-interfaces-dev/atea/style/asr.scss

@@ -28 +28 @@
 
 .transform-slideout {
-    -webkit-transition-duration: 0.5s;
-    -moz-transition-duration: 0.5s;
-    transition-duration: 0.5s;
+    -webkit-transition-duration: 0.4s;
+    -moz-transition-duration: 0.4s;
+    transition-duration: 0.4s;
 
     transform: translate(100%, 0);
@@ -102 +102 @@
     display: flex;
 
-    font: var(--monospace-font);
     padding-top: 1em;
 
@@ -116 +115 @@
 }
 
-.transcription__word {
+.transcription__word-highlight {
+    background-color: rgba(255, 255, 0, 0.4);
+}
+
+.transcription__word-container {
+    font: var(--monospace-font);
     display: inline-block;
     margin-bottom: 1em;
 
     &:hover {
-        background-color: rgba(255, 255, 0, 0.4)
-    }
-}
-
-.yellow {
-    background-color: rgba(255, 255, 0, 0.4);
+        @extend .transcription__word-highlight;
+    }
+}
+
+.transcription__word {
+    font: var(--monospace-font);
+    display: inline;
+    background: transparent;
+    width: auto;
+    border: none;
+
+    &:disabled {
+        color: black;
+    }
 }
 

main/trunk/model-interfaces-dev/atea/style/material.scss

@@ -168 +168 @@
     }
 
-    &:active {
+    &:active, &:focus {
         border-bottom: 1px solid var(--primary-bg-color);