Merge branch '841-css-dateien-aufraumen-zusammenfassen-verallgemeinern' into 'development'

Resolve "CSS Dateien aufräumen/zusammenfassen/verallgemeinern/..."

Closes #841

See merge request !1350

resources/assets/js/scriptResultPage.js

@@ -77,7 +77,7 @@ function getDocumentReadyForUse(fokus, custom) {
   // pagination()
   tabs();
   fokiChanger();
-  pluginInfo();
+  //pluginInfo();
   $('iframe:not(.resized)').iFrameResize();
   $('iframe').addClass('resized');
   addListeners();
@@ -91,6 +91,7 @@ function resetSearchbar() {
   $('.search-input input').val('').focus();
 }
 
+/*
 function pluginInfo() {
   if (localStorage) {
     if (localStorage.getItem('pluginInfo') == 'off') $('#searchplugin').css('display', 'none');
@@ -103,6 +104,7 @@ function pluginInfo() {
     });
   }
 }
+*/
 
 function botProtection() {
   $('.result').find('a').click(function () {

resources/assets/less/default.less

-@import "./metager/metager.less";
\ No newline at end of file

resources/assets/less/metager/general.less → resources/assets/less/metager/general/general.less

 /* Default Font */
 
+@modal-content-box-shadow-color: fade(@color-black, 30%);
+@body-background-color: @background-color;
+@a-hover-color: red;
 body {
-    font-family: Arimo, Liberation Sans, sans-serif;
+    font-family: @metager-font;
 }
 
 /* Main Containers */
@@ -45,6 +48,46 @@ body {
     }
 }
 
+.navbar,
+#navbar-static-pages {
+    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
+}
+
+/* Scrollbox Style */
+
+@scrollfade-color: white;
+.scrollbox {
+    position: relative;
+    width: 100%;
+    max-width: @results-width-max;
+    .scrollfade- {
+        &left,
+        &right {
+            position: absolute;
+            width: 20px;
+            height: 40px;
+            top: 1px;
+            pointer-events: none;
+        }
+        &left {
+            background: -webkit-gradient(linear, left top, right top, from(@scrollfade-color), color-stop(fade(@scrollfade-color, 80%)), to(fade(@scrollfade-color, 0%)));
+            background: linear-gradient(to right, @scrollfade-color, fade(@scrollfade-color, 80%), fade(@scrollfade-color, 0%));
+            left: 1px;
+        }
+        &right {
+            background: -webkit-gradient(linear, right top, left top, from(@scrollfade-color), color-stop(fade(@scrollfade-color, 80%)), to(fade(@scrollfade-color, 0%)));
+            background: linear-gradient(to left, @scrollfade-color, fade(@scrollfade-color, 80%), fade(@scrollfade-color, 0%));
+            right: 1px;
+        }
+    }
+    .search-option-frame {
+        position: relative;
+    }
+}
+
+/* General font sizing */
+
+@default-font-size: 15px;
 .first-last-child-margin-fix() {
     &:first-child {
         margin-top: 0px;
@@ -54,14 +97,6 @@ body {
     }
 }
 
-.navbar,
-#navbar-static-pages {
-    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
-}
-
-/* General font sizing */
-
-@default-font-size: 15px;
 h1 {
     font-size: (@default-font-size * 1.6);
     .first-last-child-margin-fix;
@@ -97,8 +132,26 @@ body {
     text-align: center;
 }
 
+.subheading {
+    font-size: 20px;
+    margin: 20px 0px;
+    white-space: center;
+}
+
 a {
     font-size: 100%;
+    color: @link-color;
+    &:visited {
+        color: @link-color;
+    }
+    &:hover {
+        text-decoration: none;
+        color: @a-hover-color;
+    }
+}
+
+i.fa {
+    background-color: transparent;
 }
 
 /* Logo */
@@ -124,7 +177,7 @@ a {
         width: fit-content;
         text-decoration: none;
         font-size: 75px;
-        @media(max-width: @screen-xs-max) {
+        @media(max-width: @screen-mobile) {
             font-size: 50px;
         }
     }
@@ -132,10 +185,18 @@ a {
 
 #subpage-logo {
     padding: 5px 0;
-    a h1 {
-        .logo;
-        font-size: 30px;
-        margin: 0;
+    .navbar-brand {
+        .noprint;
+        line-height: 100% !important;
+        padding: 0;
+        position: absolute;
+        z-index: 5;
+        left: 10px;
+        h1 {
+            .logo;
+            font-size: 30px;
+            margin: 0;
+        }
     }
 }
 
@@ -177,8 +238,8 @@ summary {
 
 /* Tooltips 
  * 
- * Für alle Elemente mit einem "data-tooltip"-Attribut wird ein 
- * Tooltip mit entsprechendem Inhalt unterhalb des Elements angezeigt
+ * All elements with a "data-tooltip" attribute show a 
+ * tooltip below on hover
  */
 
 *[data-tooltip] {
@@ -234,7 +295,7 @@ summary {
         width: 50%;
         margin: 0;
         float: left;
-        @media (max-width: @screen-xs-max) {
+        @media (max-width: @screen-mobile) {
             width: 100%;
         }
     }
@@ -268,32 +329,50 @@ summary {
 
 /* Little helpers */
 
+// Bold text
 .bold {
     font-weight: bold;
 }
 
+// Do not print this
 .noprint {
     @media print {
         display: none !important;
     }
 }
 
+// For print: Start new page after this
 .newpage {
     page-break-after: always;
 }
 
+// For list elements without a dot
+li.nodot {
+    list-style-type: none;
+}
+
+// Disabled elements (only visual)
 .disabled,
-.disabled * {
+:disabled,
+.disabled *,
+:disabled *,
+    {
     color: #aaa !important;
     cursor: not-allowed !important;
 }
 
+// Convert excess text into "..."
 .overflow-ellipsis {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
+// Used on labels which initiate visual change (e.g. open-sidebar-button)
+.navigation-element {
+    cursor: pointer;
+}
+
 /* Button */
 
 button {
@@ -301,16 +380,32 @@ button {
     background-color: transparent;
 }
 
-/* Unsorted */
+/* Lists with dots */
+
+.dotlist {
+    list-style-type: disc;
+    text-align: left;
+    li {
+        margin-bottom: 5px !important;
+    }
+}
+
+/* Code */
 
-// Currently in use for the plugin modal
-.modal-content {
-    border-radius: 0;
-    -webkit-box-shadow: 1px 1px 3px 1px @modal-content-box-shadow-color;
-    -moz-box-shadow: 1px 1px 3px 1px @modal-content-box-shadow-color;
-    box-shadow: 1px 1px 3px 1px @modal-content-box-shadow-color;
+code {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    word-break: break-word;
 }
 
+/* Adresses */
+
+address {
+    white-space: pre;
+}
+
+/* Unknown Uses */
+
 label a {
     color: inherit;
     &:hover {
@@ -319,15 +414,6 @@ label a {
     }
 }
 
-li.nodot {
-    list-style-type: none;
-}
-
-// Used on labels which initiate visual change (e.g. open-sidebar-button)
-.navigation-element {
-    cursor: pointer;
-}
-
 // For Elements where newlines should actually be displayed
 .wrap {
     white-space: pre-wrap;

resources/assets/less/metager/general/specific.less

+/* Rules for specific elements */
+
+// kontakt.blade.php, spende.blade.php, zitatsuche.blade.php
+.form-group {
+    font-family: sans-serif;
+    font-size: 16px;
+    color: @color-black;
+    background-color: transparent;
+    text-align: center;
+}
+
+input[name=eingabe] {
+    border-right: 0;
+    box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.075);
+}
+
+fieldset input[type=text] {
+    width: 100%;
+    padding-left: 10px;
+    padding-right: 10px;
+    border-width: 1px;
+    overflow: visible;
+}
\ No newline at end of file

resources/assets/less/metager/metager.less

-@import "./general.less";
-@import "./specific.less";
-@import "./result-page.less";
-@import "./start-page.less";
-@import "./settings.less";
+// Variables
 @import "./variables.less";
-@import "./sidebar.less";
-@import "./modals.less";
-@import "./footer.less";
-@import "./searchbar.less";
-@import "./aufruf-winter.less";
-@import "./cards.less";
-@import "./widget.less";
\ No newline at end of file
+// General
+@import "./general/cards.less";
+@import "./general/general.less";
+@import "./general/specific.less";
+// Pages
+@import "./pages/contact.less";
+@import "./pages/donation.less";
+@import "./pages/help_faq.less";
+@import "./pages/language.less";
+@import "./pages/privacy.less";
+@import "./pages/resultpage.less";
+@import "./pages/start-page.less";
+@import "./pages/widget.less";
+// Parts
+@import "./parts/aufruf-winter.less";
+@import "./parts/footer.less";
+@import "./parts/modals.less";
+@import "./parts/searchbar.less";
+@import "./parts/settings.less";
+@import "./parts/sidebar.less";
\ No newline at end of file

resources/assets/less/metager/pages/contact.less

+.kontakt-form-group {
+    text-align: left;
+    font-size: 14px;
+}
+
+form.contact {
+    max-width: 500px;
+}
+
+textarea#message {
+    height: 200px;
+}
\ No newline at end of file

resources/assets/less/metager/pages/donation.less

+.donation-form-group {
+    text-align: left;
+    font-size: 12px;
+}
+
+.donation-form-group label {
+    font-weight: bold;
+}
\ No newline at end of file

resources/assets/less/metager/pages/help_faq.less

+.hilfe,
+.faq {
+    section {
+        .card-heavy;
+        h3 {
+            border-bottom: 1px solid #aaa;
+        }
+        .search-example {
+            border: 1px solid #aaa;
+            background-color: #eee;
+            border-radius: 5px;
+            padding: 10px;
+        }
+    }
+    .fake-result {
+        *:hover {
+            overflow: visible !important;
+        }
+        .result-footer {
+            overflow: hidden;
+            align-items: center;
+        }
+        .open-result-options label {
+            padding: 10px;
+            border: 2px dashed red;
+            border-radius: 100%;
+            color: black;
+            font-size: 14px;
+            text-decoration: none;
+            font-weight: normal;
+        }
+    }
+}
\ No newline at end of file

resources/assets/less/metager/pages/language.less

+.language-name {
+    white-space: pre;
+}
\ No newline at end of file

resources/assets/less/metager/pages/privacy.less

+.privacy {
+    main {
+        font-size: 10pt;
+        hyphens: auto;
+        counter-reset: kontext 0 datum 0;
+        text-align: justify;
+    }
+    h1 {
+        font-size: 18pt;
+    }
+    .kontext>h1::before {
+        counter-increment: kontext;
+        content: "K" counter(kontext) " ";
+        font-weight: normal;
+    }
+    .datum>h1::before {
+        counter-increment: datum;
+        content: "D" counter(datum) " ";
+        font-weight: normal;
+    }
+    .kontext h1 {
+        font-size: 16pt;
+        margin-bottom: inherit;
+    }
+    .kontext h2 {
+        font-size: 14pt;
+        margin-bottom: inherit;
+    }
+    .datum h1 {
+        font-size: 12pt;
+        margin-bottom: inherit;
+    }
+    .datum h2 {
+        font-size: 11pt;
+        margin-bottom: inherit;
+        margin-top: 5pt;
+    }
+    .kontext-list {
+        list-style: none;
+    }
+    .datum-list {
+        list-style: none;
+    }
+    samp {
+        hyphens: none;
+        font-size: 8pt;
+    }
+}
\ No newline at end of file

resources/assets/less/metager/pages/resultpage.less

+@import "./resultpage/result-page.less";
+@import "./resultpage/result.less";
+@import "./resultpage/product.less";
+@import "./resultpage/quicktips.less";
+@import "./resultpage/result-saver.less";
\ No newline at end of file

resources/assets/less/metager/product.less → resources/assets/less/metager/pages/resultpage/product.less

@@ -5,12 +5,12 @@
     flex-direction: column;
     text-align: center;
     padding: 5px;
-    .lSSlideOuter  {
+    .lSSlideOuter {
         margin-top: 5px;
-        border: 1px dotted @product-border-color;
+        border: 1px dotted @color-almost-white;
     }
     a {
-        color: @product-a-color;
+        color: @color-strong-grey;
     }
     img {
         max-width: 100px;
@@ -18,8 +18,8 @@
     .price {
         position: relative;
         top: 20px;
-        color: @product-price-color;
-        background-color: @product-price-background-color;
+        color: @color-strong-grey;
+        background-color: fade(@color-white, 90%);
         text-align: left;
         width: 80px;
         font-weight: bold;

resources/assets/less/metager/result-page.less → resources/assets/less/metager/pages/resultpage/result-page.less

-/* Ergebnisseite */
-
-@import "./quicktips.less";
-@import "./result-saver.less";
-@import "./result.less";
-@import "./product.less";
-//
-@resultpage-background-color: #FAFAFA;
-//
+/* Variables */
+
+// Background color
+@resultpage-background-color: @background-color;
+// Margin to the left of the results
 @results-margin-left: 16px;
-//
-@result-page-body-background-color: @background-color;
-@result-page-a-hover-color: red;
-@result-page-product-shop-color: green;
-//
-@body-background-color: @result-page-body-background-color;
-@a-hover-color: @result-page-a-hover-color;
-@a-donation-hover-color: @result-page-a-hover-color;
-@product-shop-color: @result-page-product-shop-color;
-//
+// Min and max widths of the 2 resultpage columns
 @results-width-min: 500px;
 @results-width-max: 700px;
 @additions-width-min: 400px;
 @additions-width-max: 500px;
-//
-@resultpage-breakpoint-large: (@results-width-max + @additions-width-max + @padding-small-default * 4);
-@resultpage-breakpoint-small: (@results-width-min + @additions-width-min + @padding-small-default * 4);
-//
-@resultpage-leftbox-max-width: @results-width-max;
-@resultpage-leftbox-min-dist-left-right: @padding-small-default;
-@resultpage-leftbox-min-dist-top-bottom: @padding-small-default;
-//
+// Breakpoints for the 2 resultpage columns
+@resultpage-breakpoint-max: (@results-width-max + @additions-width-max + @padding-small-default * 4);
+@resultpage-breakpoint-min: (@results-width-min + @additions-width-min + @padding-small-default * 4);
+@product-shop-color: green;
+// The point upon which a .screen-large logo is displayed
 @logo-size-breakpoint: (@results-width-min + @padding-small-default * 2);
-//
+// The point upon which the sidebar opener switches place
 @sidebar-opener-breakpoint: (@results-width-max + @padding-small-default * 2 + 60px);
-//
+// Quicktip background color
+@quicktip-background-color: @color-white;
+// Color of the Spruch author
+@spruch-author-color: @color-strong-grey;
+/* Styles */
+
 #header-logo {
     z-index: 0;
     padding-right: 10px;
@@ -46,7 +35,6 @@
     .screen-small {
         display: none;
     }
-    .screen-large {}
     @media (max-width: @logo-size-breakpoint) {
         .screen-large {
             display: none;
@@ -96,17 +84,6 @@ body {
     padding-top: 10px;
 }
 
-.hostlabel {
-    display: none;
-    position: relative;
-    margin-top: -14px;
-    background-color: @hostlabel-background-color;
-    a:link,
-    a:visited {
-        color: @hostlabel-a-link-or-visited-color;
-    }
-}
-
 .img:hover .hostlabel {
     display: block;
 }
@@ -124,7 +101,7 @@ body {
 .alert ul {
     list-style-type: none;
     padding-left: 49px;
-    @media (max-width: @screen-xs-max) {
+    @media (max-width: @screen-mobile) {
         padding-left: 0px;
     }
 }
@@ -162,20 +139,10 @@ nav .input-group {
 }
 
 a {
-    &:visited {
-        color: @link-color;
-    }
-    &:hover {
-        text-decoration: none;
-        color: @a-hover-color;
-    }
     &#donation {
         &,
         &:visited {
-            color: @a-donation-normal-or-visited-color;
-        }
-        &:hover {
-            color: @a-donation-hover-color;
+            color: inherit;
         }
     }
 }
@@ -220,24 +187,6 @@ a {
     margin: 0 !important;
 }
 
-.options-list>li {
-    &:hover {
-        background-color: @options-list-li-hover-background-color;
-    }
-    &>a {
-        color: @options-list-li-a-color;
-        white-space: nowrap;
-        display: block;
-        padding: 5px 14px;
-    }
-    input[type=submit] {
-        width: 100%;
-        background-color: transparent;
-        border: 0;
-        margin: 5px 0;
-    }
-}
-
 .js-only {
     display: none;
 }
@@ -254,7 +203,7 @@ a {
     margin-bottom: 10px;
     margin: 5px;