[UI] CSS polish all around

public/assets/css/base.css

@@ -258,9 +258,12 @@ input.larger {
       background: var(--accent);
       border-radius: 50%;
       background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgaW5rc2NhcGU6dmVyc2lvbj0iMS4wICg0MDM1YTRmYjQ5LCAyMDIwLTA1LTAxKSIgICBzb2RpcG9kaTpkb2NuYW1lPSJjaXJjbGUuc3ZnIiAgIGlkPSJzdmc0IiAgIHZlcnNpb249IjEuMSIgICBoZWlnaHQ9IjUwMCIgICB3aWR0aD0iNTAwIj4gIDxtZXRhZGF0YSAgICAgaWQ9Im1ldGFkYXRhMTAiPiAgICA8cmRmOlJERj4gICAgICA8Y2M6V29yayAgICAgICAgIHJkZjphYm91dD0iIj4gICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PiAgICAgICAgPGRjOnR5cGUgICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGRlZnMgICAgIGlkPSJkZWZzOCIgLz4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzQiICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjMwIiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjAiICAgICBpbmtzY2FwZTpjeT0iMjUwIiAgICAgaW5rc2NhcGU6Y3g9IjI1MS4wNDYwMyIgICAgIGlua3NjYXBlOnpvb209IjEuOTEyIiAgICAgc2hvd2dyaWQ9ImZhbHNlIiAgICAgaWQ9Im5hbWVkdmlldzYiICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMzgyIiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIyNTYwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiICAgICBvYmplY3R0b2xlcmFuY2U9IjEwIiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIiAvPiAgPGNpcmNsZSAgICAgc3R5bGU9ImZpbGw6IzJlMzQ0MDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzJlMzQ0MDtzdHJva2Utb3BhY2l0eTowIiAgICAgaWQ9ImNpcmNsZTIiICAgICBzdHJva2Utd2lkdGg9IjgiICAgICBzdHJva2U9IiMwMDAiICAgICBmaWxsPSIjZmZmIiAgICAgcj0iMjEwIiAgICAgY3k9IjI1MCIgICAgIGN4PSIyNTAiIC8+PC9zdmc+);
-      background-position: center;
+      background-position: center center;
       background-repeat: no-repeat;
-      background-size: 50%;
+      background-size: 60%;
+      -webkit-background-size: 60%;
+      -moz-background-size: 60%;
+      -o-background-size: 60%;
       fill: #2e3440;
 }
 .content input[type="radio"]:focus + label::before,

public/assets/css/base_small.css

@@ -4,8 +4,8 @@
       --main-font: 'Open Sans', sans-serif;
 
       /* font and margin sizes */
-      --main-size: 1.15em;
+      --main-size: 1.2em;
-      --medium-size: 0.65em;
+      --medium-size: 0.7em;
       --small-size: 0.65em;
       --unit-size: 1em;
       --side-margin: 2em;

public/assets/css/left/left_small.css

@@ -21,7 +21,7 @@
 .navbar .left-nav > a {
       display: block;
       color: var(--accent);
-      font-size: var(--medium-size);
+      font-size: calc(1.2 * var(--medium-size));
       margin-bottom: var(--unit-size);
       margin-left: var(--unit-size);
 }
@@ -80,7 +80,7 @@ input.larger {
       flex-wrap: wrap;
       background-color: var(--bg2);
       padding: var(--unit-size);
-      font-size: var(--small-size);
+      font-size: var(--medium-size);
       margin-bottom: var(--unit-size);
       vertical-align: middle;
 }

public/assets/css/replies/replies.css

@@ -3,12 +3,15 @@
       border: none !important;
 }
 .note {
-      margin-bottom: 0;
+      margin-bottom: 0 !important;
 }
-#form div:nth-of-type(1) {
+#save {
+      display: flex;
+}
+#save div:nth-of-type(1) {
       padding: var(--unit-size);
 }
-#form div:nth-of-type(1) textarea {
+#save div:nth-of-type(1) textarea {
       padding: var(--unit-size);
       border-radius: var(--unit-size);
       background-color: var(--bg1);
