src/assets/css/keyboard.css - master - githubmirror/edex-ui

src/assets/css/keyboard.css
241 строка7 KB
GitSquared
:bug: (kb+fs): Fix overlapping modules preventing scrollbar use
04 ноя 2019, 23:45
04 ноя 2019, 23:454956d0c
section#keyboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 55.5vw;
    position: relative;
    top: -0.925vh;
}

section#keyboard[data-password-mode="true"] {
    opacity: 0.5 !important;
    cursor: none !important;
}

div.keyboard_row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    margin: 0.46vh 0vh;
    height: 5.28vh;
}

section#keyboard.animation_state_2 > div.keyboard_row:nth-child(1) {
    transition: width .7s cubic-bezier(0.4, 0, 1, 1) .3s, filter .1s linear .8s;
}
section#keyboard.animation_state_2 > div.keyboard_row:nth-child(2) {
    transition: width .7s cubic-bezier(0.4, 0, 1, 1) .2s, filter .1s linear .6s;
}
section#keyboard.animation_state_2 > div.keyboard_row:nth-child(3) {
    transition: width .7s cubic-bezier(0.4, 0, 1, 1), filter .1s linear .5s;
}
section#keyboard.animation_state_2 > div.keyboard_row:nth-child(4) {
    transition: width .7s cubic-bezier(0.4, 0, 1, 1) .25s, filter .1s linear .8s;
}
section#keyboard.animation_state_2 > div.keyboard_row:nth-child(5) {
    transition: width .6s cubic-bezier(0.4, 0, 1, 1) .2s, filter .1s linear .6s;
}

section#keyboard.animation_state_1 > * {
    filter: brightness(170%);
    width: 0vh;
    overflow: hidden;
}

section#keyboard.animation_state_2 > * {
    filter: brightness(100%);
    width: 100vw;
    overflow: hidden;
}

div.keyboard_row:last-child {
    position: relative;
    left: 2.4vh;
}

div.keyboard_key {
    height: 2.7vw;
    min-width: 2.7vw;
    overflow: hidden;
    border-radius: 0.46vh;
    background-color: rgba(var(--color_r), var(--color_g), var(--color_b), 0.0);
    border: 0.18vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.0);
    margin: 0vh 0.46vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

section#keyboard:not([data-password-mode="true"]) div.keyboard_key:active, section#keyboard:not([data-password-mode="true"]) div.keyboard_key.active {
    border: 0.18vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.0);
    background-color: rgba(var(--color_r), var(--color_g), var(--color_b), 1);
}

section#keyboard:not([data-password-mode="true"]) div.keyboard_key.blink {
    animation-name: blink;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes blink {
    0% {background-color: rgba(var(--color_r), var(--color_g), var(--color_b), 0.0);}
    50% {background-color: rgba(var(--color_r), var(--color_g), var(--color_b), 1);}
    100% {background-color: rgba(var(--color_r), var(--color_g), var(--color_b), 0.0);}
}

div.keyboard_key > * {
    margin: 0vh 0.46vh;
    padding: 0vh;
    -webkit-margin-after: 0vh;
    -webkit-margin-before: 0vh;
}

div.keyboard_key > h1, div.keyboard_key > h4, div.keyboard_row > .keyboard_key:last-child > *, div.keyboard_row > .keyboard_key:first-child > * {
    position: relative;
    top: 0.278vh;
    font-size: 2.4vh;
}

div.keyboard_row:not(:nth-child(4)) > .keyboard_key:last-child > *, div.keyboard_row > .keyboard_key:first-child > *, div.keyboard_row:last-child > .keyboard_key > *, div.keyboard_row:nth-child(4) > .keyboard_key:nth-last-child(2) > * {
    font-size: 1.85vh;
}

div.keyboard_row:last-child > .keyboard_key:nth-last-child(-n+3) > * {
    font-size: 2.4vh;
}

div.keyboard_key > svg {
    width: calc(100% - 1vh);
    height: calc(100% - 1vh);
    top: .5vh !important;
    opacity: 1 !important;
    fill: rgb(var(--color_r), var(--color_g), var(--color_b));
}

div.keyboard_key > *:not(h1) {
    margin: 0vh;
    font-size: 1.67vh;
    position: absolute;
}

div.keyboard_key > h2 {
    top: 0.278vh;
    left: 0.278vh;
}

div.keyboard_key > h3 {
    bottom: 0.278vh;
    right: 0.278vh;
}

