Huge css cleanup

royalnet/web/royalprints/home/templates/home.html

@@ -5,11 +5,11 @@
 {% endblock %}
 
 {% block content %}
-    <div class="doublebox">
+    <div class="dbox">
-        <div class="top">
+        <div class="dbox-top">
             <span class="left">Under construction</span>
         </div>
-        <div class="bot">
+        <div class="dbox-bot">
             <p>
                 Lentamente, su questo sito stanno apparendo nuove features. Come il <a href="{{ url_for("diarioview.diarioview_page", page=1) }}">diario</a> e i <a href="{{ url_for("profile.profile_index") }}">profili</a>!
             </p>

royalnet/web/royalprints/login/templates/login_index.html

@@ -6,13 +6,13 @@
 
 {% block content %}
     <div class="login">
-        <div class="doublebox">
+        <div class="dbox">
-            <div class="top">
+            <div class="dbox-top">
                 <span class="left">
                     Password Login
                 </span>
             </div>
-            <div class="bot">
+            <div class="dbox-bot">
                 <p>
                     Non hai una password? Prova il <a href="{{ url_for("tglogin.tglogin_index") }}">Login con Telegram</a>!
                 </p>

royalnet/web/royalprints/login/templates/login_success.html

@@ -5,13 +5,13 @@
 {% endblock %}
 
 {% block content %}
-    <div class="doublebox">
+    <div class="dbox">
-        <div class="top">
+        <div class="dbox-top">
             <span class="left">
                 Password Login
             </span>
         </div>
-        <div class="bot">
+        <div class="dbox-bot">
             Login riuscito! Sei connesso come <b>{{ session["royal"]["username"] }}</b>!
         </div>
     </div>

royalnet/web/royalprints/mcstatus/templates/mcstatus.html

@@ -5,11 +5,11 @@
 {% endblock %}
 
 {% block content %}
-    <div class="doublebox">
+    <div class="dbox">
-        <div class="top">
+        <div class="dbox-top">
             <span class="left">Minecraft Server Status</span>
         </div>
-        <div class="bot">
+        <div class="dbox-bot">
             <div class="mcstatus-grid">
                 {% if query %}
                     {% if status.favicon %}

royalnet/web/royalprints/newaccount/templates/newaccount_index.html

@@ -6,13 +6,13 @@
 
 {% block content %}
     <div class="login">
-        <div class="doublebox">
+        <div class="dbox">
-            <div class="top">
+            <div class="dbox-top">
                 <span class="left">
                     Nuovo account
                 </span>
             </div>
-            <div class="bot">
+            <div class="dbox-bot">
                 <form method="post" class="newaccount-form fullsize">
                     <label for="newaccount-username">
                         <span class="label-text">Username</span>

royalnet/web/royalprints/profile/templates/profile_index.html

@@ -5,13 +5,13 @@
 {% endblock %}
 
 {% block content %}
-    <div class="doublebox">
+    <div class="dbox">
-        <div class="top">
+        <div class="dbox-top">
             <span class="left">
                 Elenco profili
             </span>
         </div>
-        <div class="bot">
+        <div class="dbox-bot">
             <ul>
                 {% for royal in royals %}
                     <li><a href="{{ url_for("profile.profile_by_username", username=royal.username) }}">{{ royal.username }}</a></li>

royalnet/web/royalprints/profile/templates/profile_page.html

@@ -9,11 +9,11 @@
         <h1>
             {{ royal.username }}
         </h1>
-        <div class="doublebox profile-links">
+        <div class="dbox profile-links">
-            <div class="top">
+            <div class="dbox-top">
                 <span class="left">Account collegati</span>
             </div>
-            <div class="bot">
+            <div class="dbox-bot">
                 <ul class="links-list">
                     <li><span class="links-item links-linked">royalnet:{{ royal.username }}</span></li>
                     {% for telegram in royal.telegram %}
@@ -33,11 +33,11 @@
                 </ul>
             </div>
         </div>
-        <div class="doublebox profile-stats">
+        <div class="dbox profile-stats">
-            <div class="top">
+            <div class="dbox-top">
                 <span class="left">Statistiche</span>
             </div>
-            <div class="bot">
+            <div class="dbox-bot">
                 <ul class="stats-list">
                     <li><span class="stats-info">Righe del diario create</span>: <span class="stats-value">{{ royal.diario_created|length }}</span></li>
                     <li><span class="stats-info">Righe del diario in cui è menzionato</span>: <span class="stats-value">{{ royal.diario_quoted|length }}</span></li>
@@ -45,16 +45,16 @@
                     {% if royal.active_kv_group %}
                         <li><span class="stats-info">Kvgroup attivo</span>: <span class="stats-value">{{ royal.active_kv_group[0].group_name }}</span></li>
                     {% else %}
-                        <li><span class="stats-info">Kvgroup attivo</span>: <span class="stats-value faded">Nessuno</span></li>
+                        <li><span class="stats-info">Kvgroup attivo</span>: <span class="stats-value disabled">Nessuno</span></li>
                     {% endif %}
                 </ul>
             </div>
         </div>
