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:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user