From 7603ced54e9e73fb969b705da50716699fbee608 Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Sun, 12 Jan 2025 00:09:25 +0100 Subject: [PATCH] Create CSS variables for common noVNC-colors --- app/styles/base.css | 26 +++++++++++++------------- app/styles/constants.css | 21 +++++++++++++++++++++ app/styles/input.css | 14 +++++++------- vnc.html | 1 + 4 files changed, 42 insertions(+), 20 deletions(-) create mode 100644 app/styles/constants.css diff --git a/app/styles/base.css b/app/styles/base.css index f2f49869..ecef3771 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -53,7 +53,7 @@ html { } .noVNC_disabled { - color: rgb(128, 128, 128); + color: var(--novnc-grey); } /* ---------------------------------------- @@ -241,7 +241,7 @@ html { transition: 0.5s ease-in-out; - background-color: rgb(110, 132, 163); + background-color: var(--novnc-blue); border-radius: 0 10px 10px 0; user-select: none; @@ -286,7 +286,7 @@ html { z-index: -1; cursor: pointer; border-radius: 5px; - background-color: rgb(83, 99, 122); + background-color: var(--novnc-darkblue); background-image: url("../images/handle_bg.svg"); background-repeat: no-repeat; background-position: right; @@ -371,7 +371,7 @@ html { opacity: 0; transition: 0.2s ease-in-out; background: transparent; - box-shadow: 0 0 10px black, inset 0 0 10px 10px rgba(110, 132, 163, 0.8); + box-shadow: 0 0 10px black, inset 0 0 10px 10px var(--novnc-darkblue); border-radius: 10px; transition-delay: 0s; } @@ -478,7 +478,7 @@ html { .noVNC_panel hr { border: none; - border-top: 1px solid rgb(192, 192, 192); + border-top: 1px solid var(--novnc-lightgrey); } .noVNC_panel label { @@ -499,7 +499,7 @@ html { } .noVNC_panel .noVNC_heading { - background-color: rgb(110, 132, 163); + background-color: var(--novnc-blue); border-radius: 5px; padding: 5px; /* Compensate for padding in image */ @@ -577,7 +577,7 @@ html { } #noVNC_modifiers { - background-color: rgb(92, 92, 92); + background-color: var(--novnc-darkgrey); border: none; padding: 10px; } @@ -745,7 +745,7 @@ html { #noVNC_connect_dlg div { padding: 12px; - background-color: rgb(110, 132, 163); + background-color: var(--novnc-blue); border-radius: 12px; text-align: center; font-size: 20px; @@ -758,17 +758,17 @@ html { cursor: pointer; - border-color: rgb(83, 99, 122); + border-color: var(--novnc-darkblue); border-radius: 5px; - background: linear-gradient(to top, rgb(110, 132, 163), rgb(99, 119, 147)); + background: linear-gradient(to top, var(--novnc-blue), rgb(99, 119, 147)); color: white; /* This avoids it jumping around when :active */ vertical-align: middle; } #noVNC_connect_button:hover { - background: linear-gradient(to top, rgb(110, 132, 163), rgb(105, 125, 155)); + background: linear-gradient(to top, var(--novnc-blue), rgb(105, 125, 155)); } #noVNC_connect_button img { @@ -892,13 +892,13 @@ html { } .noVNC_logo { - color:yellow; + color: var(--novnc-yellow); font-family: 'Orbitron', 'OrbitronTTF', sans-serif; line-height: 0.9; text-shadow: 0.1em 0.1em 0 black; } .noVNC_logo span{ - color:green; + color: var(--novnc-green); } #noVNC_bell { diff --git a/app/styles/constants.css b/app/styles/constants.css new file mode 100644 index 00000000..fb1f5509 --- /dev/null +++ b/app/styles/constants.css @@ -0,0 +1,21 @@ +/* + * noVNC general CSS constant variables + * Copyright (C) 2025 The noVNC authors + * noVNC is licensed under the MPL 2.0 (see LICENSE.txt) + * This file is licensed under the 2-Clause BSD license (see LICENSE.txt). + */ + +/* ---------- COLORS ----------- */ + +:root { + --novnc-grey: rgb(128, 128, 128); + --novnc-lightgrey: rgb(192, 192, 192); + --novnc-darkgrey: rgb(92, 92, 92); + + --novnc-blue: rgb(110, 132, 163); + --novnc-lightblue: rgb(74, 144, 217); + --novnc-darkblue: rgb(83, 99, 122); + + --novnc-green: rgb(0, 128, 0); + --novnc-yellow: rgb(255, 255, 0); +} diff --git a/app/styles/input.css b/app/styles/input.css index fc36e71e..a2b289bf 100644 --- a/app/styles/input.css +++ b/app/styles/input.css @@ -21,7 +21,7 @@ input, input::file-selector-button, button, select, textarea { background: none; padding: 0.5em var(--input-xpadding); - border: 1px solid rgb(192, 192, 192); + border: 1px solid var(--novnc-lightgrey); border-radius: 5px; color: black; --bg-gradient: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240)); @@ -101,8 +101,8 @@ input[type=checkbox] { transition: 0.2s background-color linear; } input[type=checkbox]:checked { - background-color: rgb(110, 132, 163); - border-color: rgb(110, 132, 163); + background-color: var(--novnc-blue); + border-color: var(--novnc-blue); } input[type=checkbox]:checked::after { content: ""; @@ -127,7 +127,7 @@ input[type=radio] { transition: 0.2s border linear; } input[type=radio]:checked { - border: 6px solid rgb(110, 132, 163); + border: 6px solid var(--novnc-blue); } /* @@ -143,12 +143,12 @@ input[type=range] { /* -webkit-slider.. & -moz-range.. cant be in selector lists: https://bugs.chromium.org/p/chromium/issues/detail?id=1154623 */ input[type=range]::-webkit-slider-runnable-track { - background-color: rgb(110, 132, 163); + background-color: var(--novnc-blue); height: 6px; border-radius: 3px; } input[type=range]::-moz-range-track { - background-color: rgb(110, 132, 163); + background-color: var(--novnc-blue); height: 6px; border-radius: 3px; } @@ -239,7 +239,7 @@ input:focus-visible::file-selector-button, button:focus-visible, select:focus-visible, textarea:focus-visible { - outline: 2px solid rgb(74, 144, 217); + outline: 2px solid var(--novnc-lightblue); outline-offset: 1px; } input[type=file]:focus-visible { diff --git a/vnc.html b/vnc.html index c2cc4e55..ed82b603 100644 --- a/vnc.html +++ b/vnc.html @@ -37,6 +37,7 @@ +