div.keyboard_key > h5 {
    top: 0.278vh;
    right: 0.278vh;
}

div.keyboard_key > h4, div.keyboard_row > .keyboard_key:last-child > *:not(h1), div.keyboard_row > .keyboard_key:first-child > *:not(h1) {
    opacity: 0;
    position: absolute;
}

div.keyboard_row:not(:nth-child(4)):not(:last-child) > .keyboard_key:last-child, div.keyboard_row > .keyboard_key:first-child {
    width: 8.33vh;
    min-width: 8.33vh;
}

div.keyboard_key#keyboard_spacebar {
    border: 0.19vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.5);
}

div.keyboard_row#row_1 > div.keyboard_enter {
    border: 0.19vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.5);
    border-bottom-right-radius: 0vh;
    width: 9.72vh;
    min-width: 9.72vh;
}

div.keyboard_row#row_2 > div.keyboard_enter {
    border: 0.19vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.5);
    border-top-left-radius: 0vh;
    border-top: 0.3vh solid var(--color_light_black);
    width: 7.78vh;
    min-width: 7.78vh;
    margin-top: 0vh;
    height: 6.389vh;
    top: -0.37vh;
    right: -1vh;
}

div.keyboard_row#row_2 > div.keyboard_enter:active, div.keyboard_row#row_2 > div.keyboard_enter.active {
    border-top: 0.3vh solid rgb(var(--color_r), var(--color_g), var(--color_b));
}

div.keyboard_key#keyboard_spacebar {
    width: 47.68vh;
    min-width: 47.68vh;
    height: 3.52vh;
}

div.keyboard_row:nth-child(4) > div.keyboard_key:last-child {
    position: relative;
    top: 0.278vh;
}

div.keyboard_row:last-child > div.keyboard_key:nth-last-child(-n+3) {
    margin: 0vh;
    position: relative;
    bottom: 0.278vh;
}

section#keyboard[data-is-caps-lck-on="true"] div.keyboard_key[data-cmd="ESCAPED|-- CAPSLCK: ON"] {
    background-color: rgb(var(--color_r), var(--color_g), var(--color_b));
    color: var(--color_black);
}

section#keyboard[data-is-shift-on="true"] > div.keyboard_row > div.keyboard_key > h2:not(:empty), section#keyboard[data-is-caps-lck-on="true"] > div.keyboard_row > div.keyboard_key > h2:not(:empty) {
    position: relative;
    top: 0.278vh;
    font-size: 2.4vh;
    margin: 0vh 0.46vh;
}

section#keyboard[data-is-shift-on="true"] > div.keyboard_row:first-child > div.keyboard_key:last-child > h2, section#keyboard[data-is-caps-lck-on="true"] > div.keyboard_row:first-child > div.keyboard_key:last-child > h2 {
    font-size: 1.85vh;
    opacity: 1;
}

section#keyboard[data-is-shift-on="true"] > div.keyboard_row > div.keyboard_key > h2:not(:empty) + h1, section#keyboard[data-is-caps-lck-on="true"] > div.keyboard_row > div.keyboard_key > h2:not(:empty) + h1 {
    margin: 0vh;
    font-size: 1.67vh;
    position: absolute;
    top: 0.278vh;
    left: 0.278vh;
}

section#keyboard[data-is-shift-on="true"] > div.keyboard_row:first-child > div.keyboard_key:last-child > h2 + h1, section#keyboard[data-is-caps-lck-on="true"] > div.keyboard_row:first-child > div.keyboard_key:last-child > h2 + h1 {
    opacity: 0;
}


section#keyboard[data-is-fn-on="true"] div.keyboard_key[data-cmd="ESCAPED|-- FN: ON"] {
    background-color: rgb(var(--color_r), var(--color_g), var(--color_b));
    color: var(--color_black);
}

section#keyboard[data-is-fn-on="true"] > div.keyboard_row > div.keyboard_key > h4:not(:empty) {
    position: relative;
    top: 0.278vh;
    font-size: 2.4vh;
    margin: 0vh 0.46vh;
    opacity: 1;
}

section#keyboard[data-is-fn-on="true"] > div.keyboard_row > div.keyboard_key > h4:not(:empty) + h3, section#keyboard[data-is-fn-on="true"] > div.keyboard_row > div.keyboard_key > h4:not(:empty) + h3 + h2, section#keyboard[data-is-fn-on="true"] > div.keyboard_row > div.keyboard_key > h4:not(:empty) + h3 + h2 + h1 {
    position: absolute;
    opacity: 0;
}