Initial Commit
This commit is contained in:
267
frontend/static/styles/common.scss
Normal file
267
frontend/static/styles/common.scss
Normal file
@ -0,0 +1,267 @@
|
||||
body {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
background-color: #302f3b;
|
||||
color: #ffffff;
|
||||
height: 100%;
|
||||
font-family: Ubuntu Mono,monospace;
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
@media (max-width: 460px) {
|
||||
body {
|
||||
font-size: large;
|
||||
}
|
||||
}
|
||||
|
||||
.info_box {
|
||||
margin: auto;
|
||||
max-width: 40em;
|
||||
}
|
||||
|
||||
.nobr {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* Tooltip container */
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
|
||||
}
|
||||
|
||||
/* Tooltip text */
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 120px;
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
border-radius: 6px;
|
||||
|
||||
/* Position the tooltip text */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 125%;
|
||||
left: 50%;
|
||||
margin-left: -100px;
|
||||
|
||||
/* Fade in tooltip */
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
/* Tooltip arrow */
|
||||
.tooltip .tooltiptext::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 100px;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent #555 transparent;
|
||||
}
|
||||
|
||||
/* Show the tooltip text when you mouse over the tooltip container */
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.bulb_box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.bulb_box > * {
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
.bulb_controls {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-right: 0.5em;
|
||||
background: #56636e;
|
||||
border: solid 0.25em #5b3f63;
|
||||
|
||||
}
|
||||
|
||||
.bulb_map {
|
||||
background: url(images/blueprint_bg.png);
|
||||
background-size: auto;
|
||||
background-size: 1em;
|
||||
padding: 2rem;
|
||||
border: solid 0.4rem #5b3f63;
|
||||
}
|
||||
|
||||
.bulb_map::after {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: #0003;
|
||||
}
|
||||
|
||||
.bulb_group {
|
||||
color: black;
|
||||
text-align: center;
|
||||
background: #aaaaaaaa;
|
||||
border: solid 0.25rem white;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 2em;
|
||||
position: absolute;
|
||||
box-shadow: #0006 0.1em 0.1em 0.1em;
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.bulb_group_selected {
|
||||
border-color: gold;
|
||||
scale: 1.05;
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.bulb_power_button {
|
||||
width: 70px;
|
||||
height: 175px;
|
||||
border-radius: 50px;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
background-color: #b5b5b5;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.bulb_power_button_on {
|
||||
}
|
||||
|
||||
.bulb_power_button > div {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
margin-left: 8.75px;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.bulb_power_button > #lever_face {
|
||||
height: 40px;
|
||||
background-color: #cccccc;
|
||||
margin-top: 25px;
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.bulb_power_button_on > #lever_face {
|
||||
margin-top: -65px;
|
||||
}
|
||||
|
||||
.bulb_power_button > #lever_stem {
|
||||
height: 30px;
|
||||
background-color: #eeeeee;
|
||||
margin-top: 0px;
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.bulb_power_button_on > #lever_stem {
|
||||
margin-top: -30px;
|
||||
}
|
||||
|
||||
.bulb_power_button > #off_label {
|
||||
height: 30px;
|
||||
background-color: #cccccc;
|
||||
padding-top: 15px;
|
||||
margin-top: -45px;
|
||||
}
|
||||
|
||||
.bulb_power_button > #on_label {
|
||||
height: 30px;
|
||||
background-color: #cccccc;
|
||||
padding-top: 15px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.bulb_power_button > #switch_socket {
|
||||
width: 47.5px;
|
||||
margin-top: -55px;
|
||||
margin-left: 0;
|
||||
height: 100px;
|
||||
background-color: #4f4f4f;
|
||||
border: solid 5px #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.color_picker {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.color_wheel {
|
||||
background-image: url(/images/hsb.png);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-size: contain;
|
||||
border: solid 5px #a4829c;
|
||||
border-radius: 200px;
|
||||
}
|
||||
|
||||
.color_wheel_marker {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: white;
|
||||
border: solid 2px black;
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
|
||||
transition: margin 0.1s ease-out;
|
||||
}
|
||||
|
||||
.brightness_bar {
|
||||
width: 30px;
|
||||
height: 200px;
|
||||
margin-left: 10px;
|
||||
border: solid 5px #a4829c;
|
||||
}
|
||||
|
||||
.temperature_bar {
|
||||
width: 30px;
|
||||
height: 200px;
|
||||
margin-left: 10px;
|
||||
background: linear-gradient(0deg, #f81, #eff);
|
||||
border: solid 5px #a4829c;
|
||||
}
|
||||
|
||||
.color_bar_marker {
|
||||
width: 30px;
|
||||
height: 8px;
|
||||
border-top: solid 2px black;
|
||||
border-bottom: solid 2px black;
|
||||
position: absolute;
|
||||
background: white;
|
||||
pointer-events: none;
|
||||
|
||||
transition: margin 0.1s ease-out;
|
||||
}
|
||||
59
frontend/static/styles/penguin.scss
Normal file
59
frontend/static/styles/penguin.scss
Normal file
@ -0,0 +1,59 @@
|
||||
@keyframes penguin-spin {
|
||||
0% {
|
||||
transform: perspective(36em) rotateY(-90deg);
|
||||
background-image: url(/images/penguin1.svg);
|
||||
}
|
||||
24.99% {
|
||||
transform: perspective(36em) rotateY(90deg);
|
||||
background-image: url(/images/penguin1.svg);
|
||||
}
|
||||
25% {
|
||||
transform: perspective(36em) rotateY(90deg);
|
||||
background-image: url(/images/penguin2.svg);
|
||||
}
|
||||
49.99% {
|
||||
transform: perspective(36em) rotateY(270deg);
|
||||
background-image: url(/images/penguin2.svg);
|
||||
}
|
||||
50% {
|
||||
transform: perspective(36em) rotateY(270deg);
|
||||
background-image: url(/images/penguin3.svg);
|
||||
}
|
||||
74.99% {
|
||||
transform: perspective(36em) rotateY(450deg);
|
||||
background-image: url(/images/penguin3.svg);
|
||||
}
|
||||
75% {
|
||||
transform: perspective(36em) rotateY(450deg);
|
||||
background-image: url(/images/penguin2.svg);
|
||||
}
|
||||
99.99% {
|
||||
transform: perspective(36em) rotateY(630deg);
|
||||
background-image: url(/images/penguin2.svg);
|
||||
}
|
||||
100% {
|
||||
transform: perspective(36em) rotateY(630deg);
|
||||
background-image: url(/images/penguin1.svg);
|
||||
}
|
||||
}
|
||||
|
||||
.penguin {
|
||||
width: 12em;
|
||||
height: 12em;
|
||||
margin: auto;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
background-image: url(/images/penguin1.svg);
|
||||
background-size: contain;
|
||||
animation-name: penguin-spin;
|
||||
animation-duration: 4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: cubic-bezier(0.1, 0.5, 0.9, 0.5);
|
||||
}
|
||||
|
||||
.penguin_small {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
margin-top: 0em;
|
||||
margin-bottom: 0em;
|
||||
}
|
||||
Reference in New Issue
Block a user