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

Timestamp:

2021-08-25T12:37:35+12:00 (3 years ago)

Author:

cstephen

Message:

Continue attempts to implement word editing

Location:

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

Files:

• asr.scss (modified) (5 diffs)
• material.scss (modified) (2 diffs)

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

@@ -11 +11 @@
 }
 
+@mixin transition-set {
+    -webkit-transition-duration: var(--transition-duration);
+    -moz-transition-duration: var(--transition-duration);
+    transition-duration: var(--transition-duration);
+}
+
 /* === Start theme application === */
 
@@ -27 +33 @@
 /* === End theme application === */
 
-.transform-slideout {
-    -webkit-transition-duration: 0.4s;
-    -moz-transition-duration: 0.4s;
-    transition-duration: 0.4s;
-
-    transform: translate(100%, 0);
+.transform-rotate180 {
+    --transition-duration: 0.4s;
+    @include transition-set;
+
+    transform: rotate(180deg);
+}
+
+.transform-slideout-up {
+    --transition-duration: 0.4s;
+    @include transition-set;
+
+    z-index: -1;
+    transform: translate(0, -100%);
     opacity: 0;
 }
@@ -86 +99 @@
 
 .transcription__list {
-    padding: 0;
     list-style-type: none;
+    margin-block: 0 0;
+    padding-inline: 0 0;
 }
 
@@ -99 +113 @@
 }
 
-.transcription__word-list {
-    display: flex;
-
-    padding-top: 1em;
-
-    & .transcription__list {
-        margin-left: 2em;
-    }
-}
-
-.transcription__word-list__controls {
+.transcription__details-container {
     display: flex;
     flex-direction: column;
-    align-items: center;
+
+    padding-top: 1em;
+
+    & .transcription__details__word-list {
+        list-style-type: none;
+        margin-block: 0 0;
+        padding-inline: 0 0;
+    }
+}
+
+.transcription__details__controls {
+    display: grid;
+    grid-template-columns: auto auto auto 1fr;
+    gap: 0 1em;
+    align-items: center;
+}
+
+.transcription__word-highlight-applied {
+    background-color: rgba(255, 255, 0, 0.4);
 }
 
 .transcription__word-highlight {
-    background-color: rgba(255, 255, 0, 0.4);
+    &:hover {
+        @extend .transcription__word-highlight-applied;
+    }
 }
 
@@ -122 +146 @@
     font: var(--monospace-font);
     display: inline-block;
-    margin-bottom: 1em;
-
-    &:hover {
-        @extend .transcription__word-highlight;
-    }
+    margin-top: 1em;
 }
 
 .transcription__word {
+    @extend .transcription__word-highlight;
+
     font: var(--monospace-font);
     display: inline;
     background: transparent;
     width: auto;
-    border: none;
+    border: 1px solid black;
+    padding: 0;
 
     &:disabled {
         color: black;
+        border: none;
     }
 }

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

@@ -137 +137 @@
     align-items: center;
 
-    //line-height: 1.5em;
     border-radius: var(--border-radius);
     background: #DDD;
@@ -274 +273 @@
 .body0 {
     font-size: 18px;
+    line-height: 24px;
 }