-        <div class="doublebox profile-aliases">
+        <div class="dbox profile-aliases">
-            <div class="top">
+            <div class="dbox-top">
                 <span class="left">Alias</span>
             </div>
-            <div class="bot">
+            <div class="dbox-bot">
                 <ul class="alias-list">
                     {% for alias in royal.aliases %}
                         <li>{{ alias.alias|capitalize }}</li>

royalnet/web/royalprints/tglogin/templates/tglogin_index.html

@@ -5,13 +5,13 @@
 {% endblock %}
 
 {% block content %}
-    <div class="doublebox">
+    <div class="dbox">
-        <div class="top">
+        <div class="dbox-top">
             <span class="left">
                 Telegram Login
             </span>
         </div>
-        <div class="bot">
+        <div class="dbox-bot">
             <p>
                 Facendo il login su questo sito, acconsenti a ricevere due <abbr title="cookie">biscottini</abbr> che memorizzino l'account con cui hai fatto il login.<br>
             </p>

royalnet/web/royalprints/tglogin/templates/tglogin_success.html

@@ -5,13 +5,13 @@
 {% endblock %}
 
 {% block content %}
-    <div class="doublebox">
+    <div class="dbox">
-        <div class="top">
+        <div class="dbox-top">
             <span class="left">
                 Telegram Login
             </span>
         </div>
-        <div class="bot">
+        <div class="dbox-bot">
             Login riuscito! Sei connesso come <b>{{ session["royal"]["username"] }}</b>!
         </div>
     </div>

royalnet/web/royalprints/wikiedit/templates/wikiedit_page.html

@@ -10,15 +10,15 @@
 {% endblock %}
 
 {% block content %}
-    <div class="doublebox">
+    <div class="dbox">
-        <div class="top">
+        <div class="dbox-top">
             <span class="left">
                 Editor Wiki
             </span>
         </div>
-        <div class="bot">
+        <div class="dbox-bot">
             <form method="POST" class="wikiedit-form fullsize">
-                <label for="wikiedit-title">
+                <label for="wikiedit-title" class="label-big">
                     <span class="label-text">Titolo</span>
                     <input id="wikiedit-title" type="text" name="title" value="{{ page.title }}">
                 </label>

royalnet/web/royalprints/wikiview/templates/wikiview_index.html

@@ -5,13 +5,13 @@
 {% endblock %}
 
 {% block content %}
-    <div class="doublebox">
+    <div class="dbox">
-        <div class="top">
+        <div class="dbox-top">
             <span class="left">
                 Wiki
             </span>
         </div>
-        <div class="bot">
+        <div class="dbox-bot">
             {% if session.royal %}
                 <a href="{{ url_for("wikiedit.wikiedit_newpage") }}" class="btn no-icon">Crea nuova pagina</a>
             {% else %}

royalnet/web/royalprints/wikiview/templates/wikiview_page.html

@@ -5,8 +5,9 @@
 {% endblock %}
 
 {% block content %}
-    <div class="doublebox wikiview-doublebox">
+    <div class="wikiview">
-        <div class="top">
+        <div class="dbox wiki-doublebox">
+            <div class="dbox-top">
                 <span class="left">
                     Wiki page
                 </span>
@@ -14,13 +15,13 @@
                     {% if session.royal %}
                         <a class="edit no-icon" href="{{ url_for("wikiedit.wikiedit_by_id", page_id=page.page_short_id, title=page.title) }}">Modifica</a>
                     {% else %}
-                    <a class="edit no-icon faded" title="Devi fare il login per modificare pagine!">Modifica</a>
+                        <a class="edit no-icon disabled" title="Devi fare il login per modificare pagine!">Modifica</a>
                     {% endif %}
                     |
                     <a class="permalink no-icon" href="{{ url_for("wikiview.wikiview_by_id", page_id=page.page_short_id, title=page.title) }}">Permalink</a>
                 </span>
             </div>
-        <div class="bot">
+            <div class="dbox-bot">
                 <div class="wikiview-page">
                     <h1 class="wikiview-title">
                         {{ page.title }}
@@ -31,4 +32,5 @@
                 </div>
             </div>
         </div>
+    </div>
 {% endblock %}

royalnet/web/static/ryg.css

