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

Timestamp:

2021-08-09T13:49:44+12:00 (3 years ago)

Author:

davidb

Message:

UI improvements

File:

• main/trunk/model-interfaces-dev/atea/style/asr.css (modified) (7 diffs)

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

@@ +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+/* === Start theme definitions === */
+
 :root {
-    --primary-bg-color: #21bbc0;
-    --primary-bg-shadow-color: #0a2e4d;
-    --primary-bg-shadow-blur: 2px;
-    --primary-bg-shadow-active-blur: 4px;
-
-    --primary-fg-color: black;
-
-    --error-bg-color: #fa5757;
+    --primary-bg-color: #2191c0;
+    --primary-bg-color-d1: #2785ad;
+    --primary-bg-color-d2: #227497;
+    --primary-box-shadow: 0px 2px 4px 0px #505050;
+
+    --primary-fg-color: white;
+
+    --error-bg-color: #ff4242;
     --error-fg-color: black;
-    --error-shadow-color: #331212;
 
     --paper-color: #FCFCFC;
-    --paper-shadow-color: #444;
-}
-
-body {
-    background-color: var(--paper-color);
-}
-
-#gs_content {
-    padding: 0;
-    background-color: var(--paper-color);
-}
-
-#gs_banner {
-    margin-bottom: 1em;
-    border-radius: 0 0 0.5em 0.5em;
 }
 
@@ -32 +20 @@
     background-color: var(--paper-color);
     padding: 1em;
-    border-radius: 0.5em;
-    box-shadow: 0 0 6px 0 var(--paper-shadow-color);
-}
-
-.paper-inset {
-    background-color: var(--paper-color);
-    padding: 1em;
-    border-radius: 0.5em;
-    box-shadow: 0 0 3px 0 var(--paper-shadow-color) inset;
+    border-radius: 0.3em;
+    box-shadow: var(--primary-box-shadow);
 }
 
@@ -46 +27 @@
     margin: 1em 2em;
     height: 1px;
-    background-color: #AAA;
+    background-color: #0000001F;
     border: none;
 }
@@ -56 +37 @@
     color: var(--primary-fg-color);
     border: none;
-    box-shadow: 0 0 var(--primary-bg-shadow-blur) 0 var(--primary-bg-shadow-color);
+    box-shadow: var(--primary-box-shadow);
     
     font-size: 48px;
@@ -62 +43 @@
     padding: 0.2em;
     cursor: pointer;
+    margin: 0 1px 3px 1px; /* Keeps space around the box shadow */
 
     -webkit-transition-duration: 0.2s;
@@ -68 +50 @@
 
 .btn-fab:hover {
-    box-shadow: 0 0 var(--primary-bg-shadow-active-blur) 0 var(--primary-bg-shadow-color);
-}
-
-.btn-fab-small {
+    filter: brightness(92%);
+}
+
+.btn-fab:disabled {
+    filter: grayscale(100%);
+}
+
+.btn-primary {
+    background-color: var(--primary-bg-color);
+    color: var(--primary-fg-color);
+    border: none;
+    box-shadow: var(--primary-box-shadow);
+
+    border-radius: 0.3em;
+    padding: 0.5em;
+    cursor: pointer;
+    font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+    text-align: center;
+    margin: 0 1px 3px 1px; /* Keeps space around the box shadow */
+
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+}
+
+.btn-primary span {
+    text-align: center;
+    vertical-align: middle;
+}
+
+.btn-primary:hover {
+    filter: brightness(92%);
+}
+
+.btn-primary:disabled {
+    filter: grayscale(100%);
+}
+
+.color-primary {
+    background-color: var(--primary-bg-color);
+    color: var(--primary-fg-color);
+}
+
+.color-error {
+    background-color: var(--error-bg-color);
+    color: var(--error-fg-color);
+}
+
+.color-flat {
+    background-color: transparent;
+    color: #222;
+    box-shadow: none;
+}
+
+.color-flat:hover {
+    background-color: #EEE;
+}
+
+.mdi-s {
+    font-size: 18px;
+}
+
+.mdi-m {
     font-size: 24px;
+}
+
+.mdi-l {
+    font-size: 36px;
+}
+
+.mdi-xl {
+    font-size: 48px;
+}
+
+.body1 {
+    font-size: 16px;
+}
+
+.body2 {
+    font-size: 14px;
+}
+
+.heading1 {
+    font-size: 48px;
+}
+
+/* === End theme definitions === */
+
+body {
+    background-color: var(--paper-color);
+    font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+}
+
+#gs_content {
+    padding: 0;
+    background-color: var(--paper-color);
+}
+
+#gs_banner {
+    margin-bottom: 1em;
+    border-radius: 0 0 0.3em 0.3em;
+}
+
+#audio-transcription-container {
+    margin-top: 2em;
 }
 
 .asr-hidden {
     display: none;
+}
+
+#btnBeginTranscription {
+    float: right;
 }
 
@@ -103 +190 @@
 
 .transcription__file-name {
-    margin: 0;
     margin: 0 1em 0 1em;
-    font-weight: bold;
 }
 
 .transcription__remove-button {
-    --primary-bg-color: var(--error-bg-color);
-    --primary-fg-color: var(--error-fg-color);
-    --primary-bg-shadow-color: var(--error-shadow-color);
-
     order: 100;
 }