Make Matcha a stylesheet addition of Bookish

gazelle.sql

 
 
 INSERT INTO `stylesheets` (`ID`, `Name`, `Description`, `Default`, `Additions`, `Color`) VALUES
-  (1, 'bookish', 'BioTorrents.de Stylesheet', '1', 'select=noto_sans;select=luxi_sans;select=cmodern_sans;select=noto_serif;select=luxi_serif;select=cmodern_serif;select=opendyslexic;select=comic_neue', '#000000'),
-  (2, 'matcha', 'Alternate Stylesheet', '0', 'select=noto_sans;select=luxi_sans;select=cmodern_sans;select=noto_serif;select=luxi_serif;select=cmodern_serif;select=opendyslexic;select=comic_neue', '#000000'),
-  (3, 'postmod', 'What.cd Stylesheet', '0', 'select=noto_sans;select=luxi_sans;select=cmodern_sans;select=noto_serif;select=luxi_serif;select=cmodern_serif;select=opendyslexic;select=comic_neue;', '#000000');
-  (4, 'oppai', 'Oppaitime Stylesheet', '0', 'select=noto_sans;select=luxi_sans;select=cmodern_sans;select=noto_serif;select=luxi_serif;select=cmodern_serif;select=opendyslexic;select=comic_neue', '#fbc2e5'),
-  (5, 'beluga', 'Beluga Stylesheet', '0', 'select=noto_sans;select=luxi_sans;select=cmodern_sans;select=noto_serif;select=luxi_serif;select=cmodern_serif;select=opendyslexic;select=comic_neue;checkbox=pink;checkbox=haze', '#23252a'),
+  (1, 'bookish', 'BioTorrents.de Stylesheet', '1', 'select=noto_sans;select=luxi_sans;select=cmodern_sans;select=noto_serif;select=luxi_serif;select=cmodern_serif;select=opendyslexic;select=comic_neue;checkbox=matcha', '#000000'),
+  (2, 'postmod', 'What.cd Stylesheet', '0', 'select=noto_sans;select=luxi_sans;select=cmodern_sans;select=noto_serif;select=luxi_serif;select=cmodern_serif;select=opendyslexic;select=comic_neue;', '#000000'),
+  (3, 'oppai', 'Oppaitime Stylesheet', '0', 'select=noto_sans;select=luxi_sans;select=cmodern_sans;select=noto_serif;select=luxi_serif;select=cmodern_serif;select=opendyslexic;select=comic_neue', '#fbc2e5'),
+  (4, 'beluga', 'Beluga Stylesheet', '0', 'select=noto_sans;select=luxi_sans;select=cmodern_sans;select=noto_serif;select=luxi_serif;select=cmodern_serif;select=opendyslexic;select=comic_neue;checkbox=pink;checkbox=haze', '#23252a');
 
 
 INSERT INTO `wiki_articles` (`ID`, `Revision`, `Title`, `Body`, `MinClassRead`, `MinClassEdit`, `Date`, `Author`) VALUES

sections/wiki/search.php

   </div>
   <?php } ?>
 
-  <table width="100%">
-    <tr class="colhead">
-      <td>Article</td>
-      <td>Last updated on</td>
-      <td>Last edited by</td>
+  <table class="skeleton-fix">
+    <tr>
+      <th>Article</th>
+      <th>Last updated on</th>
+      <th>Last edited by</th>
     </tr>
 
     <?php

static/styles/bookish/bookish.scss

 @import "../assets/go";
+@import "matcha/matcha";
 @import "scss/bookish";
 
 @import "scss/colors";

static/styles/bookish/matcha/matcha.scss

