Revert "Experimenting with new colour scheme more"

This reverts commit 27fb701cec.

assets/less/classes/container.less

@@ -19,6 +19,10 @@
         }
     }
 
+    &--translucent {
+        background-color: var(--background-colour-translucent);
+    }
+
     &__title {
         display: block;
         text-decoration: none;

assets/less/classes/footer.less

@@ -1,5 +1,5 @@
 .footer {
-    background: linear-gradient(0deg, var(--global-menu-colour), transparent) repeat-x;
+    background: linear-gradient(0deg, var(--gradient-start), transparent) repeat-x;
     flex: 0 0 auto;
     text-align: center;
     font-size: .9em;

assets/less/classes/header.less

@@ -1,6 +1,6 @@
 .header {
     flex: 0 0 auto;
-    background: linear-gradient(0deg, transparent, var(--global-menu-colour)) repeat-x;
+    background: linear-gradient(0deg, transparent, var(--gradient-start)) repeat-x;
 
     &__wrapper {
         margin: 0 auto;
@@ -82,7 +82,7 @@
 
         @media (max-width: @site-mobile-width) {
             width: 100%;
-            background: var(--global-menu-colour);
+            background: var(--gradient-start);
 
             &__item:not(:last-child) {
                 border-bottom: 1px solid var(--accent-colour);
@@ -103,7 +103,7 @@
                 transition: background-color .2s;
 
                 &:hover {
-                    background-color: var(--global-menu-colour);
+                    background-color: var(--gradient-start);
 
                     .header__submenu {
                         transform: scaleY(1);
@@ -141,7 +141,7 @@
             position: absolute; // floating
             transform: scaleY(0);
             transform-origin: center top 0;
-            background: var(--global-menu-colour);
+            background: var(--gradient-start);
             overflow: hidden;
             z-index: 100;
             text-align: left;
@@ -175,7 +175,7 @@
         @media (max-width: @site-mobile-width) {
             display: none;
             width: 100%;
-            background: var(--global-menu-colour);
+            background: var(--gradient-start);
             font-size: 1.1em;
 
             &-toggle:checked ~ .header__user {

assets/less/classes/input/button.less

@@ -1,7 +1,5 @@
 .input__button {
-    background-image: linear-gradient(0deg, transparent 0%, #fff9 50%, #fff9 200%);
+    background-image: linear-gradient(0deg, transparent, var(--gradient-start));
-    background-size: 100% 200%;
-    background-position: 0 100%;
     background-color: var(--accent-colour);
     font-family: @mio-font-regular;
     font-size: 1.1em;
@@ -10,7 +8,7 @@
     min-width: 80px;
     text-align: center;
     cursor: pointer;
-    transition: background-color .2s, box-shadow .2s, background-position .2s;
+    transition: background-color .2s, box-shadow .2s;
     color: var(--text-colour-header);
     border: 1px solid var(--text-colour-header);
     border-radius: 2px;
@@ -33,8 +31,7 @@
     }
 
     &:active {
-        background-color: var(--accent-colour);
+        background-color: var(--gradient-start);
-        background-position: 0 0;
     }
 
     &--new {

assets/less/classes/input/text.less

@@ -1,16 +1,15 @@
 .input__text {
-    border: 1px solid var(--accent-colour);
+    border: 1px solid #aaa;
     padding: 1px;
     background: #fff;
-    background-color: var(--background-colour);
+    color: #111;
-    color: var(--text-colour);
 
     &:focus {
-        border-color: #aaa;
+        border-color: var(--accent-colour);
     }
 
     &--readonly {
-        color: #aaa;
+        color: #666;
     }
 
     &--monospace {
@@ -26,9 +25,5 @@
         box-shadow: inset 0 0 4px #111;
         border-color: #222;
         transition: border-color .2s;
-
-        &:focus {
-            border-color: var(--accent-colour);
-        }
     }
 }

assets/less/main.less

@@ -4,19 +4,25 @@
 @site-max-width: 1200px;
 @site-mobile-width: 800px;
 
+@default-accent-colour: #9475b2;
+@default-background-colour: #fbeeff;
+@default-text-colour: #000;
+@default-header-text-colour: #306;
+@default-gradient-start: #c2affe;
+
 :root {
     --site-max-width: @site-max-width;
     --site-background-meta: no-repeat center / cover fixed;
     --site-background-image: initial;
 
     --user-colour: inherit;
-    //--accent-colour: #9475b2;
+    --accent-colour: @default-accent-colour;
-    --accent-colour: #452c4c;
+    --text-colour: @default-text-colour;
-    --text-colour: #fff;
+    --text-colour-inverted: color(#fff - @default-text-colour);
-    --text-colour-inverted: #000;
+    --text-colour-header: @default-header-text-colour;
-    --text-colour-header: #ddd; // kill this too probably
+    --background-colour: @default-background-colour;
-    --background-colour: #090909;
+    --background-colour-translucent: fade(@default-background-colour, 90%);
-    --global-menu-colour: var(--accent-colour);
+    --gradient-start: @default-gradient-start; // deprecate this in favour of --accent-colour at some point
 }
 
 * {
@@ -51,14 +57,15 @@ body {
 
     &--default {
         --site-background-meta: repeat;
-        --site-background-image: url('/images/cloud-pattern.png');
+        --site-background-image: url('https://mikoto.misaka.nl/i/cloudss.png');
-        --background-colour: var(--accent-colour);
         background-blend-mode: multiply;
+
+        background-color: var(--accent-colour);
+        --gradient-start: var(--accent-colour);
     }
 
     &--legacy {
-        //--background-colour: #fbeeff;
+        --background-color: #fbeeff;
-        --global-menu-colour: #3f154c;
     }
 }
 

templates/master.twig

@@ -14,7 +14,7 @@
             </style>
         {% endif %}
     </head>
-    <body class="main main--{{ is_new_ready|default(false) is empty ? 'legacy' : 'default' }}">
+    <body class="main">
         {% include '_layout/header.twig' %}
 
         <div class="main__wrapper">

templates/settings/account.twig

@@ -11,7 +11,7 @@
         </div>
     </div>#}
 
-    <div class="container">
+    <div class="container container--translucent">
         <div class="container__title">Account</div>
         <form action="" method="post" class="settings__account">
             <input type="hidden" name="csrf" value="{{ csrf_token() }}">
@@ -132,7 +132,7 @@
     </div>
 
     {% if settings_perms.edit_avatar %}
-        <div class="container">
+        <div class="container container--translucent">
             <div class="container__title">Avatar</div>
             <form action="" method="post" class="settings__images" enctype="multipart/form-data">
                 <input type="hidden" name="MAX_FILE_SIZE" value="{{ background.max_size }}">
@@ -203,7 +203,7 @@
     {% endif %}
 
     {% if settings_perms.edit_background %}
-        <div class="container">
+        <div class="container container--translucent">
             <div class="container__title">Background</div>
             <form action="" method="post" class="settings__images" enctype="multipart/form-data">
                 <input type="hidden" name="MAX_FILE_SIZE" value="{{ background.max_size }}">
@@ -269,7 +269,7 @@
     {% endif %}
 
     {% if settings_perms.edit_about %}
-        <div class="container">
+        <div class="container container--translucent">
             <div class="container__title">
                 About
             </div>

templates/user/profile.twig

@@ -1,8 +1,6 @@
 {% extends 'user/master.twig' %}
 {% from 'macros.twig' import navigation %}
 
-{% set is_new_ready = true %}
-
 {% set image = '/profile.php?u=' ~ profile.user_id ~ '&m=avatar' %}
 {% set canonical_url = '/profile.php?u=' ~ profile.user_id %}
 {% set title = 'Profile of ' ~ profile.username %}