main.css adjustments, new "Nostalgic" theme

index.html

@@ -23,6 +23,7 @@
     <link rel='stylesheet' href='/src/frontend/style/main.css' />
     <link rel='stylesheet' href='/src/frontend/style/theme-dark.css' />
     <link rel='stylesheet' href='/src/frontend/style/theme-shaddox.css' />
+    <link rel='stylesheet' href='/src/frontend/style/theme-nostalgic.css' />
     <link rel='stylesheet' href='chess/css/chessboard-1.0.0.min.css' />
     <link href="font-awesome/css/all.css" rel="stylesheet">
     <link rel="stylesheet" href="libraries/jquery-ui/jquery-ui.css">
@@ -595,6 +596,7 @@ <h2 v-if="connectionRefused">
                                     <option value="gikopoi">{{ $t("ui.preferences_ui_theme_gikopoi") }}</option>
                                     <option value="shaddox">{{ $t("ui.preferences_ui_theme_shaddox") }}</option>
                                     <option value="dark">{{ $t("ui.preferences_ui_theme_dark") }}</option>
+                                    <option value="nostalgic">{{ $t("ui.preferences_ui_theme_nostalgic") }}</option>
                                 </select>
                             </div>
                             <div class='popup-item' v-if="!getSiteArea().restrictLanguage">

src/frontend/style/main.css

@@ -457,6 +457,7 @@ video {
 .non-wrappable-buttons
 {
     display: flex;
+    align-self: center;
 }
 
 .tooltip-section-title
@@ -471,6 +472,7 @@ video {
 {
     min-height: 80px;
     align-items: center;
+    padding: 3px;
 }
 
 #toolbar button.arrow-button

src/frontend/style/theme-nostalgic.css

@@ -0,0 +1,170 @@
+.theme-nostalgic #toolbar {
+  background: url("/images/background.svg"), linear-gradient(to right, #F1F3E8, #8AD6EE);
+  background-position-x: calc(100% - 50px),0;
+  background-repeat: no-repeat;
+  background-blend-mode: soft-light;
+  padding: 16px;
+  box-shadow: inset 0 0 25px rgba(255, 255, 255, 0.42);
+}
+
+.theme-nostalgic #toolbar-text-input {
+  font-size: 0;
+}
+
+.theme-nostalgic #toolbar button{
+  background-color: transparent;
+  color: #2d2d2d;
+  border-radius: 5px;
+  box-shadow: 1px 1px 1px rgb(255, 255, 255), inset 1px 1px 1px rgb(255, 255, 255);
+}
+
+
+.theme-nostalgic #toolbar button:hover:enabled {
+  color: white;
+  border-top-color: gray;
+  border-right-color: white;
+  border-bottom-color: white;
+  border-left-color: gray;
+  box-shadow: inset 0 0 1px rgb(0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.12);
+}
+
+.theme-nostalgic #textbox {
+  background-color: rgba(0, 0, 0, 0.11);
+  text-shadow: none;
+}
+
+.theme-nostalgic .tooltip-section {
+  padding: 3px;
+}
+
+.theme-nostalgic .tooltip-section > label {
+  color: #2d2d2d;
+  background: rgb(255, 255, 255);
+  border: 1px solid #848484;
+  border-radius: 3px;
+  padding-inline: 5px;
+}
+
+.theme-nostalgic .tooltip-section-title div{
+  color: #2d2d2d;
+  background: rgb(255, 255, 255);
+  border: 1px solid #848484;
+  border-radius: 3px;
+  flex-grow: inherit;
+  text-align: center;
+}
+
+.theme-nostalgic #infobox {
+  text-shadow: none;
+  font-family: IPAMonaPGothic,'IPA モナー Pゴシック',Monapo,Mona,'MS PGothic','ＭＳ Ｐゴシック',submona,sans-serif;
+}
+
+.theme-nostalgic #chat-log-label {
+  font-size: 0;
+}
+
+.theme-nostalgic #chat-log-label::before {
+  content: "Message Log:";
+  font-size: 16px;
+}
+
+.theme-nostalgic .arrow-button-left {
+  background-image: none;
+}
+
+.theme-nostalgic .arrow-button-left::before {
+  content:"⭦";
+  flex-grow: 1;
+  display: flex;
+  align-items: end;
+  justify-content: center;
+}
+
+.theme-nostalgic .arrow-button-up {
+  background-image: none;
+}
+
+.theme-nostalgic .arrow-button-up::before {
+  content:"⭧";
+  flex-grow: 1;
+  display: flex;
+  align-items: end;
+  justify-content: center;
+}
+
+.theme-nostalgic .arrow-button-down {
+  background-image: none;
+}
+
+.theme-nostalgic .arrow-button-down::before {
+  content:"⭩";
+  flex-grow: 1;
+  display: flex;
+  align-items: end;
+  justify-content: center;
+}
+.theme-nostalgic .arrow-button-right
+{
+    background-image: none;
+}
+.theme-nostalgic .arrow-button-right::before{
+  content:"⭨";
+  flex-grow: 1;
+  display: flex;
+  align-items: end;
+  justify-content: center;
+}
+
+.theme-nostalgic #rula-popup {
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.29);
+  border-radius: 3px;
+  color: #053146;
+}
+
+.theme-nostalgic #user-list-popup {
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.29);
+  border-radius: 3px;
+  color: #053146;
+}
+
+.theme-nostalgic .popup {
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.29);
+  border-radius: 3px;
+  color: #0e4864;
+}
+
+.theme-nostalgic .popup-table th{
+  background: linear-gradient(to bottom, #ACACAC, #FFF);
+  border-bottom: 2px solid #757575;
+  font-weight:bold;
+}
+
+.theme-nostalgic .popup-titlebar{
+  box-shadow: inset 0px 5px 3px rgb(255, 255, 255);
+  background-color: #eaeaea;
+  font-weight: bold;
+}
+
+.theme-nostalgic .popup-buttons button{
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.39);
+  border-radius: 5px;
+}
+
+.theme-nostalgic .popup button:hover:enabled{
+  border: 1px solid #4cbf4c;
+  background-color: #b6f9b6;
+  box-shadow: inset 0 0 3px green;
+}
+
+.theme-nostalgic #page-container .ui-corner-all {
+  border-radius: 5px;
+}
+
+.theme-nostalgic .ui-slider .ui-slider-handle {
+  height: 0.8em;
+}
+
+.theme-nostalgic .tooltip-section .ui-slider {
+  margin: 8px 0;
+}