+/**
+ * Matcha Additions
+ */
+
+body.style_matcha {
+    /* Body */
+    background: #edeae5;
+
+    /* Header and logo */
+    #header {
+        background: url("/static/styles/bookish/matcha/sam-komon.png");
+    }
+
+    #logo {
+        background: url("/static/common/logos/matcha.png") no-repeat center;
+        background-size: contain;
+        width: 250px;
+        height: 50px;
+        margin: 0 0 0 10%;
+    }
+
+    /* Main menu */
+    #menu {
+        background-color: #016670;
+    }
+
+    #menu ul li a.active {
+        background-color: #016670;
+    }
+
+    #menu ul li a:hover {
+        background-color: #0298a6;
+    }
+
+    /* Dropdown menu */
+    #menu .nav_dropdown {
+        background: #016670;
+        margin-top: 0;
+    }
+
+    .nav_dropdown > div {
+        box-shadow: 2px 2px 10px -2px slategray;
+        position: absolute;
+        background-color: #016670;
+        width: 100%;
+        z-index: 99999;
+        margin-top: 2.4em;
+        /* margin-top: 32px; */
+        left: 0;
+    }
+
+    .nav_dropdown > div > a {
+        display: none;
+        color: white;
+        height: 2.4em;
+        line-height: 2.4em;
+        text-decoration: none;
+    }
+
+    .nav_dropdown:hover > div > a {
+        display: block;
+    }
+
+    /* Search bars */
+    #searchbars {
+        text-align: center;
+        background-color: #9fedd7;
+        box-sizing: content-box;
+        padding: 0.5em 10%;
+        display: flex;
+
+        input {
+            position: relative;
+            border: 1px solid transparent;
+            box-sizing: border-box;
+            padding: 0.25em 0.25em 0.25em 0.5em;
+            background-color: white;
+            width: 100%;
+            color: black;
+        }
+
+        ul {
+            margin: 0 auto;
+            display: block;
+            text-align: center;
+
+            li {
+                display: inline;
+                margin: 0px 1px;
+                list-style: none;
+                position: relative;
+
+                form {
+                    display: inline;
+                }
+
+                ul {
+                    display: block;
+                    position: absolute;
+                    top: 1em;
+                    left: 0;
+                    z-index: 1000;
+                    background-color: white;
+                    width: 12em;
+                    margin-top: 1em;
+
+                    li {
+                        margin: 0 0 0 0;
+                        padding: 0;
+                        display: block;
+                        width: 100%;
+
+                        .highlight {
+                            background: white;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    #searchbars > .search_form {
+        flex: 1 1 auto;
+        text-align: center;
+        margin: 0 0.1em;
+    }
+
+    /* Upload, Invite, etc. */
+    #userinfo {
+        background: #fff9c7;
+        box-shadow: 0 2px 10px -2px slategray;
+        color: black;
+        padding: 0.5em 0;
+        width: 100%;
+        text-align: center;
+
+        a {
+            color: black;
+            text-decoration: none;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+
+        b a {
+            font-weight: normal;
+            font-size: 0.9em;
+            font-weight: bold;
+        }
+
+        ul {
+            display: inline;
+            margin: 0 1%;
+
+            li {
+                display: inline;
+                margin: 0 0.1em;
+                line-height: 2em;
+                vertical-align: middle;
+                padding: 0;
+            }
+        }
+    }
+
+    #userinfo_minor > li > ul {
+        display: none;
+        position: absolute;
+        padding: 5px;
+        left: -5px;
+        background-color: #fff9c7;
+        z-index: 100;
+    }
+
+    /* Alerts, Toolbox, etc. */
+    .alertbar {
+        background-color: #fff9c7;
+        text-align: center;
+        color: black;
+        font-weight: bold;
+        width: 320px;
+        margin: 2em auto;
+        padding: 1em;
+
+        a {
+            color: black;
+            text-decoration: none;
+
+            &:hover {
+                color: black;
+                text-decoration: underline;
+            }
+        }
+
+        .warning {
+            background-color: #ffe68a;
+        }
+
+        .error {
+            background-color: #ff8a8a;
+        }
+    }
+
+    /* Column heads */
+    .head {
+        background: #9fedd7;
+        color: black;
+        padding: 0.5em 1em;
+    }
+
+    .colhead {
+        background: #9fedd7;
+        font-weight: bold;
+        color: black;
+    }
+
+    .colhead_dark {
+        background: #9fedd7;
+        color: black;
+    }
+
+    /* Box */
+    .box,
+    section {
+        background-color: white;
+        border: none;
+        margin-bottom: 1em;
+    }
+
+    /* Shadows */
+    .box,
+    .border,
+    .alertbar,
+    .artist_table,
+    .request_table,
+    .forum_index,
+    #userinfo_minor > li > ul,
+    .permissions table {
+        box-shadow: 2px 2px 10px -2px slategray;
+    }
+
+    /* Links */
+    a {
+        color: #016670;
+        text-decoration: none;
+
+        &:hover {
+            color: black;
+            text-decoration: underline;
+        }
+    }
+
+    /* Special links */
+    .forum_post .body a:not([href="#"]),
+    .rule_summary a,
+    .wiki_article a,
+    #actual_rules a,
+    .news_post .pad a,
+    .store_table a {
+        color: #016670;
+        text-decoration: none;
+    }
+
+    .forum_post .body a:hover:not([href="#"]),
+    .rule_summary a:hover,
+    .wiki_article a:hover,
+    #actual_rules a:hover,
+    .news_post .pad a:hover,
+    .store_table a:hover {
+        color: black;
+        text-decoration: underline;
+    }
+
+    /* Blockquote */
+    blockquote {
+        margin: 0.5em 2em;
+        padding: 1em;
+        border: 1px solid #bbb;
+    }
+
+    /* Buttons */
+    button:not(.editor-toolbar button),
+    input[type="button"],
+    input[type="submit"] {
+        background: #fbe180;
+        border-radius: 0.25rem;
+        box-shadow: 2px 2px 10px -5px slategray;
+    }
+
+    button:hover,
+    input[type="button"]:hover,
+    input[type="submit"]:hover {
+        background: #fff9c7;
+    }
+
+    button:focus,
+    input[type="button"]:focus,
+    input[type="submit"]:focus {
+        background: #fff9c7;
+    }
+
+    /* Text input */
+    input.inputtext {
+        border: none;
+        border-bottom: 1px solid #edeae5;
+        background-color: white;
+        font-size: 13px;
+        outline: none;
+        transition: ease-in-out 0.12s;
+
+        &:focus {
+            border-bottom: 1px solid #fbe180;
+        }
+    }
+
+    /* Cover images */
+    #coverCont {
+        background-color: #fff9c7;
+        padding: 5px;
+        box-shadow: 2px 2px 10px -2px slategray;
+    }
+
+    #coverCont img {
+        background-color: #fff9c7;
+    }
+
+    /* Captions */
+    caption {
+        border-bottom: 1px solid #edeae5;
+        font-weight: bold;
+    }
+
+    /* Messages */
+    .error_message {
+        padding: 1em;
+        background-color: #ff8a8a;
+        text-align: center;
+        color: white;
+        font-weight: bold;
+        box-shadow: 2px 2px 10px -5px slategray;
+    }
+
+    .save_message {
+        padding: 1em;
+        width: 50%;
+        margin: 2em auto;
+        background: #fbe180;
+        text-align: center;
+        color: black;
+        font-weight: bold;
+        box-shadow: 2px 2px 10px -5px slategray;
+    }
+
+    /* Forums */
+    .forum_post .colhead_dark {
+        background: #9fedd7;
+    }
+
+    .forum_post.staff_post .colhead_dark {
+        background: #fbe180;
+    }
+
+    .forum_post.sticky_post {
+        border: 2px solid #fbe180;
+    }
+
+    /* Inbox */
+    tr.unreadpm {
+        background-color: #fff9c7;
+    }
+} /* end body.style_matcha */

