Commit 06dfa60a authored by Karl Hasselbring's avatar Karl Hasselbring

CSS Dateien stark aufgeräumt

parent 6ebe7d2a
...@@ -77,7 +77,7 @@ function getDocumentReadyForUse(fokus, custom) { ...@@ -77,7 +77,7 @@ function getDocumentReadyForUse(fokus, custom) {
// pagination() // pagination()
tabs(); tabs();
fokiChanger(); fokiChanger();
pluginInfo(); //pluginInfo();
$('iframe:not(.resized)').iFrameResize(); $('iframe:not(.resized)').iFrameResize();
$('iframe').addClass('resized'); $('iframe').addClass('resized');
addListeners(); addListeners();
...@@ -91,6 +91,7 @@ function resetSearchbar() { ...@@ -91,6 +91,7 @@ function resetSearchbar() {
$('.search-input input').val('').focus(); $('.search-input input').val('').focus();
} }
/*
function pluginInfo() { function pluginInfo() {
if (localStorage) { if (localStorage) {
if (localStorage.getItem('pluginInfo') == 'off') $('#searchplugin').css('display', 'none'); if (localStorage.getItem('pluginInfo') == 'off') $('#searchplugin').css('display', 'none');
...@@ -103,6 +104,7 @@ function pluginInfo() { ...@@ -103,6 +104,7 @@ function pluginInfo() {
}); });
} }
} }
*/
function botProtection() { function botProtection() {
$('.result').find('a').click(function () { $('.result').find('a').click(function () {
......
...@@ -6,16 +6,16 @@ ...@@ -6,16 +6,16 @@
@base-aufruf-winter-btn-hover-background-color: #bd0d0d; @base-aufruf-winter-btn-hover-background-color: #bd0d0d;
// //
@aufruf-winter-a-normal-or-visited: @base-aufruf-winter-color; @aufruf-winter-a-normal-or-visited: @base-aufruf-winter-color;
@aufruf-winter-aufruf-action-btn-color: @base-aufruf-winter-btn-color!important; @aufruf-winter-aufruf-action-btn-color: @base-aufruf-winter-btn-color !important;
@aufruf-winter-aufruf-action-btn-background-color: @base-aufruf-winter-color!important; @aufruf-winter-aufruf-action-btn-background-color: @base-aufruf-winter-color !important;
@aufruf-winter-aufruf-action-btn-border-color: @base-aufruf-winter-border-color; @aufruf-winter-aufruf-action-btn-border-color: @base-aufruf-winter-border-color;
@aufruf-winter-aufruf-action-btn-hover-background-color: @base-aufruf-winter-btn-hover-background-color !important; @aufruf-winter-aufruf-action-btn-hover-background-color: @base-aufruf-winter-btn-hover-background-color !important;
@aufruf-winter-aufruf-action-btn-hover-border-color: @base-aufruf-winter-border-color; @aufruf-winter-aufruf-action-btn-hover-border-color: @base-aufruf-winter-border-color;
@aufruf-winter-quicktip-border-color: @base-aufruf-winter-color!important; @aufruf-winter-quicktip-border-color: @base-aufruf-winter-color !important;
.aufruf-winter { .aufruf-winter {
h1 { h1 {
font-size: 32px; font-size: 32px;
@media(max-width: @screen-md-max) { @media(max-width: @screen-medium) {
.aufruf-winter h1 { .aufruf-winter h1 {
font-size: 27px; font-size: 27px;
} }
...@@ -34,22 +34,22 @@ ...@@ -34,22 +34,22 @@
background-color: @aufruf-winter-aufruf-action-btn-hover-background-color; background-color: @aufruf-winter-aufruf-action-btn-hover-background-color;
border-color: @aufruf-winter-aufruf-action-btn-hover-border-color; border-color: @aufruf-winter-aufruf-action-btn-hover-border-color;
} }
&.mg-panel { &#main-content {
background-image: url("/img/snowflake.svg"); background-image: url("/img/snowflake.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right top; background-position: right top;
background-size: 100px 100px; background-size: 100px 100px;
@media(max-width: @screen-sm-max) { @media(max-width: @screen-small) {
background-size: 60px 60px; background-size: 60px 60px;
} }
@media(min-width: @screen-lg) { @media(min-width: @screen-medium) {
width: 940px; width: 940px;
} }
} }
&.quicktip { &.quicktip {
border-left: 3px solid @aufruf-winter-quicktip-border-color; border-left: 3px solid @aufruf-winter-quicktip-border-color;
} }
@media(max-width: @screen-md-max) { @media(max-width: @screen-medium) {
.lead { .lead {
font-size: 18px; font-size: 18px;
} }
......
...@@ -29,7 +29,7 @@ footer { ...@@ -29,7 +29,7 @@ footer {
color: @color-black; color: @color-black;
} }
} }
@media (max-width: @screen-xs-max) { @media (max-width: @screen-mobile) {
img { img {
display: none; display: none;
} }
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
@modal-content-box-shadow-color: fade(@color-black, 30%); @modal-content-box-shadow-color: fade(@color-black, 30%);
@body-background-color: @background-color; @body-background-color: @background-color;
@a-hover-color: red;
body { body {
font-family: @metager-font; font-family: @metager-font;
} }
...@@ -47,6 +48,46 @@ body { ...@@ -47,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-last-child-margin-fix() {
&:first-child { &:first-child {
margin-top: 0px; margin-top: 0px;
...@@ -56,14 +97,6 @@ body { ...@@ -56,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 { h1 {
font-size: (@default-font-size * 1.6); font-size: (@default-font-size * 1.6);
.first-last-child-margin-fix; .first-last-child-margin-fix;
...@@ -102,6 +135,13 @@ body { ...@@ -102,6 +135,13 @@ body {
a { a {
font-size: 100%; font-size: 100%;
color: @link-color; color: @link-color;
&:visited {
color: @link-color;
}
&:hover {
text-decoration: none;
color: @a-hover-color;
}
} }
/* Logo */ /* Logo */
...@@ -127,7 +167,7 @@ a { ...@@ -127,7 +167,7 @@ a {
width: fit-content; width: fit-content;
text-decoration: none; text-decoration: none;
font-size: 75px; font-size: 75px;
@media(max-width: @screen-xs-max) { @media(max-width: @screen-mobile) {
font-size: 50px; font-size: 50px;
} }
} }
...@@ -180,8 +220,8 @@ summary { ...@@ -180,8 +220,8 @@ summary {
/* Tooltips /* Tooltips
* *
* Für alle Elemente mit einem "data-tooltip"-Attribut wird ein * All elements with a "data-tooltip" attribute show a
* Tooltip mit entsprechendem Inhalt unterhalb des Elements angezeigt * tooltip below on hover
*/ */
*[data-tooltip] { *[data-tooltip] {
...@@ -237,7 +277,7 @@ summary { ...@@ -237,7 +277,7 @@ summary {
width: 50%; width: 50%;
margin: 0; margin: 0;
float: left; float: left;
@media (max-width: @screen-xs-max) { @media (max-width: @screen-mobile) {
width: 100%; width: 100%;
} }
} }
...@@ -271,32 +311,50 @@ summary { ...@@ -271,32 +311,50 @@ summary {
/* Little helpers */ /* Little helpers */
// Bold text
.bold { .bold {
font-weight: bold; font-weight: bold;
} }
// Do not print this
.noprint { .noprint {
@media print { @media print {
display: none !important; display: none !important;
} }
} }
// For print: Start new page after this
.newpage { .newpage {
page-break-after: always; 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 *,
:disabled *,
{
color: #aaa !important; color: #aaa !important;
cursor: not-allowed !important; cursor: not-allowed !important;
} }
// Convert excess text into "..."
.overflow-ellipsis { .overflow-ellipsis {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
// Used on labels which initiate visual change (e.g. open-sidebar-button)
.navigation-element {
cursor: pointer;
}
/* Button */ /* Button */
button { button {
...@@ -304,15 +362,7 @@ button { ...@@ -304,15 +362,7 @@ button {
background-color: transparent; background-color: transparent;
} }
/* Unsorted */ /* Unknown Uses */
// 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;
}
label a { label a {
color: inherit; color: inherit;
...@@ -320,13 +370,4 @@ label a { ...@@ -320,13 +370,4 @@ label a {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
}
li.nodot {
list-style-type: none;
}
// Used on labels which initiate visual change (e.g. open-sidebar-button)
.navigation-element {
cursor: pointer;
} }
\ No newline at end of file
/* Rund ums Fokus Modal */ /* Rund ums Fokus Modal */
#show-create-focus:checked { #show-create-focus:checked {
& + #create-focus-modal { &+#create-focus-modal {
position: fixed; position: fixed;
display: -webkit-box; display: flex;
display: -ms-flexbox; }
display: flex;
}
} }
#plugin-modal-checkbox:checked { #plugin-modal-checkbox:checked {
& + #plugin-modal { &+#plugin-modal {
display: block; display: block;
} }
}
.settings-modal-buttons {
padding: 5px;
button {
margin: 5px
}
} }
.metager-modal { .metager-modal {
display: none; display: none;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
-webkit-box-pack: center; -webkit-box-pack: center;
-ms-flex-pack: center; -ms-flex-pack: center;
justify-content: center; justify-content: center;
min-height: 100%; min-height: 100%;
width: 100%; width: 100%;
background: -webkit-gradient( background: -webkit-gradient( linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7)));
linear, background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
left top, z-index: 150;
left bottom, .metager-modal-dialog {
from(rgba(0, 0, 0, 0.7)), background-color: white;
to(rgba(0, 0, 0, 0.7)) max-width: 700px;
); margin: 30px auto;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)); height: 90vh;
z-index: 150; overflow-y: auto;
.metager-modal-dialog { .metager-modal-content {
background-color: white; .metager-modal-header {
max-width: 700px; padding: 15px;
margin: 30px auto; position: relative;
height: 90vh; border-bottom: 1px solid #e5e5e5;
overflow-y: auto; .close-metager-modal {
.metager-modal-content { position: absolute;
.metager-modal-header { right: 15px;
padding: 15px; &::after {
position: relative; font-size: 24px;
border-bottom: 1px solid #e5e5e5; content: "×";
.close-metager-modal { }
position: absolute; }
right: 15px; }
&::after { #toggle-dropdowns-label {
font-size: 24px; cursor: pointer;
content: "×"; -webkit-user-select: none;
} -moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.focus-dropdown-toggle {
display: none;
&:not(:checked) {
&~.focus-dropdown-label~.row {
max-height: 0px;
overflow: hidden;
}
}
&:checked {
&~.focus-dropdown-label::after {
content: " ➖ ";
}
}
}
.focus-dropdown-label {
cursor: pointer;
&::after {
font-size: 16px;
content: " ➕ ";
margin-left: 3px;
vertical-align: middle;
}
&~.row {
-webkit-transition: max-height 0.4s ease;
/* Chrome 1-25, Safari 3.2+ */
/* Firefox 4-15 */
/* Opera 10.50–12.00 */
transition: max-height 0.4s ease;
max-height: 400px;
}
}
} }
}
#toggle-dropdowns-label {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.focus-dropdown-toggle {
display: none;
&:not(:checked) {
& ~ .focus-dropdown-label ~ .row {
max-height: 0px;
overflow: hidden;
}
}
&:checked {
& ~ .focus-dropdown-label::after {
content: " ➖ ";
}
}
}
.focus-dropdown-label {
cursor: pointer;
&::after {
font-size: 16px;
content: " ➕ ";
margin-left: 3px;
vertical-align: middle;
}
& ~ .row {
-webkit-transition: max-height 0.4s ease;
/* Chrome 1-25, Safari 3.2+ */
/* Firefox 4-15 */
/* Opera 10.50–12.00 */
transition: max-height 0.4s ease;
max-height: 400px;
}
}
} }
} }
} \ No newline at end of file
/* Produktergebnisse */ /* Produktergebnisse */
@product-border-color: @color-almost-white;
@product-a-color: @color-strong-grey;
@product-price-color: @color-strong-grey;
@product-price-background-color: fade(@color-white, 90%);
.products { .products {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -11,10 +7,10 @@ ...@@ -11,10 +7,10 @@
padding: 5px; padding: 5px;
.lSSlideOuter { .lSSlideOuter {
margin-top: 5px; margin-top: 5px;
border: 1px dotted @product-border-color; border: 1px dotted @color-almost-white;
} }
a { a {
color: @product-a-color; color: @color-strong-grey;
} }
img { img {
max-width: 100px; max-width: 100px;
...@@ -22,8 +18,8 @@ ...@@ -22,8 +18,8 @@
.price { .price {
position: relative; position: relative;
top: 20px; top: 20px;
color: @product-price-color; color: @color-strong-grey;
background-color: @product-price-background-color; background-color: fade(@color-white, 90%);
text-align: left; text-align: left;
width: 80px; width: 80px;
font-weight: bold; font-weight: bold;
......
/* Ergebnisseite */
@import "./quicktips.less"; @import "./quicktips.less";
@import "./result-saver.less"; @import "./result-saver.less";
@import "./result.less"; @import "./result.less";
@import "./product.less"; @import "./product.less";
// /* Variables */
// Background color
@resultpage-background-color: @background-color; @resultpage-background-color: @background-color;
// // Margin to the left of the results
@results-margin-left: 16px; @results-margin-left: 16px;
// // Min and max widths of the 2 resultpage columns
@result-page-a-hover-color: red;
@result-page-product-shop-color: green;
//
@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;
//
@results-width-min: 500px; @results-width-min: 500px;
@results-width-max: 700px; @results-width-max: 700px;
@additions-width-min: 400px; @additions-width-min: 400px;
@additions-width-max: 500px; @additions-width-max: 500px;
// // Breakpoints for the 2 resultpage columns
@resultpage-breakpoint-large: (@results-width-max + @additions-width-max + @padding-small-default * 4); @resultpage-breakpoint-max: (@results-width-max + @additions-width-max + @padding-small-default * 4);
@resultpage-breakpoint-small: (@results-width-min + @additions-width-min + @padding-small-default * 4); @resultpage-breakpoint-min: (@results-width-min + @additions-width-min + @padding-small-default * 4);
// @product-shop-color: green;
@resultpage-leftbox-max-width: @results-width-max; // The point upon which a .screen-large logo is displayed
@resultpage-leftbox-min-dist-left-right: @padding-small-default;
@resultpage-leftbox-min-dist-top-bottom: @padding-small-default;
//
@logo-size-breakpoint: (@results-width-min + @padding-small-default * 2); @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); @sidebar-opener-breakpoint: (@results-width-max + @padding-small-default * 2 + 60px);
// // Quicktip background color