mirror of
https://github.com/octoleo/syncthing.git
synced 2024-12-23 03:18:59 +00:00
acc5d2675b
### Purpose Fixes #9776 by tweaking the text/background colours of disabled checkbox panels when dark mode is enabled. It was [noted on that issue](https://github.com/syncthing/syncthing/issues/9776#issuecomment-2424828520) that there's a bigger issue around the correctness of using the `disabled` attribute on a `<div>` in the first place, but this PR does not attempt to change that. ### Testing I've hooked up the GUI files against a release build as suggested below. ### Screenshots Using the dark theme, or the default theme with a system dark scheme: ![image](https://github.com/user-attachments/assets/3c6bfa77-cc7a-4f3e-a5c2-83daf54dcc34) Using the black theme: ![image](https://github.com/user-attachments/assets/768db657-aa52-4db0-8455-5194a00fc143) These borrow the colours from dark theme text inputs and black theme tabs for a consistent look (initially I tried the text colour of disabled text inputs, but that produced some poor contrast).
306 lines
5.6 KiB
CSS
306 lines
5.6 KiB
CSS
/**
|
|
|
|
Dark theme
|
|
|
|
Author: alessandro.g89
|
|
Source: https://userstyles.org/styles/122502/syncthing-dark
|
|
|
|
Modified by: fti7
|
|
|
|
**/
|
|
|
|
body {
|
|
color: #aaa !important;
|
|
background-color: #272727 !important;
|
|
}
|
|
|
|
a:hover,a:focus,a.focus{
|
|
outline: none !important;
|
|
}
|
|
|
|
|
|
/* navbar */
|
|
.navbar {
|
|
background-color: #333 !important;
|
|
border-color: #424242 !important;
|
|
border-top-width: 1px !important;
|
|
border-bottom-width: 1px !important;
|
|
|
|
}
|
|
|
|
.nav-tabs > li.active > a,
|
|
.nav-tabs > li.active > a:hover,
|
|
.nav-tabs > li.active > a:focus {
|
|
color: #3498db !important;
|
|
background-color: #424242 !important;
|
|
border: 1px solid #424242 !important;
|
|
border-bottom-color: transparent !important;
|
|
cursor: default;
|
|
}
|
|
|
|
.nav-tabs{
|
|
border-bottom: 1px solid #333;
|
|
}
|
|
|
|
.nav-tabs > li > a:hover,
|
|
.nav-tabs > li > a:focus {
|
|
background-color: #424242 !important;
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
|
|
.navbar-text, .dropdown>a, .dropdown-menu>li>a, .hidden-xs>a, .navbar-link {
|
|
color: #aaa !important;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
border-color: #424242 !important;
|
|
border-width: 2px !important;
|
|
background-color: #222 !important;
|
|
}
|
|
|
|
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
|
|
color: #fff !important;
|
|
background-color: #333 !important;
|
|
}
|
|
|
|
.open>.dropdown-toggle, .dropdown-toggle:hover {
|
|
border-color: #424242 !important;
|
|
background-color: #222 !important;
|
|
}
|
|
|
|
.divider {
|
|
background-color: #333 !important;
|
|
height: 2px !important;
|
|
}
|
|
|
|
li.hidden-xs:hover, .navbar-link:hover, .navbar-link:focus {
|
|
outline: none !important;
|
|
border-color: #424242 !important;
|
|
background-color: #222 !important;
|
|
}
|
|
|
|
.dropdown-menu>.active>a {
|
|
color: #fff !important;
|
|
background-color: #217dbb !important;
|
|
}
|
|
|
|
|
|
/* main panel */
|
|
.panel {
|
|
background-color: #323232 !important;
|
|
border-width: 2px !important;
|
|
}
|
|
|
|
.panel-default {
|
|
border-color: #424242 !important;
|
|
}
|
|
|
|
.panel-default > .panel-heading {
|
|
color: #aaa !important;
|
|
border-color: #222 !important;
|
|
background-color: #3B3B3B !important;
|
|
}
|
|
.panel-warning > .panel-heading {
|
|
color: #222 !important;
|
|
}
|
|
|
|
.panel-progress {
|
|
background: #3498db;
|
|
}
|
|
|
|
.panel-footer {
|
|
background-color: #2D2D2D !important;
|
|
border-width: 0 !important;
|
|
}
|
|
|
|
.table-striped>tbody>tr:nth-of-type(odd) {
|
|
background-color: #2E2E2E !important;
|
|
}
|
|
|
|
.panel-group .panel-heading+.panel-collapse>.panel-body, .panel-group .panel-heading+.panel-collapse>.list-group {
|
|
border-top: 1px solid #424242 !important;
|
|
}
|
|
|
|
.identicon rect {
|
|
fill: #aaa;
|
|
}
|
|
|
|
.panel-warning .identicon rect {
|
|
fill: #222;
|
|
}
|
|
|
|
.panel-heading:hover, .panel-heading:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
/* buttons */
|
|
.btn {
|
|
border-radius: 3px !important;
|
|
border-width: 0px !important;
|
|
}
|
|
|
|
.btn:hover, .btn:focus, .btn.focus {
|
|
outline: none !important;
|
|
}
|
|
.btn-default {
|
|
color: #aaa !important;
|
|
background-color: #333 !important;
|
|
}
|
|
|
|
.btn-default:hover, .btn-default:focus, .btn-default.focus {
|
|
color: #fff !important;
|
|
background-color: #484848 !important;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #217dbb !important;
|
|
}
|
|
|
|
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus {
|
|
background-color: #3498db !important;
|
|
}
|
|
|
|
.btn-warning {
|
|
background-color: #c29d0b !important;
|
|
}
|
|
|
|
.btn-warning:hover, .btn-warning:focus, .btn-warning.focus {
|
|
background-color: #f1c40f !important;
|
|
}
|
|
|
|
.btn-danger {
|
|
background-color: #d62c1a !important;
|
|
}
|
|
|
|
.btn-danger:hover, .btn-danger:focus, .btn-danger.focus {
|
|
background-color: #e74c3c !important;
|
|
}
|
|
|
|
|
|
/* modal dialogs */
|
|
.modal-header {
|
|
border-bottom-color: #424242 !important;
|
|
}
|
|
|
|
.modal-header:not(.alert) {
|
|
background-color: #3B3B3B;
|
|
}
|
|
|
|
.alert-info {
|
|
color: #222 !important;
|
|
}
|
|
|
|
.alert-warning {
|
|
color: #222 !important;
|
|
}
|
|
|
|
.alert-danger {
|
|
color: #222 !important;
|
|
background-color: #d62c1a !important;
|
|
}
|
|
|
|
.modal-content {
|
|
border-color: #666 !important;
|
|
border-width: 2px !important;
|
|
background-color: #272727 !important;
|
|
}
|
|
|
|
.modal-footer {
|
|
border-color: #303030 !important;
|
|
background-color: #2D2D2D !important;
|
|
}
|
|
|
|
.help-block {
|
|
color: #aaa !important;
|
|
}
|
|
|
|
.form-control {
|
|
color: #aaa !important;
|
|
border-color: #424242 !important;
|
|
background-color: #3B3B3B !important;
|
|
}
|
|
|
|
code.ng-binding{
|
|
color: #f99 !important;
|
|
background-color: #444 !important;
|
|
}
|
|
|
|
.well, .form-control[readonly="readonly"], .popover { /* read-only fields*/
|
|
border-color: #424242 !important;
|
|
background-color: #3B3B3B !important;
|
|
}
|
|
|
|
/* buttons for pagination */
|
|
.pagination>li>a, .pagination>li>span {
|
|
background-color: #333 !important;
|
|
border-color: #484848 !important;
|
|
}
|
|
|
|
.pagination>li>a:hover, .pagination>li>a:focus, .pagination>li>a.focus {
|
|
background-color: #484848 !important;
|
|
}
|
|
|
|
|
|
/* progress bars */
|
|
.progress-bar {
|
|
background-color: #217dbb !important;
|
|
}
|
|
|
|
.progress-bar-success {
|
|
background-color: #0A8522 !important;
|
|
}
|
|
|
|
.progress-bar-info {
|
|
background-color: #9b59b6 !important;
|
|
}
|
|
|
|
.progress-bar-warning {
|
|
background-color: #c29d0b !important;
|
|
}
|
|
|
|
.progress-bar-danger {
|
|
background-color: #d62c1a !important;
|
|
}
|
|
|
|
.progress .frontal {
|
|
color: #222;
|
|
}
|
|
|
|
.text-info {
|
|
color: #9a6dc0;
|
|
}
|
|
|
|
.text-primary {
|
|
color: #3fa9f0;
|
|
}
|
|
|
|
/*
|
|
* Fancytree tweaks
|
|
*/
|
|
|
|
.fancytree-container tr:hover,
|
|
.fancytree-focused {
|
|
background-color: #424242;
|
|
}
|
|
|
|
/* Remote Devices 'connection type'-icon color set to #aaa */
|
|
.reception {
|
|
filter: invert(77%) sepia(0%) saturate(724%) hue-rotate(146deg) brightness(91%) contrast(85%);
|
|
}
|
|
|
|
/* Disabled checkbox panels */
|
|
|
|
.checkbox[disabled] {
|
|
background-color: #3B3B3B;
|
|
}
|
|
|
|
.checkbox[disabled] * {
|
|
color: #999999;
|
|
}
|
|
|
|
.checkbox[disabled] .help-block {
|
|
color: #999999 !important;
|
|
}
|