smon/static/less/main.less
2024-05-28 12:56:35 +02:00

148 lines
2.0 KiB
Plaintext

@import "theme.less";
#layout {
display: grid;
grid-template-areas: "menu content";
grid-template-columns: 96px 1fr;
height: 100vh;
}
#menu {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(32, min-content);
align-items: start;
grid-area: menu;
background: @bg2;
.entry {
&.selected {
background: @bg3;
a { color: @text2 !important; }
}
&>a {
display: grid;
justify-items: center;
grid-template-rows:
38px
16px
;
padding: 16px;
color: #777;
text-decoration: none;
img {
display: block;
width: 32px;
}
.label {
font-size: 0.9em;
font-weight: bold;
}
}
}
}
#page {
grid-area: content;
padding: 32px;
.page-label {
display: grid;
grid-template-columns: min-content 1fr;
grid-gap: 12px;
align-items: center;
margin-bottom: 32px;
div {
font-weight: @bold;
font-size: 1.5em;
color: @color1;
}
img {
display: block;
}
}
}
#areas {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 16px;
.area {
background: @bg3;
border-radius: 4px;
&>.name {
background: @color1;
color: #fff;
font-weight: @bold;
padding: 4px 16px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.section {
margin: 8px 16px;
margin-top: 12px;
margin-bottom: 20px;
&.configuration {
margin-top: 8px;
margin-bottom: 8px;
}
&:last-child {
margin-bottom: 12px;
}
.create {
display: grid;
grid-template-columns: min-content min-content;
grid-gap: 8px;
white-space: nowrap;
.new {
font-weight: @bold;
}
}
&>.name {
font-weight: @bold;
}
.triggers {
.trigger {
display: grid;
grid-template-columns: min-content 1fr;
grid-gap: 8px;
align-items: center;
margin-top: 8px;
img {
height: 16px;
}
.label {
color: inherit;
}
}
}
}
}
}
dialog {
background: @bg2;
border: 1px solid lighten(@bg2, 25%);
color: @text1;
box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.25);
}