qortal.link/qortal-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #262 from QuickMythril/theme-colors

Browse Source 
Move hardcoded colors to theme
This commit is contained in:
AlphaX-Projects 2024-03-01 16:41:12 +01:00 committed by GitHub
commit ef59cc018d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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);
--code-block-text-color: #008fd5;
--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"] {
@ -136,4 +143,11 @@ html[theme="dark"] {
--app-hr: rgba(255, 255, 255, .3);
--code-block-text-color: #008fd5;
--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 [
css`
* {
--mdc-theme-primary: rgb(3, 169, 244);
--mdc-theme-primary: var(--login-button);
--mdc-theme-secondary: var(--mdc-theme-primary);
--paper-input-container-focus-color: var(--mdc-theme-primary);
--mdc-theme-surface: var(--white);
--mdc-dialog-content-ink-color: var(--black);
--mdc-checkbox-unchecked-color: var(--black);
--lumo-primary-text-color: rgb(0, 167, 245);
--lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
--lumo-primary-color-10pct: rgba(0, 167, 245, 0.1);
--lumo-primary-text-color: var(--login-border);
--lumo-primary-color-50pct: var(--login-border-50pct);
--lumo-primary-color-10pct: var(--login-border-10pct);
--lumo-primary-color: hsl(199, 100%, 48%);
--lumo-base-color: var(--white);
--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 [
css`
* {
--mdc-theme-primary: rgb(3, 169, 244);
--mdc-theme-primary: var(--login-button);
--mdc-theme-secondary: var(--mdc-theme-primary);
--paper-input-container-focus-color: var(--mdc-theme-primary);
--mdc-theme-surface: var(--white);
--mdc-dialog-content-ink-color: var(--black);
--mdc-checkbox-unchecked-color: var(--black);
--lumo-primary-text-color: rgb(0, 167, 245);
--lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
--lumo-primary-color-10pct: rgba(0, 167, 245, 0.1);
--lumo-primary-text-color: var(--login-border);
--lumo-primary-color-50pct: var(--login-border-50pct);
--lumo-primary-color-10pct: var(--login-border-10pct);
--lumo-primary-color: hsl(199, 100%, 48%);
--lumo-base-color: var(--white);
--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 [
css`
* {
--mdc-theme-primary: rgb(3, 169, 244);
--mdc-theme-primary: var(--login-button);
--mdc-theme-secondary: var(--mdc-theme-primary);
--mdc-button-outline-color: #03a9f4;
--mdc-button-outline-color: var(--accent-color);
}
mwc-button {

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

@ -211,7 +211,7 @@ class ShowPlugin extends connect(store)(LitElement) {
font-weight: bold;
background: none;
border: none;
color: #03a9f4;
color: var(--accent-color);
font-size: 2em;
cursor: pointer;
transition: color 0.3s;
@ -229,7 +229,7 @@ class ShowPlugin extends connect(store)(LitElement) {
max-height: 28px;
padding: 5px 5px;
font-size: 14px;
background-color: #03a9f4;
background-color: var(--accent-color);
color: white;
border: 1px solid transparent;
border-radius: 3px;
@ -248,7 +248,7 @@ class ShowPlugin extends connect(store)(LitElement) {
.iconActive {
position: absolute;
top: 5px;
color: #03a9f4;
color: var(--accent-color);
--mdc-icon-size: 24px;
}
@ -260,7 +260,7 @@ class ShowPlugin extends connect(store)(LitElement) {
}
.tab:hover .iconInactive {
color: #03a9f4;
color: var(--accent-color);
}
.count {
@ -1078,7 +1078,7 @@ class NavBar extends connect(store)(LitElement) {
}
.resetIcon:hover {
color: #03a9f4;
color: var(--accent-color);
font-weight: bold;
}
@ -1092,7 +1092,7 @@ class NavBar extends connect(store)(LitElement) {
}
.searchIcon:hover {
color: #03a9f4;
color: var(--accent-color);
font-weight: bold;
}
@ -1106,7 +1106,7 @@ class NavBar extends connect(store)(LitElement) {
}
.importIcon:hover {
color: #03a9f4;
color: var(--accent-color);
font-weight: bold;
}
@ -1120,7 +1120,7 @@ class NavBar extends connect(store)(LitElement) {
}
.exportIcon:hover {
color: #03a9f4;
color: var(--accent-color);
font-weight: bold;
}
@ -1141,7 +1141,7 @@ class NavBar extends connect(store)(LitElement) {
paper-dialog button {
padding: 5px 10px;
font-size: 18px;
background-color: #03a9f4;
background-color: var(--accent-color);
color: white;
border: 1px solid transparent;
border-radius: 5px;
@ -1175,7 +1175,7 @@ class NavBar extends connect(store)(LitElement) {
}
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() {
return css`
* {
--mdc-theme-primary: rgb(3, 169, 244);
--mdc-theme-primary: var(--login-button);
--mdc-theme-secondary: var(--mdc-theme-primary);
--mdc-dialog-content-ink-color: var(--black);
--mdc-theme-surface: var(--white);
@ -70,7 +70,7 @@ class SettingsPage extends connect(store)(LitElement) {
display: inline-block;
width: 150px;
font-weight: 600;
color: #03a9f4;
color: var(--accent-color);
border: 1px solid transparent;
}
@ -87,7 +87,7 @@ class SettingsPage extends connect(store)(LitElement) {
}
.buttonBlue {
color: #03a9f4;
color: var(--accent-color);
}
.floatleft {

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

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