UI updates and bug fixes
[browser-rts.git] / public / scifi.css
index c7c02f2a0bb7a675a356648dd0debc4df94c4ff4..2aa04852608cf1c96f1bab8f2440f7856826cde4 100644 (file)
@@ -1,5 +1,6 @@
 :root {
     --border: #1c7282;
+    --blended-border: #073b44;
     --page-bg: #061619;
     --green-bg: #193818;
     --green-border: #32821c;
@@ -12,8 +13,8 @@ input {
 body {
     background-color: var(--page-bg);
     color: #fff;
-    margin: 50px auto 20px;
-    width: 1024px;
+    margin: 0 auto 20px;
+    max-width: 1024px;
     font-family: 'Roboto Condensed', sans-serif;
     font-weight: normal;
     font-size: 16px;
@@ -86,18 +87,18 @@ button::after, .btn::after {
     float: right;
     color: var(--border);
 }
-button.danger, .btn.danger {
+.danger {
     background-color: #381818;
     border-color: #821c1c;
 }
-button.danger::after, .btn.danger::after {
+.danger::after {
     color: #821c1c
 }
-button.success, .btn.success {
+.success {
     background-color: var(--green-bg);
     border-color: var(--green-border);
 }
-button.success::after, .btn.success::after{
+.success::after{
     color: #32821c;
 }
 button:active, .btn:active, button:hover, .btn:hover {
@@ -135,25 +136,38 @@ footer {
     margin-top: 2rem;
 }
 
-.nav {
+#nav, #nav ul {
     padding: 0;
     margin: 0;
 }
-.nav li {
+#nav ul {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+}
+#nav li {
+    margin: 0;
     list-style: none;
+    display: inline-flex;
 }
-.nav li a {
-    display: block;
+#nav li a {
     padding: 10px 25px;
 }
-.nav li a:hover {
-    background-color: #0d2329;
+#nav li a:hover {
+    background-color: var(--border);
 }
-.nav li a::before {
+#nav li a::before {
     content: '';
 }
-.nav li a::after {
-    float: right;
+#nav li a::after {
+    content: '';
+}
+.alert {
+    padding: 10px;
+    font-size: 1rem;
+    margin-bottom: 1.2rem;
+    border-style: solid;
+    border-width: 1px;
 }
 
 /** Grid Stuff **/
@@ -208,9 +222,6 @@ form > div {
     --aug-border-all: 1px;
     --aug-border-bg: var(--border);
 }
-.nav {
-    margin-bottom: 1rem;
-}
 #main {
     background-color: var(--page-bg);
     padding: 1rem;
@@ -219,4 +230,23 @@ form > div {
 }
 #corp-ads {
     margin-top: 1rem;
+}
+#topbar {
+    margin-bottom: 50px;
+    padding: 0;
+    --aug-border-all: 1px;
+    --aug-border-bg: var(--border);
+    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(28,114,130,0.5) 100%);
+}
+#topbar > .row {
+    border-bottom: solid 1px var(--blended-border);
+}
+#info-bar {
+    display: flex;
+    flex-basis: 40%;
+    border: solid 0 var(--border);
+    border-left-width: 1px;
+    padding: 10px 25px;
+    background-color: var(--page-bg);
+    justify-content: space-evenly;
 }
\ No newline at end of file