From 3673c3a46b907e4a93ad40ceddf5809c6c434e5c Mon Sep 17 00:00:00 2001
From: Laurent Mazet <mazet@softndesign.org>
Date: Mon, 11 Aug 2025 22:45:56 +0200
Subject: [PATCH] refactor css files into one file

---
 public/alert.css     | 111 ---------------------------------
 public/trivabble.css | 145 ++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 131 insertions(+), 125 deletions(-)
 delete mode 100644 public/alert.css

diff --git a/public/alert.css b/public/alert.css
deleted file mode 100644
index 9cb4754..0000000
--- a/public/alert.css
+++ /dev/null
@@ -1,111 +0,0 @@
-.alert {
-    position:fixed;
-    top:0;
-    left:0;
-    right:0;
-    bottom:0;
-    background:rgba(0,0,0,0.5);
-    display:-webkit-flex;
-    display:flex;
-    -webkit-flex-direction:column;
-    flex-direction:column;
-    -webkit-justify-content:center;
-    justify-content:center;
-    line-height:1.5em;
-    text-align:center;
-}
-
-.alert-outer {
-    background-color: var(--modal-bg);
-    color:var(--modal-color);
-    border-radius:4px;
-    display:-webkit-flex;
-    display:flex;
-    -webkit-flex-direction:column;
-    flex-direction:column;
-    -webkit-align-self:center;
-    align-self:center;
-    text-align:center;
-    box-shadow: 0 0 8px #000;
-    box-shadow: 0 0 8px var(--modal-shadow);
-    max-width:75%;
-    padding:4px;
-}
-
-.alert.on-ipad.prompt {
-    justify-content:flex-start;
-    position:absolute;
-}
-
-.alert.on-ipad.prompt .alert-outer {
-    margin-top:1em;
-}
-
-.alert-content-and-input {
-    padding:1ex;
-}
-
-.alert input[type=text], .alert input[type=number], .alert input[type=password] {
-   border-radius:none;
-   box-sizing:border-box;
-   min-height:1.5rem;
-   outline:none;
-   width:95%;
-   min-width:10ex;
-   margin:1ex;
-   border:1px solid silver;
-   border:1px solid var(--chat-border);
-   background: inherit;
-   color: inherit;
-}
-
-.alert input[type=text]:focus, .alert  input[type=password]:focus {
-   border:1px solid #5CF;
-   box-shadow:0 0 1px #5CF
-}
-
-.alert input[type=button], .alert button {
-   margin:1px;
-   border-radius:0;
-   min-height:1.5rem;
-   border:1px solid silver;
-   padding:1ex 2ex;
-   background:white
-}
-
-.alert input[type=button]:active, .alert button:active {
-   background:#D5D5D5
-}
-
-.alert button {
-    margin:0.5ex;
-    border:0;
-    background-color: lightgray;
-    background-color: var(--modal-button-bg);
-    color: black;
-    text-align: center;
-    border-radius: 0.25rem;
-    font-weight: bold;
-    cursor: pointer;
-}
-
-.alert button:hover {
-    background-color: darkgray;
-    background-color: var(--modal-button-hover-bg);
-}
-
-.alert-prompt-buttons {
-    display: none;
-}
-
-.alert.choice .alert-prompt-buttons, .alert.prompt .alert-prompt-buttons {
-    display: block;
-}
-
-.alert.choice.choice-inline .alert-content, .choice.choice-inline .alert-prompt {
-    display:inline-block;
-}
-
-.alert.choice.choice-inline .alert-prompt {
-    padding-left: 1ex;
-}
diff --git a/public/trivabble.css b/public/trivabble.css
index cd22e98..20dbcc6 100644
--- a/public/trivabble.css
+++ b/public/trivabble.css
@@ -51,6 +51,7 @@ a {
     --modal-button-bg: lightgray;
     --modal-button-hover-bg: darkgray;
     --btn-settings-bg: lightgray;
+    --btn-settings-hover-bg: darkgray;
     --btn-settings-color: black;
 }
 
@@ -69,10 +70,10 @@ html, #board, [draggable], .tile {
     -ms-user-select: none;
     user-select: none;
 
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
 }
 
 #chat-messages, #number, #name {
