Qortal/qortal-ui
4
1
Fork 4
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-02-11 17:55:51 +00:00
Code Issues Projects Releases Wiki Activity

Move hardcoded colors to theme

Browse Source
This commit is contained in:
QuickMythril 2024-02-23 11:42:50 -05:00
parent d84ab71d32
commit f316aa1178
7 changed files with 40 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
core/font/switch-theme.css
View File

@ -66,6 +66,13 @@ html {
--app-hr: rgba(0, 0, 0, .3); --app-hr: rgba(0, 0, 0, .3);
--code-block-text-color: #008fd5; --code-block-text-color: #008fd5;
--noavatar: url("/img/noavatar_light.png"); --noavatar: url("/img/noavatar_light.png");
--login-border: rgba(0, 167, 245);
--login-border-50pct: rgba(0, 167, 245, 0.5);
--login-border-10pct: rgba(0, 167, 245, 0.1);
--login-button: rgb(3, 169, 244);
--accent-color: #03a9f4;
--qchat-name: #03a9f4;
--qchat-my-name: #05be0e;
} }
html[theme="dark"] { html[theme="dark"] {
@ -136,4 +143,11 @@ html[theme="dark"] {
--app-hr: rgba(255, 255, 255, .3); --app-hr: rgba(255, 255, 255, .3);
--code-block-text-color: #008fd5; --code-block-text-color: #008fd5;
--noavatar: url("/img/noavatar_dark.png"); --noavatar: url("/img/noavatar_dark.png");
--login-border: rgba(0, 167, 245);
--login-border-50pct: rgba(0, 167, 245, 0.5);
--login-border-10pct: rgba(0, 167, 245, 0.1);
--login-button: rgb(3, 169, 244);
--accent-color: #03a9f4;
--qchat-name: #03a9f4;
--qchat-my-name: #05be0e;
} }

8
core/src/components/login-view/create-account-section.js
View File

@ -57,15 +57,15 @@ class CreateAccountSection extends connect(store)(LitElement) {
return [ return [
css` css`
* { * {
--mdc-theme-primary: rgb(3, 169, 244); --mdc-theme-primary: var(--login-button);
--mdc-theme-secondary: var(--mdc-theme-primary); --mdc-theme-secondary: var(--mdc-theme-primary);
--paper-input-container-focus-color: var(--mdc-theme-primary); --paper-input-container-focus-color: var(--mdc-theme-primary);
--mdc-theme-surface: var(--white); --mdc-theme-surface: var(--white);
--mdc-dialog-content-ink-color: var(--black); --mdc-dialog-content-ink-color: var(--black);
--mdc-checkbox-unchecked-color: var(--black); --mdc-checkbox-unchecked-color: var(--black);
--lumo-primary-text-color: rgb(0, 167, 245); --lumo-primary-text-color: var(--login-border);
--lumo-primary-color-50pct: rgba(0, 167, 245, 0.5); --lumo-primary-color-50pct: var(--login-border-50pct);
--lumo-primary-color-10pct: rgba(0, 167, 245, 0.1); --lumo-primary-color-10pct: var(--login-border-10pct);
--lumo-primary-color: hsl(199, 100%, 48%); --lumo-primary-color: hsl(199, 100%, 48%);
--lumo-base-color: var(--white); --lumo-base-color: var(--white);
--lumo-body-text-color: var(--black); --lumo-body-text-color: var(--black);

8
core/src/components/login-view/login-section.js
View File

@ -53,15 +53,15 @@ class LoginSection extends connect(store)(LitElement) {
return [ return [
css` css`
* { * {
--mdc-theme-primary: rgb(3, 169, 244); --mdc-theme-primary: var(--login-button);
--mdc-theme-secondary: var(--mdc-theme-primary); --mdc-theme-secondary: var(--mdc-theme-primary);
--paper-input-container-focus-color: var(--mdc-theme-primary); --paper-input-container-focus-color: var(--mdc-theme-primary);
--mdc-theme-surface: var(--white); --mdc-theme-surface: var(--white);
--mdc-dialog-content-ink-color: var(--black); --mdc-dialog-content-ink-color: var(--black);
--mdc-checkbox-unchecked-color: var(--black); --mdc-checkbox-unchecked-color: var(--black);
--lumo-primary-text-color: rgb(0, 167, 245); --lumo-primary-text-color: var(--login-border);
--lumo-primary-color-50pct: rgba(0, 167, 245, 0.5); --lumo-primary-color-50pct: var(--login-border-50pct);
--lumo-primary-color-10pct: rgba(0, 167, 245, 0.1); --lumo-primary-color-10pct: var(--login-border-10pct);
--lumo-primary-color: hsl(199, 100%, 48%); --lumo-primary-color: hsl(199, 100%, 48%);
--lumo-base-color: var(--white); --lumo-base-color: var(--white);
--lumo-body-text-color: var(--black); --lumo-body-text-color: var(--black);

4
core/src/components/login-view/welcome-page.js
View File

@ -21,9 +21,9 @@ class WelcomePage extends LitElement {
return [ return [
css` css`
* { * {
--mdc-theme-primary: rgb(3, 169, 244); --mdc-theme-primary: var(--login-button);
--mdc-theme-secondary: var(--mdc-theme-primary); --mdc-theme-secondary: var(--mdc-theme-primary);
--mdc-button-outline-color: #03a9f4; --mdc-button-outline-color: var(--accent-color);
} }
mwc-button { mwc-button {

20
core/src/components/show-plugin.js
View File

@ -211,7 +211,7 @@ class ShowPlugin extends connect(store)(LitElement) {
font-weight: bold; font-weight: bold;
background: none; background: none;
border: none; border: none;
color: #03a9f4; color: var(--accent-color);
font-size: 2em; font-size: 2em;
cursor: pointer; cursor: pointer;
transition: color 0.3s; transition: color 0.3s;
@ -229,7 +229,7 @@ class ShowPlugin extends connect(store)(LitElement) {
max-height: 28px; max-height: 28px;
padding: 5px 5px; padding: 5px 5px;
font-size: 14px; font-size: 14px;
background-color: #03a9f4; background-color: var(--accent-color);
color: white; color: white;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 3px; border-radius: 3px;
@ -248,7 +248,7 @@ class ShowPlugin extends connect(store)(LitElement) {
.iconActive { .iconActive {
position: absolute; position: absolute;
top: 5px; top: 5px;
color: #03a9f4; color: var(--accent-color);
--mdc-icon-size: 24px; --mdc-icon-size: 24px;
} }
@ -260,7 +260,7 @@ class ShowPlugin extends connect(store)(LitElement) {
} }
.tab:hover .iconInactive { .tab:hover .iconInactive {
color: #03a9f4; color: var(--accent-color);
} }
.count { .count {
@ -1078,7 +1078,7 @@ class NavBar extends connect(store)(LitElement) {
} }
.resetIcon:hover { .resetIcon:hover {
color: #03a9f4; color: var(--accent-color);
font-weight: bold; font-weight: bold;
} }
@ -1092,7 +1092,7 @@ class NavBar extends connect(store)(LitElement) {
} }
.searchIcon:hover { .searchIcon:hover {
color: #03a9f4; color: var(--accent-color);
font-weight: bold; font-weight: bold;
} }
@ -1106,7 +1106,7 @@ class NavBar extends connect(store)(LitElement) {
} }
.importIcon:hover { .importIcon:hover {
color: #03a9f4; color: var(--accent-color);
font-weight: bold; font-weight: bold;
} }
@ -1120,7 +1120,7 @@ class NavBar extends connect(store)(LitElement) {
} }
.exportIcon:hover { .exportIcon:hover {
color: #03a9f4; color: var(--accent-color);
font-weight: bold; font-weight: bold;
} }
@ -1141,7 +1141,7 @@ class NavBar extends connect(store)(LitElement) {
paper-dialog button { paper-dialog button {
padding: 5px 10px; padding: 5px 10px;
font-size: 18px; font-size: 18px;
background-color: #03a9f4; background-color: var(--accent-color);
color: white; color: white;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 5px; border-radius: 5px;
@ -1175,7 +1175,7 @@ class NavBar extends connect(store)(LitElement) {
} }
vaadin-text-field[focused]::part(input-field) { vaadin-text-field[focused]::part(input-field) {
border-color: #03a9f4; border-color: var(--accent-color);
} }
` `

6
core/src/functional-components/settings-page.js
View File

@ -44,7 +44,7 @@ class SettingsPage extends connect(store)(LitElement) {
static get styles() { static get styles() {
return css` return css`
* { * {
--mdc-theme-primary: rgb(3, 169, 244); --mdc-theme-primary: var(--login-button);
--mdc-theme-secondary: var(--mdc-theme-primary); --mdc-theme-secondary: var(--mdc-theme-primary);
--mdc-dialog-content-ink-color: var(--black); --mdc-dialog-content-ink-color: var(--black);
--mdc-theme-surface: var(--white); --mdc-theme-surface: var(--white);
@ -70,7 +70,7 @@ class SettingsPage extends connect(store)(LitElement) {
display: inline-block; display: inline-block;
width: 150px; width: 150px;
font-weight: 600; font-weight: 600;
color: #03a9f4; color: var(--accent-color);
border: 1px solid transparent; border: 1px solid transparent;
} }
@ -87,7 +87,7 @@ class SettingsPage extends connect(store)(LitElement) {
} }
.buttonBlue { .buttonBlue {
color: #03a9f4; color: var(--accent-color);
} }
.floatleft { .floatleft {

6
plugins/plugins/core/components/ChatScroller-css.js
View File

@ -63,13 +63,13 @@ export const chatStyles = css`
.message-data-name { .message-data-name {
user-select: none; user-select: none;
color: #03a9f4; color: var(--qchat-name);
margin-bottom: 5px; margin-bottom: 5px;
} }
.forwarded-text { .forwarded-text {
user-select: none; user-select: none;
color: #03a9f4; color: var(--accent-color);
margin-bottom: 5px; margin-bottom: 5px;
} }
@ -81,7 +81,7 @@ export const chatStyles = css`
} }
.message-data-my-name { .message-data-my-name {
color: #05be0e; color: var(--qchat-my-name);
font-weight: bold; font-weight: bold;
} }