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} />
</div>
<div className='compose-modal__content compose-modal__content--scroll'>
<div className='timeline-compose-block'>
<ComposeFormContainer />
</div>
<ComposeFormContainer />
</div>
</div>
);

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

@ -841,7 +841,7 @@ $small-breakpoint: 960px;
width: 100%;
height: 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;
&.spacer {
@ -1095,7 +1095,7 @@ $small-breakpoint: 960px;
width: 100%;
height: 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;
&.spacer {

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

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

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

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

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

@ -1,5 +1,4 @@
.compose-form {
padding: 10px;
&__sensitive-button {
padding: 10px;
@ -97,16 +96,22 @@
box-sizing: border-box;
width: 100%;
margin: 0;
color: var(--inverted-text-color);
background: #f2f2f2;
background: var(--background-color);
color: var(--primary-text-color);
padding: 10px;
font-family: inherit;
font-size: 14px;
font-size: 16px;
resize: vertical;
border: 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;}
@ -184,13 +189,16 @@
width: 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 {
color: var(--inverted-text-color);
font-family: inherit;
font-size: 14px;
background: $simple-background-color;
background: var(--foreground-color);
.compose-form__upload-wrapper {overflow: hidden;}
.compose-form__uploads-wrapper {
@ -200,7 +208,7 @@
&.contains-media {
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 {
font-size: 13px;
display: inline-block;
color: var(--inverted-text-color);
color: var(--primary-text-color);
&,
* {
@ -21,7 +21,6 @@
border-bottom-width: 1px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: var(--background-color);
}
&:last-child {
@ -36,7 +35,7 @@
display: flex;
justify-content: space-between;
padding: 0 6px;
color: var(--highlight-text-color);
color: var(--primary-text-color-faint);
line-height: 0;
}
@ -93,7 +92,7 @@
height: 270px;
max-height: 35vh;
padding: 0 6px 6px;
background: $simple-background-color;
background: var(--foreground-color);
will-change: transform;
&::-webkit-scrollbar-track:hover,
@ -105,7 +104,7 @@
.emoji-mart-search {
padding: 10px;
padding-right: 45px;
background: $simple-background-color;
background: var(--foreground-color);
input {
font-size: 14px;
@ -114,10 +113,9 @@
font-family: inherit;
display: block;
width: 100%;
background: rgba(var(--background-color), 0.3);
color: var(--inverted-text-color);
border: 1px solid var(--background-color);
border-radius: 4px;
background: var(--background-color);
border: 1px solid var(--brand-color-faint);
border-radius: 9999px;
&::-moz-focus-inner {
border: 0;
@ -148,7 +146,7 @@
left: 0;
width: 100%;
height: 100%;
background-color: rgba(var(--background-color), 0.7);
background-color: rgba(var(--background-color-rgb), 0.7);
border-radius: 100%;
}
}
@ -165,7 +163,7 @@
width: 100%;
font-weight: 500;
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;
bottom: 1px;
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 {
flex: 0 0 auto;
background: $simple-background-color;
background: var(--foreground-color);
padding: 4px;
margin: 0 10px 20px 0;
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;
outline: 0;
font-family: inherit;
background: $simple-background-color;
border: 1px solid darken($simple-background-color, 14%);
background: var(--foreground-color);
border: 1px solid var(--foreground-color);
border-radius: 4px;
padding: 6px 10px;
@ -142,14 +142,14 @@
}
.compose-form__poll-wrapper {
border-top: 1px solid darken($simple-background-color, 8%);
border-top: 1px solid var(--foreground-color);
ul {
padding: 10px;
}
.poll__footer {
border-top: 1px solid darken($simple-background-color, 8%);
border-top: 1px solid var(--foreground-color);
padding: 10px;
margin: -5px 0 0 -5px;
@ -190,7 +190,7 @@
width: auto;
outline: 0;
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-repeat: no-repeat;
background-position: right 8px center;
@ -202,7 +202,7 @@
}
.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 {
right: auto;
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-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 {
--primary-text-color-r: 0;
--primary-text-color-g: 0;
--primary-text-color-b: 0;
--background-color: #f2f2f2;
--background-color-r: 242;
--background-color-g: 242;
--background-color-b: 242;
--foreground-color: #ffffff;
--highlight-text-color: rgb(
calc(var(--brand-color-r) - 25),
@ -40,7 +44,9 @@ body.theme-mode-dark {
--primary-text-color-r: 255;
--primary-text-color-g: 255;
--primary-text-color-b: 255;
--background-color: #333333;
--background-color-r: 51;
--background-color-g: 51;
--background-color-b: 51;
--foreground-color: #222222;
--highlight-text-color: rgb(
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
$base-shadow-color: #000000 !default;
$base-overlay-background: #000000 !default;
$simple-background-color: #ffffff !default;
$valid-value-color: $success-green !default;
$error-value-color: $error-red !default;