src/langs/de.json5

@@ -100,6 +100,7 @@
         preferences_ui_theme_gikopoi: "Gikopoi",
         preferences_ui_theme_shaddox: "Shaddox-Modus",
         preferences_ui_theme_dark: "Dunkel",
+        // preferences_ui_theme_nostalgic: "Nostalgic",
         preferences_command_section_visible: "Befehl-Buttons anzeigen",
         preferences_move_section_visible: "Bewegungs-Buttons anzeigen",
         preferences_bubble_section_visible: "Sprechblase-Button anzeigen",

src/langs/en.json5

@@ -100,6 +100,7 @@
         preferences_ui_theme_gikopoi: "Gikopoi",
         preferences_ui_theme_shaddox: "Shaddox Mode",
         preferences_ui_theme_dark: "Dark",
+        preferences_ui_theme_nostalgic: "Nostalgic",
         preferences_command_section_visible: "Display Command Buttons",
         preferences_move_section_visible: "Display Move Buttons",
         preferences_bubble_section_visible: "Display Bubble Buttons",

src/langs/es.json5

@@ -100,6 +100,7 @@
         preferences_ui_theme_gikopoi: "Gikopoi",
         preferences_ui_theme_shaddox: "Modo Shaddox",
         preferences_ui_theme_dark: "Oscuro",