static/styles/bookish/scss/colors.scss

  * For semi-transparent elements,
  * e.g., unread forum post borders
  */
-@mixin transparent-border($color, $alpha) {
-    border: 2px solid change-color($color, $alpha);
+@mixin transparent-border($c, $a) {
+    border: 2px solid change-color($color: $c, $alpha: $a);
 }
 
 /**
     border: 1px solid $bg;
 }
 
-/*
-@mixin alertbar($bg) {
-    background: $bg;
-    box-shadow: $shadow;
-    text-align: center;
-    color: black;
-    font-weight: bold;
-    /* font-size: 0.95rem; * /
-    width: 33%;
-    margin: 2em auto;
-    padding: 1rem;
-}
-*/
-
 .alertbar {
     @include alertbar(silver);
     /* @include alertbar($lb100); */
         /* border: 2px solid $lb700; */
     }
 }
+
+/* Experimental: whitesmoke brackets? */
+a.brackets {
+    /* background: whitesmoke; */
+    margin: 0 0.25rem;
+}

static/styles/bookish/scss/fonts.scss

 }
 
 /* Dupe for grouped "Details" on browse.php */
-a.search_link {
+a.search_link,
+a.brackets,
+table#taglist a {
     color: black;
     text-decoration: none;
 
 blockquote {
     margin: 0.5em 2rem;
     padding: 1rem;
-    @include transparent-border($color: black, $alpha: 0.1);
+    @include transparent-border($c: purple, $a: 0.1);
 }
 
 caption {
 
 /* Markdown Extra new features */
 hr {
-    @include transparent-border($color: black, $alpha: 0.1);
+    @include transparent-border($c: black, $a: 0.5);
     margin: 2rem auto;
     width: 66%;
 }

static/styles/global/scss/colors.scss

  * For semi-transparent elements,
  * e.g., unread forum post borders
  */
-@mixin transparent-border($R: 0, $G: 0, $B: 0, $A: 1) {
-    border: 2px solid rgba($R, $G, $B, $A);
+@mixin transparent-border($c, $a) {
+    border: 2px solid change-color($color: $c, $alpha: $a);
 }
 
 /* Torrent labels for the Format class */

static/styles/global/scss/layout.scss

      * admonishment on torrent_form.class.php.
      */
     &.upload_notice {
-        @include transparent-border($R: 255, $A: 0.5);
+        @include transparent-border($c: red, $a: 0.5);
         margin: 1rem auto;
         padding-top: 1rem;
         text-align: center;

static/styles/global/scss/legacy.scss

     margin: 10px 0;
 }
 
+/* 2021-07-26
 .number_column {
     text-align: right;
 }
+*/
 
 .wide_input_text {
     width: 95%;

static/styles/global/scss/skeleton-fixes.scss

 /* Forum list headings */
 table.forum_index {
     h4 {
-        margin: 0 !important;
+        margin: 0.25rem !important;
     }
 }
 
 /* requests? */form.create_form,
 /* top10 and many */ form.search_form,
 /* edit collage */ table.collage_edit,
+/* forum lists */ table.forum_index,
 /* notif filters */ form[name="notification"],
 /* GENERIC */ table.skeleton-fix {
-    th,
     td {
         border-bottom: 0 !important;
         padding: 0.25rem !important;

static/styles/matcha/matcha.scss

-@import "../assets/go";
-@import "scss/matcha";