| @@ -16,11 +16,11 @@ | ||
| 16 | 16 | cursor: pointer; |
| 17 | 17 | margin: 0; |
| 18 | 18 | inline-size: 36px; |
| 19 | 19 | block-size: 19px; |
| 20 | - border-radius: 34px; | |
| 20 | + border-radius: 999px; | |
| 21 | 21 | text-align: start; |
| 22 | - border: 1px solid theme.$accent; | |
| 22 | + border: 1px solid var(--cs-color-accent); | |
| 23 | 23 | box-sizing: border-box; |
| 24 | 24 | |
| 25 | 25 | &::before { |
| 26 | 26 | transition: all .1s; |
| @@ -27,9 +27,9 @@ | ||
| 27 | 27 | content: ''; |
| 28 | 28 | block-size: 13px; |
| 29 | 29 | inline-size: 13px; |
| 30 | 30 | display: inline-block; |
| 31 | - background-color: theme.$accent; | |
| 31 | + background-color: var(--cs-color-accent); | |
| 32 | 32 | border-radius: 50%; |
| 33 | 33 | margin: 2px; |
| 34 | 34 | |
| 35 | 35 | @media (prefers-reduced-motion: reduce) { |
| @@ -35,17 +35,25 @@ | ||
| 35 | 35 | @media (prefers-reduced-motion: reduce) { |
| 36 | 36 | transition-duration: 0.01s; |
| 37 | 37 | } |
| 38 | 38 | } |
| 39 | + | |
| 40 | + &:focus { | |
| 41 | + box-shadow: none; | |
| 42 | + } | |
| 43 | + | |
| 44 | + &:focus-visible { | |
| 45 | + outline: 2px solid var(--cs-color-accent); | |
| 46 | + } | |
| 39 | 47 | } |
| 40 | 48 | |
| 41 | 49 | .active-snippet .snippet-activation-switch, |
| 42 | 50 | input[type='checkbox'].switch:checked { |
| 43 | - background-color: theme.$accent; | |
| 51 | + background-color: var(--cs-color-accent); | |
| 44 | 52 | |
| 45 | 53 | // Travel distance: pill width minus the knob, its margins and the borders. |
| 46 | 54 | &::before { |
| 47 | - background-color: white; | |
| 55 | + background-color: #fff; | |
| 48 | 56 | transform: translateX(calc((100% + 4px) * var(--cs-direction-multiplier))); |
| 49 | 57 | } |
| 50 | 58 | } |
| 51 | 59 | |
| @@ -54,9 +62,9 @@ | ||
| 54 | 62 | transform: translateX(calc(50% * var(--cs-direction-multiplier))); |
| 55 | 63 | text-align: center; |
| 56 | 64 | font-weight: bold; |
| 57 | 65 | line-height: 1; |
| 58 | - color: #1d2327; | |
| 66 | + color: var(--cs-color-text); | |
| 59 | 67 | } |
| 60 | 68 | |
| 61 | 69 | a.snippet-condition-count { |
| 62 | 70 | border-radius: 50%; |
| @@ -68,14 +76,14 @@ | ||
| 68 | 76 | align-items: center; |
| 69 | 77 | box-sizing: border-box; |
| 70 | 78 | |
| 71 | 79 | .inactive-snippet & { |
| 72 | - color: #ccc; | |
| 80 | + color: var(--cs-color-border); | |
| 73 | 81 | } |
| 74 | 82 | |
| 75 | 83 | .active-snippet & { |
| 76 | 84 | font-weight: bold; |
| 77 | - color: theme.$accent; | |
| 85 | + color: var(--cs-color-accent); | |
| 78 | 86 | } |
| 79 | 87 | } |
| 80 | 88 | |
| 81 | 89 | .snippet-execution-button { |
| @@ -83,25 +91,26 @@ | ||
| 83 | 91 | margin-block-start: 9px; |
| 84 | 92 | inline-size: 0; |
| 85 | 93 | block-size: 0; |
| 86 | 94 | border-block: 9px solid transparent; |
| 87 | - border-inline-start: 10px solid #ccc; | |
| 95 | + border-inline-start: 10px solid var(--cs-color-border); | |
| 88 | 96 | |
| 89 | 97 | &::before { |
| 90 | 98 | content: ''; |
| 91 | 99 | position: absolute; |
| 92 | - inset: -14px -8px -14px -21px; | |
| 100 | + inset-block: -14px; | |
| 101 | + inset-inline: -21px -8px; | |
| 93 | 102 | border-radius: 50%; |
| 94 | - border: 1.8px solid #ccc; | |
| 103 | + border: 1.8px solid var(--cs-color-border); | |
| 95 | 104 | z-index: 2; |
| 96 | 105 | } |
| 97 | 106 | |
| 98 | 107 | &:hover { |
| 99 | - border-inline-start-color: theme.$accent; | |
| 108 | + border-inline-start-color: var(--cs-color-accent); | |
| 100 | 109 | transition: border-inline-start-color 0.6s; |
| 101 | 110 | |
| 102 | 111 | &::before { |
| 103 | - border-color: theme.$accent; | |
| 112 | + border-color: var(--cs-color-accent); | |
| 104 | 113 | transition: border-color 0.6s; |
| 105 | 114 | } |
| 106 | 115 | |
| 107 | 116 | @media (prefers-reduced-motion: reduce) { |
