smon/static/less/main.less

148 lines
2.0 KiB
Plaintext
Raw Normal View History

2024-04-29 08:36:13 +02:00
@import "theme.less";
#layout {
display: grid;
grid-template-areas: "menu content";
2024-05-22 07:32:53 +02:00
grid-template-columns: 96px 1fr;
2024-04-29 08:36:13 +02:00
height: 100vh;
}
#menu {
2024-05-22 07:32:53 +02:00
display: grid;
2024-05-22 07:49:50 +02:00
grid-template-columns: 1fr;
grid-template-rows: repeat(32, min-content);
2024-05-22 07:32:53 +02:00
align-items: start;
2024-04-29 08:36:13 +02:00
grid-area: menu;
background: @bg2;
2024-05-22 07:32:53 +02:00
2024-05-22 07:49:50 +02:00
.entry {
2024-05-22 07:32:53 +02:00
&.selected {
2024-05-22 07:49:50 +02:00
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;
}
2024-05-22 07:32:53 +02:00
}
}
2024-04-29 08:36:13 +02:00
}
#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;
2024-04-29 08:36:13 +02:00
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;
2024-05-28 12:56:35 +02:00
font-weight: @bold;
2024-04-29 08:36:13 +02:00
padding: 4px 16px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.section {
margin: 8px 16px;
2024-05-23 10:16:21 +02:00
margin-top: 12px;
margin-bottom: 20px;
2024-05-28 07:37:22 +02:00
&.configuration {
margin-top: 8px;
margin-bottom: 8px;
}
2024-05-23 10:16:21 +02:00
&:last-child {
margin-bottom: 12px;
}
2024-04-29 08:36:13 +02:00
2024-05-01 10:02:33 +02:00
.create {
display: grid;
grid-template-columns: min-content min-content;
grid-gap: 8px;
white-space: nowrap;
.new {
font-weight: @bold;
}
}
2024-04-29 08:36:13 +02:00
&>.name {
2024-05-01 10:02:33 +02:00
font-weight: @bold;
2024-04-29 08:36:13 +02:00
}
.triggers {
.trigger {
display: grid;
grid-template-columns: min-content 1fr;
grid-gap: 8px;
align-items: center;
margin-top: 8px;
img {
height: 16px;
}
.label {
2024-05-01 10:02:33 +02:00
color: inherit;
2024-04-29 08:36:13 +02:00
}
}
}
}
}
}
2024-05-01 10:02:33 +02:00
dialog {
background: @bg2;
border: 1px solid lighten(@bg2, 25%);
color: @text1;
box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.25);
}