From c293e83f19d785e8b3d9a1156db372484d038216 Mon Sep 17 00:00:00 2001 From: Oliver Hamlet Date: Thu, 7 Jul 2016 18:33:06 +0100 Subject: [PATCH] Update dark theme implementation To use CSS custom variables. --- docs/LOOT Readme.html | 2 +- resources/ui/css/dark-theme.css | 120 +++++------------- src/gui/html/css/style.css | 8 +- src/gui/html/elements/loot-plugin-card.html | 4 +- src/gui/html/elements/loot-plugin-editor.html | 5 +- src/gui/html/index.html | 4 + 6 files changed, 45 insertions(+), 98 deletions(-) diff --git a/docs/LOOT Readme.html b/docs/LOOT Readme.html index 735e27b3..89003831 100644 --- a/docs/LOOT Readme.html +++ b/docs/LOOT Readme.html @@ -466,7 +466,7 @@ figure > div {

Themes

-

LOOT's user interface has experimental support for the use of alternative and custom CSS themes. To use a theme, place its CSS file into the resources/ui/css folder inside LOOT's installation folder, and rename the file to theme.css. LOOT will then load this file when it launches. A dark user interface theme is provided with LOOT: to use it, rename dark-theme.css in the resources/ui/css folder to theme.css. Theme support is experimental because future updates to LOOT's user interface may break existing CSS selectors.

+

LOOT's user interface has CSS theming support. A dark theme is provided with LOOT: to use it, rename dark-theme.css in the resources/ui/css folder to theme.css. A working knowledge of CSS is required to create new themes, though the provided dark theme CSS file is commented to provide some assistance.

Contributing & Support

diff --git a/resources/ui/css/dark-theme.css b/resources/ui/css/dark-theme.css index 7f260501..96c23716 100644 --- a/resources/ui/css/dark-theme.css +++ b/resources/ui/css/dark-theme.css @@ -1,111 +1,51 @@ /* Dark theme CSS overrides. */ -html, -html /deep/ paper-item, html /deep/ core-menu > paper-item, -html /deep/ paper-dropdown-menu::shadow #label { - color: white !important; -} -html, body { - background: black; -} +/* CSS Custom Variables */ +:root { + /* --primary-color is used for the main toolbar background, floating input + labels and dialog buttons. */ + --primary-color: var(--paper-blue-600); -html /deep/ paper-item[disabled], -html /deep/ paper-item[disabled] > core-icon, -html /deep/ paper-input-decorator::shadow .label-text, -html /deep/ input::-webkit-input-placeholder, -html /deep/ table[is=editable-table] paper-icon-button[disabled], -html /deep/ loot-dropdown-menu::shadow paper-dropdown-menu[disabled]::shadow #label, -html /deep/ loot-dropdown-menu::shadow paper-dropdown-menu::shadow #arrow { - color: rgba(255, 255, 255, 0.3) !important; -} + /* --light-primary-color is used for the editor toolbar background. */ + --light-primary-color: var(--paper-grey-900); -html /deep/ paper-item core-icon, -html /deep/ paper-tabs::shadow .scroll-button > paper-icon-button, -html /deep/ table[is=editable-table] paper-icon-button, -html /deep/ loot-plugin-card::shadow core-tooltip:not(#activeTick) > core-icon, -html /deep/ loot-plugin-card::shadow #conflictsLabel > core-icon, -html /deep/ loot-plugin-item::shadow #secondary, -html /deep/ loot-plugin-editor::shadow core-tooltip:not(#activeTick) > core-icon { - color: rgba(255, 255, 255, 0.7) !important; -} + /* --accent-color is used for underlines and ripples */ + --accent-color: var(--paper-blue-600); -html /deep/ paper-input-decorator::shadow .underline .unfocused-underline, -.divider { - background-color: rgba(255, 255, 255, 0.12) !important; -} + /* --dark-accent-color is used for links, the Apply sorting button, and the + Save editor icon button. */ + --dark-accent-color: var(--paper-blue-500); -html /deep/ paper-input-decorator[disabled]::shadow .underline, -html /deep/ table th, -html /deep/ paper-dropdown-menu { - border-bottom-color: rgba(255, 255, 255, 0.12) !important; -} + /* --primary-background-color is use for sidebar, dialog and card backgrounds. */ + --primary-background-color: var(--paper-grey-800); + --primary-text-color: var(--dark-theme-text-color); + --secondary-text-color: var(--dark-theme-secondary-color); + --disabled-text-color: var(--dark-theme-disabled-color); + --divider-color: var(--dark-theme-divider-color); -html /deep/ paper-checkbox::shadow #checkbox.checked { - border-color: #1A237E !important; -} + /* --paper-toolbar-background can be used to override the --primary-color defined + above for the main toolbar. */ + --paper-toolbar-background: var(--paper-grey-900); -html /deep/ paper-toggle-button::shadow [checked] .toggle-bar { - background-color: rgba(26, 35, 126, 0.5) !important; -} - -html /deep/ paper-toggle-button::shadow [checked] .toggle-button, -html /deep/ paper-checkbox::shadow #checkbox.checked { - background-color: #1A237E !important; -} - -html /deep/ paper-toggle-button::shadow [checked] .toggle-ink { - color: #1A237E !important; -} - -/* Dark dropdown menus. */ -html /deep/ paper-dropdown::shadow #background, -loot-dialog, -loot-message-dialog, -div[drawer], -#summary, -html /deep/ loot-plugin-card::shadow #wrapper, -html /deep/ loot-plugin-editor::shadow core-selector > * { - background: #424242 !important; -} - -/* Dark dialogs. */ -loot-dialog, -loot-message-dialog { - color: white !important; -} - -/* Dark progress bar background. */ -paper-progress::shadow #progressContainer { - background-color: #303030 !important; -} - -core-toolbar, -div[drawer] > div:first-child, -html /deep/ loot-search::shadow core-toolbar, -html /deep/ loot-plugin-editor { - background: #212121 !important; + /* --secondary-background-color is used for the progress bar background and + the background behind cards. */ + --secondary-background-color: #303030; + --paper-progress-container-color: var(--secondary-background-color); } #main { - background: #303030 !important; + background: var(--secondary-background-color); } li.error > p, li.warn > p { - color: black !important; + color: black; } .version { - color: #78909C !important; + color: #78909C; } + .crc { - color: #8D6E63 !important; -} - -html /deep/ loot-plugin-card.search-result::shadow #editor { - box-shadow: inset 4px 0 #1A237E !important; -} - -html /deep/ loot-plugin-editor::shadow core-selector > * { - border-bottom: 4px solid #212121 !important; + color: #8D6E63; } diff --git a/src/gui/html/css/style.css b/src/gui/html/css/style.css index 8a3800be..7195436e 100644 --- a/src/gui/html/css/style.css +++ b/src/gui/html/css/style.css @@ -26,9 +26,11 @@ --state-transition-time: 0.6s; --primary-color: var(--paper-indigo-500); + --light-primary-color: var(--paper-blue-50); --accent-color: var(--paper-blue-300); --dark-accent-color: var(--paper-blue-500); + --primary-background-color: white; --primary-text-color: rgba(0, 0, 0, var(--dark-primary-opacity)); --secondary-text-color: rgba(0, 0, 0, var(--dark-secondary-opacity)); --disabled-text-color: rgba(0, 0, 0, var(--dark-disabled-opacity)); @@ -39,7 +41,7 @@ --dark-theme-disabled-color: rgba(255, 255, 255, var(--light-disabled-opacity)); --dark-theme-divider-color: rgba(255, 255, 255, var(--light-divider-opacity)); - --paper-icon-button-disabled-text: rgba(255, 255, 255, 0.30); + --paper-icon-button-disabled-text: var(--dark-theme-disabled-color); --paper-tabs-selection-bar-color: var(--accent-color); --paper-tab-ink: var(--accent-color); @@ -78,7 +80,7 @@ tt, code, kbd, samp { /* Drawer / Sidebar */ div[drawer] { - background: white; + background: var(--primary-background-color); } div[drawer] > * { border-right: 1px var(--divider-color) solid; @@ -118,7 +120,7 @@ div[drawer] > iron-pages { margin-bottom: 120px; } #summary { - background-color: white; + background-color: var(--primary-background-color); margin: 8px; padding: 16px; } diff --git a/src/gui/html/elements/loot-plugin-card.html b/src/gui/html/elements/loot-plugin-card.html index 676f5f86..f0eb8f8e 100644 --- a/src/gui/html/elements/loot-plugin-card.html +++ b/src/gui/html/elements/loot-plugin-card.html @@ -21,7 +21,7 @@ /* Host styling. */ #wrapper { display: block; - background: white; + background: var(--primary-background-color); margin: 0 8px 8px 8px; position: relative; } @@ -72,7 +72,7 @@ /* Misc Styling. */ paper-toolbar { --paper-toolbar-color: var(--primary-text-color); - --paper-toolbar-background: white; + --paper-toolbar-background: var(--primary-background-color); } #content { overflow: hidden; diff --git a/src/gui/html/elements/loot-plugin-editor.html b/src/gui/html/elements/loot-plugin-editor.html index 5a86d782..ca052bf9 100644 --- a/src/gui/html/elements/loot-plugin-editor.html +++ b/src/gui/html/elements/loot-plugin-editor.html @@ -33,6 +33,7 @@ loot-editor-close min-height: 56px; max-height: calc(100% - 56px); transition: height var(--state-transition-time), min-height var(--state-transition-time); + background-color: var(--primary-background-color); } :host(.hidden) { height: 0; @@ -85,7 +86,7 @@ loot-editor-close /* Misc Styling. */ paper-toolbar.medium-tall { - --paper-toolbar-background: var(--paper-blue-50); + --paper-toolbar-background: var(--loot-plugin-editor-toolbar-background, var(--light-primary-color)); --paper-toolbar-color: var(--primary-text-color); height: 104px; } @@ -106,7 +107,7 @@ loot-editor-close z-index: 1; } #splitter:active { - background: rgba(0, 0, 0, 0.12); + background: var(--divider-color); }
diff --git a/src/gui/html/index.html b/src/gui/html/index.html index 67d418cc..cc7a0861 100644 --- a/src/gui/html/index.html +++ b/src/gui/html/index.html @@ -94,6 +94,7 @@ }; } .paper-item { + background-color: var(--primary-background-color); display: flex; align-items: center; } @@ -110,6 +111,9 @@ transition: color var(--state-transition-time); }; + --paper-item: { + background-color: var(--primary-background-color); + }; --paper-icon-item: { white-space: nowrap; };