diff --git a/app/javascript/styles/crazynewworld/background-blue.scss b/app/javascript/styles/crazynewworld/background-blue.scss index 31eb22e3f2a0fa..276165def8eb24 100644 --- a/app/javascript/styles/crazynewworld/background-blue.scss +++ b/app/javascript/styles/crazynewworld/background-blue.scss @@ -1,2 +1,3 @@ // Custom wallpaper $wallpaper: "crazynewworld/background-blue.jpg"; +$wallpaper-dark: "crazynewworld/background-blue-dark.jpg"; \ No newline at end of file diff --git a/app/javascript/styles/crazynewworld/background2.scss b/app/javascript/styles/crazynewworld/background2.scss index 8a6b099350924e..c849cd6ea677fc 100644 --- a/app/javascript/styles/crazynewworld/background2.scss +++ b/app/javascript/styles/crazynewworld/background2.scss @@ -1,2 +1,3 @@ // Custom wallpaper $wallpaper: "crazynewworld/background2.jpg"; +$wallpaper-dark: "crazynewworld/background2-dark.jpg"; diff --git a/app/javascript/styles/crazynewworld/sakura-dark.jpg b/app/javascript/styles/crazynewworld/sakura-dark.jpg new file mode 100644 index 00000000000000..c1462104a88c5d Binary files /dev/null and b/app/javascript/styles/crazynewworld/sakura-dark.jpg differ diff --git a/app/javascript/styles/crazynewworld/sakura-dark.scss b/app/javascript/styles/crazynewworld/sakura-dark.scss new file mode 100644 index 00000000000000..6a37a41354c9ca --- /dev/null +++ b/app/javascript/styles/crazynewworld/sakura-dark.scss @@ -0,0 +1,2 @@ +// Custom wallpaper +$wallpaper: "crazynewworld/sakura-dark.jpg"; diff --git a/app/javascript/styles/crazynewworld/sakura.scss b/app/javascript/styles/crazynewworld/sakura.scss index a2d4a25329f0fb..7cd794a2d01fd6 100644 --- a/app/javascript/styles/crazynewworld/sakura.scss +++ b/app/javascript/styles/crazynewworld/sakura.scss @@ -1,2 +1,3 @@ // Custom wallpaper $wallpaper: "crazynewworld/sakura.jpg"; +$wallpaper-dark: "crazynewworld/sakura-dark.jpg"; \ No newline at end of file diff --git a/app/javascript/styles/crazynewworld/shouwa-dark.jpg b/app/javascript/styles/crazynewworld/shouwa-dark.jpg new file mode 100644 index 00000000000000..c401a3754a8809 Binary files /dev/null and b/app/javascript/styles/crazynewworld/shouwa-dark.jpg differ diff --git a/app/javascript/styles/crazynewworld/shouwa-dark.scss b/app/javascript/styles/crazynewworld/shouwa-dark.scss new file mode 100644 index 00000000000000..dfd7d209035d06 --- /dev/null +++ b/app/javascript/styles/crazynewworld/shouwa-dark.scss @@ -0,0 +1,2 @@ +// Custom wallpaper +$wallpaper: "crazynewworld/shouwa-dark.jpg"; \ No newline at end of file diff --git a/app/javascript/styles/crazynewworld/shouwa.scss b/app/javascript/styles/crazynewworld/shouwa.scss index 0fe335c6cd606c..d323d04e677529 100644 --- a/app/javascript/styles/crazynewworld/shouwa.scss +++ b/app/javascript/styles/crazynewworld/shouwa.scss @@ -1,2 +1,3 @@ // Custom wallpaper $wallpaper: "crazynewworld/shouwa.jpg"; +$wallpaper-dark: "crazynewworld/shouwa-dark.jpg"; \ No newline at end of file diff --git a/app/javascript/styles/crazynewworld/transparent_background.scss b/app/javascript/styles/crazynewworld/transparent_background.scss index c392d988f1f180..d86d4d81cce7e3 100644 --- a/app/javascript/styles/crazynewworld/transparent_background.scss +++ b/app/javascript/styles/crazynewworld/transparent_background.scss @@ -2,161 +2,188 @@ /* 壁紙 */ -body, .tabs-bar__wrapper { - background: url($wallpaper) no-repeat fixed center top/cover; +body, +.tabs-bar__wrapper { + background: url($wallpaper-dark) no-repeat fixed center top/cover; } -/* 情報要素の背景を暗くしてブラーを施す */ - -.column-header__wrapper, -.column-back-button, -.navigation-panel, -.search__input, -.drawer__header, -.drawer__inner, -.search-results, -.link-footer, -.getting-started__trends, -.server-banner { - backdrop-filter: var(--background-filter-dark); -} - -.layout-single-column { +.drawer__inner { + background: none; - .columns-area--mobile .column, - .navigation-bar, - .reply-indicator, - .compose-form__highlightable { - backdrop-filter: var(--background-filter-dark); + .search-results__section { + background: var(--background-color); } -} -.layout-multiple-columns .column { - - &>.scrollable, - .column-inline-form, - .notification__filter-bar, - .account__section-headline, - .explore__search-results, - .explore__search-header { - backdrop-filter: var(--background-filter-dark); + &__mastodon { + background: none; } } -.drawer__inner { - background: none; +.compose-form { - .search-results { - background: none; + &__highlightable { + background: rgba(darken($ui-base-color, 15%), 0.7); } - &__mastodon { + .autosuggest-textarea__textarea, + .spoiler-input__input { background: none; } } -.explore__search-results, .explore__search-header { background: none; } -.column .link-footer, -.navigation-panel .getting-started__trends { - backdrop-filter: none; +.search__input { + background: rgba(darken($ui-base-color, 15%), 0.7); } -/* 文字入力フォームの背景を暗く */ +@media screen and (min-width: $no-gap-breakpoint) { -.compose-form { + body, + .tabs-bar__wrapper { + background: url($wallpaper) no-repeat fixed center top/cover; + } - &__highlightable { - background: rgba(darken($ui-base-color, 15%), 0.5); + /* 情報要素の背景を暗くしてブラーを施す */ + + .column-header__wrapper, + .column-back-button, + .navigation-panel, + .search__input, + .drawer__header, + .drawer__inner, + .search-results, + .link-footer, + .getting-started__trends, + .server-banner { + backdrop-filter: var(--background-filter-dark); + } + + .layout-single-column { + + .columns-area--mobile .column, + .navigation-bar, + .reply-indicator, + .compose-form__highlightable { + backdrop-filter: var(--background-filter-dark); + } + } + + .layout-multiple-columns .column { + + &>.scrollable, + .column-inline-form, + .notification__filter-bar, + .account__section-headline, + .explore__search-results, + .explore__search-header { + backdrop-filter: var(--background-filter-dark); + } + } + + .drawer__inner { + + .search-results { + background: none; + } + + .search-results__section { + background: none; + } } - .autosuggest-textarea__textarea, .spoiler-input__input { + .explore__search-results { background: none; } -} -.search__input { - background: rgba(darken($ui-base-color, 15%), 0.5); -} + .column .link-footer, + .navigation-panel .getting-started__trends { + backdrop-filter: none; + } -/* 意味のある色変更 */ + /* 文字入力フォームの背景を暗く */ -.column-subheading { - background: rgba(darken($ui-base-color, 15%), 0.3); -} + .compose-form { -.detailed-status__wrapper-direct { + &__highlightable { + background: rgba(darken($ui-base-color, 15%), 0.5); + } + } - .detailed-status, - .detailed-status__action-bar { - background: rgba(mix($ui-base-color, $ui-highlight-color, 95%), 0.6); + .search__input { + background: rgba(darken($ui-base-color, 15%), 0.5); } -} -/* 角を取る */ + /* 意味のある色変更 */ -.navigation-panel, -.navigation-bar, -.link-footer, -.getting-started__trends, -.server-banner, -.layout-single-column .reply-indicator { - border-radius: 4px; -}; + .column-subheading { + background: rgba(darken($ui-base-color, 15%), 0.3); + } -.column-header__wrapper { - border-radius: 4px 4px 0px 0px; -} + .detailed-status__wrapper-direct { -/* シングルカラムUIの調整 */ + .detailed-status, + .detailed-status__action-bar { + background: rgba(mix($ui-base-color, $ui-highlight-color, 95%), 0.6); + } + } -.layout-single-column { + /* 角を取る */ + .navigation-panel, .navigation-bar, - .reply-indicator { - padding: 3px 3px 3px 5px; + .link-footer, + .getting-started__trends, + .server-banner, + .layout-single-column .reply-indicator { + border-radius: 4px; + }; + + .column-header__wrapper { + border-radius: 4px 4px 0px 0px; } - .column { + /* シングルカラムUIの調整 */ + + .layout-single-column { .navigation-bar, .reply-indicator { - padding: 0; - backdrop-filter: none; + padding: 3px 3px 3px 5px; } - } -} -.navigation-panel { - margin-bottom: 10px; -} + .column { -.link-footer { - margin-bottom: 10px; - padding-left: 15px; - padding-right: 15px; -} + .navigation-bar, + .reply-indicator { + padding: 0; + backdrop-filter: none; + } + } + } -.reply-indicator__line::before { - background: lighten($ui-base-color, 60%); - box-shadow: 2px 2px 2px black; -} + .navigation-panel { + margin-bottom: 10px; + } -@media screen and (max-width:1174px) { + .link-footer { + margin-bottom: 10px; + padding-left: 15px; + padding-right: 15px; + } - .navigation-panel, - .column-header__wrapper { - border-radius: 0; + .reply-indicator__line::before { + background: lighten($ui-base-color, 60%); + box-shadow: 2px 2px 2px black; } -} -/* About画面の調整 */ + /* About画面の調整 */ -.server-banner { - padding: 20px 10px; + .server-banner { + padding: 20px 10px; + } } /* 変数の追加 */ diff --git a/app/javascript/styles/crazynewworld/tricolor-dark.jpg b/app/javascript/styles/crazynewworld/tricolor-dark.jpg new file mode 100644 index 00000000000000..3ae5e22c61b804 Binary files /dev/null and b/app/javascript/styles/crazynewworld/tricolor-dark.jpg differ diff --git a/app/javascript/styles/crazynewworld/tricolor-dark.scss b/app/javascript/styles/crazynewworld/tricolor-dark.scss new file mode 100644 index 00000000000000..f1007c1a925584 --- /dev/null +++ b/app/javascript/styles/crazynewworld/tricolor-dark.scss @@ -0,0 +1,2 @@ +// Custom wallpaper +$wallpaper: "crazynewworld/tricolor-dark.jpg"; \ No newline at end of file diff --git a/app/javascript/styles/crazynewworld/tricolor.scss b/app/javascript/styles/crazynewworld/tricolor.scss index 0b93bcb4178710..e1170477487582 100644 --- a/app/javascript/styles/crazynewworld/tricolor.scss +++ b/app/javascript/styles/crazynewworld/tricolor.scss @@ -1,2 +1,3 @@ // Custom wallpaper $wallpaper: "crazynewworld/tricolor.jpg"; +$wallpaper-dark: "crazynewworld/tricolor-dark.jpg"; \ No newline at end of file diff --git a/app/javascript/styles/crazynewworld2-sakura.scss b/app/javascript/styles/crazynewworld2-sakura.scss new file mode 100644 index 00000000000000..e53f2fd8b308c3 --- /dev/null +++ b/app/javascript/styles/crazynewworld2-sakura.scss @@ -0,0 +1,4 @@ +@import 'crazynewworld/sakura-dark'; +@import 'application'; +@import 'crazynewworld/compact'; +@import 'crazynewworld/transparent_background2'; \ No newline at end of file diff --git a/app/javascript/styles/crazynewworld2-shouwa.scss b/app/javascript/styles/crazynewworld2-shouwa.scss new file mode 100644 index 00000000000000..eb2957482d6f73 --- /dev/null +++ b/app/javascript/styles/crazynewworld2-shouwa.scss @@ -0,0 +1,4 @@ +@import 'crazynewworld/shouwa-dark'; +@import 'application'; +@import 'crazynewworld/compact'; +@import 'crazynewworld/transparent_background2'; \ No newline at end of file diff --git a/app/javascript/styles/crazynewworld2-tricolor.scss b/app/javascript/styles/crazynewworld2-tricolor.scss new file mode 100644 index 00000000000000..6c2c53860aa754 --- /dev/null +++ b/app/javascript/styles/crazynewworld2-tricolor.scss @@ -0,0 +1,4 @@ +@import 'crazynewworld/tricolor-dark'; +@import 'application'; +@import 'crazynewworld/compact'; +@import 'crazynewworld/transparent_background2'; \ No newline at end of file diff --git a/config/locales/en.yml b/config/locales/en.yml index ebc1771af36cb0..8778d21a2d5246 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1779,6 +1779,9 @@ en: crazynewworld-tricolor: Crazynewworld (Tricolor) crazynewworld2: Crazynewworld 2 (Green) crazynewworld2-blue: Crazynewworld 2 (Blue) + crazynewworld2-sakura: Crazynewworld 2 (Sakura) + crazynewworld2-shouwa: Crazynewworld 2 (Shouwa) + crazynewworld2-tricolor: Crazynewworld 2 (Tricolor) time: formats: default: "%b %d, %Y, %H:%M" diff --git a/config/locales/ja.yml b/config/locales/ja.yml index 5cf061808f1499..ef035d770ef94d 100644 --- a/config/locales/ja.yml +++ b/config/locales/ja.yml @@ -1746,6 +1746,9 @@ ja: crazynewworld-tricolor: Crazynewworld (三色) crazynewworld2: Crazynewworld 2 (緑) crazynewworld2-blue: Crazynewworld 2 (青) + crazynewworld2-sakura: Crazynewworld 2 (桜) + crazynewworld2-shouwa: Crazynewworld 2 (昭和) + crazynewworld2-tricolor: Crazynewworld 2 (三色) time: formats: default: "%Y年%m月%d日 %H:%M" diff --git a/config/themes.yml b/config/themes.yml index 1077dbaef3fbe0..83fcf4074dd48d 100644 --- a/config/themes.yml +++ b/config/themes.yml @@ -10,3 +10,6 @@ crazynewworld-shouwa: styles/crazynewworld-shouwa.scss crazynewworld-tricolor: styles/crazynewworld-tricolor.scss crazynewworld2: styles/crazynewworld2.scss crazynewworld2-blue: styles/crazynewworld2-blue.scss +crazynewworld2-sakura: styles/crazynewworld2-sakura.scss +crazynewworld2-shouwa: styles/crazynewworld2-shouwa.scss +crazynewworld2-tricolor: styles/crazynewworld2-tricolor.scss \ No newline at end of file