1
0
mirror of https://github.com/netbox-community/netbox.git synced 2024-05-10 07:54:54 +00:00

implement dark mode

This commit is contained in:
checktheroads
2021-04-25 20:11:46 -07:00
parent d7d004b48e
commit 2b159fc40f
55 changed files with 1850 additions and 969 deletions

View File

@@ -1,5 +1,6 @@
/* Stylesheet for rendering SVG rack elevations */
@import './theme.scss';
@import './theme-light.scss';
* {
font-family: $font-family-sans-serif;
font-size: $font-size-sm;
@@ -11,59 +12,92 @@ text {
text-anchor: middle;
dominant-baseline: middle;
}
.rack {
background-color: $gray-100;
fill: none;
stroke: black;
stroke-width: 2px;
}
.slot {
fill: $gray-200;
stroke: $gray-500;
}
.slot:hover {
fill: $white;
}
.slot + .add-device {
fill: none;
}
.slot:hover + .add-device {
fill: $primary;
}
.add-device:hover {
fill: $primary;
}
.add-device:hover + .slot {
fill: $white;
}
.reserved {
fill: url(#reserved);
}
.reserved:hover {
fill: url(#reserved);
}
.occupied {
fill: url(#occupied);
}
.occupied:hover {
fill: url(#occupied);
}
.blocked {
fill: url(#blocked);
}
.blocked:hover {
fill: url(#blocked);
}
.blocked:hover + .add-device {
fill: none;
}
.unit {
margin: 0;
padding: 5px 0px;
fill: $gray-400;
font-size: $font-size-sm;
font-family: $font-family-sans-serif;
}
.hidden {
visibility: hidden;
svg {
.rack {
background-color: $gray-100;
fill: none;
stroke: $body-color;
stroke-width: 2px;
}
.slot {
fill: $gray-100;
stroke: $gray-500;
&:hover {
fill: $gray-50;
}
& + .add-device {
fill: none;
}
&:hover + .add-device {
fill: $blue;
}
& .add-device {
&:hover {
fill: $blue;
}
&:hover + .slot {
fill: $white;
}
}
&.reserved[class] {
fill: url(#reserved);
}
&.reserved:hover[class] {
fill: url(#reserved);
}
&.occupied[class] {
fill: url(#occupied);
}
&.occupied:hover[class] {
fill: url(#occupied);
}
&.blocked[class] {
fill: url(#blocked);
}
&.blocked:hover[class] {
fill: url(#blocked);
}
&.blocked:hover + .add-device {
fill: none;
}
}
.unit {
margin: 0;
padding: 5px 0px;
fill: $gray-400;
font-size: $font-size-sm;
font-family: $font-family-sans-serif;
}
.hidden {
visibility: hidden;
}
&[data-netbox-color-mode='dark'] {
.rack {
background-color: $gray-800;
}
.slot {
fill: $gray-700;
stroke: $gray-400;
&:hover {
fill: $gray-600;
}
& + .add-device {
fill: none;
}
&:hover + .add-device {
fill: $blue-300;
}
}
.add-device {
&:hover {
fill: $blue-300;
}
&:hover + .slot {
fill: $black;
}
}
}
}