more improvements to night theme

reactions
Lerk 1 year ago
parent af8b6ada93
commit cd32b21d03
  1. 6
      Procfile.dev
  2. 4
      app/javascript/styles/mastodon/components.scss
  3. 9
      app/javascript/styles/night.scss
  4. 56
      app/javascript/styles/night/components.scss
  5. 42
      app/javascript/styles/night/diff.scss
  6. 2
      app/javascript/styles/night/variables.scss
  7. 8
      app/views/accounts/_bio.html.haml
  8. 1
      app/views/accounts/_header.html.haml
  9. 2
      app/views/layouts/public.html.haml
  10. 1
      config/locales/en.yml

@ -1,5 +1,5 @@
web: env PORT=3000 RAILS_ENV=development bundle exec puma -C config/puma.rb
#web: env PORT=3000 RAILS_ENV=development bundle exec puma -C config/puma.rb
sidekiq: env PORT=3000 RAILS_ENV=development bundle exec sidekiq
stream: env PORT=4000 yarn run start
webpack: ./bin/webpack-dev-server --listen-host 0.0.0.0
metrics-collector: ./bin/metrics-collector
#webpack: ./bin/webpack-dev-server --listen-host 0.0.0.0
#metrics-collector: ./bin/metrics-collector

@ -820,11 +820,13 @@
}
a.status-link.unhandled-link {
color: $darker-text-color;
&:after {
content: '';
font-size: 9px;
margin-left: 2px;
color: black;
color: $darker-text-color;
display: inline;
position: relative;
bottom: 1px;

@ -3,6 +3,7 @@
@import 'fonts/roboto';
@import 'fonts/roboto-mono';
@import 'fonts/montserrat';
@import 'fonts/katex';
@import 'mastodon/reset';
@import 'night/basics';
@ -28,10 +29,4 @@
@import 'mastodon/accessibility';
@import 'mastodon/noscript';
@import 'fonts/katex';
.logo {
max-width: 130px !important;
min-width: 130px !important;
height: auto !important;
}
@import 'night/diff';

@ -821,14 +821,16 @@
}
a.status-link.unhandled-link {
color: $darker-text-color;
&:after {
content: '';
font-size: 9px;
content: '';
font-size: 13px;
margin-left: 2px;
color: black;
color: $darker-text-color;
display: inline;
position: relative;
bottom: 1px;
bottom: -4px;
left: 0;
text-decoration: none;
border-bottom: none;
@ -3650,7 +3652,7 @@ a.status-card.compact:hover {
}
.loading-indicator {
color: $dark-text-color;
color: $classic-secondary-color;
font-size: 13px;
font-weight: 400;
overflow: visible;
@ -3677,7 +3679,7 @@ a.status-card.compact:hover {
height: 42px;
box-sizing: border-box;
background-color: transparent;
border: 0 solid lighten($ui-base-color, 26%);
border: 0 solid white;
border-width: 6px;
border-radius: 50%;
}
@ -4667,17 +4669,17 @@ a.status-card.compact:hover {
&__close,
&__zoom-button {
color: rgba($white, 0.7);
color: rgba($ui-primary-color, 0.7);
&:hover,
&:focus,
&:active {
color: $white;
background-color: rgba($white, 0.15);
color: $ui-primary-color;
background-color: rgba($ui-primary-color, 0.15);
}
&:focus {
background-color: rgba($white, 0.3);
background-color: rgba($ui-primary-color, 0.3);
}
}
}
@ -4758,17 +4760,17 @@ a.status-card.compact:hover {
padding: 20px 0;
.icon-button {
color: $white;
color: $action-button-color;
&:hover,
&:focus,
&:active {
color: $white;
background-color: rgba($white, 0.15);
color: $action-button-color;
background-color: rgba($action-button-color, 0.15);
}
&:focus {
background-color: rgba($white, 0.3);
background-color: rgba($action-button-color, 0.3);
}
&.active {
@ -4981,7 +4983,7 @@ a.status-card.compact:hover {
.actions-modal,
.mute-modal,
.block-modal {
border: 1px solid white;
border: 1px solid $base-border-color;
background: $simple-background-color;
color: $inverted-text-color;
border-radius: 8px;
@ -5081,7 +5083,7 @@ a.status-card.compact:hover {
.report-modal__container {
display: flex;
border-top: 1px solid $ui-secondary-color;
border-top: 1px solid $base-border-color;
@media screen and (max-width: 480px) {
flex-wrap: wrap;
@ -5138,7 +5140,7 @@ a.status-card.compact:hover {
.report-modal__comment {
padding: 20px;
border-right: 1px solid $ui-secondary-color;
border-right: 1px solid $base-border-color;
max-width: 320px;
p {
@ -5152,8 +5154,8 @@ a.status-card.compact:hover {
box-sizing: border-box;
width: 100%;
margin: 0;
color: $inverted-text-color;
background: $white;
color: $primary-text-color;
background: transparent;
padding: 10px;
font-family: inherit;
font-size: 14px;
@ -5161,7 +5163,7 @@ a.status-card.compact:hover {
border: 0;
outline: 0;
border-radius: 4px;
border: 1px solid $ui-secondary-color;
border: 1px solid $base-border-color;
min-height: 100px;
max-height: 50vh;
margin-bottom: 10px;
@ -5171,8 +5173,8 @@ a.status-card.compact:hover {
}
&__wrapper {
background: $white;
border: 1px solid $ui-secondary-color;
background: transparent;
border: 1px solid $base-border-color;
margin-bottom: 10px;
border-radius: 4px;
@ -5187,10 +5189,10 @@ a.status-card.compact:hover {
}
&__modifiers {
color: $inverted-text-color;
color: $primary-text-color;
font-family: inherit;
font-size: 14px;
background: $white;
background: transparent;
}
}
@ -5203,7 +5205,7 @@ a.status-card.compact:hover {
.setting-text-label {
display: block;
color: $inverted-text-color;
color: $primary-text-color;
font-size: 14px;
font-weight: 500;
margin-bottom: 10px;
@ -5341,7 +5343,7 @@ a.status-card.compact:hover {
outline: 0;
font-family: inherit;
background: $simple-background-color 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;
border: 1px solid darken($simple-background-color, 14%);
border: 1px solid $base-border-color;
border-radius: 4px;
padding: 6px 10px;
padding-right: 30px;
@ -5384,7 +5386,7 @@ a.status-card.compact:hover {
}
.loading-bar {
background-color: $highlight-text-color;
background-color: $classic-secondary-color;
height: 3px;
position: absolute;
top: 0;

@ -0,0 +1,42 @@
#upload-modal__description {
background: transparent;
border: 1px solid $base-border-color;
color: $primary-text-color;
}
.emoji-mart {
.emoji-mart-bar {
&:first-child {
background: $simple-background-color;
}
}
.emoji-mart-anchor {
color: $primary-text-color;
&:hover {
color: $ui-secondary-color;
}
&.emoji-mart-anchor-selected {
color: $ui-primary-color;
}
}
}
input:not([type="file"],.search__input),
textarea:not(.autosuggest-textarea__textarea),
select.select {
border: 1px solid $ui-secondary-color !important;
&:active,
&:focus {
border: 1px solid $base-border-color !important;
}
}
.logo {
max-width: 130px !important;
min-width: 130px !important;
height: auto !important;
}

@ -36,7 +36,7 @@ $darker-text-color: $ui-primary-color !default;
$dark-text-color: $ui-base-lighter-color !default;
$secondary-text-color: $ui-secondary-color !default;
$highlight-text-color: $ui-highlight-color !default;
$action-button-color: $ui-base-lighter-color !default;
$action-button-color: $ui-secondary-color !default;
$passive-text-color: $gold-star !default;
$active-passive-text-color: $success-green !default;
// For texts on inverted backgrounds

@ -2,6 +2,9 @@
- fields = account.fields
.public-account-bio
- if account.note.present?
.account__header__content.emojify= Formatter.instance.simplified_format(account, custom_emojify: true)
- unless fields.empty? && proofs.empty?
.account__header__fields
- proofs.each do |proof|
@ -20,10 +23,5 @@
= fa_icon 'check'
= Formatter.instance.format_field(account, field.value, custom_emojify: true)
= account_badge(account)
- if account.note.present?
.account__header__content.emojify= Formatter.instance.simplified_format(account, custom_emojify: true)
.public-account-bio__extra
= t 'accounts.joined', date: l(account.created_at, format: :month)

@ -11,6 +11,7 @@
%small
= acct(account)
= fa_icon('lock') if account.locked?
= account_badge(account)
.public-account-header__tabs__tabs
.details-counters
.counter{ class: active_nav_class(short_account_url(account), short_account_with_replies_url(account), short_account_media_url(account)) }

@ -41,7 +41,7 @@
%li= link_to t('about.documentation'), 'https://docs.joinmastodon.org/'
%li= link_to t('about.api'), 'https://docs.joinmastodon.org/client/intro/'
.column-2
%h4= link_to t('about.what_is_mastodon'), 'https://joinmastodon.org/'
%h4= link_to t('about.powered_by_mastodon'), 'https://joinmastodon.org/'
= link_to svg_logo, root_url, class: 'brand'
.column-3
%h4= site_hostname

@ -7,6 +7,7 @@ en:
active_count_after: active
active_footnote: Monthly Active Users (MAU)
administered_by: 'Administered by:'
powered_by_mastodon: Powered by Mastodon
api: API
apps: Mobile apps
apps_platforms: Use Mastodon from iOS, Android and other platforms

Loading…
Cancel
Save