AlphaX/qortal-ui
1
0
Fork 0
forked from Qortal/qortal-ui
Code Issues Pull Requests Projects Releases Wiki Activity

Started implementing dark mode colors, based on designs by Scythian

Browse Source
This commit is contained in:
CalDescent 2022-03-08 09:11:37 +00:00
parent 026fe3d674
commit b464511522
17 changed files with 48 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
qortal-ui-core/font/switch-theme.css
View File

@ -15,27 +15,31 @@ html {
--txtfieldborder: #666666; --txtfieldborder: #666666;
--txtfieldhoverborder: #00000; --txtfieldhoverborder: #00000;
--relaynodetxt: #646464; --relaynodetxt: #646464;
--chatmenuhover: #eeeeee; --menuhover: #eeeeee;
--chatmenuactive: #ebebeb; --menuactive: #ebebeb;
--mainmenutext:#080808;
--mainmenutexthover:#080808;
} }
html[theme="dark"] { html[theme="dark"] {
--white: #36393f; --white: #0f1a2e;
--black: #f8f8f8; --black: #c9d2d9;
--gray: #d8d8d8; --gray: #d8d8d8;
--graylight: #dddddd; --graylight: #0b305e;
--plugback: #36393f; --plugback: #0f1a2e;
--border: #fcfcfc; --border: #0b305e;
--border2: #fdfdfd; --border2: #0b305e;
--copybutton: #d0d6de; --copybutton: #d0d6de;
--sectxt: #bbc3cd; --sectxt: #bbc3cd;
--vdicon: #d0d6de; --vdicon: #d0d6de;
--tradehead: #e8ebf0; --tradehead: #008fd5;
--tradeborder: #cccccc; --tradeborder: #0b305e;
--tradehave: #dddddd; --tradehave: #dddddd;
--txtfieldborder: #cccccc; --txtfieldborder: #0b305e;
--txtfieldhoverborder: #ffffff; --txtfieldhoverborder: #ffffff;
--relaynodetxt: #d4d4d4; --relaynodetxt: #d4d4d4;
--chatmenuhover: #666666; --menuhover: #008fd5;
--chatmenuactive: #6b6b6b; --menuactive: #008fd5;
--mainmenutext:#008fd5;
--mainmenutexthover:#0f1a2e;
} }

2
qortal-ui-core/src/components/app-info.js
View File