+        // preferences_ui_theme_nostalgic: "Nostalgic",
         preferences_command_section_visible: "Mostrar botones de comando",
         preferences_move_section_visible: "Mostrar botones de movimiento",
         preferences_bubble_section_visible: "Mostrar botones de burbuja",

src/langs/fr.json5

@@ -99,6 +99,7 @@
         preferences_ui_theme_gikopoi: "Gikopoi",
         preferences_ui_theme_shaddox: "Mode Shaddox",
         // preferences_ui_theme_dark: "Dark",
+        // preferences_ui_theme_nostalgic: "Nostalgic",
         preferences_command_section_visible: "Afficher boutons de commande",
         preferences_move_section_visible: "Afficher boutons de déplacement",
         preferences_bubble_section_visible: "Afficher boutons de contrôle de la bulle",

src/langs/hu.json5

@@ -100,6 +100,7 @@
         preferences_ui_theme_gikopoi: "Gikopoi",
         preferences_ui_theme_shaddox: "Shaddox Téma",
         preferences_ui_theme_dark: "Sötét",
+        // preferences_ui_theme_nostalgic: "Nostalgic",
         preferences_command_section_visible: "Parancs gombok mutatása",
         preferences_move_section_visible: "Mozgás gombok mutatása",
         preferences_bubble_section_visible: "Buborék gombok mutatása",

src/langs/id.json5

@@ -100,6 +100,7 @@
         preferences_ui_theme_gikopoi: "Gikopoi",
         preferences_ui_theme_shaddox: "Mode Shaddox",
         preferences_ui_theme_dark: "Gelap",
+        // preferences_ui_theme_nostalgic: "Nostalgic",
         preferences_command_section_visible: "Tampilkan Tombol Perintah",
         preferences_move_section_visible: "Tampilkan Tombol Gerakan",
         preferences_bubble_section_visible: "Tampilkan Tombol Balon",

src/langs/ja.json5

@@ -100,6 +100,7 @@
         preferences_ui_theme_gikopoi: "ギコっぽい",
         preferences_ui_theme_shaddox: "Shaddoxモード",
         preferences_ui_theme_dark: "ダーク",
+        // preferences_ui_theme_nostalgic: "Nostalgic",
         preferences_command_section_visible: "呪文ボタンを表示",
         preferences_move_section_visible: "移動ボタンを表示",
         preferences_bubble_section_visible: "吹き出しボタンを表示",

src/langs/sv.json5

@@ -100,6 +100,7 @@
         preferences_ui_theme_gikopoi: "Gikopoi",
         preferences_ui_theme_shaddox: "Shaddoxläge",
         preferences_ui_theme_dark: "Mörkt",
+        // preferences_ui_theme_nostalgic: "Nostalgic",
         preferences_command_section_visible: "Visa Kontrollknappar",
         preferences_move_section_visible: "Visa Gångknappar",
         preferences_bubble_section_visible: "Visa Pratbubbleknappar",

src/langs/tr.json5

@@ -100,6 +100,7 @@
         preferences_ui_theme_gikopoi: "Gikopoi",
         preferences_ui_theme_shaddox: "Shaddox Modu",
         preferences_ui_theme_dark: "Koyu",
+        // preferences_ui_theme_nostalgic: "Nostalgic",
         preferences_command_section_visible: "Komut Butonlarını Göster",
         preferences_move_section_visible: "Yürüme Butonlarını Göster",
         preferences_bubble_section_visible: "Balon Butonlarını Göster",

src/langs/zh-TW.json5

@@ -100,6 +100,7 @@
         preferences_ui_theme_gikopoi: "GIKOpoi",
         //preferences_ui_theme_shaddox: "Shaddox Mode(暗色介面)",
         preferences_ui_theme_dark: "暗色介面",
+        // preferences_ui_theme_nostalgic: "Nostalgic",
         preferences_command_section_visible: "顯示指令按鈕",
         preferences_move_section_visible: "顯示移動按鈕",
         preferences_bubble_section_visible: "顯示對話框位置調整按鈕",