Changeset 35731

Timestamp:

2021-11-11T15:36:18+13:00 (2 years ago)

Author:

cstephen

Message:

Port updated material styles

Location:

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src

Files:

• components/TranscriptionItem.vue (modified) (2 diffs)
• styles/_material.scss (modified) (10 diffs)

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItem.vue

@@ -18 +18 @@
                 <div class="download-popup card" :class="{ 'download-popup-show': showDownloadOptions }"
                      @mouseover="showDownloadOptions = true" @mouseout="showDownloadOptions = false">
-                    <button @click="downloadAsText" type="button" class="btn-primary theme-flat">
+                    <button @click="downloadAsText" type="button" class="btn-primary theme-flat left-align">
                         <span class="material-icons">text_snippet</span>
                         <span>{{ translations.get("TranscriptionItem_DownloadAsText") }}</span>
                     </button>
 
-                    <button @click="downloadAsJson" type="button" class="btn-primary theme-flat">
+                    <button @click="downloadAsJson" type="button" class="btn-primary theme-flat left-align">
                         <span class="material-icons">integration_instructions</span>
                         <span>{{ translations.get("TranscriptionItem_DownloadAsJson") }}</span>
                     </button>
 
-                    <button @click="downloadAsWebvtt" type="button" class="btn-primary theme-flat">
+                    <button @click="downloadAsWebvtt" type="button" class="btn-primary theme-flat left-align">
                         <span class="material-icons">subtitles</span>
                         <span>{{ translations.get("TranscriptionItem_DownloadAsWebvtt") }}</span>
@@ -97 +97 @@
 .rotate-180 {
     transform: rotate(180deg);
+}
+
+.left-align {
+    justify-content: flex-start;
 }
 </style>

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/_material.scss

@@ -32 +32 @@
     // Default theme
     @extend .theme-primary;
+}
+
+/* Scrollbar replacement */
+
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1; 
+}
+
+::-webkit-scrollbar-thumb {
+    background: #CCC;
+    border-radius: 3px;
+
+    transition-duration: var(--transition-duration);
+
+    &:hover {
+        background: #666;
+        height: 8px;
+        width: 8px;
+    }
 }
 
@@ -64 +88 @@
 }
 
+.divider-s {
+    @extend .divider;
+    margin: 0 2rem;
+}
+
 /* Buttons */
 
@@ -71 +100 @@
     display: flex;
     align-items: center;
-    text-align: left;
+    justify-content: center;
 
     background-color: var(--bg-color);
@@ -108 +137 @@
 .text-container {
     display: flex;
-    align-items: center;
     flex-wrap: wrap;
+    align-content: flex-start;
+    align-items: flex-start;
 
     border-radius: var(--border-radius);
@@ -119 +149 @@
     @extend .text-container;
 
+    align-items: center;
     overflow-x: auto;
     overflow-y: hidden;
@@ -128 +159 @@
 
     border-radius: var(--border-radius) var(--border-radius) 0 0;
-    border-bottom: 1px solid #AAA;
+    border: none;
+    border-bottom: 2px solid #999;
+    outline: none;
     cursor: text;
 
-    transition-duration: var(--transition-duration);
+    font-family: var(--body-font-family);
+    font-size: 1em;
+
+    transition: border var(--transition-duration);
 
     &:hover {
@@ -137 +173 @@
     }
 
-    &:active, &:focus {
-        border-bottom: 1px solid var(--bg-color);
+    &:active, &:focus, &:focus-visible {
+        background-color: #CDCDCD;
+        border-bottom: 2px solid var(--bg-color);
         
         .text-input-active {
@@ -157 +194 @@
     @extend .text-input;
 
+    align-items: center;
     overflow-x: auto;
     overflow-y: hidden;
@@ -217 +255 @@
         }
     }
+
+    &:disabled {
+        &::after {
+            background: #c7c7c7;
+        }
+    }
 }
 
@@ -405 +449 @@
 }
 
-/* Scrollbar replacement */
-
-::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-}
-
-::-webkit-scrollbar-track {
-    background: #f1f1f1; 
-}
-
-::-webkit-scrollbar-thumb {
-    background: #CCC;
-    border-radius: 3px;
-
-    transition-duration: var(--transition-duration);
-
-    &:hover {
-        background: #666;
-        height: 8px;
-        width: 8px;
-    }
-}
-
 /* === Start Theme Definitions === */