|
|
| Line 1: |
Line 1: |
| .SB-keybind-key { | | .SB-keybind-key { |
| border: 1px solid #ffffff36;
| | display: none; |
| display: inline-block;
| |
| margin: 0.25em;
| |
| border-radius: 0.25em;
| |
| position: relative;
| |
| line-height: 1.3em;
| |
| font-size: 1em;
| |
| height: 5em;
| |
| cursor: pointer;
| |
| transition: border-color, 0.1s ease-in-out;
| |
| }
| |
| .SB-keybind-key:hover {
| |
| /*border-color: #3a8080bf;*/
| |
| filter:brightness(1.5);
| |
| }
| |
| .SB-keybind-key::before {
| |
| content: attr(data-keycap);
| |
| display: block;
| |
| position: absolute;
| |
| top: 0.25em;
| |
| left: 0.5em;
| |
| font-size: 1.1em;
| |
| text-transform: uppercase;
| |
| white-space: pre;
| |
| }
| |
| .SB-keybind-key::after {
| |
| content: attr(data-keybind);
| |
| display: block;
| |
| position: absolute;
| |
| bottom: 0;
| |
| left: 0;
| |
| text-align: center;
| |
| margin: 0 0.25em 0.25em 0;
| |
| font-size: 1.2em;
| |
| font-variant: petite-caps;
| |
| }
| |
| | |
| | |
| .SB-keybind-gap {
| |
| display: inline-block;
| |
| }
| |
| | |
| .SB-keybind-info-title {
| |
| display: block;
| |
| margin-bottom: 0.5em;
| |
| font-family: kenneyfuture;
| |
| font-size: 1.3em;
| |
| color: #edcd50;
| |
| }
| |
| .SB-keybind-info {
| |
| position: absolute;
| |
| width: 300%;
| |
| left: -100%;
| |
| top: 110%;
| |
| background: #193b3bcc;
| |
| padding: 1em;
| |
| border-radius: 0.5em;
| |
| text-align: center;
| |
| transition: opacity 0.15s ease-in-out;
| |
| font-size: 1.25em;
| |
| box-shadow: 2px 2px 4px 2px black;
| |
| border: 1px solid #3a80809e;
| |
| cursor: auto;
| |
| opacity: 0;
| |
| transition: opacity 0.15s ease-in-out;
| |
| pointer-events: none;
| |
| }
| |
| .SB-keybind-active::after, .SB-keybind-active::before {
| |
| color: #edcd50;
| |
| }
| |
| .SB-keybind-active .SB-keybind-info {
| |
| opacity: 1;
| |
| pointer-events: auto;
| |
| }
| |
| .SB-keybind-active {
| |
| z-index: 2;
| |
| border-color: #ffffff40;
| |
| filter: brightness(1.5);
| |
| }
| |
| /* Keybind row colors linear-gradient(to bottom,#1e2949,#0a1c2a,#0b2732)*/
| |
| | |
| .SB-keybind-row {
| |
| --key-color-1: #37515c78;
| |
| --key-color-2: #384a5a70;
| |
| --key-color-3: #38445873;
| |
| --key-color-4: #393d5691;
| |
| --key-color-5: #3d3f5fb0;
| |
| --key-color-6: #424169ba;
| |
| --key-color-7: #464373a1;
| |
| --key-color-8: #4d4682bd;
| |
| }
| |
| | |
| | |
| .SB-keybind-row:nth-of-type(1) .SB-keybind-key {
| |
| background: linear-gradient(var(--key-color-1), var(--key-color-2));
| |
| }
| |
| .SB-keybind-row:nth-of-type(2) .SB-keybind-key {
| |
| background: linear-gradient(var(--key-color-2), var(--key-color-3));
| |
| }
| |
| .SB-keybind-row:nth-of-type(3) .SB-keybind-key {
| |
| background: linear-gradient(var(--key-color-3), var(--key-color-4));
| |
| }
| |
| .SB-keybind-row:nth-of-type(4) .SB-keybind-key {
| |
| background: linear-gradient(var(--key-color-4), var(--key-color-5));
| |
| }
| |
| .SB-keybind-row:nth-of-type(5) .SB-keybind-key {
| |
| background: linear-gradient(var(--key-color-5), var(--key-color-6));
| |
| }
| |
| .SB-keybind-row:nth-of-type(6) .SB-keybind-key {
| |
| background: linear-gradient(var(--key-color-7), var(--key-color-8));
| |
| }
| |
| | |
| | |
| | |
| /* Keybind unit sizes */
| |
| .SB-keybind-wrap {
| |
| --u-size: 5em;
| |
| }
| |
| .size-qu {
| |
| width: calc(var(--u-size) / 4);
| |
| }
| |
| .size-1u {
| |
| width: var(--u-size);
| |
| }
| |
| .size-line {
| |
| width: 5.35em;
| |
| }
| |
| .size-1-25u {
| |
| width: calc(var(--u-size) * 1.25);
| |
| }
| |
| .size-1-5u {
| |
| width: calc(var(--u-size) * 1.5);
| |
| }
| |
| .size-1-75u {
| |
| width: calc(var(--u-size) * 1.75);
| |
| }
| |
| .size-2u {
| |
| width: calc(var(--u-size) * 2);
| |
| }
| |
| .size-2-25u {
| |
| width: calc(var(--u-size) * 2.25);
| |
| }
| |
| .size-2-5u {
| |
| width: calc(var(--u-size) * 2.5);
| |
| }
| |
| .size-2-75u {
| |
| width: calc(var(--u-size) * 2.75);
| |
| }
| |
| .size-6-25u {
| |
| width: calc(var(--u-size) * 6.25);
| |
| }
| |
| .size-7u {
| |
| width: calc(var(--u-size) * 7);
| |
| } | | } |
