uploads/profiles

style/filterbar.css

@@ -20,6 +20,8 @@
 
     & .solid-select-placeholder {
         color: var(--text-secondary);
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     & .solid-select-option {
@@ -54,6 +56,7 @@
 
     & > .mode {
         width: 150px;
+        max-width: 20%;
 
         & .solid-select-control {
             border-right: none;
@@ -64,6 +67,7 @@
 
     & > .maps {
         width: 200px;
+        max-width: 20%;
 
         & .solid-select-control {
             border-right: none;
@@ -89,4 +93,34 @@
         outline: none;
         background: transparent;
     }
-}
+}
+
+@media (max-width: 450px) {
+    #filter-bar {
+        height: 105px;
+    }
+
+    .filter-bar {
+        flex-wrap: wrap;
+
+        & > .maps, & > .mode {
+            width: calc(100% - 30px);
+            max-width: calc(100% - 30px);
+        }
+
+        & > .maps, & > .mode {
+            .solid-select-control {
+                border-bottom: none;
+            }
+        }
+
+        & .reset {
+            border-right: var(--text-secondary) 1px solid;
+            border-bottom: none;
+        }
+
+        & .solid-select-control {
+            border-radius: 0;
+        }
+    }
+}

style/footer.css

@@ -1,5 +1,4 @@
 footer {
-    margin: 100px -31px -100px;
     text-align: center;
     line-height: 35px;
     vertical-align: middle;

style/header.css

@@ -1,3 +1,8 @@
+:root {
+    --icon-demos-tf: url('inline://images/logo.svg');
+    --icon-steam: url('inline://images/steam_login.svg');
+}
+
 header {
     width: 100%;
     white-space: nowrap;
@@ -11,7 +16,7 @@ header {
     text-transform: uppercase;
 
     & a, & a:visited {
-        color: var(--text-header);
+        color: var(--text-secondary);
         cursor: pointer;
         padding: .5em 1em;
         text-decoration: none;
@@ -20,7 +25,7 @@ header {
     }
 
     .main a {
-        background: url('inline://images/logo.svg') no-repeat 0;
+        background: var(--icon-demos-tf) no-repeat 0;
         background-size: 30px;
         padding-left: 35px;
         margin-left: 5px;
@@ -81,7 +86,7 @@ a.steam-login:before {
     height: inherit;
     width: 41px;
     background-size: 30px 30px;
-    background: rgba(255, 255, 255, 0.08) url('inline://images/steam_login.svg') no-repeat 0;
+    background: rgba(255, 255, 255, 0.08) var(--icon-steam) no-repeat 0;
     bottom: 0;
     left: 0;
     padding: 0;

style/pages/demo.css

@@ -1,5 +1,3 @@
-@import 'class-icons.css';
-
 table.chat, table.players {
     table-layout: fixed;
     width: 100%;

style/style.css

@@ -16,13 +16,12 @@
     --secondary-color: #444;
     --secondary-color-accent: #333;
     --text-primary: black;
-    --text-secondary: grey;
+    --text-secondary: #5d5d5d;
     --highlight-primary: #3e95e6;
     --highlight-secondary: #daecfa;
     --button-primary: #0078e7;
     --button-secondary: #e6e6e6;
     --button-critical: rgb(202, 60, 60);
-    --text-header: grey;
     --link-color: #0071b8;
     --link-color-visited: #004c8b;
 }
@@ -39,7 +38,6 @@
         --highlight-secondary: #448fbe;
         --button-primary: #2568ae;
         --button-secondary: #626262;
-        --text-header: #efefef;
         --link-color: #0093ed;
         --link-color-visited: #0063ff;
     }
@@ -60,13 +58,19 @@ body, html {
 .page {
     background-color: var(--primary-color);
     width: 100%;
-    min-height: 100%;
+    min-height: calc(100% - 60px);
     max-width: 1100px;
     margin-left: auto;
     margin-right: auto;
     padding: 40px 30px 100px;
 }
 
+@media (max-width: 700px) {
+    .page {
+        padding-top: 80px;
+    }
+}
+
 body {
     background-color: var(--secondary-color);
 }