Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
environments/review-mastodon-g-0qbqe2/deployments/1817
marcin mikołajczak 2022-12-21 21:01:57 +01:00
rodzic 8c81040aec
commit dba963a6ce
19 zmienionych plików z 59 dodań i 246 usunięć

Wyświetl plik

@ -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;
}
}

Wyświetl plik

@ -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;

Wyświetl plik

@ -14,7 +14,6 @@
@import 'fonts';
@import 'basics';
@import 'accounts';
@import 'boost';
@import 'loading';
@import 'ui';
// @import 'introduction';

Wyświetl plik

@ -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

Wyświetl plik

@ -7,7 +7,6 @@
}
&--pending {
font-style: italic;
color: var(--primary-text-color--faint);
@apply text-gray-400 italic;
}
}

Wyświetl plik

@ -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;
}
}

Wyświetl plik

@ -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;
}
}
}

Wyświetl plik

@ -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;
}

Wyświetl plik

@ -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; }
}

Wyświetl plik

@ -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;

Wyświetl plik

@ -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 {

Wyświetl plik

@ -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 {

Wyświetl plik

@ -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);

Wyświetl plik

@ -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;
}
}

Wyświetl plik

@ -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 {

Wyświetl plik

@ -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%;

Wyświetl plik

@ -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);
}

Wyświetl plik

@ -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));
}