MinPluto/share2fedi
Archived
1
Fork 0
Code Issues Pull requests Activity

Update styles to match those of Mastodon

Browse source
This commit is contained in:
Nikita Karamov 2023-03-16 13:37:32 +01:00
parent 7f6b25296d
commit df0ab992b8
No known key found for this signature in database
GPG key ID: 41D6F71EE78E77CD
1 changed files with 47 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
lib/scss/style.scss
View file

@ -24,16 +24,50 @@
@import "fonts";
@import "variables";
* {
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--s2f-bg-color: #eff3f5;
--s2f-text-color: #282c37;
--s2f-border-color: #ccd7e0;
--s2f-input-bg-color: #ffffff;
--s2f-input-text-color: #000000;
--s2f-input-placeholder-color: #444b5d;
--s2f-input-border-color: #c0cdd9;
--s2f-button-bg-color: #6d6eff;
--s2f-button-hover-bg-color: #6364ff;
--s2f-button-text-color: #ffffff;
accent-color: var(--s2f-button-bg-color);
}
@media (prefers-color-scheme: dark) {
:root {
--s2f-bg-color: #191b22;
--s2f-text-color: #9caec8;
--s2f-border-color: #313543;
--s2f-input-text-color: #282c37;
--s2f-input-placeholder-color: #606984;
--s2f-input-border-color: transparent;
--s2f-button-bg-color: #595aff;
--s2f-button-hover-bg-color: #6364ff;
}
}
html,
body {
background-color: $bg;
color: $text;
background-color: var(--s2f-bg-color);
color: var(--s2f-text-color);
font-family: $text-font;
font-size: 16px;
font-weight: 400;
@ -51,7 +85,7 @@ body {
}
header {
border-bottom: 1px solid $border-color;
border-bottom: 1px solid var(--s2f-border-color);
padding: 1.5rem 0 0.5rem;
text-align: center;
width: 100%;
@ -113,8 +147,8 @@ main {
&[type="submit"] {
display: inline-block;
text-align: center;
background-color: $button-bg;
color: $button-text;
background-color: var(--s2f-button-bg-color);
color: var(--s2f-button-text-color);
font-weight: 500;
font-family: inherit;
height: 2.5rem;
@ -124,7 +158,7 @@ main {
cursor: pointer;
&:hover {
background-color: $button-hover-bg;
background-color: var(--s2f-button-hover-bg-color);
}
}
@ -133,31 +167,23 @@ main {
textarea,
input[type="url"] {
color: inherit;
color: var(--s2f-input-text-color);
width: 100%;
outline: 0;
font-family: inherit;
resize: vertical;
background-color: $input-bg;
border: 1px solid color.scale($input-bg, $lightness: -25%);
background-color: var(--s2f-input-bg-color);
border: 1px solid var(--s2f-input-border-color);
padding: 10px;
&:focus,
&:active {
border: 1px solid $button-bg;
background-color: color.scale($input-bg, $lightness: +5%);
}
&::placeholder {
color: inherit;
opacity: 0.3;
color: var(--s2f-input-placeholder-color);
}
}
}
}
footer {
border-top: 1px solid $border-color;
border-top: 1px solid var(--s2f-border-color);
padding: 1rem 0;
width: 100%;
display: flex;