@@ -1,3 +1,5 @@
+/*** Variables ***/
+/*** Standard elements ***/
 body {
   font-family: "Arial", "Helvetica Neue", sans-serif;
   background-color: #0d193b;
@@ -116,6 +118,14 @@ a:not(.no-icon)[href^="magnet:"]::before {
   content: "\f076";
   margin-right: 4px;
 }
+b,
+strong {
+  color: #ffff7d;
+}
+i,
+em {
+  color: #ffbb7d;
+}
 h1,
 h2,
 h3,
@@ -128,11 +138,17 @@ h6 {
   font-weight: normal;
 }
 pre {
-  color: lightgray;
-  border: 1px solid rgba(160, 204, 255, 0.1);
-  background-color: rgba(160, 204, 255, 0.1);
   padding: 2px 4px 2px 8px;
   margin: 8px;
+  color: lightgray;
+  border: 1px solid rgba(211, 211, 211, 0.2);
+  background-color: rgba(211, 211, 211, 0.1);
+  font-family: "Consolas", "Source Code Pro", monospace;
+}
+*:not(pre) > code {
+  color: lightgray;
+  border: 1px solid rgba(211, 211, 211, 0.2);
+  background-color: rgba(211, 211, 211, 0.1);
 }
 code {
   font-family: "Consolas", "Source Code Pro", monospace;
@@ -298,27 +314,106 @@ table tbody tr:last-child td:first-child {
 table tbody tr:last-child td:last-child {
   border-radius: 0 0 4px 0;
 }
-.h-container {
+form.fullsize label {
+  margin-top: 4px;
+  margin-bottom: 4px;
+  display: flex;
+}
+form.fullsize label .label-text {
+  margin-right: 12px;
+  min-width: 60px;
+}
+form.fullsize label input {
+  flex-grow: 1;
+}
+form.fullsize label.label-big {
+  font-size: x-large;
+}
+form.fullsize label.label-big * {
+  font-size: x-large;
+}
+*[disabled=""],
+.disabled {
+  opacity: 0.3;
+}
+/*** Custom elements ***/
+.CodeMirror {
+  font-family: "Consolas", monospace !important;
+  background-color: transparent;
+  color: #a0ccff;
+  border-top: 0;
+  border-bottom: 0;
+  border-left: 1px solid rgba(160, 204, 255, 0.2);
+  border-right: 1px solid rgba(160, 204, 255, 0.2);
+  border-radius: 0;
+}
+.CodeMirror .cm-link {
+  color: #7dffff !important;
+}
+.CodeMirror .cm-url {
+  color: #00caca !important;
+}
+.CodeMirror .cm-tag {
+  color: #ff7dff !important;
+}
+.CodeMirror .cm-strong {
+  color: #ffff7d !important;
+}
+.CodeMirror .cm-em {
+  color: #ffbb7d !important;
+}
+.CodeMirror .cm-quote {
+  color: #7dff7d !important;
+}
+.CodeMirror .cm-comment {
+  color: lightgray !important;
+}
+.CodeMirror .cm-header {
+  color: #ffffff !important;
+}
+.editor-toolbar,
+.editor-statusbar {
+  background-color: #0e1c47;
+  color: #a0ccff !important;
+  border: 0;
+  opacity: 1 !important;
+}
+.editor-toolbar a,
+.editor-statusbar a {
+  color: #a0ccff !important;
+  border: 0;
+}
+.editor-toolbar a:hover,
+.editor-statusbar a:hover {
+  background-color: rgba(160, 204, 255, 0.2);
+  color: #ffffff !important;
+}
+.editor-toolbar a.active,
+.editor-statusbar a.active {
+  background-color: rgba(160, 204, 255, 0.3);
+  color: white !important;
+}
+.editor-toolbar a.active:hover,
+.editor-statusbar a.active:hover {
+  background-color: rgba(160, 204, 255, 0.2);
+  color: #ffffff !important;
+}
+.horizontal-container {
   display: flex;
   justify-content: center;
   align-content: center;
-  flex-direction: column;
-}
-@media (min-width: 800px) {
-  .h-container {
   flex-direction: row;
+}
+@media (max-width: 799px) {
+  .horizontal-container {
+    flex-direction: column;
   }
 }
-.main-container {
+.vertical-main {
   width: 100%;
 }
-@media (min-width: 800px) {
-  .main-container {
-    width: 800px;
-  }
-}
 @media (min-width: 1200px) {
-  .main-container {
+  .vertical-main {
     width: 1200px;
   }
 }
@@ -328,10 +423,10 @@ table tbody tr:last-child td:last-child {
   padding: 8px;
   margin: 8px;
 }
-.doublebox {
+.dbox {
   margin: 8px;
 }
-.doublebox .top {
+.dbox .dbox-top {
   display: flex;
   justify-content: space-between;
   background-color: rgba(160, 204, 255, 0.2);
@@ -342,41 +437,27 @@ table tbody tr:last-child td:last-child {
   font-weight: bold;
   height: 16px;
 }
-.doublebox .top .left {
+.dbox .dbox-top .left {
   align-self: flex-start;
 }
-.doublebox .top .right {
+.dbox .dbox-top .right {
   align-self: flex-end;
 }
-.doublebox .bot {
+.dbox .dbox-bot {
   background-color: rgba(160, 204, 255, 0.1);
   padding: 8px;
   border-radius: 0 0 4px 4px;
 }
-.doublebox.doublebox-red .top {
+.color {
-  background-color: rgba(255, 125, 125, 0.2);
-  color: #ff7d7d;
-}
-.doublebox.doublebox-red .bot {
-  background-color: rgba(255, 125, 125, 0.1);
-  color: #ff7d7d;
-}
-.multirow {
-  list-style-type: none;
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-left: 0;
-}
-.palette-color {
   border-radius: 4px;
   width: 32px;
   height: 32px;
   display: inline-block;
 }
-.palette-color.light {
+.color.color-light {
   border: 1px solid black;
 }
-.palette-color.dark {
+.color.color-dark {
   border: 1px solid white;
 }
 .proscons {
@@ -487,7 +568,7 @@ table tbody tr:last-child td:last-child {
   content: "\f0c8";
   margin-right: 6px;
 }
-.proscons.big {
+.proscons.label-big {
   font-size: xx-large;
 }
 .spoiler {
@@ -499,155 +580,35 @@ table tbody tr:last-child td:last-child {
 .spoiler:hover {
   color: #a0ccff;
 }
-.faded,
+.wiki .wiki-doublebox .dbox-bot {
-input[disabled=""],
-button[disabled=""] {
-  opacity: 0.3;
-}
-form.fullsize label {
-  margin-top: 4px;
-  margin-bottom: 4px;
-  display: flex;
-}
-form.fullsize label .label-text {
-  margin-right: 12px;
-  min-width: 60px;
-}
-form.fullsize label input {
-  flex-grow: 1;
-}
-form.fullsize label[for="wikiedit-title"] {
-  font-size: x-large;
-}
-form.fullsize label[for="wikiedit-title"] * {
-  font-size: x-large;
-}
-form.fullsize .editor-toolbar,
-form.fullsize .editor-statusbar {
-  background-color: #0e1c47;
-  color: #a0ccff !important;
-  border: 0;
-  opacity: 1 !important;
-}
-form.fullsize .editor-toolbar a,
-form.fullsize .editor-statusbar a {
-  color: #a0ccff !important;
-  border: 0;
-}
-form.fullsize .editor-toolbar a:hover,
-form.fullsize .editor-statusbar a:hover {
-  background-color: rgba(160, 204, 255, 0.2);
-  color: #ffffff !important;
-}
-form.fullsize .editor-toolbar a.active,
-form.fullsize .editor-statusbar a.active {
-  background-color: rgba(160, 204, 255, 0.3);
-  color: white !important;
-}
-form.fullsize .editor-toolbar a.active:hover,
-form.fullsize .editor-statusbar a.active:hover {
-  background-color: rgba(160, 204, 255, 0.2);
-  color: #ffffff !important;
-}
-form.fullsize .CodeMirror {
-  font-family: "Consolas", monospace !important;
-  background-color: transparent;
-  color: #a0ccff;
-  border-top: 0;
-  border-bottom: 0;
-  border-left: 1px solid rgba(160, 204, 255, 0.2);
-  border-right: 1px solid rgba(160, 204, 255, 0.2);
-  border-radius: 0;
-}
-form.fullsize .CodeMirror .cm-link {
-  color: #7dffff !important;
-}
-form.fullsize .CodeMirror .cm-url {
-  color: #00caca !important;
-}
-form.fullsize .CodeMirror .cm-tag {
-  color: #ff7dff !important;
-}
-form.fullsize .CodeMirror .cm-strong {
-  color: #ffff7d !important;
-}
-form.fullsize .CodeMirror .cm-em {
-  color: #ffbb7d !important;
-}
-form.fullsize .CodeMirror .cm-quote {
-  color: #7dff7d !important;
-}
-form.fullsize .CodeMirror .cm-comment {
-  color: lightgray !important;
-}
-form.fullsize .CodeMirror .cm-header {
-  color: #ffffff !important;
-}
-.mcstatus-grid {
-  display: grid;
-  grid-template-columns: 64px auto auto;
-  grid-column-gap: 12px;
-  align-items: center;
-}
-.mcstatus-grid .mcstatus-icon {
-  grid-column: 1;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  width: 64px;
-  height: 64px;
-}
-.mcstatus-grid .mcstatus-icon .mcstatus-icon-img {
-  width: 64px;
-  height: 64px;
-}
-.mcstatus-grid .mcstatus-address {
-  font-weight: bold;
-  grid-column: 2;
-  justify-self: start;
-  grid-row: 1;
-}
-.mcstatus-grid .mcstatus-address .server-up {
-  color: #7dff7d;
-}
-.mcstatus-grid .mcstatus-address .server-down {
-  color: #ff7d7d;
-}
-.mcstatus-grid .mcstatus-description {
-  grid-column: 2;
-  justify-self: start;
-  grid-row: 2;
-}
-.mcstatus-grid .mcstatus-players {
-  grid-column: 3;
-  justify-self: end;
-  grid-row: 1;
-}
-.mcstatus-grid .mcstatus-version {
-  grid-column: 3;
-  justify-self: end;
-  grid-row: 2;
-}
-.wikiview-doublebox .bot {
   background-color: transparent;
   border-top: 0;
   border-bottom: 4px solid rgba(160, 204, 255, 0.2);
   border-left: 4px solid rgba(160, 204, 255, 0.2);
   border-right: 4px solid rgba(160, 204, 255, 0.2);
 }
-.wikiview-doublebox .bot .wikiview-title {
+.wiki .wiki-doublebox .dbox-bot .wikiview-title {
   text-align: center;
   font-size: 42px;
   margin-top: 0;
 }
-.wikiview-doublebox .bot h1,
+.wiki h1,
-.wikiview-doublebox .bot h2,
+.wiki h2,
-.wikiview-doublebox .bot h3,
+.wiki h3,
-.wikiview-doublebox .bot h4,
+.wiki h4,
-.wikiview-doublebox .bot h5,
+.wiki h5,
-.wikiview-doublebox .bot h6 {
+.wiki h6 {
   margin-top: revert;
   margin-bottom: revert;
 }
+.error .error-dbox .dbox-top {
+  background-color: rgba(255, 125, 125, 0.2);
+  color: #ff7d7d;
+}
+.error .error-dbox .dbox-bot {
+  background-color: rgba(255, 125, 125, 0.1);
+  color: #ff7d7d;
+}
 .diario {
   display: grid;
   grid-template-columns: auto auto 40px;
@@ -709,6 +670,51 @@ form.fullsize .CodeMirror .cm-header {
 .diario.diario-spoiler:hover {
   color: #ff7d7d;
 }
+/*** Page specific classes ***/
+.mcstatus-grid {
+  display: grid;
+  grid-template-columns: 64px auto auto;
+  grid-column-gap: 12px;
+  align-items: center;
+}
+.mcstatus-grid .mcstatus-icon {
+  grid-column: 1;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  width: 64px;
+  height: 64px;
+}
+.mcstatus-grid .mcstatus-icon .mcstatus-icon-img {
+  width: 64px;
+  height: 64px;
+}
+.mcstatus-grid .mcstatus-address {
+  font-weight: bold;
+  grid-column: 2;
+  justify-self: start;
+  grid-row: 1;
+}
+.mcstatus-grid .mcstatus-address .server-up {
+  color: #7dff7d;
+}
+.mcstatus-grid .mcstatus-address .server-down {
+  color: #ff7d7d;
+}
+.mcstatus-grid .mcstatus-description {
+  grid-column: 2;
+  justify-self: start;
+  grid-row: 2;
+}
+.mcstatus-grid .mcstatus-players {
+  grid-column: 3;
+  justify-self: end;
+  grid-row: 1;
+}
+.mcstatus-grid .mcstatus-version {
+  grid-column: 3;
+  justify-self: end;
+  grid-row: 2;
+}
 .profile .profile-links .links-linked {
   font-family: "Consolas", "Source Code Pro", monospace;
 }

royalnet/web/static/ryg.less

@@ -1,3 +1,5 @@
+/*** Variables ***/
+
 @bg: #0d193b; //Background color
 @fg: #a0ccff; //Foreground color
 @li: #00caca; //Link
@@ -20,7 +22,9 @@
 @main-fonts: "Arial", "Helvetica Neue", sans-serif;
 @monospace-fonts: "Consolas", "Source Code Pro", monospace;
 
-//General
+
+/*** Standard elements ***/
+
 body {
     font-family: @main-fonts;
     background-color: @bg;
@@ -165,6 +169,14 @@ a {
     }
 }
 
+b, strong {
+    color: @pastel-yellow;
+}
+
+i, em {
+    color: @pastel-orange;
+}
+
 h1, h2, h3, h4, h5, h6 {
     color: @ec;
     margin-top: 0;
@@ -172,15 +184,21 @@ h1, h2, h3, h4, h5, h6 {
     font-weight: normal;
 }
 
-
 pre {
-    color: lightgray;
-    border: 1px solid @fg-ten;
-    background-color: @fg-ten;
     padding: 2px 4px 2px 8px;
     margin: 8px;
+
+    color: lightgray;
+    border: 1px solid fade(lightgray, 20%);
+    background-color: fade(lightgray, 10%);
+    font-family: @monospace-fonts;
 }
 
+*:not(pre) > code {
+    color: lightgray;
+    border: 1px solid fade(lightgray, 20%);
+    background-color: fade(lightgray, 10%);
+}
 code {
     font-family: @monospace-fonts;
 }
@@ -369,35 +387,134 @@ table {
     }
 }
 
+form.fullsize {
 
-//Elements
+    label {
-
+        margin-top: 4px;
-.h-container {
+        margin-bottom: 4px;
         display: flex;
-    justify-content: center;
-    align-content: center;
-    flex-direction: column;
 
-    @media (min-width: 800px)
+        .label-text {
-    {
+            margin-right: 12px;
-        flex-direction: row;
+            min-width: 60px;
+        }
+
+        input {
+            flex-grow: 1;
+        }
+
+        &.label-big {
+            font-size: x-large;
+
+            * {
+                font-size: x-large;
+            }
+        }
     }
 }
 
-.main-container {
+*[disabled=""], .disabled {
-    width: 100%;
+    opacity: 0.3;
+}
 
-    @media (min-width: 800px)
+
-    {
+
-        width: 800px;
+/*** Custom elements ***/
+
+//Markdown editor
+.CodeMirror {
+    font-family: "Consolas", monospace !important;
+    background-color: transparent;
+    color: @fg;
+    border-top: 0;
+    border-bottom: 0;
+    border-left: 1px solid @fg-twenty;
+    border-right: 1px solid @fg-twenty;
+    border-radius: 0;
+
+    .cm-link {
+        color: @pastel-cyan !important;
     }
 
+    .cm-url {
+        color: @li !important;
+    }
+
+    .cm-tag {
+        color: @pastel-magenta !important;
+    }
+
+    .cm-strong {
+        color: @pastel-yellow !important;
+    }
+
+    .cm-em {
+        color: @pastel-orange !important;
+    }
+
+    .cm-quote {
+        color: @pastel-lime !important;
+    }
+
+    .cm-comment {
+        color: lightgray !important;
+    }
+
+    .cm-header {
+        color: @ec !important;
+    }
+}
+.editor-toolbar, .editor-statusbar {
+    background-color: @fg-twenty-hard;
+    color: @fg !important;
+    border: 0;
+    opacity: 1 !important;
+
+    a {
+        color: @fg !important;
+        border: 0;
+
+        &:hover {
+            background-color: @fg-twenty;
+            color: lighten(@fg, 25%) !important;
+        }
+
+        &.active {
+            background-color: fade(@fg, 30%);
+            color: white !important;
+
+            &:hover {
+                background-color: @fg-twenty;
+                color: lighten(@fg, 25%) !important;
+            }
+        }
+    }
+}
+
+//Horizontal container, should contain elements such as main and sidebar
+.horizontal-container {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    flex-direction: row;
+
+    @media (max-width: 799px)
+    {
+        flex-direction: column;
+    }
+}
+
+//Vertical main page container
+.vertical-main {
+    width: 100%;
+
     @media (min-width: 1200px)
     {
         width: 1200px;
     }
 }
 
+//A simple box
 .box {
     background-color: @fg-ten;
     border-radius: 4px;
@@ -405,10 +522,11 @@ table {
     margin: 8px;
 }
 
-.doublebox {
+//A double box
+.dbox {
     margin: 8px;
 
-    .top {
+    .dbox-top {
         display: flex;
         justify-content: space-between;
         background-color: @fg-twenty;
@@ -428,54 +546,36 @@ table {
         }
     }
 
-    .bot {
+    .dbox-bot {
         background-color: @fg-ten;
         padding: 8px;
         border-radius: 0 0 4px 4px;
     }
-
-    &.doublebox-red {
-        .top {
-            background-color: fade(@pastel-red, 20%);
-            color: @pastel-red;
-        }
-
-        .bot {
-            background-color: fade(@pastel-red, 10%);
-            color: @pastel-red;
-        }
-    }
 }
 
-//This is something about the sidebar... better leave it alone.
+//A palette color
-.multirow {
+.color {
-    list-style-type: none;
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-left: 0;
-}
-
-.palette-color {
     border-radius: 4px;
     width: 32px;
     height: 32px;
     display: inline-block;
 
-    &.light {
+    &.color-light {
         border: 1px solid black;
     }
 
-    &.dark {
+    &.color-dark {
         border: 1px solid white;
     }
 }
 
-//noinspection CssNoGenericFontName
+//Pros and cons of something
 .proscons {
     padding: 4px 4px 4px 8px;
     margin: 4px;
     border-radius: 4px;
 
+    //noinspection CssNoGenericFontName
     &.plus {
         color: @pastel-lime;
         background-color: fade(@pastel-lime, 10%);
@@ -488,6 +588,7 @@ table {
         }
     }
 
+    //noinspection CssNoGenericFontName
     &.minus {
         color: @pastel-red;
         background-color: fade(@pastel-red, 10%);
@@ -500,6 +601,7 @@ table {
         }
     }
 
+    //noinspection CssNoGenericFontName
     &.stars {
         background-color: fade(@pastel-yellow, 10%);
         color: @pastel-yellow;
@@ -590,6 +692,7 @@ table {
         }
     }
 
+    //noinspection CssNoGenericFontName
     &:not(.plus):not(.minus):not(.stars) {
         color: @fg;
         background-color: @fg-ten;
@@ -602,11 +705,12 @@ table {
         }
     }
 
-    &.big {
+    &.label-big {
         font-size: xx-large;
     }
 }
 
+//A spoiler
 .spoiler {
     color: transparent;
     border: 1px solid @fg-ten;
@@ -618,165 +722,10 @@ table {
     }
 }
 
-.faded, input[disabled=""], button[disabled=""] {
+//Wiki page
-    opacity: 0.3;
+.wiki {
-}
+    .wiki-doublebox {
-
+        .dbox-bot {
-form.fullsize {
-
-    label {
-        margin-top: 4px;
-        margin-bottom: 4px;
-        display: flex;
-
-        .label-text {
-            margin-right: 12px;
-            min-width: 60px;
-        }
-
-        input {
-            flex-grow: 1;
-        }
-    }
-
-    label[for="wikiedit-title"] {
-        font-size: x-large;
-
-        * {
-            font-size: x-large;
-        }
-    }
-
-    .editor-toolbar, .editor-statusbar {
-        background-color: @fg-twenty-hard;
-        color: @fg !important;
-        border: 0;
-        opacity: 1 !important;
-
-        a {
-            color: @fg !important;
-            border: 0;
-
-            &:hover {
-                background-color: @fg-twenty;
-                color: lighten(@fg, 25%) !important;
-            }
-
-            &.active {
-                background-color: fade(@fg, 30%);
-                color: white !important;
-
-                &:hover {
-                    background-color: @fg-twenty;
-                    color: lighten(@fg, 25%) !important;
-                }
-            }
-        }
-    }
-
-    .CodeMirror {
-        font-family: "Consolas", monospace !important;
-        background-color: transparent;
-        color: @fg;
-        border-top: 0;
-        border-bottom: 0;
-        border-left: 1px solid @fg-twenty;
-        border-right: 1px solid @fg-twenty;
-        border-radius: 0;
-
-        .cm-link {
-            color: @pastel-cyan !important;
-        }
-
-        .cm-url {
-            color: @li !important;
-        }
-
-        .cm-tag {
-            color: @pastel-magenta !important;
-        }
-
-        .cm-strong {
-            color: @pastel-yellow !important;
-        }
-        
-        .cm-em {
-            color: @pastel-orange !important;
-        }
-
-        .cm-quote {
-            color: @pastel-lime !important;
-        }
-
-        .cm-comment {
-            color: lightgray !important;
-        }
-
-        .cm-header {
-            color: @ec !important;
-        }
-
-    }
-}
-
-.mcstatus-grid {
-    display: grid;
-
-    grid-template-columns: 64px auto auto;
-    grid-column-gap: 12px;
-
-    align-items: center;
-
-    .mcstatus-icon {
-        grid-column: 1;
-        grid-row-start: 1;
-        grid-row-end: 3;
-        width: 64px;
-        height: 64px;
-
-        .mcstatus-icon-img {
-            width: 64px;
-            height: 64px;
-        }
-    }
-
-    .mcstatus-address {
-        font-weight: bold;
-
-        grid-column: 2;
-        justify-self: start;
-        grid-row: 1;
-
-        .server-up {
-            color: @pastel-lime;
-        }
-
-        .server-down {
-            color: @pastel-red;
-        }
-    }
-
-    .mcstatus-description {
-        grid-column: 2;
-        justify-self: start;
-        grid-row: 2;
-    }
-
-    .mcstatus-players {
-        grid-column: 3;
-        justify-self: end;
-        grid-row: 1;
-    }
-
-    .mcstatus-version {
-        grid-column: 3;
-        justify-self: end;
-        grid-row: 2;
-    }
-}
-
-.wikiview-doublebox {
-    .bot {
             background-color: transparent;
             border-top: 0;
             border-bottom: 4px solid @fg-twenty;
@@ -788,14 +737,31 @@ form.fullsize {
                 font-size: 42px;
                 margin-top: 0;
             }
+        }
+    }
 
     h1, h2, h3, h4, h5, h6 {
         margin-top: revert;
         margin-bottom: revert;
     }
+}
+
+//An error
+.error {
+    .error-dbox {
+        .dbox-top {
+            background-color: fade(@pastel-red, 20%);
+            color: @pastel-red;
+        }
+
+        .dbox-bot {
+            background-color: fade(@pastel-red, 10%);
+            color: @pastel-red;
+        }
     }
 }
 
+//A diario entry
 .diario {
     display: grid;
     grid-template-columns: auto auto 40px;
@@ -868,6 +834,66 @@ form.fullsize {
     }
 }
 
+
+
+/*** Page specific classes ***/
+
+.mcstatus-grid {
+    display: grid;
+
+    grid-template-columns: 64px auto auto;
+    grid-column-gap: 12px;
+
+    align-items: center;
+
+    .mcstatus-icon {
+        grid-column: 1;
+        grid-row-start: 1;
+        grid-row-end: 3;
+        width: 64px;
+        height: 64px;
+
+        .mcstatus-icon-img {
+            width: 64px;
+            height: 64px;
+        }
+    }
+
+    .mcstatus-address {
+        font-weight: bold;
+
+        grid-column: 2;
+        justify-self: start;
+        grid-row: 1;
+
+        .server-up {
+            color: @pastel-lime;
+        }
+
+        .server-down {
+            color: @pastel-red;
+        }
+    }
+
+    .mcstatus-description {
+        grid-column: 2;
+        justify-self: start;
+        grid-row: 2;
+    }
+
+    .mcstatus-players {
+        grid-column: 3;
+        justify-self: end;
+        grid-row: 1;
+    }
+
+    .mcstatus-version {
+        grid-column: 3;
+        justify-self: end;
+        grid-row: 2;
+    }
+}
+
 .profile {
 
     .profile-links {

royalnet/web/static/tf2.css

@@ -228,27 +228,27 @@ nav .nav-sitename {
 nav .nav-login-unavailable {
   opacity: 0.25;
 }
-.h-container {
+.horizontal-container {
   display: flex;
   justify-content: center;
   align-content: center;
   flex-direction: column;
 }
 @media (min-width: 800px) {
-  .h-container {
+  .horizontal-container {
     flex-direction: row;
   }
 }
-.main-container {
+.vertical-main {
   width: 100%;
 }
 @media (min-width: 800px) {
-  .main-container {
+  .vertical-main {
     width: 800px;
   }
 }
 @media (min-width: 1200px) {
-  .main-container {
+  .vertical-main {
     width: 1200px;
   }
 }
@@ -259,10 +259,10 @@ nav .nav-login-unavailable {
   padding: 4px;
   margin: 8px;
 }
-.doublebox {
+.dbox {
   margin: 8px;
 }
-.doublebox .top {
+.dbox .dbox-top {
   display: flex;
   justify-content: space-between;
   background-color: #9a4713;
@@ -272,27 +272,27 @@ nav .nav-login-unavailable {
   font-family: "TF2 Build", sans-serif;
   font-weight: normal;
 }
-.doublebox .top .left {
+.dbox .dbox-top .left {
   align-self: flex-start;
 }
-.doublebox .top .right {
+.dbox .dbox-top .right {
   align-self: flex-end;
 }
-.doublebox .top a {
+.dbox .dbox-top a {
   color: #00caca;
 }
-.doublebox .bot {
+.dbox .dbox-bot {
   background-color: #d2cdc8;
   color: black;
   padding: 8px;
   border-radius: 0 0 4px 4px;
 }
-.doublebox .bot h1,
+.dbox .dbox-bot h1,
-.doublebox .bot h2,
+.dbox .dbox-bot h2,
-.doublebox .bot h3,
+.dbox .dbox-bot h3,
-.doublebox .bot h4,
+.dbox .dbox-bot h4,
-.doublebox .bot h5,
+.dbox .dbox-bot h5,
-.doublebox .bot h6 {
+.dbox .dbox-bot h6 {
   color: black;
 }
 .spoiler {
@@ -303,7 +303,7 @@ nav .nav-login-unavailable {
 .spoiler:hover {
   color: #d2cdc8;
 }
-.faded {
+.disabled {
   opacity: 0.3;
 }
 /*# sourceMappingURL=tf2.css.map */

royalnet/web/static/tf2.css.map

@@ -1 +1 @@
-{"version":3,"sources":["tf2.less"],"names":[],"mappings":"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","file":"tf2.css"}
+{"version":3,"sources":["tf2.less"],"names":[],"mappings":"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","file":"tf2.css"}

royalnet/web/static/tf2.less

@@ -275,7 +275,7 @@ nav {
 
 //Elements
 
-.h-container {
+.horizontal-container {
     display: flex;
     justify-content: center;
     align-content: center;
@@ -287,7 +287,7 @@ nav {
     }
 }
 
-.main-container {
+.vertical-main {
     width: 100%;
 
     @media (min-width: 800px)
@@ -309,10 +309,10 @@ nav {
     margin: 8px;
 }
 
-.doublebox {
+.dbox {
     margin: 8px;
 
-    .top {
+    .dbox-top {
         display: flex;
         justify-content: space-between;
         background-color: @li;
@@ -335,7 +335,7 @@ nav {
         }
     }
 
-    .bot {
+    .dbox-bot {
         background-color: @fg;
         color: black;
         padding: 8px;
@@ -357,6 +357,6 @@ nav {
     }
 }
 
-.faded {
+.disabled {
     opacity: 0.3;
 }

royalnet/web/templates/base.html

@@ -48,15 +48,15 @@
                     <span class="nav-login">
                         <a class="no-icon" href="{{ url_for("login.login_index") }}">
                             Login
-                            <img class="nav-image faded" alt="" src="{{ url_for("static", filename="generic.png") }}">
+                            <img class="nav-image disabled" alt="" src="{{ url_for("static", filename="generic.png") }}">
                         </a>
                     </span>
                 {% endif %}
             </span>
         </div>
     </nav>
-    <div class="h-container">
+    <div class="horizontal-container">
-        <div class="main-container">
+        <div class="vertical-main">
             {% block content %}{% endblock %}
         </div>
     </div>

royalnet/web/templates/error.html

@@ -6,11 +6,11 @@
 
 {% block content %}
     <div class="error">
-        <div class="doublebox doublebox-red">
+        <div class="dbox error-dbox">
-            <div class="top">
+            <div class="dbox-top">
                 <span class="left">Errore!</span>
             </div>
-            <div class="bot">
+            <div class="dbox-bot">
                 <h1>
                     {{ title }}
                 </h1>