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

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;
--txtfieldhoverborder: #00000;
--relaynodetxt: #646464;
--chatmenuhover: #eeeeee;
--chatmenuactive: #ebebeb;
--menuhover: #eeeeee;
--menuactive: #ebebeb;
--mainmenutext:#080808;
--mainmenutexthover:#080808;
}
html[theme="dark"] {
--white: #36393f;
--black: #f8f8f8;
--white: #0f1a2e;
--black: #c9d2d9;
--gray: #d8d8d8;
--graylight: #dddddd;
--plugback: #36393f;
--border: #fcfcfc;
--border2: #fdfdfd;
--graylight: #0b305e;
--plugback: #0f1a2e;
--border: #0b305e;
--border2: #0b305e;
--copybutton: #d0d6de;
--sectxt: #bbc3cd;
--vdicon: #d0d6de;
--tradehead: #e8ebf0;
--tradeborder: #cccccc;
--tradehead: #008fd5;
--tradeborder: #0b305e;
--tradehave: #dddddd;
--txtfieldborder: #cccccc;
--txtfieldborder: #0b305e;
--txtfieldhoverborder: #ffffff;
--relaynodetxt: #d4d4d4;
--chatmenuhover: #666666;
--chatmenuactive: #6b6b6b;
--menuhover: #008fd5;
--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 {
flex: 0 0 100px;
padding:12px;
border-top: 1px solid #eee;
border-top: 1px solid var(--border);
background: var(--white);
}
.info {

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

@ -48,7 +48,7 @@ class AppView extends connect(store)(LitElement) {
app-toolbar {
background: var(--white);
color: var(--black);
border-top: 1px solid rgb(238, 238, 238);
border-top: var(--border);
}
#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 {
background-color: var(--white);
color: var(--black);
border: 1px solid #a1a1a1;
border: 1px solid var(--border);
padding: 20px 0 0 0;
border-radius: 5px;
}
@ -107,7 +107,7 @@ class UserSettings extends connect(store)(LitElement) {
}
.leftBar ul li {
border-bottom: 1px solid #DDD;
border-bottom: 1px solid var(--border);
}
.leftBar ul li:last-child {
@ -129,7 +129,7 @@ class UserSettings extends connect(store)(LitElement) {
}
.leftBar ul li a:hover {
background-color: #f6f6f6;
background-color: var(--menuhover);
color: #515151;
}
@ -139,7 +139,7 @@ class UserSettings extends connect(store)(LitElement) {
.leftBar ul li a.active {
color: #515151;
background-color: #eee;
background-color: var(--menuactive);
border-left: 2px solid #515151;
margin-left: -2px;
}
@ -147,7 +147,7 @@ class UserSettings extends connect(store)(LitElement) {
.mainPage {
background-color: var(--white);
color: var(--black);
border: 1px solid #a1a1a1;
border: 1px solid var(--border);
padding: 20px 0 10px 0;
border-radius: 5px;
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;
text-decoration: none;
padding-left: 20px;
color: var(--black);
color: var(--mainmenutext);
text-align: left;
height: 48px;
position: relative;
border-bottom: 1px solid #EEE;
border-bottom: 1px solid var(--border);
outline: none;
}
@ -75,14 +75,14 @@ class SidenavMenu extends connect(store)(LitElement) {
}
.mcd-menu li:hover > a {
background: #f8f8f8;
color: #515151;
background: var(--menuhover);
color: var(--mainmenutexthover);
}
.mcd-menu li a.active {
position: relative;
color: #515151;
background-color: #eee;
background-color: var(--menuactive);
outline: none;
}
@ -153,7 +153,7 @@ class SidenavMenu extends connect(store)(LitElement) {
.mcd-menu li ul li a {
text-align: left;
border: 0;
border-bottom: 1px solid #EEE;
border-bottom: 1px solid var(--border);
height: auto;
outline: none;
}

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

@ -35,7 +35,7 @@ class WalletProfile extends connect(store)(LitElement) {
<style>
#profileInMenu {
padding: 12px;
border-top: 1px solid rgb(238, 238, 238);
border-top: var(--border);
background: var(--white);
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;
pointer-events: none;
padding: 5px, 0;
border: 1px solid #B2B2B2;
border: 1px solid var(--border);
min-width: 150px;
max-width: 300px;
background: #F9F9F9;

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

@ -25,11 +25,11 @@ class ChatHead extends LitElement {
}
li:hover {
background-color: var(--chatmenuhover);
background-color: var(--menuhover);
}
.active {
background: var(--chatmenuactive);
background: var(--menuactive);
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 {
border: 1px solid #eee;
border: 1px solid var(--border);
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);
margin-bottom: 2em;

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

@ -67,7 +67,7 @@ class Messaging extends LitElement {
}
.divCard {
border: 1px solid #eee;
border: 1px solid var(--border);
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);
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 {
border: 1px solid #a1a1a1;
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 25px;
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 {
border: 1px solid #eee;
border: 1px solid var(--border);
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);
}

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

@ -76,7 +76,7 @@ class Puzzles extends LitElement {
}
.divCard {
border: 1px solid #eee;
border: 1px solid var(--border);
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);
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 {
border: 1px solid #eee;
border: 1px solid var(--border);
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);
margin-bottom: 2em;

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

@ -121,7 +121,7 @@ class Websites extends LitElement {
}
.divCard {
border: 1px solid #eee;
border: 1px solid var(--border);
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);
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 {
border: 1px solid #eee;
border: 1px solid var(--border);
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);
}

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

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