Organize the existing CSS

Author: ilyvion

assets/sass/_common.scss

@@ -0,0 +1,51 @@
+/* 
+ * Copyright (C) 2016-2019 Alexander Krivács Schrøder <alexschrod@gmail.com>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+.hidden {
+	display: none !important;
+}
+
+@media screen and (min-width: 1015px) {
+    // Large screens (wider than the automatically resizing comics)
+    img[src*="/comics/"] {
+        margin-left: -15px;
+        margin-right: 15px;
+    }
+}
+
+.nav, .pagination, .carousel, .panel-title a {
+	cursor: pointer;
+}
+
+.modal {
+	color: #ebebeb;
+	text-align: left;
+
+	input { width: auto; }
+
+	label.disabled, p.disabled {
+		color: #999;
+	}
+}
+
+input {
+	margin: 0 !important;
+}
+
+a {
+	cursor: pointer;
+}

assets/sass/_variables.scss

@@ -0,0 +1,18 @@
+/* 
+ * Copyright (C) 2016-2019 Alexander Krivács Schrøder <alexschrod@gmail.com>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+$link-color: #2ba6cb;

assets/sass/style.scss

@@ -15,315 +15,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-$link-color: #2ba6cb;
-
-.hidden {
-	display: none !important;
-}
-
-#qcnav_navbox {
-    margin: 40px 5px 5px 5px;
-    text-align: center;
-
-    thead, tbody {
-        border: none;
-    }
-
-    > tbody > tr, > thead > tr {
-        background-color: #ffffff !important;
-    }
-
-    thead td, thead th {
-        text-align: center;
-    }
-    a.qc {
-        cursor: pointer;
-
-        // START Style bits borrowed from/based on QC's own styles
-        background: transparent;
-        padding: 0px 4px;
-        text-decoration: none;
-
-        &, &:link {
-            color: $link-color;
-        }
-
-        &:visited {
-            color: #258faf;
-        }
-
-        &:hover {
-            color: #258faf;
-        }
-        // END Style bits borrowed from/based on QC's own styles
-    }
-
-    h1 {
-        font-size: 15px;
-        margin-top: 10px;
-
-        &.first-header {
-            margin-top: 0;
-        }
-
-        &.update-header {
-			margin-top: 0;
-			margin-bottom: 0;
-			
-			color: #e43;
-			font-weight: bold;
-        }
-
-        small {
-            color: #0a0a0a;
-            line-height: 1;
-        }
-    }
-}
-
-@media screen and (min-width: 1015px) {
-    // Large screens (wider than the automatically resizing comics)
-    img[src*="/comics/"] {
-        margin-left: -15px;
-        margin-right: 15px;
-    }
-
-    #qcnav_navbox {
-        margin-left: -48px;
-        width: 200px;
-    }
-}
-
-@media screen and (max-width: 639px) {
-    // Small screens (mobile)
-}
-
-.qcnav_space {
-    padding: 3px;
-}
-.qcnav_centered {
-    text-align: center;
-}
-.qcnav_vcentered {
-    vertical-align: middle;
-}
-.qcnav_navelement {
-    width: 100%;
-    font-weight: bold;
-    margin: 0;
-    * {
-        background-color: transparent;
-    }
-    a {
-        text-decoration: none;
-    }
-    td {
-        padding: 3px 1px;
-    }
-    .no-nav {
-        visibility: hidden;
-    }
-}
-
-.qcnav_arrows {
-    font-weight: bold;
-}
-.qcnav_name {
-    width: 100%;
-    text-align: center;
-}
-
-a.qcnav_settings {
-    font-size: x-small;
-    text-decoration: none;
-}
-
-.nav, .pagination, .carousel, .panel-title a {
-    cursor: pointer;
-}
-
-.modal {
-    color: #ebebeb;
-    text-align: left;
-
-    input { width: auto; }
-
-    label.disabled, p.disabled {
-        color: #999;
-    }
-}
-
-input {
-    margin: 0 !important;
-}
-
-a {
-    cursor: pointer;
-}
-
-.radial-progress {
-    border-radius: 50%;
-    .circle {
-        .mask, .fill, .inset {
-            position: absolute;
-            border-radius: 50%;
-        }
-
-        .mask, .fill {
-			-webkit-backface-visibility: hidden;
-			backface-visibility: hidden;
-			
-            transition: -webkit-transform 1s;
-            transition: -ms-transform 1s;
-            transition: transform 1s;
-        }
-    }
-}
-
-#messageSeat {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    pointer-events: none;
-    z-index: 10000;
-
-    & > * {
-        pointer-events: all;
-    }
-
-    .alert {
-        margin-bottom: 1px;
-        font-size: 15px;
-    }
-}
-
-.qcnav_navelement a.qcnav_name_link {
-    cursor: pointer;
-    text-decoration: none;
-    color: $link-color;
-}
-
-#qcnav_item_missing_cast, #qcnav_item_missing_location, #qcnav_item_missing_storyline
-, #qcnav_item_missing_title, #qcnav_item_missing_tagline {
-    > table.with_color {
-        background-color: #5f0000;
-
-        a.qcnav_name_link, a:link, a:visited {
-            color: #ff3030;
-        }
-
-        a:hover, a:focus {
-            color: #ff9797;
-        }
-    }
-}
-
-.corner-ribbon {
-    width: 200px;
-    background: #e43;
-    position: absolute;
-    text-align: center;
-    line-height: 50px;
-    letter-spacing: 1px;
-    color: #f0f0f0;
-    transform: rotate(-45deg) scale(1) translateY(0px);
-    transition: transform 2s, opacity 1s;
-    cursor: pointer;
-    opacity: 1;
-
-    &.sticky {
-        position: fixed;
-    }
-
-    &.shadow {
-        box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3);
-    }
-
-    /* Positions */
-
-    &.top-left {
-        top: 25px;
-        left: -50px;
-        transform: rotate(-45deg);
-    }
-
-    &.top-right {
-        top: 25px;
-        right: -35px;
-        transform: rotate(45deg) scale(1) translateY(0px);
-        clip-path: polygon(27.5% -12.5%, -12.5% 150%, 112.5% 150%, 72.5% -12.5%);
-
-        @media screen and (max-width: 1014px) {
-            right: -50px;
-        }
-
-        &.small {
-            transform: rotate(45deg) scale(0.25) translateY(-220px);
-        }
-        
-        &:hover {
-            opacity: 0.4;
-        }
-    }
-
-    &.bottom-left {
-        bottom: 25px;
-        left: -50px;
-        transform: rotate(45deg);
-    }
-
-    &.bottom-right {
-        right: -50px;
-        bottom: 25px;
-        transform: rotate(-45deg);
-    }
-
-    /* Colors */
-
-    &.white { background: #f0f0f0; color: #555; }
-    &.black { background: #333; }
-    &.grey { background: #999; }
-    &.blue { background: #39d; }
-    &.green { background: #2c7; }
-    &.turquoise { background: #1b9; }
-    &.purple { background: #95b; }
-    &.red { background: #e43; }
-    &.orange { background: #e82; }
-    &.yellow { background: #ec0; }
-}
+@import "variables";
+@import "common";
+@import "widgets/widgets";
 
 qc-comic {
     display: inline-block;
     position: relative;
 }
-
-.lds-dual-ring {
-	display: inline-block;
-	width: 46px;
-	height: 64px;
-  }
-  .lds-dual-ring:after {
-	content: " ";
-	display: block;
-	width: 46px;
-	height: 46px;
-	margin: 1px;
-	border-radius: 50%;
-	border: 5px solid #fff;
-	border-color: #fff transparent #fff transparent;
-	animation: lds-dual-ring 1.2s linear infinite;
-  }
-  .lds-dual-ring.black:after{
-	border: 5px solid #000;
-	border-color: #000 transparent #000 transparent;
-  }
-  @keyframes lds-dual-ring {
-	0% {
-	  transform: rotate(0deg);
-	}
-	100% {
-	  transform: rotate(360deg);
-	}
-  }