@@ -16,10 +19,4 @@
       width: 100%;
       box-sizing: border-box;
 }
-
+#save div:nth-of-type(2)
-#form div:nth-of-type(3) button {
-      font-size: var(--medium-size) !important;
-      float: right;
-      margin-right: var(--unit-size);
-      margin-bottom: var(--unit-size);
-}

public/assets/css/settings/settings.css

@@ -76,7 +76,6 @@
 .form {
       order: 3;
       padding: calc(2*var(--unit-size));
-      font-size: var(--medium-size);
       height: 100%;
       width: 100%;
       border-radius: 0 0 var(--small-size) var(--small-size);
@@ -84,11 +83,14 @@
 .form-single {
       order: 2;
       padding: calc(2*var(--unit-size));
-      font-size: var(--medium-size);
       height: 100%;
       width: 100%;
       border-radius: var(--small-size);
 }
+.form label,
+.form-single label {
+      font-size: var(--medium-size);
+}
 
 /* FORMS ------------------------------*/
 label {
@@ -101,9 +103,9 @@ label {
 input[type=text] {
       margin-top: calc(var(--unit-size) * 0.5);
       width: calc(100% - var(--unit-size));
-      background-color: var(--bg4);
+      background-color: var(--bg2);
       box-shadow: var(--shadow);
-      border-style: none;
+      border: solid 2px var(--accent-low);
       padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
       color: var(--fg);
       border-radius: calc(var(--unit-size) * 0.5);
@@ -128,13 +130,13 @@ button[type=submit] {
       font-weight: 700;
 }
 
-#form_bio {
+#save_bio {
       margin-top: calc(var(--unit-size) * 0.5);
       width: calc(100% - var(--unit-size));
       height: calc(10 * var(--unit-size));
-      background-color: var(--bg4);
       box-shadow: var(--shadow);
-      border-style: none;
+      background-color: var(--bg2);
+      border: solid 2px var(--accent-low);
       padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
       color: var(--fg);
       border-radius: calc(var(--unit-size) * 0.5);
@@ -143,23 +145,23 @@ button[type=submit] {
       resize: vertical;
 }
 
-#form_phone_number {
+#save_phone_number {
       margin-top: calc(var(--unit-size) * 0.5);
       width: calc(100% - var(--unit-size));
-      background-color: var(--bg4);
+      background-color: var(--bg2);
       box-shadow: var(--shadow);
-      border-style: none;
+      border: solid 2px var(--accent-low);
       padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
       color: var(--fg);
       border-radius: calc(var(--unit-size) * 0.5);
       font-size: var(--medium-size);
 }
 
-#form_language{
+#save_language{
       margin-top: calc(var(--unit-size) * 0.5);
-      background-color: var(--bg4);
+      background-color: var(--bg2);
       box-shadow: var(--shadow);
-      border-style: none;
+      border: solid 2px var(--accent-low);
       padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
       color: var(--fg);
       border-radius: calc(var(--unit-size) * 0.5);
@@ -186,13 +188,6 @@ select {
       margin-left: var(--unit-size);
 }
 
-button {
-      background-color: var(--fg);
-      padding: var(--small-size);
-      border: none;
-      border-radius: var(--small-size);
-}
-
 /* JS CROPPING */
 #img-cropped {
       display: block;
@@ -279,3 +274,20 @@ input[type=radio] {
 #form-tabs ul .form form div label {
       margin-bottom: calc(var(--unit-size) * 0.5);
 }
+
+.secundary button[type=submit] {
+      background: var(--bg1);
+      padding: 0.6em 1.2em;
+      color: var(--fg);
+      border-style: solid;
+      border-color: var(--accent);
+      border-radius: var(--unit-size);
+      border-width: 2px;
+      font-family: 'Montserrat', sans-serif;
+      font-weight: 700;
+}
+.secundary button[type=submit]:focus,
+.secundary button[type=submit]:hover {
+      border-radius: var(--unit-size);
+      box-shadow: 0 0px 8px var(--accent);
+}

public/assets/css/settings/settings_mid.css

@@ -27,7 +27,6 @@
       flex: 1;
       background-color: var(--bg1);
       padding: var(--medium-size);
-      font-size: var(--medium-size);
       font-family: var(--head-font);
       border-radius: var(--small-size) var(--small-size) 0 0;
 }
@@ -77,7 +76,6 @@
 .form {
       order: 3;
       padding: calc(2*var(--unit-size));
-      font-size: var(--medium-size);
       height: 100%;
       width: 100%;
       box-shadow: var(--shadow);
@@ -86,26 +84,29 @@
 .form-single {
       order: 2;
       padding: calc(2*var(--unit-size));
-      font-size: var(--medium-size);
       height: 100%;
       width: 100%;
       border-radius: var(--small-size);
 }
+.form label,
+.form-single label {
+      font-size: var(--medium-size);
+}
 
 /* FORMS ------------------------------*/
-label {
+.form label {
       display: inline-block;
       font-family: 'Montserrat', sans-serif;
       font-weight: 700;
       width: 100%;
 }
 
-input[type=text] {
+.form input[type=text] {
       margin-top: calc(var(--unit-size) * 0.5);
       width: calc(100% - var(--unit-size));
-      background-color: var(--bg4);
+      background-color: var(--bg2);
       box-shadow: var(--shadow);
-      border-style: none;
+      border: solid 2px var(--accent-low);
       padding: calc(var(--unit-size) * 0.5);
       color: var(--fg);
       border-radius: calc(var(--unit-size) * 0.5);
@@ -116,26 +117,14 @@ input[type=text] {
       float: right;
 }
 
-button[type=submit] {
-      background: var(--bg1);
-      padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2);
-      color: var(--fg);
-      border-style: solid;
-      border-color: var(--accent);
-      border-radius: var(--unit-size);
-      border-width: 2px;
-      font-family: 'Montserrat', sans-serif;
-      font-size: var(--small-size);
-      font-weight: 700;
-}
 
-#form_bio {
+#save_bio {
       margin-top: calc(var(--unit-size) * 0.5);
       width: calc(100% - var(--unit-size));
       height: calc(10 * var(--unit-size));
-      background-color: var(--bg4);
       box-shadow: var(--shadow);
-      border-style: none;
+      background-color: var(--bg2);
+      border: solid 2px var(--accent-low);
       padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
       color: var(--fg);
       border-radius: calc(var(--unit-size) * 0.5);
@@ -144,23 +133,23 @@ button[type=submit] {
       resize: vertical;
 }
 
-#form_phone_number {
+#save_phone_number {
       margin-top: calc(var(--unit-size) * 0.5);
       width: calc(100% - var(--unit-size));
-      background-color: var(--bg4);
+      background-color: var(--bg2);
+      border: solid 2px var(--accent-low);
       box-shadow: var(--shadow);
-      border-style: none;
       padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
       color: var(--fg);
       border-radius: calc(var(--unit-size) * 0.5);
       font-size: var(--medium-size);
 }
 
-#form_language{
+#save_language{
       margin-top: calc(var(--unit-size) * 0.5);
-      background-color: var(--bg4);
+      background-color: var(--bg2);
+      border: solid 2px var(--accent-low);
       box-shadow: var(--shadow);
-      border-style: none;
       padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
       color: var(--fg);
       border-radius: calc(var(--unit-size) * 0.5);
@@ -187,13 +176,6 @@ select {
       margin-left: var(--unit-size);
 }
 
-button {
-      background-color: var(--fg);
-      padding: var(--small-size);
-      border: none;
-      border-radius: var(--small-size);
-}
-
 /* JS Cropping */
 #img-cropped {
       display: block;
@@ -280,3 +262,20 @@ input[type=radio] {
 #form-tabs ul .form form div label {
       margin-bottom: calc(var(--unit-size) * 0.5);
 }
+
+.secundary button[type=submit] {
+      background: var(--bg1);
+      padding: 0.6em 1.2em;
+      color: var(--fg);
+      border-style: solid;
+      border-color: var(--accent);
+      border-radius: var(--unit-size);
+      border-width: 2px;
+      font-family: 'Montserrat', sans-serif;
+      font-weight: 700;
+}
+.secundary button[type=submit]:focus,
+.secundary button[type=submit]:hover {
+      border-radius: var(--unit-size);
+      box-shadow: 0 0px 8px var(--accent);
+}

public/assets/css/settings/settings_small.css

@@ -27,7 +27,6 @@
       flex: 1;
       background-color: var(--bg1);
       padding: var(--medium-size);
-      font-size: var(--medium-size);
       font-family: var(--head-font);
       border-radius: var(--small-size) var(--small-size) 0 0;
 }
@@ -47,7 +46,7 @@
       flex: 0 1 auto;
       list-style-type: none;
       font-weight: 700;
-      font-size: var(--unit-size);
+      font-size: var(--medium-size);
 }
 
 .set-nav a {
@@ -78,7 +77,6 @@
 .form {
       order: 3;
       padding: var(--unit-size);
-      font-size: var(--unit-size);
       height: 100%;
       width: 100%;
       box-shadow: var(--shadow);
@@ -87,14 +85,18 @@
 .form-single {
       order: 2;
       padding: var(--unit-size);
-      font-size: var(--unit-size);
       height: 100%;
       width: 100%;
       border-radius: var(--small-size);
 }
+.form label,
+.form-single label {
+      font-size: var(--medium-size);
+}
 
 /* FORMS ------------------------------*/
-label {
+.form label,
+.form-single label {
       display: inline-block;
       font-family: 'Montserrat', sans-serif;
       font-weight: 700;
@@ -102,12 +104,13 @@ label {
       width: 100%;
 }
 
-input[type=text] {
+.form input[type=text],
+.form-single input[type=text] {
       margin-top: calc(var(--unit-size) * 0.5);
       width: calc(100% - var(--unit-size));
-      background-color: var(--bg4);
       box-shadow: var(--shadow);
-      border-style: none;
+      background-color: var(--bg2);
+      border: solid 2px var(--accent-low);
       padding: calc(var(--unit-size) * 0.5);
       color: var(--fg);
       border-radius: calc(var(--unit-size) * 0.5);
@@ -118,26 +121,13 @@ input[type=text] {
       float: right;
 }
 
-button[type=submit] {
+#save_bio {
-      background: var(--bg1);
-      padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2);
-      color: var(--fg);
-      border-style: solid;
-      border-color: var(--accent);
-      border-radius: var(--unit-size);
-      border-width: 2px;
-      font-family: 'Montserrat', sans-serif;
-      font-size: var(--small-size);
-      font-weight: 700;
-}
-
-#form_bio {
       margin-top: calc(var(--unit-size) * 0.5);
       width: calc(100% - var(--unit-size));
       height: calc(10 * var(--unit-size));
-      background-color: var(--bg4);
+      background-color: var(--bg2);
+      border: solid 2px var(--accent-low);
       box-shadow: var(--shadow);
-      border-style: none;
       padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
       color: var(--fg);
       border-radius: calc(var(--unit-size) * 0.5);
@@ -146,23 +136,23 @@ button[type=submit] {
       resize: vertical;
 }
 
-#form_phone_number {
+#save_phone_number {
       margin-top: calc(var(--unit-size) * 0.5);
       width: calc(100% - var(--unit-size));
-      background-color: var(--bg4);
+      background-color: var(--bg2);
+      border: solid 2px var(--accent-low);
       box-shadow: var(--shadow);
-      border-style: none;
       padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
       color: var(--fg);
       border-radius: calc(var(--unit-size) * 0.5);
       font-size: var(--medium-size);
 }
 
-#form_language{
+#save_language{
       margin-top: calc(var(--unit-size) * 0.5);
-      background-color: var(--bg4);
+      background-color: var(--bg2);
+      border: solid 2px var(--accent-low);
       box-shadow: var(--shadow);
-      border-style: none;
       padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
       color: var(--fg);
       border-radius: calc(var(--unit-size) * 0.5);
@@ -189,13 +179,6 @@ select {
       margin-left: var(--unit-size);
 }
 
-button {
-      background-color: var(--fg);
-      padding: var(--small-size);
-      border: none;
-      border-radius: var(--small-size);
-}
-
 /* JS Cropping */
 #img-cropped {
       display: block;