gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2024-11-26 15:31:52 +00:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Eugen Rochko 2024-01-14 22:45:18 +01:00
parent bd538598c2
commit d3519bc08b
7 changed files with 586 additions and 861 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/javascript/styles/mastodon/_mixins.scss
View File

@ -15,14 +15,19 @@
outline: 0; outline: 0;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
border: 0; border: 1px solid var(--surface-outline);
box-shadow: none; box-shadow: none;
font-family: inherit; font-family: inherit;
background: $ui-base-color; background: var(--surface);
color: $darker-text-color; color: var(--on-surface);
border-radius: 4px; border-radius: 4px;
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
&::placeholder {
color: var(--on-surface-muted);
opacity: 1;
}
} }
@mixin search-popout { @mixin search-popout {

12
app/javascript/styles/mastodon/accounts.scss
View File

@ -216,8 +216,8 @@
display: inline-flex; display: inline-flex;
padding: 4px; padding: 4px;
padding-inline-end: 8px; padding-inline-end: 8px;
border: 1px solid $highlight-text-color; border: 1px solid var(--primary);
color: $highlight-text-color; color: var(--primary);
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
letter-spacing: 0.5px; letter-spacing: 0.5px;
@ -305,16 +305,16 @@
} }
.verified { .verified {
border: 1px solid rgba($valid-value-color, 0.5); border: 1px solid var(--successful-outline);
background: rgba($valid-value-color, 0.25); background: var(--successful-variant);
a { a {
color: $valid-value-color; color: var(--successful);
font-weight: 500; font-weight: 500;
} }
&__mark { &__mark {
color: $valid-value-color; color: var(--successful);
} }
} }

10
app/javascript/styles/mastodon/basics.scss
View File

@ -6,9 +6,10 @@
@return '%23' + unquote($color); @return '%23' + unquote($color);
} }
body { body {
font-family: $font-sans-serif, sans-serif; font-family: $font-sans-serif, sans-serif;
background: darken($ui-base-color, 7%); background: var(--background);
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
font-weight: 400; font-weight: 400;
@ -66,10 +67,6 @@ body {
} }
} }
&.lighter {
background: $ui-base-color;
}
&.with-modals { &.with-modals {
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
@ -109,7 +106,6 @@ body {
} }
&.embed { &.embed {
background: lighten($ui-base-color, 4%);
margin: 0; margin: 0;
padding-bottom: 0; padding-bottom: 0;
@ -122,7 +118,6 @@ body {
} }
&.admin { &.admin {
background: darken($ui-base-color, 4%);
padding: 0; padding: 0;
} }
@ -130,7 +125,6 @@ body {
position: absolute; position: absolute;
text-align: center; text-align: center;
color: $darker-text-color; color: $darker-text-color;
background: $ui-base-color;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0; padding: 0;

1019
app/javascript/styles/mastodon/components.scss
View File

File diff suppressed because it is too large Load Diff

41
app/javascript/styles/mastodon/polls.scss
View File

@ -8,14 +8,14 @@
} }
&__chart { &__chart {
border-radius: 4px; border-radius: var(--radius-sm);
display: block; display: block;
background: darken($ui-primary-color, 5%); background: var(--primary-muted);
height: 5px; height: 5px;
min-width: 1%; min-width: 1%;
&.leading { &.leading {
background: $ui-highlight-color; background: var(--primary);
} }
} }
@ -34,18 +34,18 @@
// Those rules need to be entirely separate or they won't work, hence the // Those rules need to be entirely separate or they won't work, hence the
// duplication // duplication
&::-moz-progress-bar { &::-moz-progress-bar {
border-radius: 4px; border-radius: var(--radius-sm);
background: darken($ui-primary-color, 5%); background: var(--primary-muted);
} }
&::-ms-fill { &::-ms-fill {
border-radius: 4px; border-radius: var(--radius-sm);
background: darken($ui-primary-color, 5%); background: var(--primary-muted);
} }
&::-webkit-progress-value { &::-webkit-progress-value {
border-radius: 4px; border-radius: var(--radius-sm);
background: darken($ui-primary-color, 5%); background: var(--primary-muted);
} }
} }
@ -83,7 +83,7 @@
font-family: inherit; font-family: inherit;
background: $simple-background-color; background: $simple-background-color;
border: 1px solid darken($simple-background-color, 14%); border: 1px solid darken($simple-background-color, 14%);
border-radius: 4px; border-radius: var(--radius-sm);
padding: 6px 10px; padding: 6px 10px;
&:focus { &:focus {
@ -118,7 +118,7 @@
flex: 0 0 18px; flex: 0 0 18px;
&.checkbox { &.checkbox {
border-radius: 4px; border-radius: var(--radius-sm);
} }
&:active, &:active,
@ -178,7 +178,7 @@
&__footer { &__footer {
padding-top: 6px; padding-top: 6px;
padding-bottom: 5px; padding-bottom: 5px;
color: $dark-text-color; color: var(--on-background-muted);
} }
&__link { &__link {
@ -187,18 +187,13 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
border: 0; border: 0;
color: $dark-text-color; color: var(--on-background-muted);
text-decoration: underline; text-decoration: underline;
font-size: inherit; font-size: inherit;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
&:active,
&:focus {
background-color: rgba($dark-text-color, 0.1);
}
} }
.button { .button {
@ -283,7 +278,7 @@
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='#{hex-color(darken($simple-background-color, 14%))}'/></svg>") 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='#{hex-color(darken($simple-background-color, 14%))}'/></svg>")
no-repeat right 8px center / auto 16px; no-repeat right 8px center / auto 16px;
border: 1px solid darken($simple-background-color, 14%); border: 1px solid darken($simple-background-color, 14%);
border-radius: 4px; border-radius: var(--radius-sm);
padding: 6px 10px; padding: 6px 10px;
padding-inline-end: 30px; padding-inline-end: 30px;
} }
@ -294,13 +289,9 @@
} }
.muted .poll { .muted .poll {
color: $dark-text-color; color: var(--on-background-muted);
&__chart { &__chart {
background: rgba(darken($ui-primary-color, 14%), 0.7); opacity: 0.5;
&.leading {
background: rgba($ui-highlight-color, 0.5);
}
} }
} }

