retrozinndev
203 lines
4.4 KiB
SCSS
203 lines
4.4 KiB
SCSS
box.cc {
|
|
margin: 12px;
|
|
margin-right: 0;
|
|
background: rgba($background, .85);
|
|
border-top-left-radius: 24px;
|
|
border-bottom-left-radius: 24px;
|
|
padding: 18px;
|
|
box-shadow: 0 3px 4px 1px $background;
|
|
}
|
|
|
|
.top-bar {
|
|
margin-bottom: 15px;
|
|
|
|
& label {
|
|
&.hostname {
|
|
font-size: 13.3px;
|
|
font-weight: 700;
|
|
border-bottom: .5px solid rgba(darken($color: $foreground, $amount: 15), .5);
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
&.uptime {
|
|
font-size: 11.7px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.button-row {
|
|
margin: 7px 0;
|
|
}
|
|
|
|
.wallpaper {
|
|
padding-left: 9px;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
.screenshot {
|
|
padding-left: 9px;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
.color-picker {
|
|
padding-right: 11px;
|
|
}
|
|
|
|
.powermenu {
|
|
padding-right: 11px;
|
|
}
|
|
}
|
|
|
|
.cc-notifications {
|
|
&.scroll {
|
|
.notifications {
|
|
box.notification {
|
|
background: darken($color: $color1, $amount: 10);
|
|
border-radius: 16px;
|
|
margin: 4px 0;
|
|
|
|
& > .top {
|
|
border-top-left-radius: inherit;
|
|
border-top-right-radius: inherit;
|
|
background: darken($color: $color1, $amount: 7);
|
|
border-bottom: .5px solid rgba(darken($color: $foreground, $amount: 15), .3);
|
|
padding: 5px 6px;
|
|
|
|
& > .app-info {
|
|
& .app-icon {
|
|
margin-right: 4px;
|
|
}
|
|
font-weight: 600;
|
|
}
|
|
|
|
.close {
|
|
padding: 4px 8px;
|
|
border-radius: 9px;
|
|
}
|
|
}
|
|
|
|
& .content {
|
|
padding: 8px;
|
|
padding-top: 0px;
|
|
|
|
& > .image {
|
|
border-radius: 16px;
|
|
margin-right: 6px;
|
|
margin-top: 6px;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center 0;
|
|
}
|
|
|
|
& .text {
|
|
& label {
|
|
font-family: "Cantarell", "Noto Sans", "Noto Sans CJK JP", "Noto Sans CJK KR";
|
|
}
|
|
|
|
& label.summary {
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
& label.body {
|
|
font-size: 13.1px;
|
|
margin-bottom: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& .bottom {
|
|
margin-top: 4px;
|
|
|
|
&.button-row {
|
|
& button.do-not-disturb {
|
|
padding-right: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tiles-grid {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.tiles {
|
|
margin-bottom: 2px;
|
|
|
|
& > .tile-checkbox:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
& > .tile-checkbox:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
& .tile-checkbox {
|
|
margin: 2px;
|
|
|
|
&:hover {
|
|
& > box {
|
|
background: $color3;
|
|
}
|
|
&:checked > box {
|
|
background: $color2;
|
|
}
|
|
}
|
|
|
|
&:checked {
|
|
& > box {
|
|
background: $color2;
|
|
}
|
|
}
|
|
|
|
& > *:not(box) {
|
|
color: transparent;
|
|
}
|
|
|
|
& > .tile {
|
|
background: darken($color: $foreground, $amount: 65);
|
|
border-radius: 16px;
|
|
padding: 16px;
|
|
margin-left: -16px; // This covers the checkbox space, hiding the check thing
|
|
|
|
.icon {
|
|
font-size: 15px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.label {
|
|
font-size: 12.6px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .network {
|
|
.icon {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
& .dnd {
|
|
.icon {
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
|
|
& .screen-rec {
|
|
.icon {
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
|
|
& .night-light {
|
|
.icon {
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
}
|