Changeset 35731


Ignore:
Timestamp:
2021-11-11T15:36:18+13:00 (3 weeks ago)
Author:
cstephen
Message:

Port updated material styles

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  
    1818                <div class="download-popup card" :class="{ 'download-popup-show': showDownloadOptions }"
    1919                     @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">
    2121                        <span class="material-icons">text_snippet</span>
    2222                        <span>{{ translations.get("TranscriptionItem_DownloadAsText") }}</span>
    2323                    </button>
    2424
    25                     <button @click="downloadAsJson" type="button" class="btn-primary theme-flat">
     25                    <button @click="downloadAsJson" type="button" class="btn-primary theme-flat left-align">
    2626                        <span class="material-icons">integration_instructions</span>
    2727                        <span>{{ translations.get("TranscriptionItem_DownloadAsJson") }}</span>
    2828                    </button>
    2929
    30                     <button @click="downloadAsWebvtt" type="button" class="btn-primary theme-flat">
     30                    <button @click="downloadAsWebvtt" type="button" class="btn-primary theme-flat left-align">
    3131                        <span class="material-icons">subtitles</span>
    3232                        <span>{{ translations.get("TranscriptionItem_DownloadAsWebvtt") }}</span>
     
    9797.rotate-180 {
    9898    transform: rotate(180deg);
     99}
     100
     101.left-align {
     102    justify-content: flex-start;
    99103}
    100104</style>
  • main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/_material.scss

    r35508 r35731  
    3232    // Default theme
    3333    @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    }
    3458}
    3559
     
    6488}
    6589
     90.divider-s {
     91    @extend .divider;
     92    margin: 0 2rem;
     93}
     94
    6695/* Buttons */
    6796
     
    71100    display: flex;
    72101    align-items: center;
    73     text-align: left;
     102    justify-content: center;
    74103
    75104    background-color: var(--bg-color);
     
    108137.text-container {
    109138    display: flex;
    110     align-items: center;
    111139    flex-wrap: wrap;
     140    align-content: flex-start;
     141    align-items: flex-start;
    112142
    113143    border-radius: var(--border-radius);
     
    119149    @extend .text-container;
    120150
     151    align-items: center;
    121152    overflow-x: auto;
    122153    overflow-y: hidden;
     
    128159
    129160    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;
    131164    cursor: text;
    132165
    133     transition-duration: var(--transition-duration);
     166    font-family: var(--body-font-family);
     167    font-size: 1em;
     168
     169    transition: border var(--transition-duration);
    134170
    135171    &:hover {
     
    137173    }
    138174
    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);
    141178       
    142179        .text-input-active {
     
    157194    @extend .text-input;
    158195
     196    align-items: center;
    159197    overflow-x: auto;
    160198    overflow-y: hidden;
     
    217255        }
    218256    }
     257
     258    &:disabled {
     259        &::after {
     260            background: #c7c7c7;
     261        }
     262    }
    219263}
    220264
     
    405449}
    406450
    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 
    431451/* === Start Theme Definitions === */
    432452
Note: See TracChangeset for help on using the changeset viewer.