Add more themes

Hanage999 · Apr 30, 2024 · 606266b · 606266b
1 parent 18f3ceb
commit 606266b
Show file tree

Hide file tree

Showing 18 changed files with 160 additions and 101 deletions.
diff --git 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";
diff --git 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
diff --git a/app/javascript/styles/crazynewworld/sakura-dark.scss 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
@@ -1,2 +1,3 @@
 // Custom wallpaper
 $wallpaper: "crazynewworld/sakura.jpg";
+$wallpaper-dark: "crazynewworld/sakura-dark.jpg";
diff --git a/app/javascript/styles/crazynewworld/shouwa-dark.jpg b/app/javascript/styles/crazynewworld/shouwa-dark.jpg
diff --git a/app/javascript/styles/crazynewworld/shouwa-dark.scss b/app/javascript/styles/crazynewworld/shouwa-dark.scss
@@ -0,0 +1,2 @@
+// Custom wallpaper
+$wallpaper: "crazynewworld/shouwa-dark.jpg";
diff --git 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";
diff --git 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
diff --git a/app/javascript/styles/crazynewworld/tricolor-dark.scss b/app/javascript/styles/crazynewworld/tricolor-dark.scss
@@ -0,0 +1,2 @@
+// Custom wallpaper
+$wallpaper: "crazynewworld/tricolor-dark.jpg";
diff --git 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";
diff --git a/app/javascript/styles/crazynewworld2-sakura.scss b/app/javascript/styles/crazynewworld2-sakura.scss
@@ -0,0 +1,4 @@
+@import 'crazynewworld/sakura-dark';
+@import 'application';
+@import 'crazynewworld/compact';
+@import 'crazynewworld/transparent_background2';
diff --git a/app/javascript/styles/crazynewworld2-shouwa.scss b/app/javascript/styles/crazynewworld2-shouwa.scss
@@ -0,0 +1,4 @@
+@import 'crazynewworld/shouwa-dark';
+@import 'application';
+@import 'crazynewworld/compact';
+@import 'crazynewworld/transparent_background2';
diff --git a/app/javascript/styles/crazynewworld2-tricolor.scss b/app/javascript/styles/crazynewworld2-tricolor.scss
@@ -0,0 +1,4 @@
+@import 'crazynewworld/tricolor-dark';
+@import 'application';
+@import 'crazynewworld/compact';
+@import 'crazynewworld/transparent_background2';
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -1780,6 +1780,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
@@ -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
@@ -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