@@ -105,9 +106,9 @@ html, #board, [draggable], .tile {
 }
 
 [draggable] {
-  /* Required to make elements draggable in old WebKit */
-  -khtml-user-drag: element;
-  -webkit-user-drag: element;
+    /* Required to make elements draggable in old WebKit */
+    -khtml-user-drag: element;
+    -webkit-user-drag: element;
 }
 
 #help-message {
@@ -727,16 +728,14 @@ td.blink {
     text-align: center;
     cursor: pointer;
     border-radius: 0.25rem;
-    background-color: lightgray;
-    background-color: var(--modal-button-bg);
 }
 
-.alert-outer button {
+.modal-button, .alert-outer button {
     background-color: lightgray;
     background-color: var(--modal-button-bg);
 }
 
-.modal-button:hover, #btn-settings:hover, .alert-outer button {
+.modal-button:hover, .alert-outer button:hover {
     background-color: darkgray;
     background-color: var(--modal-button-hover-bg);
 }
@@ -784,6 +783,11 @@ td.blink {
     float:right
 }
 
+#panel #btn-settings:hover {
+    background: darkgray;
+    background:var(--btn-settings-hover-bg);
+}
+
 #panel #btn-settings-and-timer {
     text-align:right;
 }
@@ -931,9 +935,121 @@ button#next-help-msg:hover {
 }
 
 textarea {
-  background: inherit;
-  color: inherit;
-  border: 1px solid gray;
+    background: inherit;
+    color: inherit;
+    border: 1px solid gray;
+}
+
+.alert {
+    position:fixed;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    background:rgba(0,0,0,0.5);
+    display:-webkit-flex;
+    display:flex;
+    -webkit-flex-direction:column;
+    flex-direction:column;
+    -webkit-justify-content:center;
+    justify-content:center;
+    line-height:1.5em;
+    text-align:center;
+}
+
+.alert-outer {
+    background-color: var(--modal-bg);
+    color:var(--modal-color);
+    border-radius:4px;
+    display:-webkit-flex;
+    display:flex;
+    -webkit-flex-direction:column;
+    flex-direction:column;
+    -webkit-align-self:center;
+    align-self:center;
+    text-align:center;
+    box-shadow: 0 0 8px #000;
+    box-shadow: 0 0 8px var(--modal-shadow);
+    max-width:75%;
+    padding:4px;
+}
+
+.alert.on-ipad.prompt {
+    justify-content:flex-start;
+    position:absolute;
+}
+
+.alert.on-ipad.prompt .alert-outer {
+    margin-top:1em;
+}
+
+.alert-content-and-input {
+    padding:1ex;
+}
+
+.alert input[type=text], .alert input[type=number], .alert input[type=password] {
+    border-radius:none;
+    box-sizing:border-box;
+    min-height:1.5rem;
+    outline:none;
+    width:95%;
+    min-width:10ex;
+    margin:1ex;
+    border:1px solid silver;
+    border:1px solid var(--chat-border);
+    background: inherit;
+    color: inherit;
+}
+
+.alert input[type=text]:focus, .alert  input[type=password]:focus {
+    border:1px solid #5CF;
+    box-shadow:0 0 1px #5CF
+}
+
+.alert input[type=button], .alert button {
+    margin:1px;
+    border-radius:0;
+    min-height:1.5rem;
+    border:1px solid silver;
+    padding:1ex 2ex;
+    background:white
+}
+
+.alert input[type=button]:active, .alert button:active {
+    background:#D5D5D5
+}
+
+.alert button {
+    margin:0.5ex;
+    border:0;
+    background-color: lightgray;
+    background-color: var(--modal-button-bg);
+    color: black;
+    text-align: center;
+    border-radius: 0.25rem;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.alert button:hover {
+    background-color: darkgray;
+    background-color: var(--modal-button-hover-bg);
+}
+
+.alert-prompt-buttons {
+    display: none;
+}
+
+.alert.choice .alert-prompt-buttons, .alert.prompt .alert-prompt-buttons {
+    display: block;
+}
+
+.alert.choice.choice-inline .alert-content, .choice.choice-inline .alert-prompt {
+    display:inline-block;
+}
+
+.alert.choice.choice-inline .alert-prompt {
+    padding-left: 1ex;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -976,6 +1092,7 @@ textarea {
         --modal-button-bg: #AAA;
         --modal-button-hover-bg: #FFF;
         --btn-settings-bg: #555;
+        --btn-settings-hover-bg: #777;
         --btn-settings-color: #CCC;
     }
 
-- 
2.30.2