tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add colors for light prefered color scheme

Browse Source 
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-05-10 21:32:41 +00:00
parent e509c22e3a
commit b8ec177877
3 changed files with 34 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/nav.css
View File

@ -3,7 +3,19 @@
--nav-text-color: white; --nav-text-color: white;
--nav-header-bg-color: #0f0; --nav-header-bg-color: #0f0;
--nav-header-text-color: black; --nav-header-text-color: black;
--nav-link-hover-color: var(--main-bg-color, #404040); --nav-link-active-text-color: white;
--nav-link-active-bg-color: var(--main-bg-color, #404040);
}
@media screen and (prefers-color-scheme: light) {
:root {
--nav-bg-color: black;
--nav-text-color: white;
--nav-header-bg-color: #0f0;
--nav-header-text-color: black;
--nav-link-active-text-color: black;
--nav-link-active-bg-color: var(--main-bg-color, white);
}
} }
nav { nav {
@ -32,10 +44,12 @@ nav a, nav h1, nav label {
@media screen and (min-width: 600px){ @media screen and (min-width: 600px){
#hamitems a:hover, #hamitems a[aria-current="true"], #hamitems:hover a[aria-current="true"]:hover { #hamitems a:hover, #hamitems a[aria-current="true"], #hamitems:hover a[aria-current="true"]:hover {
background-color: var(--nav-link-hover-color); color: var(--nav-link-active-text-color);
background-color: var(--nav-link-active-bg-color);
} }
#hamitems:hover a[aria-current="true"] { #hamitems:hover a[aria-current="true"] {
color: var(--nav-text-color);
background-color: var(--nav-bg-color); background-color: var(--nav-bg-color);
} }

17
css/style.css
View File

@ -5,11 +5,24 @@
--main-bg-color: #404040; --main-bg-color: #404040;
--main-text-color: white; --main-text-color: white;
--main-card-bg-color: #202020; --main-card-bg-color: #202020;
--main-card-shadow-color: black; --main-card-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.84), 0 2px 10px 0 rgba(0,0,0,0.88);
/*--main-card-shadow-color: black;*/
--main-table-header-bg-color: black; --main-table-header-bg-color: black;
--main-input-bg-color: #404040; --main-input-bg-color: #404040;
} }
@media screen and (prefers-color-scheme: light) {
:root {
--main-bg-color: white;
--main-text-color: black;
--main-card-bg-color: white;
--main-card-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
/*--main-card-shadow-color: rgba(0,0,0,0.25);*/
--main-table-header-bg-color: #808080;
--main-input-bg-color: white;
}
}
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
@ -33,7 +46,7 @@ main, dialog {
.w3-card { .w3-card {
background-color: var(--main-card-bg-color); background-color: var(--main-card-bg-color);
box-shadow: 0 2px 5px 0 var(--main-card-shadow-color); box-shadow: var(--main-card-box-shadow);
} }
th { th {

6
scripts/utils.js
View File

@ -103,9 +103,9 @@ export async function requestTicket (username, password, realm) {
export function setTicket (ticket, csrf, username) { export function setTicket (ticket, csrf, username) {
let d = new Date(); let d = new Date();
d.setTime(d.getTime() + (2*60*60*1000)); d.setTime(d.getTime() + (2*60*60*1000));
document.cookie = `PVEAuthCookie=${ticket}; path=/; expires=${d.toUTCString()}; domain=.tronnet.net`; document.cookie = `PVEAuthCookie=${ticket}; path=/; expires=${d.toUTCString()}; domain=.tronnet.net; Secure;`;
document.cookie = `CSRFPreventionToken=${csrf}; path=/; expires=${d.toUTCString()}; domain=.tronnet.net;` document.cookie = `CSRFPreventionToken=${csrf}; path=/; expires=${d.toUTCString()}; domain=.tronnet.net; Secure;`
document.cookie = `username=${username}@ldap; path=/; expires=${d.toUTCString()}; domain=.tronnet.net;` document.cookie = `username=${username}@ldap; path=/; expires=${d.toUTCString()}; domain=.tronnet.net; Secure;`
} }
export async function requestPVE (path, method, body = null) { export async function requestPVE (path, method, body = null) {