Add custom notification style for 2048Clone theme

Notification border now uses a variable, to allow that to be overridden using a variable in classic stylesheet.

Also renamed settings item border variable, since it's doing a similar thing, and should be named as such for consistency.

Author: Coteh

src/styles/components/notification.css

@@ -15,7 +15,7 @@
 
 .notification-area > .notification {
     background-color: var(--notification-background-color);
-    border: 1px solid var(--notification-background-color);
+    border: var(--notification-border);
     border-radius: 0.25rem;
     margin: 0.2rem;
 

src/styles/game/panes/settings.css

@@ -26,13 +26,13 @@
     width: 100%;
     justify-content: space-around;
     align-items: center;
-    border-top: var(--settings-item-border-color);
+    border-top: var(--settings-item-border);
     border-bottom: none;
     height: 2em;
 }
 
 .settings .settings-item:last-child {
-    border-bottom: var(--settings-item-border-color);
+    border-bottom: var(--settings-item-border);
 }
 
 .settings .settings-item > * {

src/styles/global.css

@@ -67,7 +67,7 @@
     --box-border-color: var(--gray-3);
     --box-border-color-highlighted: var(--gray-5);
 
-    --settings-item-border-color: 1px solid var(--gray-4);
+    --settings-item-border: 1px solid var(--gray-4);
 
     --background-color: var(--beige);
     --fallback-background-color: var(--background-color);
@@ -82,6 +82,7 @@
     --text-font-family: sans-serif;
 
     --notification-background-color: var(--gray-7);
+    --notification-border: 1px solid var(--gray-7);
     --notification-text-color: var(--black);
 
     --share-button-background-color: var(--green);

src/styles/themes/classic.css

@@ -12,6 +12,9 @@
 
     --text-font-family: "Comic Sans MS", "Comic Neue", sans-serif;
 
+    --notification-background-color: var(--white);
+    --notification-border: 2px solid var(--black);
+
     --share-button-background-color: #00d600;
     --share-button-background-color-hover: #00ae00;
 
@@ -400,3 +403,12 @@ body.classic .landscape-overlay > .overlay-content {
 body.classic .landscape-overlay > .overlay-content > * {
     color: white;
 }
+
+/* Notification */
+
+body.classic .notification-area > .notification {
+    border-radius: 0;
+    margin: 0;
+
+    font-family: var(--text-font-family);
+}