49
app/javascript/styles/mastodon/variables.scss
View File

@ -94,10 +94,51 @@ $font-display: 'mastodon-font-display' !default;
$font-monospace: 'mastodon-font-monospace' !default; $font-monospace: 'mastodon-font-monospace' !default;
:root { :root {
--dropdown-border-color: #{lighten($ui-base-color, 12%)}; --dropdown-border-color: var(--surface-outline);
--dropdown-background-color: #{lighten($ui-base-color, 4%)}; --dropdown-background-color: var(--surface);
--dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)}, --dropdown-shadow: 0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
0 8px 10px -6px #{rgba($base-shadow-color, 0.25)}; 0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
--modal-background-color: #{darken($ui-base-color, 4%)}; --modal-background-color: var(--background);
--modal-border-color: #{lighten($ui-base-color, 4%)}; --modal-border-color: var(--background-outline);
// New design system
--overlay: #000;
--overlay-variant: rgba(0, 0, 0, 0.85);
--overlay-variant-highlighted: rgba(0, 0, 0, 0.9);
--on-overlay: #fff;
--background: #161316;
--background-outline: #302D30;
--background-highlighted: unset;
--background-muted: unset;
--on-background: #FDFAFE;
--on-background-muted: #D1CDD1;
--primary: #B2A2FF;
--primary-outline: unset;
--primary-highlighted: #C3B9FF;
--primary-muted: unset;
--on-primary: #2A1880;
--surface: #302D30;
--surface-outline: #6C686C;
--surface-highlighted: #4D4A4D;
--surface-muted: unset;
--on-surface: unset;
--on-surface-muted: #A8A5A9;
--dangerous: #EC8786;
--successful: #7DB664;
--successful-outline: #9BC789;
--successful-variant: #203417;
// One-offs
--favourite: #DB9640;
--favourite-highlighted: #E4B073;
--bookmark: #C06868;
--bookmark-highlighted: #EC8786;
// Geometry
--radius-sm: 4px;
--Neutral-105: color(display-p3 0.0863 0.0745 0.0863);
--Neutral-105-invert: color(display-p3 0.9922 0.9804 0.9961);
--Neutral-100: color(display-p3 0.1882 0.1765 0.1882);
--Neutral-90: color(display-p3 0.302 0.2902 0.302);
--Neutral-77-invert: color(display-p3 0.8196 0.8039 0.8196);
--Neutral-65: color(display-p3 0.5255 0.5137 0.5255);
} }

305
app/javascript/styles/mastodon/widgets.scss
View File

