mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Emoji mart styling

stable/1.0.x
Alex Gleason 2020-06-02 18:31:55 -05:00
rodzic d5fba20091
commit 8159a7edc7
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
11 zmienionych plików z 68 dodań i 59 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

4
app/soapbox/features/ui/components/compose_modal.js
Wyświetl plik

@ -59,9 +59,7 @@ class ComposeModal extends ImmutablePureComponent {
<IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} /> <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
</div> </div>
<div className='compose-modal__content compose-modal__content--scroll'> <div className='compose-modal__content compose-modal__content--scroll'>
<div className='timeline-compose-block'> <ComposeFormContainer />
<ComposeFormContainer />
</div>
</div> </div>
</div> </div>
); );

4
app/styles/about.scss
Wyświetl plik

@ -841,7 +841,7 @@ $small-breakpoint: 960px;
width: 100%; width: 100%;
height: 0; height: 0;
border: 0; border: 0;
border-bottom: 1px solid rgba(var(--background-color), .6); border-bottom: 1px solid rgba(var(--background-color-rgb), .6);
margin: 2em 0; margin: 2em 0;
&.spacer { &.spacer {
@ -1095,7 +1095,7 @@ $small-breakpoint: 960px;
width: 100%; width: 100%;
height: 0; height: 0;
border: 0; border: 0;
border-bottom: 1px solid rgba(var(--background-color), .6); border-bottom: 1px solid rgba(var(--background-color-rgb), .6);
margin: 20px 0; margin: 20px 0;
&.spacer { &.spacer {

8
app/styles/accounts.scss
Wyświetl plik

@ -116,7 +116,7 @@
} }
.current { .current {
background: $simple-background-color; background: var(--foreground-color);
border-radius: 100px; border-radius: 100px;
color: var(--inverted-text-color); color: var(--inverted-text-color);
cursor: default; cursor: default;
@ -206,8 +206,8 @@
line-height: 12px; line-height: 12px;
font-weight: 500; font-weight: 500;
color: var(--background-color); color: var(--background-color);
background-color: rgba(var(--background-color), 0.1); background-color: rgba(var(--background-color-rgb), 0.1);
border: 1px solid rgba(var(--background-color), 0.5); border: 1px solid rgba(var(--background-color-rgb), 0.5);
&.moderator { &.moderator {
color: $success-green; color: $success-green;
@ -252,7 +252,7 @@
width: 120px; width: 120px;
flex: 0 0 auto; flex: 0 0 auto;
color: var(--primary-text-color-faint); color: var(--primary-text-color-faint);
background: rgba(var(--background-color), 0.5); background: rgba(var(--background-color-rgb), 0.5);
} }
dd { dd {

36
app/styles/components.scss
Wyświetl plik

@ -279,7 +279,7 @@
height: 0; height: 0;
width: 0; width: 0;
border-top: 11px solid transparent; border-top: 11px solid transparent;
border-right: 12px solid #fff; border-right: 12px solid var(--background-color);
border-bottom: 11px solid transparent; border-bottom: 11px solid transparent;
border-left: 11px solid transparent; border-left: 11px solid transparent;
left: -22px; left: -22px;
@ -317,7 +317,7 @@
.reply-indicator { .reply-indicator {
border-radius: 4px; border-radius: 4px;
margin-bottom: 10px; margin-bottom: 10px;
background: var(--background-color); background: var(--brand-color-faint);
padding: 10px; padding: 10px;
min-height: 23px; min-height: 23px;
overflow-y: auto; overflow-y: auto;
@ -338,13 +338,17 @@
} }
.reply-indicator__display-name { .reply-indicator__display-name {
color: var(--inverted-text-color); color: var(--primary-text-color);
display: block; display: block;
max-width: 100%; max-width: 100%;
line-height: 24px; line-height: 24px;
overflow: hidden; overflow: hidden;
padding-right: 25px; padding-right: 25px;
text-decoration: none; text-decoration: none;
.display-name__account {
color: var(--primary-text-color-faint);
}
} }
.reply-indicator__display-avatar { .reply-indicator__display-avatar {
@ -1902,7 +1906,7 @@ a.account__display-name {
height: 22px; height: 22px;
border: 1px solid var(--brand-color-med); border: 1px solid var(--brand-color-med);
border-radius: 50%; border-radius: 50%;
background-color: darken($simple-background-color, 2%); background-color: var(--background-color);
box-sizing: border-box; box-sizing: border-box;
transition: all 0.25s ease; transition: all 0.25s ease;
transition-property: border-color, left; transition-property: border-color, left;
@ -3000,10 +3004,9 @@ a.status-card.compact:hover {
} }
.emoji-picker-dropdown__menu { .emoji-picker-dropdown__menu {
background: $simple-background-color; @include standard-panel;
background: var(--foreground-color);
position: absolute; position: absolute;
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
border-radius: 4px;
margin-top: 5px; margin-top: 5px;
z-index: 20000; z-index: 20000;
@ -3028,7 +3031,7 @@ a.status-card.compact:hover {
z-index: 4; z-index: 4;
top: -4px; top: -4px;
left: -8px; left: -8px;
background: $simple-background-color; background: var(--foreground-color);
border-radius: 4px; border-radius: 4px;
box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2); box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
overflow: hidden; overflow: hidden;
@ -3043,7 +3046,7 @@ a.status-card.compact:hover {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: rgba(var(--background-color), 0.4); background: rgba(var(--background-color-rgb), 0.4);
} }
} }
@ -3192,7 +3195,7 @@ a.status-card.compact:hover {
.privacy-dropdown__dropdown { .privacy-dropdown__dropdown {
position: absolute; position: absolute;
background: $simple-background-color; background: var(--foreground-color);
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
border-radius: 4px; border-radius: 4px;
margin-left: 40px; margin-left: 40px;
@ -3260,7 +3263,7 @@ a.status-card.compact:hover {
.privacy-dropdown.active { .privacy-dropdown.active {
.privacy-dropdown__value { .privacy-dropdown__value {
background: $simple-background-color; background: var(--foreground-color);
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
@ -4837,10 +4840,7 @@ noscript {
&__header { &__header {
display: block; display: block;
position: relative; position: relative;
border-bottom: 1px solid var(--background-color); padding: 5px 0;
border-radius: 6px 6px 0 0;
padding-top: 12px;
padding-bottom: 12px;
&__title { &__title {
display: block; display: block;
@ -4849,7 +4849,7 @@ noscript {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
line-height: 24px; line-height: 24px;
color: var(--background-color); color: var(--primary-text-color);
text-align: center; text-align: center;
} }
} }
@ -4857,7 +4857,7 @@ noscript {
&__close { &__close {
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 10px; top: 5px;
color: #999; color: #999;
} }
@ -4876,7 +4876,7 @@ noscript {
.timeline-compose-block { .timeline-compose-block {
background: transparent !important; background: transparent !important;
width: 100%; width: 100%;
padding: 10px 5px; padding: 0;
margin-bottom: 0; margin-bottom: 0;
.compose-form { .compose-form {

26
app/styles/components/compose-form.scss
Wyświetl plik

@ -1,5 +1,4 @@
.compose-form { .compose-form {
padding: 10px;
&__sensitive-button { &__sensitive-button {
padding: 10px; padding: 10px;
@ -97,16 +96,22 @@
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
margin: 0; margin: 0;
color: var(--inverted-text-color); background: var(--background-color);
background: #f2f2f2; color: var(--primary-text-color);
padding: 10px; padding: 10px;
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 16px;
resize: vertical; resize: vertical;
border: 0; border: 0;
outline: 0; outline: 0;
&:focus {outline: 0;}
@media screen and (max-width: 600px) {font-size: 16px;} &:focus {
outline: 0;
}
@media screen and (max-width: 600px) {
font-size: 16px;
}
} }
.spoiler-input__input {border-radius: 4px;} .spoiler-input__input {border-radius: 4px;}
@ -184,13 +189,16 @@
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
.autosuggest-account .display-name__account {color: var(--highlight-text-color);}
.autosuggest-account .display-name__account {
color: var(--highlight-text-color-faint);
}
.compose-form__modifiers { .compose-form__modifiers {
color: var(--inverted-text-color); color: var(--inverted-text-color);
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
background: $simple-background-color; background: var(--foreground-color);
.compose-form__upload-wrapper {overflow: hidden;} .compose-form__upload-wrapper {overflow: hidden;}
.compose-form__uploads-wrapper { .compose-form__uploads-wrapper {
@ -200,7 +208,7 @@
&.contains-media { &.contains-media {
padding: 5px; padding: 5px;
border-top: 1px solid darken($simple-background-color, 8%); border-top: 1px solid var(--foreground-color);
} }
} }

20
app/styles/emoji_picker.scss
Wyświetl plik

@ -1,7 +1,7 @@
.emoji-mart { .emoji-mart {
font-size: 13px; font-size: 13px;
display: inline-block; display: inline-block;
color: var(--inverted-text-color); color: var(--primary-text-color);
&, &,
* { * {
@ -21,7 +21,6 @@
border-bottom-width: 1px; border-bottom-width: 1px;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
background: var(--background-color);
} }
&:last-child { &:last-child {
@ -36,7 +35,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 6px; padding: 0 6px;
color: var(--highlight-text-color); color: var(--primary-text-color-faint);
line-height: 0; line-height: 0;
} }
@ -93,7 +92,7 @@
height: 270px; height: 270px;
max-height: 35vh; max-height: 35vh;
padding: 0 6px 6px; padding: 0 6px 6px;
background: $simple-background-color; background: var(--foreground-color);
will-change: transform; will-change: transform;
&::-webkit-scrollbar-track:hover, &::-webkit-scrollbar-track:hover,
@ -105,7 +104,7 @@
.emoji-mart-search { .emoji-mart-search {
padding: 10px; padding: 10px;
padding-right: 45px; padding-right: 45px;
background: $simple-background-color; background: var(--foreground-color);
input { input {
font-size: 14px; font-size: 14px;
@ -114,10 +113,9 @@
font-family: inherit; font-family: inherit;
display: block; display: block;
width: 100%; width: 100%;
background: rgba(var(--background-color), 0.3); background: var(--background-color);
color: var(--inverted-text-color); border: 1px solid var(--brand-color-faint);
border: 1px solid var(--background-color); border-radius: 9999px;
border-radius: 4px;
&::-moz-focus-inner { &::-moz-focus-inner {
border: 0; border: 0;
@ -148,7 +146,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(var(--background-color), 0.7); background-color: rgba(var(--background-color-rgb), 0.7);
border-radius: 100%; border-radius: 100%;
} }
} }
@ -165,7 +163,7 @@
width: 100%; width: 100%;
font-weight: 500; font-weight: 500;
padding: 5px 6px; padding: 5px 6px;
background: $simple-background-color; background: var(--foreground-color);
} }
} }

4
app/styles/forms.scss
Wyświetl plik

@ -471,7 +471,7 @@ code {
right: 0; right: 0;
bottom: 1px; bottom: 1px;
width: 5px; width: 5px;
background-image: linear-gradient(to right, rgba(var(--background-color), 0), var(--background-color)); background-image: linear-gradient(to right, rgba(var(--background-color-rgb), 0), var(--background-color));
} }
} }
} }
@ -664,7 +664,7 @@ code {
.qr-code { .qr-code {
flex: 0 0 auto; flex: 0 0 auto;
background: $simple-background-color; background: var(--foreground-color);
padding: 4px; padding: 4px;
margin: 0 10px 20px 0; margin: 0 10px 20px 0;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);

12
app/styles/polls.scss
Wyświetl plik

@ -51,8 +51,8 @@
display: block; display: block;
outline: 0; outline: 0;
font-family: inherit; font-family: inherit;
background: $simple-background-color; background: var(--foreground-color);
border: 1px solid darken($simple-background-color, 14%); border: 1px solid var(--foreground-color);
border-radius: 4px; border-radius: 4px;
padding: 6px 10px; padding: 6px 10px;
@ -142,14 +142,14 @@
} }
.compose-form__poll-wrapper { .compose-form__poll-wrapper {
border-top: 1px solid darken($simple-background-color, 8%); border-top: 1px solid var(--foreground-color);
ul { ul {
padding: 10px; padding: 10px;
} }
.poll__footer { .poll__footer {
border-top: 1px solid darken($simple-background-color, 8%); border-top: 1px solid var(--foreground-color);
padding: 10px; padding: 10px;
margin: -5px 0 0 -5px; margin: -5px 0 0 -5px;
@ -190,7 +190,7 @@
width: auto; width: auto;
outline: 0; outline: 0;
font-family: inherit; font-family: inherit;
background-color: $simple-background-color; background-color: var(--foreground-color);
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{rgba(#0482d8, 0.999)}'/></svg>"); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{rgba(#0482d8, 0.999)}'/></svg>");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right 8px center; background-position: right 8px center;
@ -202,7 +202,7 @@
} }
.icon-button.disabled { .icon-button.disabled {
color: darken($simple-background-color, 14%); color: var(--foreground-color);
} }
} }

2
app/styles/rtl.scss
Wyświetl plik

@ -238,7 +238,7 @@ body.rtl {
&::after { &::after {
right: auto; right: auto;
left: 0; left: 0;
background-image: linear-gradient(to left, rgba(var(--background-color), 0), var(--background-color)); background-image: linear-gradient(to left, rgba(var(--background-color-rgb), 0), var(--background-color));
} }
} }

10
app/styles/themes.scss
Wyświetl plik

@ -16,13 +16,17 @@ body {
calc(255 - var(--primary-text-color-g)), calc(255 - var(--primary-text-color-g)),
calc(255 - var(--primary-text-color-b)) calc(255 - var(--primary-text-color-b))
); );
--background-color-rgb: var(--background-color-r), var(--background-color-g), var(--background-color-b);
--background-color: rgb(var(--background-color-rgb));
} }
body.theme-mode-light { body.theme-mode-light {
--primary-text-color-r: 0; --primary-text-color-r: 0;
--primary-text-color-g: 0; --primary-text-color-g: 0;
--primary-text-color-b: 0; --primary-text-color-b: 0;
--background-color: #f2f2f2; --background-color-r: 242;
--background-color-g: 242;
--background-color-b: 242;
--foreground-color: #ffffff; --foreground-color: #ffffff;
--highlight-text-color: rgb( --highlight-text-color: rgb(
calc(var(--brand-color-r) - 25), calc(var(--brand-color-r) - 25),
@ -40,7 +44,9 @@ body.theme-mode-dark {
--primary-text-color-r: 255; --primary-text-color-r: 255;
--primary-text-color-g: 255; --primary-text-color-g: 255;
--primary-text-color-b: 255; --primary-text-color-b: 255;
--background-color: #333333; --background-color-r: 51;
--background-color-g: 51;
--background-color-b: 51;
--foreground-color: #222222; --foreground-color: #222222;
--highlight-text-color: rgb( --highlight-text-color: rgb(
calc(var(--brand-color-r) + 25), calc(var(--brand-color-r) + 25),

1
app/styles/variables.scss
Wyświetl plik

@ -21,7 +21,6 @@ $gold-star: #ca8f04 !default; // Dark Goldenrod
// Variables for defaults in UI // Variables for defaults in UI
$base-shadow-color: #000000 !default; $base-shadow-color: #000000 !default;
$base-overlay-background: #000000 !default; $base-overlay-background: #000000 !default;
$simple-background-color: #ffffff !default;
$valid-value-color: $success-green !default; $valid-value-color: $success-green !default;
$error-value-color: $error-red !default; $error-value-color: $error-red !default;