- Timestamp:
- 2021-11-11T15:36:18+13:00 (2 years ago)
- Location:
- main/trunk/model-interfaces-dev/atea/korero-maori-asr/src
- Files:
-
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItem.vue
r35631 r35731 18 18 <div class="download-popup card" :class="{ 'download-popup-show': showDownloadOptions }" 19 19 @mouseover="showDownloadOptions = true" @mouseout="showDownloadOptions = false"> 20 <button @click="downloadAsText" type="button" class="btn-primary theme-flat ">20 <button @click="downloadAsText" type="button" class="btn-primary theme-flat left-align"> 21 21 <span class="material-icons">text_snippet</span> 22 22 <span>{{ translations.get("TranscriptionItem_DownloadAsText") }}</span> 23 23 </button> 24 24 25 <button @click="downloadAsJson" type="button" class="btn-primary theme-flat ">25 <button @click="downloadAsJson" type="button" class="btn-primary theme-flat left-align"> 26 26 <span class="material-icons">integration_instructions</span> 27 27 <span>{{ translations.get("TranscriptionItem_DownloadAsJson") }}</span> 28 28 </button> 29 29 30 <button @click="downloadAsWebvtt" type="button" class="btn-primary theme-flat ">30 <button @click="downloadAsWebvtt" type="button" class="btn-primary theme-flat left-align"> 31 31 <span class="material-icons">subtitles</span> 32 32 <span>{{ translations.get("TranscriptionItem_DownloadAsWebvtt") }}</span> … … 97 97 .rotate-180 { 98 98 transform: rotate(180deg); 99 } 100 101 .left-align { 102 justify-content: flex-start; 99 103 } 100 104 </style> -
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/_material.scss
r35508 r35731 32 32 // Default theme 33 33 @extend .theme-primary; 34 } 35 36 /* Scrollbar replacement */ 37 38 ::-webkit-scrollbar { 39 width: 8px; 40 height: 8px; 41 } 42 43 ::-webkit-scrollbar-track { 44 background: #f1f1f1; 45 } 46 47 ::-webkit-scrollbar-thumb { 48 background: #CCC; 49 border-radius: 3px; 50 51 transition-duration: var(--transition-duration); 52 53 &:hover { 54 background: #666; 55 height: 8px; 56 width: 8px; 57 } 34 58 } 35 59 … … 64 88 } 65 89 90 .divider-s { 91 @extend .divider; 92 margin: 0 2rem; 93 } 94 66 95 /* Buttons */ 67 96 … … 71 100 display: flex; 72 101 align-items: center; 73 text-align: left;102 justify-content: center; 74 103 75 104 background-color: var(--bg-color); … … 108 137 .text-container { 109 138 display: flex; 110 align-items: center;111 139 flex-wrap: wrap; 140 align-content: flex-start; 141 align-items: flex-start; 112 142 113 143 border-radius: var(--border-radius); … … 119 149 @extend .text-container; 120 150 151 align-items: center; 121 152 overflow-x: auto; 122 153 overflow-y: hidden; … … 128 159 129 160 border-radius: var(--border-radius) var(--border-radius) 0 0; 130 border-bottom: 1px solid #AAA; 161 border: none; 162 border-bottom: 2px solid #999; 163 outline: none; 131 164 cursor: text; 132 165 133 transition-duration: var(--transition-duration); 166 font-family: var(--body-font-family); 167 font-size: 1em; 168 169 transition: border var(--transition-duration); 134 170 135 171 &:hover { … … 137 173 } 138 174 139 &:active, &:focus { 140 border-bottom: 1px solid var(--bg-color); 175 &:active, &:focus, &:focus-visible { 176 background-color: #CDCDCD; 177 border-bottom: 2px solid var(--bg-color); 141 178 142 179 .text-input-active { … … 157 194 @extend .text-input; 158 195 196 align-items: center; 159 197 overflow-x: auto; 160 198 overflow-y: hidden; … … 217 255 } 218 256 } 257 258 &:disabled { 259 &::after { 260 background: #c7c7c7; 261 } 262 } 219 263 } 220 264 … … 405 449 } 406 450 407 /* Scrollbar replacement */408 409 ::-webkit-scrollbar {410 width: 6px;411 height: 6px;412 }413 414 ::-webkit-scrollbar-track {415 background: #f1f1f1;416 }417 418 ::-webkit-scrollbar-thumb {419 background: #CCC;420 border-radius: 3px;421 422 transition-duration: var(--transition-duration);423 424 &:hover {425 background: #666;426 height: 8px;427 width: 8px;428 }429 }430 431 451 /* === Start Theme Definitions === */ 432 452
Note:
See TracChangeset
for help on using the changeset viewer.