@ -1,294 +1,5 @@
@use 'sass:math'; @use 'sass:math';
.hero-widget {
margin-bottom: 10px;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
&:last-child {
margin-bottom: 0;
}
&__img {
width: 100%;
position: relative;
overflow: hidden;
border-radius: 4px 4px 0 0;
background: $base-shadow-color;
img {
object-fit: cover;
display: block;
width: 100%;
height: 100%;
margin: 0;
border-radius: 4px 4px 0 0;
}
}
&__text {
background: $ui-base-color;
padding: 20px;
border-radius: 0 0 4px 4px;
font-size: 15px;
color: $darker-text-color;
line-height: 20px;
word-wrap: break-word;
font-weight: 400;
.emojione {
width: 20px;
height: 20px;
margin: -3px 0 0;
margin-inline-start: 0.075em;
margin-inline-end: 0.075em;
}
p {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
em {
display: inline;
margin: 0;
padding: 0;
font-weight: 700;
background: transparent;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: lighten($darker-text-color, 10%);
}
a {
color: $secondary-text-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
@media screen and (max-width: $no-gap-breakpoint) {
display: none;
}
}
.endorsements-widget {
margin-bottom: 10px;
padding-bottom: 10px;
h4 {
padding: 10px;
text-transform: uppercase;
font-weight: 700;
font-size: 13px;
color: $darker-text-color;
}
.account {
padding: 10px 0;
&:last-child {
border-bottom: 0;
}
.account__display-name {
display: flex;
align-items: center;
}
}
.trends__item {
padding: 10px;
}
}
.trends-widget {
h4 {
color: $darker-text-color;
}
}
.placeholder-widget {
padding: 16px;
border-radius: 4px;
border: 2px dashed $dark-text-color;
text-align: center;
color: $darker-text-color;
margin-bottom: 10px;
}
.moved-account-widget {
padding: 15px;
padding-bottom: 20px;
border-radius: 4px;
background: $ui-base-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
color: $secondary-text-color;
font-weight: 400;
margin-bottom: 10px;
strong,
a {
font-weight: 500;
@each $lang in $cjk-langs {
&:lang(#{$lang}) {
font-weight: 700;
}
}
}
a {
color: inherit;
text-decoration: underline;
&.mention {
text-decoration: none;
span {
text-decoration: none;
}
&:focus,
&:hover,
&:active {
text-decoration: none;
span {
text-decoration: underline;
}
}
}
}
&__message {
margin-bottom: 15px;
.fa {
margin-inline-end: 5px;
color: $darker-text-color;
}
}
&__card {
.detailed-status__display-avatar {
position: relative;
cursor: pointer;
}
.detailed-status__display-name {
margin-bottom: 0;
text-decoration: none;
span {
font-weight: 400;
}
}
}
}
.memoriam-widget {
padding: 20px;
border-radius: 4px;
background: $base-shadow-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
font-size: 14px;
color: $darker-text-color;
margin-bottom: 10px;
}
.directory {
background: $ui-base-color;
border-radius: 4px;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
&__tag {
box-sizing: border-box;
margin-bottom: 10px;
& > a,
& > div {
display: flex;
align-items: center;
justify-content: space-between;
background: $ui-base-color;
border-radius: 4px;
padding: 15px;
text-decoration: none;
color: inherit;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
}
& > a {
&:hover,
&:active,
&:focus {
background: lighten($ui-base-color, 8%);
}
}
&.active > a {
background: $ui-highlight-color;
cursor: default;
}
&.disabled > div {
opacity: 0.5;
cursor: default;
}
h4 {
flex: 1 1 auto;
font-size: 18px;
font-weight: 700;
color: $primary-text-color;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.fa {
color: $darker-text-color;
}
small {
display: block;
font-weight: 400;
font-size: 15px;
margin-top: 8px;
color: $darker-text-color;
}
}
&.active h4 {
&,
.fa,
small,
.trends__item__current {
color: $primary-text-color;
}
}
.avatar-stack {
flex: 0 0 auto;
width: (36px + 4px) * 3;
}
&.active .avatar-stack .account__avatar {
border-color: $ui-highlight-color;
}
.trends__item__current {
padding-inline-end: 0;
}
}
}
.accounts-table { .accounts-table {
width: 100%; width: 100%;
@ -389,8 +100,6 @@
} }
} }
.moved-account-widget,
.memoriam-widget,
.directory { .directory {
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
margin-bottom: 0; margin-bottom: 0;
@ -398,17 +107,3 @@
border-radius: 0; border-radius: 0;
} }
} }
.placeholder-widget {
a {
text-decoration: none;
font-weight: 500;
color: $ui-highlight-color;
&:hover,
&:focus,
&:active {
text-decoration: underline;
}
}
}