Add alternate bulb list view
This commit is contained in:
5
frontend/static/images/circle-arrow.svg
Normal file
5
frontend/static/images/circle-arrow.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
|
||||
<ellipse style="vector-effect: non-scaling-stroke; stroke-width: 0px; stroke: rgb(245, 222, 179); fill: rgb(245, 222, 179);" cx="250" cy="250" rx="250" ry="250"/>
|
||||
<path d="M 59.4 209.201 H 308.253 L 274.16 131.459 L 447.051 254.953 L 274.16 378.446 L 308.253 300.704 H 59.4 V 209.201 Z" style="transform-origin: 447.051px 254.952px; stroke-width: 16px; stroke: rgb(193, 168, 123);" bx:shape="arrow 59.4 131.459 387.651 246.987 91.503 172.891 34.093 1@d4e47a6f"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 607 B |
@ -102,6 +102,42 @@ body {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* lol i'm so funny */
|
||||
.selector_selector {
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
//background: #534f44;
|
||||
}
|
||||
.selector_selector > button {
|
||||
width: 10rem;
|
||||
border: solid 0.1rem wheat;
|
||||
background-color: #3a3743;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
border-left: solid white 0.1rem;
|
||||
border-right: solid white 0.1rem;
|
||||
}
|
||||
.selector_selector > button:hover {
|
||||
background-color: #4c4858;
|
||||
}
|
||||
.selector_selector > button:active {
|
||||
background-color: #312e38;
|
||||
}
|
||||
.selector_selector > button:first-child {
|
||||
border-top-left-radius: 0.5rem;
|
||||
}
|
||||
.selector_selector > button:last-child {
|
||||
border-top-right-radius: 0.5rem;
|
||||
}
|
||||
.selector_selector_arrow {
|
||||
position: absolute;
|
||||
width: 2.15rem;
|
||||
height: 2.15rem;
|
||||
background: url("/images/circle-arrow.svg");
|
||||
transition: transform 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.bulb_controls {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -150,6 +186,47 @@ body {
|
||||
}
|
||||
@keyframes to_width_90 { to { width: 90%; } }
|
||||
|
||||
.bulb_list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bulb_list_group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bulb_list_group > h1 {
|
||||
margin-top: 0.6em;
|
||||
margin-bottom: 0;
|
||||
font-size: 1.3em;
|
||||
border-bottom: solid 1px;
|
||||
}
|
||||
|
||||
.bulb_list_bulb {
|
||||
font-family: Ubuntu Mono;
|
||||
display: flex;
|
||||
font-size: 0.8em;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
margin-top: 0.3em;
|
||||
background-color: #3a3743;
|
||||
border: solid 0.2em #45374f;
|
||||
border-radius: 0.5em;
|
||||
color: wheat;
|
||||
}
|
||||
.bulb_list_bulb:hover {
|
||||
background-color: #4c4858;
|
||||
}
|
||||
.bulb_list_bulb:active {
|
||||
background-color: #312e38;
|
||||
}
|
||||
.bulb_list_bulb > span {
|
||||
margin: auto;
|
||||
flex-grow: 1;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.bulb_map {
|
||||
background: url(images/blueprint_bg.png);
|
||||
background-size: auto;
|
||||
@ -337,3 +414,65 @@ body {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.bulb_list_checkbox {}
|
||||
.bulb_list_checkbox input[type="checkbox"] {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bulb_list_checkbox *,
|
||||
.bulb_list_checkbox ::after,
|
||||
.bulb_list_checkbox ::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bulb_list_checkbox .container {
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 25px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Create a custom checkbox */
|
||||
.bulb_list_checkbox .checkmark {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 1.3em;
|
||||
width: 1.3em;
|
||||
background: black;
|
||||
border-radius: 50px;
|
||||
transition: all 0.7s;
|
||||
--spread: 10px;
|
||||
}
|
||||
|
||||
/* When the checkbox is checked, add a blue background */
|
||||
.bulb_list_checkbox .container input:checked ~ .checkmark {
|
||||
background: black;
|
||||
/* spawn a bunch of colored balls and blur them together */
|
||||
box-shadow: -5px -5px var(--spread) 0px #5B51D8, 0 -5px var(--spread) 0px #833AB4, 5px -5px var(--spread) 0px #E1306C, 5px 0 var(--spread) 0px #FD1D1D, 5px 5px var(--spread) 0px #F77737, 0 5px var(--spread) 0px #FCAF45, -5px 5px var(--spread) 0px #FFDC80;
|
||||
}
|
||||
|
||||
/* Create the checkmark/indicator (hidden when not checked) */
|
||||
.bulb_list_checkbox .checkmark::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show the checkmark when checked */
|
||||
.bulb_list_checkbox .container input:checked ~ .checkmark::after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Style the checkmark/indicator */
|
||||
.bulb_list_checkbox .container .checkmark::after {
|
||||
left: 0.5em;
|
||||
top: 0.34em;
|
||||
width: 0.25em;
|
||||
height: 0.5em;
|
||||
border: solid wheat;
|
||||
border-width: 0 0.15em 0.15em 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user