Dark mode (improved) #2586
22 changed files with 129 additions and 61 deletions
|
@ -9,7 +9,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
color: lighten($lbry-teal-5, 60%);
|
color: var(--dm-color-01);
|
||||||
background-color: rgba($lbry-teal-5, 0.3);
|
background-color: rgba($lbry-teal-5, 0.3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,8 +7,8 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
background-color: lighten($lbry-black, 5%);
|
background-color: var(--dm-color-05);
|
||||||
box-shadow: var(--card-box-shadow) darken($lbry-gray-1, 80%);
|
box-shadow: var(--card-box-shadow) darken($lbry-gray-1, 80%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -30,6 +30,10 @@
|
||||||
checkbox-element input[type='checkbox']:checked + label {
|
checkbox-element input[type='checkbox']:checked + label {
|
||||||
color: $lbry-white;
|
color: $lbry-white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[data-mode='dark'] & {
|
||||||
|
color: var(--dm-color-01);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.claim-list__header--small {
|
.claim-list__header--small {
|
||||||
|
@ -51,6 +55,10 @@
|
||||||
border: 1px solid $lbry-white;
|
border: 1px solid $lbry-white;
|
||||||
color: $lbry-white;
|
color: $lbry-white;
|
||||||
background-color: lighten($lbry-black, 10%);
|
background-color: lighten($lbry-black, 10%);
|
||||||
|
|
||||||
|
[data-mode='dark'] & {
|
||||||
|
color: var(--dm-color-01);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.claim-list__header,
|
.claim-list__header,
|
||||||
|
@ -58,7 +66,7 @@
|
||||||
background-color: lighten($lbry-black, 10%);
|
background-color: lighten($lbry-black, 10%);
|
||||||
|
|
||||||
[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
background-color: darken($lbry-black, 10%);
|
background-color: var(--dm-color-07);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -85,7 +93,7 @@
|
||||||
background-color: darken($lbry-white, 5%);
|
background-color: darken($lbry-white, 5%);
|
||||||
|
|
||||||
[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
background-color: lighten($lbry-black, 10%);
|
background-color: var(--dm-color-04);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -94,11 +102,23 @@
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin-right: var(--spacing-medium);
|
margin-right: var(--spacing-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ul & {
|
||||||
|
&:first-of-type {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.claim-preview--injected,
|
.claim-preview--injected,
|
||||||
.claim-preview {
|
.claim-preview {
|
||||||
border-bottom: 1px solid rgba($lbry-teal-5, 0.1);
|
border-bottom: 1px solid rgba($lbry-teal-5, 0.1);
|
||||||
|
|
||||||
|
[data-mode='dark'] & {
|
||||||
|
color: $lbry-white;
|
||||||
|
border-top: 1px solid var(--dm-color-04);
|
||||||
|
background-color: var(--dm-color-05);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.claim-preview--large {
|
.claim-preview--large {
|
||||||
|
|
|
@ -3,8 +3,8 @@
|
||||||
margin-bottom: var(--spacing-medium);
|
margin-bottom: var(--spacing-medium);
|
||||||
padding-bottom: var(--spacing-medium);
|
padding-bottom: var(--spacing-medium);
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
border-color: rgba($lbry-gray-5, 0.2);
|
border-color: var(--dm-color-04);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -33,8 +33,8 @@
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
background-image: linear-gradient(to bottom, transparent 0%, $lbry-black 90%);
|
background-image: linear-gradient(to bottom, transparent 0%, var(--dm-color-08) 90%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
.icon {
|
.icon {
|
||||||
stroke: rgba($lbry-black, 0.5);
|
stroke: rgba($lbry-black, 0.5);
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
stroke: rgba($lbry-white, 0.7);
|
stroke: rgba($lbry-white, 0.7);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
border: 1px solid rgba($lbry-gray-1, 0.3);
|
border: 1px solid rgba($lbry-gray-1, 0.3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -16,7 +16,7 @@
|
||||||
.document-viewer {
|
.document-viewer {
|
||||||
background-color: $lbry-white;
|
background-color: $lbry-white;
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -255,7 +255,7 @@ fieldset-section {
|
||||||
input:not(:focus):not(.form-field--copyable),
|
input:not(:focus):not(.form-field--copyable),
|
||||||
textarea:not(:focus),
|
textarea:not(:focus),
|
||||||
select:not(:focus) {
|
select:not(:focus) {
|
||||||
border-color: $lbry-gray-4;
|
border-color: var(--dm-color-04);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -270,7 +270,7 @@ fieldset-section {
|
||||||
user-select: text;
|
user-select: text;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
background-color: rgba($lbry-white, 0.3);
|
background-color: rgba($lbry-white, 0.3);
|
||||||
border-color: $lbry-gray-5;
|
border-color: $lbry-gray-5;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
|
|
@ -9,9 +9,9 @@
|
||||||
padding-left: var(--spacing-large);
|
padding-left: var(--spacing-large);
|
||||||
padding-right: var(--spacing-large);
|
padding-right: var(--spacing-large);
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
background-color: mix($lbry-black, $lbry-gray-3, 90%);
|
background-color: var(--dm-color-05);
|
||||||
color: $lbry-white;
|
color: var(--dm-color-01);
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
box-shadow: var(--card-box-shadow) $lbry-black;
|
box-shadow: var(--card-box-shadow) $lbry-black;
|
||||||
}
|
}
|
||||||
|
@ -71,14 +71,14 @@
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
background-color: $lbry-teal-3;
|
background-color: $lbry-teal-3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: dark
|
// TODO: dark
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $lbry-teal-3;
|
color: $lbry-teal-3;
|
||||||
|
|
||||||
|
@ -88,7 +88,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
stroke: $lbry-white;
|
stroke: var(--dm-color-01);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
margin-bottom: var(--spacing-large);
|
margin-bottom: var(--spacing-large);
|
||||||
padding: var(--spacing-large);
|
padding: var(--spacing-large);
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
background-color: rgba($lbry-white, 0.1);
|
background-color: rgba($lbry-white, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -37,7 +37,7 @@
|
||||||
.item-list__row--selected {
|
.item-list__row--selected {
|
||||||
background-color: rgba($lbry-black, 0.1);
|
background-color: rgba($lbry-black, 0.1);
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
background-color: rgba($lbry-black, 0.5);
|
background-color: rgba($lbry-black, 0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
background-color: $lbry-black;
|
background-color: var(--dm-color-08);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
text-decoration-style: dotted;
|
text-decoration-style: dotted;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
border-left: 1px solid rgba($lbry-white, 0.2);
|
border-left: 1px solid rgba($lbry-white, 0.2);
|
||||||
border-right: 1px solid rgba($lbry-white, 0.2);
|
border-right: 1px solid rgba($lbry-white, 0.2);
|
||||||
border-bottom: 1px solid rgba($lbry-white, 0.2);
|
border-bottom: 1px solid rgba($lbry-white, 0.2);
|
||||||
|
@ -93,7 +93,7 @@
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
background-color: rgba($lbry-white, 0.2);
|
background-color: rgba($lbry-white, 0.2);
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
@ -126,7 +126,7 @@
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
padding: var(--spacing-medium) 0; // overriding styles from elsewhere
|
padding: var(--spacing-medium) 0; // overriding styles from elsewhere
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -57,17 +57,9 @@
|
||||||
|
|
||||||
// Horizontal Rule
|
// Horizontal Rule
|
||||||
hr {
|
hr {
|
||||||
width: 100%;
|
|
||||||
height: 1px;
|
|
||||||
|
|
||||||
background-color: $lbry-gray-1;
|
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 1rem;
|
top: 1rem;
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
|
||||||
background-color: rgba($lbry-gray-5, 0.2);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Code
|
// Code
|
||||||
|
|
|
@ -34,8 +34,8 @@
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
background-color: rgba($lbry-white, 0.1);
|
background-color: var(--dm-color-04);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -173,7 +173,7 @@
|
||||||
.media__info {
|
.media__info {
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
border-color: rgba($lbry-gray-5, 0.2);
|
border-color: rgba($lbry-gray-5, 0.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -182,7 +182,7 @@
|
||||||
border-top: 1px solid $lbry-gray-1;
|
border-top: 1px solid $lbry-gray-1;
|
||||||
margin-top: var(--spacing-medium);
|
margin-top: var(--spacing-medium);
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
border-color: rgba($lbry-gray-5, 0.2);
|
border-color: rgba($lbry-gray-5, 0.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -231,7 +231,7 @@
|
||||||
.media__text {
|
.media__text {
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
color: $lbry-white;
|
color: $lbry-white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
background-color: rgba($lbry-black, 0.7);
|
background-color: rgba($lbry-black, 0.7);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -29,7 +29,7 @@
|
||||||
min-width: 500px;
|
min-width: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
background-color: $lbry-black;
|
background-color: $lbry-black;
|
||||||
border-color: $lbry-gray-5;
|
border-color: $lbry-gray-5;
|
||||||
}
|
}
|
||||||
|
@ -41,7 +41,7 @@
|
||||||
.button.button--alt {
|
.button.button--alt {
|
||||||
background-color: $lbry-white; // Set modal buttons bg color
|
background-color: $lbry-white; // Set modal buttons bg color
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -55,14 +55,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
color: $lbry-gray-1;
|
color: var(--dm-color-01);
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
color: $lbry-gray-1;
|
color: var(--dm-color-01);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&.navigation__link--active {
|
&.navigation__link--active {
|
||||||
color: $lbry-teal-4;
|
color: $lbry-teal-4;
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
color: $lbry-teal-4;
|
color: $lbry-teal-4;
|
||||||
}
|
}
|
||||||
|
@ -111,7 +113,7 @@
|
||||||
&::before {
|
&::before {
|
||||||
background-color: $lbry-black;
|
background-color: $lbry-black;
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
color: $lbry-gray-1;
|
color: $lbry-gray-1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -41,6 +41,10 @@
|
||||||
.spinner--light {
|
.spinner--light {
|
||||||
.rect {
|
.rect {
|
||||||
background-color: $lbry-white;
|
background-color: $lbry-white;
|
||||||
|
|
||||||
|
[data-mode='dark'] & {
|
||||||
|
background-color: var(--dm-color-01);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -74,7 +74,7 @@ $main: $lbry-teal-5;
|
||||||
padding-left: 0.5rem;
|
padding-left: 0.5rem;
|
||||||
padding-top: 0.7rem;
|
padding-top: 0.7rem;
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
border-color: rgba($lbry-white, 0.1);
|
border-color: rgba($lbry-white, 0.1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -26,7 +26,7 @@
|
||||||
background-color: $lbry-blue-2;
|
background-color: $lbry-blue-2;
|
||||||
color: $lbry-black;
|
color: $lbry-black;
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
background-color: $lbry-blue-4;
|
background-color: $lbry-blue-4;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
@ -57,12 +57,12 @@
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
|
background-color: var(--dm-color-03);
|
||||||
color: $lbry-white;
|
color: $lbry-white;
|
||||||
background-color: darken($lbry-gray-5, 20%);
|
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: $lbry-gray-1;
|
color: var(--dm-color-02);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -73,7 +73,7 @@
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
background-color: $lbry-gray-5;
|
background-color: $lbry-gray-5;
|
||||||
color: $lbry-white;
|
color: $lbry-white;
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,6 +7,10 @@ html {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
&[data-mode='dark'] {
|
||||||
|
background-color: var(--dm-color-08);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
@ -19,9 +23,9 @@ body {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: mix($lbry-white, $lbry-gray-1, 70%);
|
background-color: mix($lbry-white, $lbry-gray-1, 70%);
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
background-color: $lbry-black;
|
background-color: var(--dm-color-08);
|
||||||
color: mix($lbry-white, $lbry-gray-3, 50%);
|
color: var(--dm-color-01);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -44,6 +48,16 @@ code {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background-color: $lbry-gray-1;
|
||||||
|
|
||||||
|
[data-mode='dark'] & {
|
||||||
|
background-color: var(--dm-color-04);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.columns {
|
.columns {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
@ -111,7 +125,7 @@ code {
|
||||||
color: $lbry-red-3;
|
color: $lbry-red-3;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
color: $lbry-red-1;
|
color: $lbry-red-1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -132,7 +146,8 @@ code {
|
||||||
margin-bottom: var(--spacing-medium);
|
margin-bottom: var(--spacing-medium);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
|
background-color: var(--dm-color-06);
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -156,7 +171,7 @@ code {
|
||||||
color: $altered-hover-color;
|
color: $altered-hover-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
color: $altered-color;
|
color: $altered-color;
|
||||||
border-bottom: 1px solid $altered-color;
|
border-bottom: 1px solid $altered-color;
|
||||||
|
|
||||||
|
@ -167,7 +182,7 @@ code {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
background-color: $lbry-yellow-3;
|
background-color: $lbry-yellow-3;
|
||||||
color: $lbry-black;
|
color: $lbry-black;
|
||||||
}
|
}
|
||||||
|
@ -177,7 +192,7 @@ code {
|
||||||
color: $lbry-gray-5;
|
color: $lbry-gray-5;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
|
|
||||||
html[data-mode='dark'] & {
|
[data-mode='dark'] & {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -212,3 +227,25 @@ code {
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
fieldset,
|
||||||
|
.fieldset {
|
||||||
|
[data-mode='dark'] & {
|
||||||
|
border-top-color: var(--dm-color-04);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
[data-mode='dark'] & {
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkbox-toggle,
|
||||||
|
.checkbox-toggle,
|
||||||
|
radio-toggle,
|
||||||
|
.radio-toggle {
|
||||||
|
[data-mode='dark'] & {
|
||||||
|
border-color: var(--dm-color-04);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -2,6 +2,10 @@
|
||||||
animation: pulse 2s infinite ease-in-out;
|
animation: pulse 2s infinite ease-in-out;
|
||||||
background-color: $lbry-gray-1;
|
background-color: $lbry-gray-1;
|
||||||
border-radius: var(--card-radius);
|
border-radius: var(--card-radius);
|
||||||
|
|
||||||
|
[data-mode='dark'] & {
|
||||||
|
background-color: var(--dm-color-04);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin mediaThumbHoverZoom {
|
@mixin mediaThumbHoverZoom {
|
||||||
|
|
|
@ -26,6 +26,16 @@ $large-breakpoint: 1921px;
|
||||||
// Color
|
// Color
|
||||||
--color-background: #270f34;
|
--color-background: #270f34;
|
||||||
|
|
||||||
|
// Dark Mode
|
||||||
|
--dm-color-01: #ddd;
|
||||||
|
--dm-color-02: #90908f;
|
||||||
|
--dm-color-03: #6a6a6a;
|
||||||
|
--dm-color-04: #555254;
|
||||||
|
--dm-color-05: #353434;
|
||||||
|
--dm-color-06: #2e2d2e;
|
||||||
|
--dm-color-07: #252424;
|
||||||
|
--dm-color-08: #1e1e1e;
|
||||||
|
|
||||||
// Text
|
// Text
|
||||||
--text-max-width: 660px;
|
--text-max-width: 660px;
|
||||||
--text-link-padding: 4px;
|
--text-link-padding: 4px;
|
||||||
|
|
|
@ -458,8 +458,7 @@
|
||||||
"This will appear as a tip for \"Original LBRY porn - Nude Hot Girl masturbates FREE\".": "This will appear as a tip for \"Original LBRY porn - Nude Hot Girl masturbates FREE\".",
|
"This will appear as a tip for \"Original LBRY porn - Nude Hot Girl masturbates FREE\".": "This will appear as a tip for \"Original LBRY porn - Nude Hot Girl masturbates FREE\".",
|
||||||
"You sent 25 LBC as a tip, Mahalo!": "You sent 25 LBC as a tip, Mahalo!",
|
"You sent 25 LBC as a tip, Mahalo!": "You sent 25 LBC as a tip, Mahalo!",
|
||||||
"LBRY names cannot contain that symbol ($, #, @)": "LBRY names cannot contain that symbol ($, #, @)",
|
"LBRY names cannot contain that symbol ($, #, @)": "LBRY names cannot contain that symbol ($, #, @)",
|
||||||
"Invalid character %s in name: %s.": "Invalid character %s in name: %s.",
|
|
||||||
"Path copied.": "Path copied.",
|
"Path copied.": "Path copied.",
|
||||||
"Open Folder": "Open Folder",
|
"Open Folder": "Open Folder",
|
||||||
"Create Backup": "Create Backup"
|
"Create Backup": "Create Backup"
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue