hulthe/hemma
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity

Tweak frontend layout and style

Browse Source
This commit is contained in:
Joakim Hulthe
2023-11-06 21:27:27 +01:00
parent d5a221e1a3
commit 924a14cdcb
2 changed files with 44 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/static/styles/common.scss
View File

@ -94,17 +94,12 @@ body {
}
.bulb_box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
width: fit-content;
margin: auto;
}
.bulb_box > * {
margin-bottom: 1em;
margin-right: 1em;
margin-bottom: 1.5rem;
}
.bulb_controls {
@ -112,21 +107,20 @@ body {
flex-direction: row;
align-items: center;
padding-right: 0.5em;
background: #56636e;
border: solid 0.25em #5b3f63;
background: #00000000;
}
.bulb_controls_disable {
.cross_out {
position: relative;
overflow: hidden;
opacity: 0.5;
}
.bulb_controls_disable:before {
.cross_out:before {
position: absolute;
content: '';
display: block;
background: #000000;
opacity: 0.5;
background: #00000000;
left: 0;
right: 0;
top: 0;
@ -135,7 +129,7 @@ body {
z-index: 90;
}
.bulb_controls_disable:after {
.cross_out:after {
position: absolute;
content: '';
background: #56636e;
@ -151,23 +145,24 @@ body {
bottom: 0;
margin: auto;
z-index: 91;
animation: to_full_width .2s ease-out 0s 1 forwards;
box-shadow: black 0.5rem 0.6rem 1rem 0.3rem;
animation: to_width_90 .2s ease-out 0s 1 forwards;
}
@keyframes to_full_width { to { width: 100%; } }
@keyframes to_width_90 { to { width: 90%; } }
.bulb_map {
background: url(images/blueprint_bg.png);
background-size: auto;
background-size: 1em;
padding: 2rem;
border: solid 0.4rem #5b3f63;
border: solid 0.1rem;
border-radius: 0.2rem;
}
.bulb_map::after {
position: absolute;
width: 100%;
height: 100%;
content: #0003;
}
.bulb_group {
@ -179,6 +174,7 @@ body {
font-size: 2em;
position: absolute;
box-shadow: #0006 0.1em 0.1em 0.1em;
user-select: none;
transition: 0.3s ease-in-out;
}
@ -326,7 +322,18 @@ body {
//margin-bottom: .7em;
margin-left: .5em;
}
.calendar_box {
with: 10em;
display: flex;
justify-content: center;
}
.calendar_box > h2 {
writing-mode: sideways-lr;
margin-top: auto;
margin-bottom: auto;
}
.calendar_box > * {
flex-shrink: 1;
}