Skip to content

GitLab

Commit 02a71d75 authored by Karl Hasselbring's avatar Karl Hasselbring
Browse files

CSS Dateien stark aufgeräumt

parent d7561eca
Hide whitespace changes
Inline Side-by-side
Showing with 321 additions and 487 deletions
resources/assets/js/scriptResultPage.js
View file @ 02a71d75
......@@ -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/metager/aufruf-winter.less
View file @ 02a71d75
......@@ -6,16 +6,16 @@
@base-aufruf-winter-btn-hover-background-color: #bd0d0d;
//
@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-background-color: @base-aufruf-winter-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-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-quicktip-border-color: @base-aufruf-winter-color!important;
@aufruf-winter-quicktip-border-color: @base-aufruf-winter-color !important;
.aufruf-winter {
h1 {
font-size: 32px;
@media(max-width: @screen-md-max) {
@media(max-width: @screen-medium) {
.aufruf-winter h1 {
font-size: 27px;
}
......@@ -34,22 +34,22 @@
background-color: @aufruf-winter-aufruf-action-btn-hover-background-color;
border-color: @aufruf-winter-aufruf-action-btn-hover-border-color;
}
&.mg-panel {
&#main-content {
background-image: url("/img/snowflake.svg");
background-repeat: no-repeat;
background-position: right top;
background-size: 100px 100px;
@media(max-width: @screen-sm-max) {
@media(max-width: @screen-small) {
background-size: 60px 60px;
}
@media(min-width: @screen-lg) {
@media(min-width: @screen-medium) {
width: 940px;
}
}
&.quicktip {
border-left: 3px solid @aufruf-winter-quicktip-border-color;
}
@media(max-width: @screen-md-max) {
@media(max-width: @screen-medium) {
.lead {
font-size: 18px;
}
......
resources/assets/less/metager/footer.less
View file @ 02a71d75
......@@ -29,7 +29,7 @@ footer {
color: @color-black;
}
}
@media (max-width: @screen-xs-max) {
@media (max-width: @screen-mobile) {
img {
display: none;
}
......
resources/assets/less/metager/general.less
View file @ 02a71d75
......@@ -2,6 +2,7 @@
@modal-content-box-shadow-color: fade(@color-black, 30%);
@body-background-color: @background-color;
@a-hover-color: red;
body {
font-family: @metager-font;
}
......@@ -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-child {
margin-top: 0px;
......@@ -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 {
font-size: (@default-font-size * 1.6);
.first-last-child-margin-fix;
......@@ -102,6 +135,13 @@ body {
a {
font-size: 100%;
color: @link-color;
&:visited {
color: @link-color;
}
&:hover {
text-decoration: none;
color: @a-hover-color;
}
}
/* Logo */
......@@ -127,7 +167,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;
}
}
......@@ -180,8 +220,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] {
......@@ -237,7 +277,7 @@ summary {
width: 50%;
margin: 0;
float: left;
@media (max-width: @screen-xs-max) {
@media (max-width: @screen-mobile) {
width: 100%;
}
}
......@@ -271,32 +311,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 {
......@@ -304,15 +362,7 @@ button {
background-color: transparent;
}
/* Unsorted */
// 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;
}
/* Unknown Uses */
label a {
color: inherit;
......@@ -320,13 +370,4 @@ label a {
text-decoration: none;
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
resources/assets/less/metager/modals.less
View file @ 02a71d75
/* Rund ums Fokus Modal */
#show-create-focus:checked {
& + #create-focus-modal {
position: fixed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
&+#create-focus-modal {
position: fixed;
display: flex;
}
}
#plugin-modal-checkbox:checked {
& + #plugin-modal {
display: block;
}
&+#plugin-modal {
display: block;
}
}
.settings-modal-buttons {
padding: 5px;
button {
margin: 5px
}
}
.metager-modal {
display: none;
position: absolute;
top: 0;
right: 0;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
min-height: 100%;
width: 100%;
background: -webkit-gradient(
linear,
left top,
left bottom,
from(rgba(0, 0, 0, 0.7)),
to(rgba(0, 0, 0, 0.7))
);
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
z-index: 150;
.metager-modal-dialog {
background-color: white;
max-width: 700px;
margin: 30px auto;
height: 90vh;
overflow-y: auto;
.metager-modal-content {
.metager-modal-header {
padding: 15px;
position: relative;
border-bottom: 1px solid #e5e5e5;
.close-metager-modal {
position: absolute;
right: 15px;
&::after {
font-size: 24px;
content: "×";
}
display: none;
position: absolute;
top: 0;
right: 0;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
min-height: 100%;
width: 100%;
background: -webkit-gradient( linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7)));
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
z-index: 150;
.metager-modal-dialog {
background-color: white;
max-width: 700px;
margin: 30px auto;
height: 90vh;
overflow-y: auto;
.metager-modal-content {
.metager-modal-header {
padding: 15px;
position: relative;
border-bottom: 1px solid #e5e5e5;
.close-metager-modal {
position: absolute;
right: 15px;
&::after {
font-size: 24px;
content: "×";
}
}
}
#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;
}
}
}
}
#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
resources/assets/less/metager/product.less
View file @ 02a71d75
/* 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 {
display: flex;
flex-direction: column;
......@@ -11,10 +7,10 @@
padding: 5px;
.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;
......@@ -22,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
View file @ 02a71d75
/* Ergebnisseite */
@import "./quicktips.less";
@import "./result-saver.less";
@import "./result.less";
@import "./product.less";
//
/* Variables */
// Background color
@resultpage-background-color: @background-color;
//
// Margin to the left of the results
@results-margin-left: 16px;
//
@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;
//
// 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;
@hostlabel-a-link-or-visited-color: @color-white;
@hostlabel-background-color: @color-strong-grey;
@a-donation-normal-or-visited-color: inherit;
// Color of the Spruch author
@spruch-author-color: @color-strong-grey;
@options-list-li-hover-background-color: @color-almost-white;
@options-list-li-a-color: @color-strong-grey;
@image-item-img-box-shadow-color: fade(@color-black, 30%);
@searchplugin-a-color: @color-white;
@lsprev-or-lsnext-i-background-color: @color-black;
//
/* Styles */
#header-logo {
z-index: 0;
padding-right: 10px;
......@@ -55,7 +39,6 @@
.screen-small {
display: none;
}
.screen-large {}
@media (max-width: @logo-size-breakpoint) {
.screen-large {
display: none;
......@@ -105,17 +88,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;
}
......@@ -133,7 +105,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;
}
}
......@@ -171,20 +143,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;
}
}
}
......@@ -229,24 +191,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;
}
......@@ -263,7 +207,7 @@ a {
margin-bottom: 10px;
margin: 5px;
.img {
box-shadow: 0px 0px 10px 2px @image-item-img-box-shadow-color;
box-shadow: 0px 0px 10px 2px fade(@color-black, 30%);
}
}