@ -53,7 +53,7 @@ class AppInfo extends connect(store)(LitElement) {
#profileInMenu { #profileInMenu {
flex: 0 0 100px; flex: 0 0 100px;
padding:12px; padding:12px;
border-top: 1px solid #eee; border-top: 1px solid var(--border);
background: var(--white); background: var(--white);
} }
.info { .info {

2
qortal-ui-core/src/components/app-view.js
View File

@ -48,7 +48,7 @@ class AppView extends connect(store)(LitElement) {
app-toolbar { app-toolbar {
background: var(--white); background: var(--white);
color: var(--black); color: var(--black);
border-top: 1px solid rgb(238, 238, 238); border-top: var(--border);
} }
#sideBar { #sideBar {

10
qortal-ui-core/src/components/settings-view/user-settings.js
View File

@ -85,7 +85,7 @@ class UserSettings extends connect(store)(LitElement) {
.leftBar { .leftBar {
background-color: var(--white); background-color: var(--white);
color: var(--black); color: var(--black);
border: 1px solid #a1a1a1; border: 1px solid var(--border);
padding: 20px 0 0 0; padding: 20px 0 0 0;
border-radius: 5px; border-radius: 5px;
} }
@ -107,7 +107,7 @@ class UserSettings extends connect(store)(LitElement) {
} }
.leftBar ul li { .leftBar ul li {
border-bottom: 1px solid #DDD; border-bottom: 1px solid var(--border);
} }
.leftBar ul li:last-child { .leftBar ul li:last-child {
@ -129,7 +129,7 @@ class UserSettings extends connect(store)(LitElement) {
} }
.leftBar ul li a:hover { .leftBar ul li a:hover {
background-color: #f6f6f6; background-color: var(--menuhover);
color: #515151; color: #515151;
} }
@ -139,7 +139,7 @@ class UserSettings extends connect(store)(LitElement) {
.leftBar ul li a.active { .leftBar ul li a.active {
color: #515151; color: #515151;
background-color: #eee; background-color: var(--menuactive);
border-left: 2px solid #515151; border-left: 2px solid #515151;
margin-left: -2px; margin-left: -2px;
} }
@ -147,7 +147,7 @@ class UserSettings extends connect(store)(LitElement) {
.mainPage { .mainPage {
background-color: var(--white); background-color: var(--white);
color: var(--black); color: var(--black);
border: 1px solid #a1a1a1; border: 1px solid var(--border);
padding: 20px 0 10px 0; padding: 20px 0 10px 0;
border-radius: 5px; border-radius: 5px;
font-size: 16px; font-size: 16px;

12
qortal-ui-core/src/components/sidenav-menu.js
View File

@ -38,11 +38,11 @@ class SidenavMenu extends connect(store)(LitElement) {
display: block; display: block;
text-decoration: none; text-decoration: none;
padding-left: 20px; padding-left: 20px;
color: var(--black); color: var(--mainmenutext);
text-align: left; text-align: left;
height: 48px; height: 48px;
position: relative; position: relative;
border-bottom: 1px solid #EEE; border-bottom: 1px solid var(--border);
outline: none; outline: none;
} }
@ -75,14 +75,14 @@ class SidenavMenu extends connect(store)(LitElement) {
} }
.mcd-menu li:hover > a { .mcd-menu li:hover > a {
background: #f8f8f8; background: var(--menuhover);
color: #515151; color: var(--mainmenutexthover);
} }
.mcd-menu li a.active { .mcd-menu li a.active {
position: relative; position: relative;
color: #515151; color: #515151;
background-color: #eee; background-color: var(--menuactive);
outline: none; outline: none;
} }
@ -153,7 +153,7 @@ class SidenavMenu extends connect(store)(LitElement) {
.mcd-menu li ul li a { .mcd-menu li ul li a {
text-align: left; text-align: left;
border: 0; border: 0;
border-bottom: 1px solid #EEE; border-bottom: 1px solid var(--border);
height: auto; height: auto;
outline: none; outline: none;
} }

2
qortal-ui-core/src/components/wallet-profile.js
View File

@ -35,7 +35,7 @@ class WalletProfile extends connect(store)(LitElement) {
<style> <style>
#profileInMenu { #profileInMenu {
padding: 12px; padding: 12px;
border-top: 1px solid rgb(238, 238, 238); border-top: var(--border);
background: var(--white); background: var(--white);
color: var(--black); color: var(--black);
} }

2
qortal-ui-core/src/functional-components/copy-text-menu.js
View File

@ -41,7 +41,7 @@ class CopyTextMenu extends connect(store)(LitElement) {
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
padding: 5px, 0; padding: 5px, 0;
border: 1px solid #B2B2B2; border: 1px solid var(--border);
min-width: 150px; min-width: 150px;
max-width: 300px; max-width: 300px;
background: #F9F9F9; background: #F9F9F9;

4
qortal-ui-plugins/plugins/core/components/ChatHead.js
View File

@ -25,11 +25,11 @@ class ChatHead extends LitElement {
} }
li:hover { li:hover {
background-color: var(--chatmenuhover); background-color: var(--menuhover);
} }
.active { .active {
background: var(--chatmenuactive); background: var(--menuactive);
border-left: 4px solid #3498db; border-left: 4px solid #3498db;
} }

2
qortal-ui-plugins/plugins/core/group-management/group-management.src.js
View File

@ -75,7 +75,7 @@ class GroupManagement extends LitElement {
} }
.divCard { .divCard {
border: 1px solid #eee; border: 1px solid var(--border);
padding: 1em; padding: 1em;
box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20); box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20);
margin-bottom: 2em; margin-bottom: 2em;

2
qortal-ui-plugins/plugins/core/messaging/messaging.src.js
View File

@ -67,7 +67,7 @@ class Messaging extends LitElement {
} }
.divCard { .divCard {
border: 1px solid #eee; border: 1px solid var(--border);
padding: 1em; padding: 1em;
box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20); box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20);
margin-bottom: 1.5rem; margin-bottom: 1.5rem;

2
qortal-ui-plugins/plugins/core/minting/minting-info.src.js
View File

@ -96,7 +96,7 @@ class MintingInfo extends LitElement {
} }
.content-box { .content-box {
border: 1px solid #a1a1a1; border: 1px solid var(--border);
border-radius: 10px; border-radius: 10px;
padding: 10px 25px; padding: 10px 25px;
text-align: center; text-align: center;

2
qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js
View File

@ -50,7 +50,7 @@ class NameRegistration extends LitElement {
} }
.divCard { .divCard {
border: 1px solid #eee; border: 1px solid var(--border);
padding: 1em; padding: 1em;
box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20); box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20);
} }

2
qortal-ui-plugins/plugins/core/puzzles/puzzles.src.js
View File

@ -76,7 +76,7 @@ class Puzzles extends LitElement {
} }
.divCard { .divCard {
border: 1px solid #eee; border: 1px solid var(--border);
padding: 1em; padding: 1em;
box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20); box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20);
margin-bottom: 2em; margin-bottom: 2em;

2
qortal-ui-plugins/plugins/core/qdn/data-management/data-management.src.js
View File

@ -92,7 +92,7 @@ class DataManagement extends LitElement {
} }
.divCard { .divCard {
border: 1px solid #eee; border: 1px solid var(--border);
padding: 1em; padding: 1em;
box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20); box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20);
margin-bottom: 2em; margin-bottom: 2em;

