comm.network
/
mastodon
1
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity

more improvements to night theme

Browse Source
reactions
Lerk 1 year ago
parent af8b6ada93
commit cd32b21d03
10 changed files with 86 additions and 45 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  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

6
Procfile.dev
Unescape View File

@ -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

4
app/javascript/styles/mastodon/components.scss
Unescape View File

@ -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;

9
app/javascript/styles/night.scss
Unescape View File

@ -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';

56
app/javascript/styles/night/components.scss
Unescape View File

@ -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;

42
app/javascript/styles/night/diff.scss
Unescape View File

@ -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;
}

2
app/javascript/styles/night/variables.scss
Unescape View File

@ -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

8
app/views/accounts/_bio.html.haml
Unescape View File

@ -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)

1
app/views/accounts/_header.html.haml
Unescape View File

@ -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)) }

2
app/views/layouts/public.html.haml
Unescape View File

@ -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

1
config/locales/en.yml
Unescape View File

@ -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

Write Preview
Loading…
Cancel
Save