[maud] styles: add akane-blue (modern and classic)

Signed-off-by: lindwurm <[email protected]>

app/javascript/styles/akane-blue.scss

@@ -0,0 +1,2 @@
+@import 'akane-blue/variables';
+@import 'application';

app/javascript/styles/akane-blue/classic-diff.scss

@@ -0,0 +1,152 @@
+:root {
+    --dropdown-background-color: #444b5d;
+    --dropdown-border-color: #606984;
+}
+
+.reverse-nav .columns-area__panels .navigation-panel,
+.columns-area__panels .navigation-panel {
+    border-left: 0;
+    border-right: 0;
+}
+
+.account__header__bio {
+    .account__header__fields,
+    .account__header__fields .verified {
+        border: 0;
+        margin-top: 0;
+    }
+}
+
+.column > .scrollable,
+.column-subheading,
+.notification__filter-bar {
+    background: #282c37;
+    border-radius: 0 0 4px 4px;
+}
+
+.notification__filter-bar {
+    background: #1f232b;
+    border-radius: 0 0 4px 4px;
+}
+
+.column-header {
+    background: #313543;
+}
+
+.getting-started,
+.column-subheading,
+.link-footer p,
+.link-footer span,
+.compose-form__poll__select__label {
+    color: var(--dropdown-border-color);
+    overflow: auto;
+}
+
+.link-footer p a{
+    text-decoration: none;
+}
+
+.drawer__inner,
+.drawer__inner__mastodon,
+.drawer__header,
+.layout-multiple-columns .column-link {
+    background: var(--dropdown-background-color);
+}
+
+.compose-form {
+    .autosuggest-textarea__textarea,
+    .spoiler-input__input,
+    .poll__option input[type=text] {
+        background: #fff;
+        color: #000;
+    }
+}
+
+.search__input,
+.search__input::placeholder,
+.switch-to-advanced {
+    color: #fff;
+}
+
+.compose-form__highlightable {
+    background: #ebebeb;
+}
+
+.compose-form__poll .poll__input {
+    border-color: var(--dropdown-border-color);
+    height: 17px;
+    width: 17px;
+}
+
+
+.emoji-picker-dropdown__menu {
+    box-shadow: 4px 4px 6px rgba(0, 0, 0, .3);
+    border: none;
+}
+
+.emoji-mart-bar:first-child {
+    background: #d9e1e8;
+}
+
+.emoji-mart-scroll,
+.emoji-mart-search {
+    background: #fff;
+    color: var(--dropdown-background-color);
+}
+
+.emoji-mart-search input,
+.emoji-mart-search input::placeholder {
+    background: #eef2f5;
+    color: var(--dropdown-background-color);
+}
+
+.language-dropdown__dropdown {
+    .emoji-mart-search input {
+        border: 1.5px solid #888;
+        background: var(--dropdown-background-color);
+        color: #fff;
+    }
+    .emoji-mart-search input::placeholder{
+        background: var(--dropdown-background-color);
+        color: #ccc;
+    }
+}
+
+.emoji-mart-search-icon svg {
+    fill: var(--dropdown-background-color);
+}
+
+.emoji-mart-anchor {
+    color: var(--dropdown-background-color);
+}
+
+.language-dropdown__dropdown {
+    background: var(--dropdown-border-color);
+}
+
+body.admin {
+    background: #1f232b;
+}
+
+.admin-wrapper .sidebar-wrapper__inner {
+    background: #282c37;
+}
+
+.admin-wrapper .sidebar ul .simple-navigation-active-leaf {
+    background: #56a7e1;
+    a {
+        color: #fff;
+    }
+}
+
+.simple_form select {
+    background: #131419;
+    border: 1px solid #0a0b0e;
+    border-radius: 4px;
+}
+
+.flash-message {
+    background: #393f4f;
+    border: none;
+    color: #dde3ec;
+}

app/javascript/styles/akane-classic.scss

@@ -0,0 +1,3 @@
+@import 'akane-blue/variables';
+@import 'application';
+@import 'akane-blue/classic-diff';

config/locales/en.yml

@@ -1834,7 +1834,8 @@ en:
     contrast: Mastodon (High contrast)
     default: Mastodon (Dark)
     mastodon-light: Mastodon (Light)
-    classic: Mastodon (Classic)
+    akane-blue: akane-blue (Modern, Dark)
+    akane-classic: akane-blue (Classic, Dark)
     system: Automatic (use system theme)
     big-publish: Enable big publish-button
     wide-column: Enable wider column (only on Advanced UI)

config/locales/ja.yml

@@ -1786,7 +1786,8 @@ ja:
     contrast: Mastodon (ハイコントラスト)
     default: Mastodon (ダーク)
     mastodon-light: Mastodon (ライト)
-    classic: Mastodon (クラシック)
+    akane-blue: akane-blue (モダン, ダーク)
+    akane-classic: akane-blue (クラシック, ダーク)
     system: 自動 (システムのテーマを使用)
     big-publish: より大きな投稿ボタンを有効化
     wide-column: より幅広なカラムを有効化 (上級者向けUI専用)

config/themes.yml

@@ -1,4 +1,5 @@
 default: styles/application.scss
-classic: styles/classic.scss
 contrast: styles/contrast.scss
 mastodon-light: styles/mastodon-light.scss
+akane-blue: styles/akane-blue.scss
+akane-classic: styles/akane-classic.scss