990 views
1/* radio settings π */ 2 3.theme-popup { 4 /* total */ 5 --total_text_color: #e0e0e0; 6 --total_font_family: Menlo, Roboto Mono, monospace; 7 /* button */ 8 --btn_bg: #3A3A3A; 9 --btn_padding: 0.5em; 10 --btn_height: 2em; 11 --btn_border_radius: 0.3125em; 12 --btn_outline_width: 0.0625em; 13 --btn_outline_color: #A0A0A0; 14 --btn_outline_offset: 0.0625em; 15 --btn_gap: 0.3125em; 16 /* list */ 17 --list_padding: 0.5em; 18 --list_bg: var(--btn_bg); 19 --list_border_radius: var(--btn_border_radius); 20 --list_gap: 0.1875em; 21 --list_btn_hover_bg: #5A5656; 22 --list_btn_active: #b9b9b970; 23 --list_btn_border_radius: 0.25em; 24 --list_btn_padding: 0.35em 1em; 25 --list_btn_gap: 0.4375em; 26 --list_btn_outline_width: 0.0625em; 27 --list_btn_outline_color: rgb(212, 210, 210); 28 --list_offset: 0.35em; 29 --list_btn_font_size: 14px; 30 --list_position_left: 0; 31 --list_position_right: unset; 32 /* π if you want to change sides just switch one property */ 33 /* from properties to "unset" and the other to 0 */ 34} 35 36.theme-popup__button .theme-popup__icons svg, 37#light, 38#dark, 39#default, 40#checkbox, 41.theme-popup__list-container { 42 display: none; 43} 44 45.theme-popup { 46 color: var(--total_text_color); 47 font-family: var(--total_font_family); 48 position: relative; 49 user-select: none; 50} 51 52.theme-popup__list-container { 53 position: absolute; 54 left: var(--list_position_left); 55 right: var(--list_position_right); 56 top: calc(var(--btn_height) + var(--list_offset)); 57} 58 59.theme-popup__icons { 60 display: flex; 61 align-items: center; 62 justify-content: center; 63 width: 16px; 64 height: 16px; 65} 66 67.theme-popup__button { 68 line-height: var(--btn_height); 69 background-color: var(--btn_bg); 70 padding: 0 var(--btn_padding); 71 display: inline-flex; 72 align-items: center; 73 column-gap: var(--btn_gap); 74 border-radius: var(--btn_border_radius); 75 border: none; 76 color: inherit; 77 font-family: inherit; 78 outline: none; 79 font-weight: bold; 80} 81 82.theme-popup__list { 83 margin: 0; 84 list-style-type: none; 85 padding: var(--list_padding); 86 border-radius: var(--list_border_radius); 87 background-color: var(--list_bg); 88 display: flex; 89 flex-direction: column; 90 row-gap: var(--list_gap); 91} 92 93.theme-popup__list label { 94 display: flex; 95 align-items: center; 96 justify-content: start; 97 column-gap: var(--list_btn_gap); 98 padding: var(--list_btn_padding); 99 border-radius: var(--list_btn_border_radius); 100 white-space: nowrap; 101} 102 103.theme-popup__list label span { 104 font-size: var(--list_btn_font_size); 105} 106 107/* actions */ 108 109#checkbox:checked~.theme-popup__button { 110 outline: var(--btn_outline_width) solid var(--btn_outline_color); 111 outline-offset: var(--btn_outline_offset); 112} 113 114#checkbox:checked~.theme-popup__list-container { 115 display: block; 116} 117 118.theme-popup__list label:hover, 119.theme-popup__button:hover, 120#checkbox:checked~.theme-popup__button { 121 background-color: var(--list_btn_hover_bg); 122} 123 124#default:checked~.theme-popup__list-container label[for="default"], 125#light:checked~.theme-popup__list-container label[for="light"], 126#dark:checked~.theme-popup__list-container label[for="dark"] { 127 background-color: var(--list_btn_active); 128 outline: var(--list_btn_outline_width) solid var(--list_btn_outline_color); 129} 130 131#default:checked~label svg.default, 132#light:checked~label svg.sun, 133#dark:checked~label svg.moon { 134 display: block; 135}
Galahhad
Galahad
MIT License