Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-03-27 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Settings to Dark

Browse Source
This commit is contained in:
AlphaX-Projects 2022-03-07 09:52:23 -08:00 committed by GitHub
parent 5560977124
commit a50a3576c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,12 +15,17 @@ class SecurityView extends connect(store)(LitElement) {
static get styles() { static get styles() {
return css` return css`
* { * {
--lumo-primary-text-color: rgb(0, 167, 245); --lumo-primary-text-color: rgb(0, 167, 245);
--lumo-primary-color-50pct: rgba(0, 167, 245, 0.5); --lumo-primary-color-50pct: rgba(0, 167, 245, 0.5);
--lumo-primary-color-10pct: rgba(0, 167, 245, 0.1); --lumo-primary-color-10pct: rgba(0, 167, 245, 0.1);
--lumo-primary-color: hsl(199, 100%, 48%); --lumo-primary-color: hsl(199, 100%, 48%);
--lumo-base-color: var(--white);
--lumo-body-text-color: var(--black);
--lumo-secondary-text-color: var(--sectxt);
--lumo-contrast-60pct: var(--vdicon);
} }
.center-box { .center-box {
position: relative; position: relative;
top: 45%; top: 45%;
@ -28,6 +33,7 @@ class SecurityView extends connect(store)(LitElement) {
transform: translate(-50%, 0%); transform: translate(-50%, 0%);
text-align: center; text-align: center;
} }
.q-button { .q-button {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
@ -61,7 +67,7 @@ class SecurityView extends connect(store)(LitElement) {
</p> </p>
<div style="max-width: 500px; display: flex; justify-content: center; margin: auto;"> <div style="max-width: 500px; display: flex; justify-content: center; margin: auto;">
<mwc-icon style="padding: 10px; padding-left:0; padding-top: 42px;">password</mwc-icon> <mwc-icon style="padding: 10px; padding-left:0; padding-top: 42px;">password</mwc-icon>
<vaadin-password-field style="width:100%;" label="Password" id="downloadBackupPassword"></vaadin-password-field> <vaadin-password-field style="width: 100%; color: var(--black);" label="Password" id="downloadBackupPassword"></vaadin-password-field>
</div> </div>
<div style="max-width: 500px; display: flex; justify-content: center; margin: auto;"> <div style="max-width: 500px; display: flex; justify-content: center; margin: auto;">
<div @click=${() => this.downloadBackup()} class="q-button"> Download BackUp File </div> <div @click=${() => this.downloadBackup()} class="q-button"> Download BackUp File </div>

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

@ -28,39 +28,46 @@ class UserSettings extends connect(store)(LitElement) {
max-width: 100vw; max-width: 100vw;
height: 100%; height: 100%;
max-height: 100vh; max-height: 100vh;
background-color: #fff; background-color: var(--white);
color: #333333; color: var(--black);
line-height: 1.6; line-height: 1.6;
} }
.decline { .decline {
--mdc-theme-primary: var(--mdc-theme-error) --mdc-theme-primary: var(--mdc-theme-error)
} }
paper-dialog.userSettings { paper-dialog.userSettings {
width: 100%; width: 100%;
max-width: 100vw; max-width: 100vw;
height: 100%; height: 100%;
max-height: 100vh; max-height: 100vh;
background-color: #fff; background-color: var(--white);
color: #333333; color: var(--black);
line-height: 1.6; line-height: 1.6;
overflow-y: auto; overflow-y: auto;
} }
.actions { .actions {
display:flex; display:flex;
justify-content: space-between; justify-content: space-between;
padding: 0 4em; padding: 0 4em;
margin: 15px 0 -2px 0; margin: 15px 0 -2px 0;
} }
.close-icon { .close-icon {
font-size: 36px; font-size: 36px;
} }
.close-icon:hover { .close-icon:hover {
cursor: pointer; cursor: pointer;
opacity: .6; opacity: .6;
} }
.buttons { .buttons {
text-align:right; text-align:right;
} }
.container { .container {
max-width: 90vw; max-width: 90vw;
margin-left: auto; margin-left: auto;
@ -68,66 +75,78 @@ class UserSettings extends connect(store)(LitElement) {
margin-top: 20px; margin-top: 20px;
padding: .6em; padding: .6em;
} }
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin-bottom: 0; margin-bottom: 0;
} }
.leftBar { .leftBar {
background-color: #fff; background-color: var(--white);
color: #333333; color: var(--black);
border: 1px solid #a1a1a1; border: 1px solid #a1a1a1;
padding: 20px 0 0 0; padding: 20px 0 0 0;
border-radius: 5px; border-radius: 5px;
} }
.leftBar img { .leftBar img {
margin: 0 auto; margin: 0 auto;
width: 75%; width: 75%;
height: 75%; height: 75%;
text-align: center; text-align: center;
} }
.leftBar .slug { .leftBar .slug {
text-align: center; text-align: center;
margin-top: 20px; margin-top: 20px;
color: #333333; color: var(--black);
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
margin-bottom: 7px; margin-bottom: 7px;
} }
.leftBar ul li { .leftBar ul li {
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
} }
.leftBar ul li:last-child { .leftBar ul li:last-child {
border-bottom: none; border-bottom: none;
} }
.leftBar ul li a { .leftBar ul li a {
color: #333333; color: var(--black);
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
text-decoration: none; text-decoration: none;
padding: .9em; padding: .9em;
display: block; display: block;
} }
.leftBar ul li a i { .leftBar ul li a i {
margin-right: 8px; margin-right: 8px;
font-size: 16px; font-size: 16px;
} }
.leftBar ul li a:hover { .leftBar ul li a:hover {
background-color: #f6f6f6; background-color: #f6f6f6;
color: #515151; color: #515151;
} }
.leftBar ul li:active { .leftBar ul li:active {
border-bottom: none; border-bottom: none;
} }
.leftBar ul li a.active { .leftBar ul li a.active {
color: #515151; color: #515151;
background-color: #eee; background-color: #eee;
border-left: 2px solid #515151; border-left: 2px solid #515151;
margin-left: -2px; margin-left: -2px;
} }
.mainPage { .mainPage {
background-color: #fff; background-color: var(--white);
color: #333333; color: var(--black);
border: 1px solid #a1a1a1; border: 1px solid #a1a1a1;
padding: 20px 0 10px 0; padding: 20px 0 10px 0;
border-radius: 5px; border-radius: 5px;
@ -135,40 +154,48 @@ class UserSettings extends connect(store)(LitElement) {
text-align: center; text-align: center;
min-height: 460px; min-height: 460px;
} }
@media(max-width:700px) { @media(max-width:700px) {
.mainPage { .mainPage {
margin-top: 30px; margin-top: 30px;
} }
} }
@media(min-width:765px) { @media(min-width:765px) {
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
.actions { .actions {
display:flex; display:flex;
justify-content: space-between; justify-content: space-between;
padding: 0 4em; padding: 0 4em;
margin: 15px 0 -25px 0; margin: 15px 0 -25px 0;
} }
.container { .container {
padding: 2em; padding: 2em;
} }
.wrapper { .wrapper {
display: grid; display: grid;
grid-template-columns: 1fr 3fr; grid-template-columns: 1fr 3fr;
grid-gap: 30px; grid-gap: 30px;
} }
.wrapper > .mainPage { .wrapper > .mainPage {
padding: 2em; padding: 2em;
} }
.leftBar { .leftBar {
text-align: left; text-align: left;
max-height: 403px; max-height: 403px;
max-width: 400px; max-width: 400px;
font-size: 16px; font-size: 16px;
} }
.mainPage { .mainPage {
font-size: 16px; font-size: 16px;
} }