2
qortal-ui-plugins/plugins/core/qdn/websites.src.js
View File

@ -121,7 +121,7 @@ class Websites extends LitElement {
} }
.divCard { .divCard {
border: 1px solid #eee; border: 1px solid var(--border);
padding: 1em; padding: 1em;
box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20); box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20);
margin-bottom: 2em; margin-bottom: 2em;

2
qortal-ui-plugins/plugins/core/reward-share/reward-share.src.js
View File

@ -56,7 +56,7 @@ class RewardShare extends LitElement {
} }
.divCard { .divCard {
border: 1px solid #eee; border: 1px solid var(--border);
padding: 1em; padding: 1em;
box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20); box-shadow: 0 .3px 1px 0 rgba(0,0,0,0.14), 0 1px 1px -1px rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.20);
} }

12
qortal-ui-plugins/plugins/core/wallet/wallet-app.src.js
View File

@ -246,7 +246,7 @@ class MultiWallet extends LitElement {
height: 100vh; height: 100vh;
border-top-left-radius: inherit; border-top-left-radius: inherit;
border-bottom-left-radius: inherit; border-bottom-left-radius: inherit;
border-right: 1px solid #eee; border-right: 1px solid var(--border);
} }
.transactions-wrapper { .transactions-wrapper {
@ -278,7 +278,7 @@ class MultiWallet extends LitElement {
margin-top: 60px; margin-top: 60px;
margin-left: 20px; margin-left: 20px;
margin-right: 20px; margin-right: 20px;
border-top: 1px solid #e5e5e5; border-top: 1px solid var(--border);
padding-top: 0px; padding-top: 0px;
height: 100%; height: 100%;
} }
@ -353,11 +353,11 @@ class MultiWallet extends LitElement {
} }
.currency-box:not(:last-child) { .currency-box:not(:last-child) {
border-bottom: 1px solid #eee; border-bottom: var(--border);
} }
.active { .active {
background: #bbb; background: var(--menuactive);
} }
.currency-image { .currency-image {
@ -376,7 +376,7 @@ class MultiWallet extends LitElement {
} }
.currency-box:hover { .currency-box:hover {
background: #bbb; background: var(--menuhover);
} }
.currency-box.active, .currency-box.active,
@ -566,7 +566,7 @@ class MultiWallet extends LitElement {
return html` return html`
<div class="wrapper"> <div class="wrapper">
<div class="wallet"> <div class="wallet">
<div style="font-size: 20px; color: var(--black); padding: 16px; border-bottom: 1px solid #eee;">Wallets</div> <div style="font-size: 20px; color: var(--black); padding: 16px; border-bottom: 1px solid var(--border);">Wallets</div>
<div class="cards"> <div class="cards">
<div coin="qort" class="currency-box qort active"> <div coin="qort" class="currency-box qort active">
<div class="currency-image"></div> <div class="currency-image"></div>