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

Timestamp:

2021-08-17T14:15:34+12:00 (3 years ago)

Author:

davidb

Message:

Fix race error to get DOM elements.
Add transcription delete animations.
Add audio current time polling.
Improve style and layout.

Location:

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

Files:

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

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

@@ +1 @@
+/*
+ * Defines styles for asr.xsl
+ * Author: Carl Stephens
+ */
+
 @use "./material.scss";
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;700&display=swap');
@@ -21 +26 @@
 
 /* === End theme application === */
+
+.transform-slideout {
+    -webkit-transition-duration: 0.5s;
+    -moz-transition-duration: 0.5s;
+    transition-duration: 0.5s;
+
+    transform: translate(100%, 0);
+    opacity: 0;
+}
 
 body {
@@ -49 +63 @@
     display: grid;
     gap: 0.5em 0.5em;
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: 1fr auto;
     align-items: stretch;
 
@@ -74 +88 @@
     padding: 0;
     list-style-type: none;
-}
-
-.transcription__container {
-    -webkit-transition-duration: 0.15s;
-    transition-duration: 0.15s;
-
-    // &:hover {
-    //     background-color: #EEE;
-    // }
 }
 
@@ -121 +126 @@
 
 .transcription__error-container {
-    @extend .transcription__container;
     display: grid;
     gap: 0.5em 0.5em;

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

@@ +1 @@
+/*
+ * Defines themes that match the material design specification
+ * Author: Carl Stephens
+ */
+
 /* === Start theme definitions === */
 
@@ -132 +137 @@
     align-items: center;
 
-    line-height: 1.5em;
+    //line-height: 1.5em;
     border-radius: var(--border-radius);
-    background: #DCDCDCDC;
+    background: #DDD;
     padding: 0.5em;
+
+    .text-placeholder {
+        cursor: default;
+    }
 }
 
@@ -147 +156 @@
 
 .text-input {
-    display: flex;
-    align-items: center;
+    @extend .text-container;
 
     border-radius: var(--border-radius) var(--border-radius) 0 0;
     border-bottom: 1px solid #AAA;
-    background: #EEE;
-    padding: 0.5em;
-
-    @include transition-set;
-
-    &:hover {
-        background-color: #DDD;
+    cursor: text;
+
+    @include transition-set;
+
+    &:hover {
+        background-color: #CDCDCD;
     }
 
@@ -179 +186 @@
 }
 
+.text-input-sl {
+    @extend .text-input;
+
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+}
+
 .text-placeholder {
     color: #666; 
     cursor: default;
     font-style: italic;
+    cursor: inherit;
 }