mirror of
https://github.com/Part-DB/Part-DB-server.git
synced 2025-07-15 04:44:36 +02:00
Added an toggle to activate a simple dark mode.
The dark mode is only available on browsers that support mix-blend-mode. There are some quirks with hover images...
This commit is contained in:
parent
6882f91ef2
commit
c64e4fe3d6
5 changed files with 52 additions and 6 deletions
|
@ -165,7 +165,7 @@ showing the sidebar (on devices with md or higher)
|
|||
.toast-container {
|
||||
position: fixed;
|
||||
top: auto;
|
||||
z-index: 1;
|
||||
z-index: 3000; /* Over darkmode layer for correct colors! */
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
|
@ -347,7 +347,6 @@ btn-xs
|
|||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
}
|
||||
|
||||
.hoverpic:hover {
|
||||
|
@ -356,6 +355,10 @@ btn-xs
|
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.darkmode--activated .hoverpic:hover {
|
||||
background: black;
|
||||
}
|
||||
|
||||
|
||||
.thumbnail-sm {
|
||||
max-height: 100px;
|
||||
|
@ -790,3 +793,11 @@ table.dataTable {
|
|||
font-size: 17.5px;
|
||||
border-left: 5px solid #eee;
|
||||
}
|
||||
|
||||
.darkmode-layer {
|
||||
z-index: 2020;
|
||||
}
|
||||
|
||||
.darkmode--activated img {
|
||||
mix-blend-mode: difference;
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue