styles cleanup
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
parent
8c81040aec
commit
dba963a6ce
19 changed files with 59 additions and 246 deletions
|
@ -32,34 +32,3 @@
|
|||
height: $size;
|
||||
background-size: $size $size;
|
||||
}
|
||||
|
||||
@mixin search-input {
|
||||
@include font-size(16);
|
||||
@include line-height(19);
|
||||
outline: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
font-family: inherit;
|
||||
background: var(--background-color);
|
||||
color: var(--highlight-text-color);
|
||||
margin: 0;
|
||||
border-radius: 999px;
|
||||
border: 0;
|
||||
padding-left: 15px;
|
||||
|
||||
// Chrome does not like these concatinated together
|
||||
&::placeholder { color: var(--primary-text-color--faint); }
|
||||
&:-ms-input-placeholder { color: var(--primary-text-color--faint); }
|
||||
&::-ms-input-placeholder { color: var(--primary-text-color--faint); }
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner,
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: 0 !important;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -87,9 +87,9 @@
|
|||
border-bottom: 1px solid var(--brand-color--med);
|
||||
|
||||
&__message {
|
||||
@apply text-gray-900;
|
||||
position: relative;
|
||||
margin-left: 58px;
|
||||
color: var(--primary-text-color);
|
||||
padding: 8px 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 4px;
|
||||
|
@ -109,12 +109,12 @@
|
|||
}
|
||||
|
||||
.account__joined-at {
|
||||
@apply text-gray-400;
|
||||
padding-left: 3px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
color: var(--primary-text-color--faint);
|
||||
|
||||
.svg-icon {
|
||||
padding-right: 3px;
|
||||
|
|
|
@ -14,7 +14,6 @@
|
|||
@import 'fonts';
|
||||
@import 'basics';
|
||||
@import 'accounts';
|
||||
@import 'boost';
|
||||
@import 'loading';
|
||||
@import 'ui';
|
||||
// @import 'introduction';
|
||||
|
|
|
@ -39,9 +39,9 @@ body {
|
|||
}
|
||||
|
||||
&.error {
|
||||
@apply text-gray-400;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
color: var(--primary-text-color--faint);
|
||||
background: var(--brand-color--med);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
@ -83,9 +83,9 @@ noscript {
|
|||
}
|
||||
|
||||
div {
|
||||
@apply text-gray-400;
|
||||
font-size: 14px;
|
||||
margin: 30px auto;
|
||||
color: var(--primary-text-color--faint);
|
||||
max-width: 400px;
|
||||
|
||||
a {
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -7,7 +7,6 @@
|
|||
}
|
||||
|
||||
&--pending {
|
||||
font-style: italic;
|
||||
color: var(--primary-text-color--faint);
|
||||
@apply text-gray-400 italic;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -25,8 +25,8 @@
|
|||
}
|
||||
|
||||
.column-link {
|
||||
@apply text-gray-900;
|
||||
background: var(--brand-color--med);
|
||||
color: var(--primary-text-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
|
@ -44,14 +44,13 @@
|
|||
}
|
||||
|
||||
&--transparent {
|
||||
background: transparent;
|
||||
@apply bg-transparent;
|
||||
color: var(--background-color);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: transparent;
|
||||
color: var(--primary-text-color);
|
||||
@apply text-gray-900 bg-transparent;
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
@ -70,13 +69,12 @@
|
|||
text-decoration: none;
|
||||
|
||||
.fa {
|
||||
margin-left: 10px;
|
||||
@apply ml-2.5;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-text-color--faint);
|
||||
text-decoration: underline;
|
||||
@apply text-gray-400 underline;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -26,9 +26,8 @@
|
|||
}
|
||||
|
||||
&__modifiers {
|
||||
color: var(--primary-text-color);
|
||||
@apply text-gray-900 text-sm;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
background: var(--background-color);
|
||||
}
|
||||
}
|
||||
|
@ -184,7 +183,7 @@
|
|||
background: var(--brand-color);
|
||||
|
||||
.icon-button {
|
||||
color: var(--primary-text-color);
|
||||
@apply text-gray-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,64 +1,47 @@
|
|||
.crypto-address {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@apply flex flex-col p-5;
|
||||
|
||||
&__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
@apply flex items-center mb-1.5;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-weight: bold;
|
||||
@apply font-bold;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
margin-right: 10px;
|
||||
@apply flex items-start justify-center w-6 mr-2.5;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
@apply w-full;
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
@apply flex ml-auto;
|
||||
|
||||
a {
|
||||
color: var(--primary-text-color--faint);
|
||||
margin-left: 8px;
|
||||
@apply text-gray-400 ml-2;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
@apply h-4.5 w-4.5;
|
||||
}
|
||||
}
|
||||
|
||||
&__note {
|
||||
margin-bottom: 10px;
|
||||
@apply mb-2.5;
|
||||
}
|
||||
|
||||
&__qrcode {
|
||||
margin-bottom: 12px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@apply flex items-center justify-center mb-3 p-2.5;
|
||||
}
|
||||
|
||||
&__address {
|
||||
margin-top: auto;
|
||||
@apply mt-auto;
|
||||
}
|
||||
}
|
||||
|
||||
.crypto-donate-modal {
|
||||
.crypto-address {
|
||||
padding: 0;
|
||||
}
|
||||
.crypto-donate-modal .crypto-address {
|
||||
@apply p-0;
|
||||
}
|
||||
|
|
|
@ -1,15 +1,15 @@
|
|||
input[type='text'],
|
||||
textarea {
|
||||
&.standard {
|
||||
@apply border-gray-400;
|
||||
@include font-size(16);
|
||||
@include line-height(18);
|
||||
@include input-placeholder(var(--primary-text-color--faint));
|
||||
@include input-placeholder(#868393);
|
||||
box-sizing: border-box;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid;
|
||||
border-radius: 4px;
|
||||
color: var(--brand-color);
|
||||
border-color: var(--primary-text-color--faint);
|
||||
background: var(--foreground-color);
|
||||
&:focus { outline: none; }
|
||||
}
|
||||
|
|
|
@ -50,10 +50,10 @@
|
|||
}
|
||||
|
||||
.media-gallery__item-thumbnail {
|
||||
@apply text-gray-400;
|
||||
cursor: zoom-in;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: var(--primary-text-color--faint);
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
|
@ -165,8 +165,8 @@
|
|||
}
|
||||
|
||||
.error-modal {
|
||||
@apply text-gray-900;
|
||||
background: var(--background-color);
|
||||
color: var(--primary-text-color);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
@ -231,35 +231,30 @@
|
|||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: var(--primary-text-color--faint);
|
||||
@apply text-gray-400;
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
&.onboarding-modal__done,
|
||||
&.onboarding-modal__next {
|
||||
color: var(--primary-text-color);
|
||||
@apply text-gray-900;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: var(--primary-text-color);
|
||||
@apply text-gray-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions-modal {
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
@apply flex-col relative text-gray-400 overflow-hidden;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--background-color);
|
||||
color: var(--primary-text-color--faint);
|
||||
|
||||
.status__display-name {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
padding-right: 25px;
|
||||
@apply block w-full pr-6;
|
||||
}
|
||||
|
||||
.dropdown-menu__separator {
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
}
|
||||
|
||||
.svg-icon {
|
||||
@apply right-4 rtl:left-4 rtl:right-auto;
|
||||
@apply right-4 rtl:left-4 rtl:right-auto text-gray-400;
|
||||
@include font-size(16);
|
||||
cursor: default;
|
||||
display: inline-block;
|
||||
|
@ -23,7 +23,6 @@
|
|||
z-index: 2;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: var(--primary-text-color--faint);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
||||
|
@ -51,9 +50,9 @@
|
|||
|
||||
.column {
|
||||
.search {
|
||||
@apply border border-solid border-b-gray-900/20;
|
||||
padding: 10px 15px;
|
||||
background-color: var(--foreground-color);
|
||||
border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
|
||||
}
|
||||
|
||||
.search__icon .svg-icon {
|
||||
|
|
|
@ -17,16 +17,16 @@
|
|||
&.light {
|
||||
.display-name {
|
||||
strong {
|
||||
color: var(--primary-text-color);
|
||||
@apply text-gray-900;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--primary-text-color--faint);
|
||||
@apply text-gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
.status__content {
|
||||
color: var(--primary-text-color);
|
||||
@apply text-gray-900;
|
||||
|
||||
a {
|
||||
color: var(--highlight-text-color);
|
||||
|
@ -35,8 +35,7 @@
|
|||
}
|
||||
|
||||
&__meta {
|
||||
font-size: 14px;
|
||||
color: var(--primary-text-color--faint);
|
||||
@apply text-gray-400 text-sm;
|
||||
|
||||
a {
|
||||
color: var(--brand-color);
|
||||
|
|
|
@ -101,7 +101,7 @@ select {
|
|||
}
|
||||
|
||||
.hint {
|
||||
color: var(--primary-text-color--faint);
|
||||
@apply text-gray-400;
|
||||
|
||||
a {
|
||||
color: var(--highlight-text-color);
|
||||
|
@ -120,8 +120,8 @@ select {
|
|||
}
|
||||
|
||||
p.hint {
|
||||
@apply text-gray-400;
|
||||
margin-bottom: 15px;
|
||||
color: var(--primary-text-color--faint);
|
||||
|
||||
&.subtle-hint {
|
||||
text-align: center;
|
||||
|
@ -151,9 +151,9 @@ select {
|
|||
display: flex;
|
||||
|
||||
& > label {
|
||||
@apply text-gray-900;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
color: var(--primary-text-color);
|
||||
font-weight: 500;
|
||||
min-width: 150px;
|
||||
flex: 0 0 auto;
|
||||
|
@ -204,10 +204,10 @@ select {
|
|||
}
|
||||
|
||||
.input.radio_buttons .radio label {
|
||||
@apply text-gray-900;
|
||||
margin-bottom: 5px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
color: var(--primary-text-color);
|
||||
display: block;
|
||||
width: auto;
|
||||
}
|
||||
|
@ -219,8 +219,7 @@ select {
|
|||
input[type=url],
|
||||
input[type=password],
|
||||
textarea {
|
||||
color: var(--primary-text-color--faint);
|
||||
border-color: var(--primary-text-color--faint);
|
||||
@apply text-gray-400 border-gray-400;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -234,7 +233,6 @@ select {
|
|||
@apply border border-solid border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-black dark:text-white;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
color: var(--primary-text-color);
|
||||
display: block;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
|
@ -279,8 +277,7 @@ select {
|
|||
input[type=url][disabled],
|
||||
input[type=password][disabled],
|
||||
textarea[disabled] {
|
||||
color: var(--primary-text-color--faint);
|
||||
border-color: var(--primary-text-color--faint);
|
||||
@apply text-gray-400 border-gray-400;
|
||||
}
|
||||
|
||||
.input.field_with_errors {
|
||||
|
@ -416,9 +413,9 @@ select {
|
|||
|
||||
.simple_form {
|
||||
.warning {
|
||||
@apply text-gray-900;
|
||||
box-sizing: border-box;
|
||||
background: rgba($error-value-color, 0.5);
|
||||
color: var(--primary-text-color);
|
||||
text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
|
||||
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
|
||||
border-radius: 4px;
|
||||
|
@ -426,13 +423,12 @@ select {
|
|||
margin-bottom: 15px;
|
||||
|
||||
a {
|
||||
color: var(--primary-text-color);
|
||||
text-decoration: underline;
|
||||
@apply text-gray-900 underline;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
text-decoration: none;
|
||||
@apply no-underline;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -128,14 +128,7 @@
|
|||
}
|
||||
|
||||
.load-more {
|
||||
display: block;
|
||||
color: var(--primary-text-color);
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 15px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
@apply block w-full m-0 p-4 border-0 box-border text-gray-900 bg-transparent;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
|
@ -152,10 +145,10 @@
|
|||
}
|
||||
|
||||
.regeneration-indicator {
|
||||
@apply text-gray-900;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--primary-text-color);
|
||||
background: var(--accent-color--faint);
|
||||
cursor: default;
|
||||
display: flex;
|
||||
|
@ -177,9 +170,7 @@
|
|||
|
||||
&__label {
|
||||
strong {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
color: var(--primary-text-color);
|
||||
@apply block mb-2.5 text-gray-900;
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
|
@ -29,14 +29,12 @@ body,
|
|||
// Primary variables
|
||||
--brand-color: hsl(var(--brand-color_hsl));
|
||||
--accent-color: hsl(var(--accent-color_hsl));
|
||||
--primary-text-color: var(--gray-900);
|
||||
--background-color: hsl(var(--background-color_hsl));
|
||||
--foreground-color: hsl(var(--foreground-color_hsl));
|
||||
|
||||
// Meta-variables
|
||||
--brand-color_hsl: var(--brand-color_h), var(--brand-color_s), var(--brand-color_l);
|
||||
--accent-color_hsl: var(--accent-color_h), var(--accent-color_s), var(--accent-color_l);
|
||||
--primary-text-color_hsl: var(--primary-text-color_h), var(--primary-text-color_s), var(--primary-text-color_l);
|
||||
--background-color_hsl: var(--background-color_h), var(--background-color_s), var(--background-color_l);
|
||||
--foreground-color_hsl: var(--foreground-color_h), var(--foreground-color_s), var(--foreground-color_l);
|
||||
--accent-color_h: calc(var(--brand-color_h) - 15);
|
||||
|
@ -52,11 +50,6 @@ body,
|
|||
var(--accent-color_s),
|
||||
calc(var(--accent-color_l) + 3%)
|
||||
);
|
||||
--primary-text-color--faint: var(--gray-400);
|
||||
|
||||
// Colors
|
||||
--gray-900: #08051b;
|
||||
--gray-400: #868393;
|
||||
}
|
||||
|
||||
.theme-mode-light {
|
||||
|
@ -68,9 +61,6 @@ body,
|
|||
);
|
||||
|
||||
// Meta-variables
|
||||
--primary-text-color_h: 0;
|
||||
--primary-text-color_s: 0%;
|
||||
--primary-text-color_l: 0%;
|
||||
--background-color_h: 0;
|
||||
--background-color_s: 0%;
|
||||
--background-color_l: 94.9%;
|
||||
|
|
|
@ -3,7 +3,6 @@
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
color: var(--primary-text-color);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
@ -46,17 +45,16 @@
|
|||
}
|
||||
|
||||
&.inverted {
|
||||
color: var(--primary-text-color--faint);
|
||||
opacity: 1;
|
||||
@apply text-gray-400 opacity-100;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: var(--primary-text-color);
|
||||
@apply text-gray-900;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: var(--primary-text-color--faint);
|
||||
@apply text-gray-400;
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
@ -69,9 +67,9 @@
|
|||
}
|
||||
|
||||
&.overlayed {
|
||||
@apply text-gray-400;
|
||||
box-sizing: content-box;
|
||||
background: var(--foreground-color);
|
||||
color: var(--primary-text-color--faint);
|
||||
border-radius: 6px;
|
||||
padding: 2px;
|
||||
opacity: 1;
|
||||
|
@ -189,20 +187,13 @@
|
|||
}
|
||||
|
||||
.setting-text {
|
||||
color: var(--primary-text-color--faint);
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 2px solid var(--brand-color);
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
@apply block w-full mb-2.5 border-0 border-b-2 border-solid box-border text-gray-400 bg-transparent;
|
||||
font-family: inherit;
|
||||
margin-bottom: 10px;
|
||||
padding: 7px 0;
|
||||
width: 100%;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
color: var(--primary-text-color);
|
||||
@apply text-gray-900;
|
||||
border-bottom-color: var(--highlight-text-color);
|
||||
}
|
||||
|
||||
|
|
|
@ -1,56 +1,10 @@
|
|||
// Truth Colors
|
||||
$color-1: #c62828;
|
||||
$color-1-dark: #8e0000;
|
||||
$color-1-light: #ff5f52;
|
||||
$color-2: #e53935;
|
||||
$color-2-dark: #ab000d;
|
||||
$color-2-light: #ff6f60;
|
||||
$color-3: #1a237e;
|
||||
$color-3-dark: #000051;
|
||||
$color-3-light: #534bae;
|
||||
$color-4: #3949ab;
|
||||
$color-4-dark: #00227b;
|
||||
$color-4-light: #6f74dd;
|
||||
$color-5: #37474f;
|
||||
$color-5-dark: #102027;
|
||||
$color-5-light: #62727b;
|
||||
$color-6: #f5f5f5;
|
||||
$color-6-dark: #c2c2c2;
|
||||
$color-6-light: #fff;
|
||||
$color-7: #00e676;
|
||||
$color-7-dark: #00b248;
|
||||
$color-7-light: #66ffa6;
|
||||
$color-8: #ffea00;
|
||||
$color-8-dark: #c7b800;
|
||||
$color-8-light: #ffff56;
|
||||
$color-9: #ffab00;
|
||||
$color-9-dark: #c67c00;
|
||||
$color-9-light: #ffdd4b;
|
||||
|
||||
// BREAKPOINT SETS
|
||||
|
||||
// navigation breakpoints - by default show all elements and link names along with icons
|
||||
|
||||
// turns navigation links into icon-only buttons
|
||||
$nav-breakpoint-1: 850px;
|
||||
// search field hidden and replaced with search icon link
|
||||
$nav-breakpoint-2: 650px;
|
||||
// "Post" button hidden and replaced with floating button on bottom corner
|
||||
$nav-breakpoint-3: 450px;
|
||||
// Site Logo hidden - bare minimum navigation for smallest width devices
|
||||
$nav-breakpoint-4: 375px;
|
||||
|
||||
// Commonly used web colors
|
||||
|
||||
$success-green: #79bd9a !default; // Padua
|
||||
$error-red: #df405a !default; // Cerise
|
||||
$warning-red: #ff5050 !default; // Sunset Orange
|
||||
$gold-star: #ca8f04 !default; // Dark Goldenrod
|
||||
|
||||
// Variables for defaults in UI
|
||||
$base-shadow-color: #000 !default;
|
||||
$base-overlay-background: #000 !default;
|
||||
$valid-value-color: $success-green !default;
|
||||
$error-value-color: $error-red !default;
|
||||
|
||||
// Language codes that uses CJK fonts
|
||||
|
@ -68,8 +22,5 @@ $no-gap-breakpoint: 415px;
|
|||
// NOTE: Prefer CSS variables whenever possible.
|
||||
// They're future-proof and more flexible.
|
||||
:root {
|
||||
--thumb-navigation-base-height: 60px;
|
||||
--thumb-navigation-height: calc(
|
||||
var(--thumb-navigation-base-height) + env(safe-area-inset-bottom)
|
||||
);
|
||||
--thumb-navigation-height: calc(60px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue