diff --git a/resources/assets/js/scriptResultPage.js b/resources/assets/js/scriptResultPage.js
index 686f1cbc34e73e0f224b006c16f9821dc83f6c89..ba732e700ac0addec75b2bce7fae3ee54faa158b 100644
--- a/resources/assets/js/scriptResultPage.js
+++ b/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 () {
diff --git a/resources/assets/less/metager/aufruf-winter.less b/resources/assets/less/metager/aufruf-winter.less
index 7a4ee98fca97f8c1ed0721cb20de4f66dd0265dc..dedcaa87679ab2b2776786b08b15fe3de8bfc1c8 100644
--- a/resources/assets/less/metager/aufruf-winter.less
+++ b/resources/assets/less/metager/aufruf-winter.less
@@ -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;
}
diff --git a/resources/assets/less/metager/footer.less b/resources/assets/less/metager/footer.less
index 347197d1bc218f39d3a73bdea88515ac0d5b6776..c0e69b6ed7951792da4190dfbaf64bd6960359c5 100644
--- a/resources/assets/less/metager/footer.less
+++ b/resources/assets/less/metager/footer.less
@@ -29,7 +29,7 @@ footer {
color: @color-black;
}
}
- @media (max-width: @screen-xs-max) {
+ @media (max-width: @screen-mobile) {
img {
display: none;
}
diff --git a/resources/assets/less/metager/general.less b/resources/assets/less/metager/general.less
index 81ea350fa8b12fa91684c618768cd7d805d00a2c..c709ce0aa942c4428c78157e381ed85933a5a1b4 100644
--- a/resources/assets/less/metager/general.less
+++ b/resources/assets/less/metager/general.less
@@ -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
diff --git a/resources/assets/less/metager/modals.less b/resources/assets/less/metager/modals.less
index 2d6b70a7d4119aa893ba727a5c02a73c8001c74f..bf3787347413636413c55502d885d7a67a440699 100644
--- a/resources/assets/less/metager/modals.less
+++ b/resources/assets/less/metager/modals.less
@@ -1,97 +1,96 @@
/* 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
diff --git a/resources/assets/less/metager/product.less b/resources/assets/less/metager/product.less
index 77c709b26d4c6e6b3e7b13c729566d2c9fd83793..350e954ce01bce40c22e5463726773693b3f9aa9 100644
--- a/resources/assets/less/metager/product.less
+++ b/resources/assets/less/metager/product.less
@@ -1,9 +1,5 @@
/* 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;
diff --git a/resources/assets/less/metager/result-page.less b/resources/assets/less/metager/result-page.less
index 334d4550d68e3e2ea51d3a5d1ad5301073ad381b..96ae65fb8f22b6a7b756fb6b266d27400fbe78a1 100644
--- a/resources/assets/less/metager/result-page.less
+++ b/resources/assets/less/metager/result-page.less
@@ -1,48 +1,32 @@
-/* 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%);
}
}
@@ -299,6 +243,8 @@ a {
}
}
+/*
+@searchplugin-a-color: @color-white;
#searchplugin {
display: none;
position: fixed;
@@ -320,6 +266,7 @@ a {
display: initial;
}
}
+*/
#products {
width: 100%;
@@ -331,7 +278,7 @@ a {
.lSPrev>i,
.lSNext>i {
- background-color: @lsprev-or-lsnext-i-background-color;
+ background-color: @color-black;
padding: 5px;
}
@@ -400,13 +347,13 @@ a {
display: none;
}
}
- @media (max-width: @resultpage-breakpoint-large) {
+ @media (max-width: @resultpage-breakpoint-max) {
@supports (display: grid) {
grid-template-columns:~"calc(60% - 8px)"~"calc(40% - 8px)";
grid-template-areas: "searchbar ." "foki ." "results additions";
}
}
- @media (max-width: @resultpage-breakpoint-small) {
+ @media (max-width: @resultpage-breakpoint-min) {
margin-left: @padding-small-default;
grid-template-columns: 100%;
grid-template-areas: "searchbar" "foki" "results";
@@ -426,12 +373,12 @@ a {
padding: @padding-small-default @padding-small-default 0px @padding-small-default;
width: (@results-width-max + 2 * @padding-small-default);
max-width: (@results-width-max + 2 * @padding-small-default);
- @media (max-width: @resultpage-breakpoint-large) {
+ @media (max-width: @resultpage-breakpoint-max) {
@supports (display: grid) {
width: ~"calc(60% - 6px)";
}
}
- @media (max-width: @resultpage-breakpoint-small) {
+ @media (max-width: @resultpage-breakpoint-min) {
width: 100%;
margin-left: 0px;
}
@@ -470,41 +417,12 @@ a {
#foki {
display: flex;
justify-content: left;
- /*
- @media (max-width: (@results-width-min + @additions-width-min - 1px)) {
- width: 100%;
- max-width: none;
- margin: 0px;
- padding: @padding-small-default;
- .scrollbox {
- max-width: none;
- margin: 0px;
- #foki-box {
- max-width: none;
- margin: 0px;
- }
- }
- }
- @media (max-width: (4 * @padding-small-default + @results-width-max + @additions-width-max - 1px)) {
- padding-left: @padding-small-default;
- }
- @media (max-width: (@results-width-min + @additions-width-min - 1px)) {
- width: 100%;
- max-width: 700px;
- margin: 0px;
- padding: @padding-small-default;
- #research-bar {
- max-width: none;
- margin: 0px;
- }
- }
- */
#foki-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
- max-width: @resultpage-leftbox-max-width;
+ max-width: @results-width-max;
background-color: white;
border: 1px solid #ccc;
-webkit-box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
@@ -579,7 +497,7 @@ footer.resultPageFooter {
#resultpage-container {
#results-container {
float: left;
- @media (max-width: @resultpage-breakpoint-small) {
+ @media (max-width: @resultpage-breakpoint-min) {
float:none;
}
}
diff --git a/resources/assets/less/metager/result.less b/resources/assets/less/metager/result.less
index 051ef6bf8084d5b180ade49cca9eb3c7a4c95174..6b3c0a958a93d0d25590c81e2dae1e6ba5480a2a 100644
--- a/resources/assets/less/metager/result.less
+++ b/resources/assets/less/metager/result.less
@@ -1,14 +1,12 @@
-/* Ergebnis */
-
@result-font-large: 18px;
@result-font-medium: 16px;
@result-font-url: 14px;
@result-font-small: 12px;
@result-description-color: @color-black;
-@result-description-img-border-color: @color-almost-white;
+@result-image-border-color: @color-almost-white;
.result {
.card;
- margin: @resultpage-leftbox-min-dist-top-bottom 0px @resultpage-leftbox-min-dist-top-bottom 0px;
+ margin: @padding-small-default 0px;
padding: 8px 15px 5px 15px;
width: 100%;
.result-header {
@@ -128,7 +126,7 @@
width: auto;
max-width: 120px;
max-height: 200px;
- border: solid 1px @result-description-img-border-color;
+ border: solid 1px @result-image-border-color;
}
}
}
diff --git a/resources/assets/less/metager/searchbar.less b/resources/assets/less/metager/searchbar.less
index 52ecf6160a532c1f22e92bca073f70779d5a85bd..c92bac4b3aa54865f104deeb08f44bf6f8b7d3b6 100644
--- a/resources/assets/less/metager/searchbar.less
+++ b/resources/assets/less/metager/searchbar.less
@@ -1,9 +1,5 @@
-/* Suchleiste */
-
-@startpage-border-color: #a2a2a2;
+@searchbar-border-color: #a2a2a2;
@searchbar-background-color: white;
-/**/
-
.searchbar {
display: -webkit-box;
display: -ms-flexbox;
@@ -94,6 +90,7 @@
}
}
.search-input {
+ position: relative;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
@@ -111,6 +108,16 @@
border-radius: 4px;
}
}
+ #search-delete-btn {
+ position: absolute;
+ right: 2px;
+ bottom: 1px;
+ width: auto;
+ border: none;
+ background-color: white;
+ font-size: 25px;
+ font-weight: normal;
+ }
}
.search-submit {
button {
@@ -129,7 +136,7 @@
.search-custom-hidden {
display: none;
}
- @media (max-width: @screen-xs-max) {
+ @media (max-width: @screen-mobile) {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
@@ -139,21 +146,21 @@
.startpage-searchbar {
>* {
- border: 1px solid @startpage-border-color;
+ border: 1px solid @searchbar-border-color;
&:not(:first-child) {
border-left: none;
}
}
.search-input-submit {
border-radius: 5px;
- @media (max-width: @screen-xs-max) {
+ @media (max-width: @screen-mobile) {
max-width: initial;
}
>:not(:first-child) {
- border-left: 1px solid @startpage-border-color;
+ border-left: 1px solid @searchbar-border-color;
}
}
- @media (max-width: @screen-xs-max) {
+ @media (max-width: @screen-mobile) {
.search-focus-selector {
border: 1px solid #aaa;
border-top: none;
@@ -178,7 +185,7 @@
.search-input-submit {
#search-lang,
#search-key {
- @media (max-width: @screen-xs-max) {
+ @media (max-width: @screen-mobile) {
display: none;
}
}
@@ -188,61 +195,8 @@
}
}
-header:nth-child(1) {
- @media (max-width: 1400px) {
- position: relative;
- }
-}
-
-/* Scrollbar Style */
-
-@scrollfade-color: white;
-.scrollbox {
- position: relative;
- width: 100%;
- max-width: @results-width-max;
- .foki-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;
- }
-}
-
#research-bar-placeholder {
width: 100%;
max-width: 760px;
height: 51px;
-}
-
-.search-input {
- position: relative;
-}
-
-#search-delete-btn {
- position: absolute;
- right: 2px;
- bottom: 1px;
- width: auto;
- border: none;
- background-color: white;
- font-size: 25px;
- font-weight: normal;
}
\ No newline at end of file
diff --git a/resources/assets/less/metager/settings.less b/resources/assets/less/metager/settings.less
index 5596a208808d6e0c1491f7ac8fe5153d3f0f2a04..8677e040a87215e49e1804b2e834924b95db5d39 100644
--- a/resources/assets/less/metager/settings.less
+++ b/resources/assets/less/metager/settings.less
@@ -26,7 +26,7 @@
margin-right: auto;
}
-@media (max-width: @screen-xs-max) {
+@media (max-width: @screen-mobile) {
html,
body,
.wrapper,
diff --git a/resources/assets/less/metager/sidebar.less b/resources/assets/less/metager/sidebar.less
index dd7aec9d495210706b2b1d223c1c736962ed5fbd..fd580d35214587c963c73d670e3599365c4b1d84 100644
--- a/resources/assets/less/metager/sidebar.less
+++ b/resources/assets/less/metager/sidebar.less
@@ -1,9 +1,6 @@
-/* Navigations-Seitenleiste */
-
.sidebar {
border-left: 1px solid #ccc;
box-shadow: 0px 1px 1.5px 1px #c0c0c0;
- /**/
position: fixed;
display: block;
top: 0px;
@@ -142,24 +139,44 @@
}
}
-input#sidebarToggle:checked {
- &~.sidebar {
- right: 0px;
- }
- &~.sidebar-opener {
- &:after {
- content: "×";
+@media (max-width: @screen-mobile) {
+ .sidebar {
+ padding-top: 15px;
+ right: -90%;
+ width: 90%;
+ overflow: auto;
+ .sidebar-list {
+ max-height: 1000px;
+ }
+ .sidebar-logo {
+ display: none;
+ }
+ ul.metager-dropdown-content {
+ position: inherit;
+ width: 100%;
}
}
+ .sidebar-opener {
+ // Make the open and close button bigger, so it is easier to hit
+ @sidebar-opener-mobile-magnification: 10px;
+ margin: @sidebar-opener-mobile-magnification;
+ top: (@sidebar-opener-position-top - @sidebar-opener-mobile-magnification);
+ right: (@sidebar-opener-position-right - @sidebar-opener-mobile-magnification);
+ }
+ .sidebar-opener-placeholder {
+ display: initial;
+ }
}
+/* Sidebar opener */
+
// Top right starting position of the sidebar icon
-@sidebar-opener-top: 23px;
-@sidebar-opener-right: 25px;
+@sidebar-opener-position-top: 23px;
+@sidebar-opener-position-right: 25px;
.sidebar-opener {
position: fixed;
- top: @sidebar-opener-top;
- right: @sidebar-opener-right;
+ top: @sidebar-opener-position-top;
+ right: @sidebar-opener-position-right;
margin: 0px;
z-index: 20;
font-size: 36px;
@@ -180,31 +197,15 @@ input#sidebarToggle:checked {
width: 45px;
}
-@media (max-width: @screen-xs-max) {
- .sidebar {
- padding-top: 15px;
- right: -90%;
- width: 90%;
- overflow: auto;
- .sidebar-list {
- max-height: 1000px;
- }
- .sidebar-logo {
- display: none;
- }
- ul.metager-dropdown-content {
- position: inherit;
- width: 100%;
- }
- }
- .sidebar-opener {
- // Make the open and close button bigger, so it is easier to hit
- @sidebar-opener-mobile-magnification: 10px;
- margin: @sidebar-opener-mobile-magnification;
- top: (@sidebar-opener-top - @sidebar-opener-mobile-magnification);
- right: (@sidebar-opener-right - @sidebar-opener-mobile-magnification);
+/* Sidebar toggle checkbox */
+
+#sidebarToggle:checked {
+ &~.sidebar {
+ right: 0px;
}
- .sidebar-opener-placeholder {
- display: initial;
+ &~.sidebar-opener {
+ &:after {
+ content: "×";
+ }
}
}
\ No newline at end of file
diff --git a/resources/assets/less/metager/specific.less b/resources/assets/less/metager/specific.less
index 138cd1790b3ea87c740fe51889a8ec09d704313f..3b0fd5ab4a8dc03542d4f6550aa448c936cda6d9 100644
--- a/resources/assets/less/metager/specific.less
+++ b/resources/assets/less/metager/specific.less
@@ -1,8 +1,5 @@
/* Rules for specific elements */
-@navbar-default-background-color: @color-white;
-@form-group-color: @color-black;
-@a-content-hidden-xs-color: @color-almost-black;
ul.startpage {
list-style-type: none;
}
@@ -33,7 +30,7 @@ textarea#message {
}
.navbar-default {
- background-color: @navbar-default-background-color;
+ background-color: @color-white;
border-radius: 0;
}
@@ -45,7 +42,7 @@ textarea#message {
.form-group {
font-family: sans-serif;
font-size: 16px;
- color: @form-group-color;
+ color: @color-black;
background-color: transparent;
text-align: center;
}
@@ -94,7 +91,7 @@ i.fa {
}
a.content.hidden-xs {
- color: @a-content-hidden-xs-color;
+ color: @color-almost-black;
}
.navbar-brand {
@@ -165,38 +162,6 @@ fieldset input[type=text] {
overflow: visible;
}
-main {
- ul li:not(.lslide) {
- margin: 0 10px;
- }
- fieldset {
- border: 0;
- }
-}
-
-.panel-title {
- font-weight: bold;
-}
-
-.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;
- }
-}
-
.hilfe,
.faq {
section {
@@ -211,4 +176,22 @@ main {
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
diff --git a/resources/assets/less/metager/start-page.less b/resources/assets/less/metager/start-page.less
index 378550993dfbdb076aad9f847a5e1dc90acb228f..fcb0a9cd43fc34fe944c1a87dd45a9117cc4a40e 100644
--- a/resources/assets/less/metager/start-page.less
+++ b/resources/assets/less/metager/start-page.less
@@ -1,74 +1,17 @@
/* Startseite */
-@search-bar-width: 1000px;
-//
-@focus-hover-focus-edit-background-color: #e3e3e3;
-@focus-radio-checked-focus-label-focus-edit-background-color: #e3e3e3;
+@main-content-width: 1000px;
@foki-edge-rounding: 7px;
-.mg-panel {
+#main-content {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
- @media(max-width: @search-bar-width) {
+ @media(max-width: @main-content-width) {
width: 100%;
}
- @media(min-width: @search-bar-width) {
- width: @search-bar-width;
- }
- .settings-modal-buttons {
- padding: 5px;
- button {
- margin: 5px
- }
- }
- .startpage-foki,
- .foki {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- input {
- visibility: hidden;
- &+.custom-focus-label {
- border-radius: @foki-edge-rounding 0px 0px @foki-edge-rounding;
- }
- &+.custom-focus-label+.custom-focus-edit {
- margin-left: 5px;
- display: inline-block;
- border-radius: 0px @foki-edge-rounding @foki-edge-rounding 0px;
- }
- }
- label {
- & span:not(.badge) {
- background-color: transparent;
- }
- }
- }
- .focus {
- margin: 0px;
- &~.focus {
- margin-left: 10px;
- }
- &:hover {
- .focus-label,
- .focus-edit {
- cursor: pointer;
- background-color: @focus-hover-focus-edit-background-color;
- }
- }
- }
- .focus-radio:checked {
- &+.focus-label,
- &+.focus-label+.focus-edit {
- background-color: @focus-radio-checked-focus-label-focus-edit-background-color;
- }
- }
- .focus-label,
- .focus-edit {
- margin: 0px;
- border-radius: 7px;
- padding: 7px;
- font-weight: normal;
+ @media(min-width: @main-content-width) {
+ width: @main-content-width;
}
#show-plugin-modal {
display: flex;
@@ -79,17 +22,17 @@
}
}
-#more-information {
+#additional-content {
flex-grow: 2;
padding-top: 50px;
display: flex;
- @media(max-width: @screen-xs-max) {
+ @media(max-width: @screen-mobile) {
flex-direction: column;
}
#about-us {
max-width: 500px;
margin-right: 50px;
- @media(max-width: @screen-xs-max) {
+ @media(max-width: @screen-mobile) {
margin: 0px 8px;
}
h2 {
@@ -100,7 +43,7 @@
}
}
#sponsors {
- @media(max-width: @screen-xs-max) {
+ @media(max-width: @screen-mobile) {
margin: 20px 5px;
}
h2 {
diff --git a/resources/assets/less/metager/variables.less b/resources/assets/less/metager/variables.less
index 27b5e0943f8cc3dbfa4feb4def6e93eafd20ec45..1791180a10a3183369995e9aadf69974976aa7fc 100644
--- a/resources/assets/less/metager/variables.less
+++ b/resources/assets/less/metager/variables.less
@@ -22,7 +22,6 @@ sans-serif;
// Default Mini-Padding
@padding-small-default: 8px;
// Screen sizes
-@screen-xs-max: 767px;
-@screen-sm-max: 991;
-@screen-md-max: 1199px;
-@screen-lg: 1200;
\ No newline at end of file
+@screen-mobile: 760px;
+@screen-small: 1000;
+@screen-medium: 1200px;
\ No newline at end of file
diff --git a/resources/assets/less/metager/widget.less b/resources/assets/less/metager/widget.less
index 37f6514edbfa95a2d786e17fa99ecfeb2f2f8842..964d52fd816d4772f1d2427287af439ed3eb01b7 100644
--- a/resources/assets/less/metager/widget.less
+++ b/resources/assets/less/metager/widget.less
@@ -5,7 +5,7 @@
font-size: 14px;
line-height: 1.42857;
color: #555;
- background-color: #FFF;
+ background-color: white;
background-image: none;
border: 1px solid #CCC;
margin: 0px;
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 947310b4382a138ea23697c3f61614e20b91a91f..f6d965547d98bf4e3674e11a430c6f452298bb72 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -15,22 +15,20 @@
<script src="{{ mix('js/searchbar.js') }}" defer></script>
@endsection
-@section('optionalContent')
- <div id="more-information">
- <div id="about-us">
- <h2>{!! trans('index.slogan.title') !!}</h2>
- <p>{!! trans('index.slogan.1') !!}</p>
- <p>{!! trans('index.slogan.2') !!}</p>
- </div>
- <div id="sponsors">
- <h2>{{ trans('index.sponsors.head.2') }}</h2>
- <ul class="startpage">
- @foreach($sponsors as $link)
- <li class="sponsor">
- <a href="{{ $link->link }}" target="_blank" rel="noopener"><p>{{ $link->linktext }}</p> <i class="fa fa-external-link-alt"></i></a>
- </li>
- @endforeach
- </ul>
- </div>
+@section('additional-content')
+ <div id="about-us">
+ <h2>{!! trans('index.slogan.title') !!}</h2>
+ <p>{!! trans('index.slogan.1') !!}</p>
+ <p>{!! trans('index.slogan.2') !!}</p>
+ </div>
+ <div id="sponsors">
+ <h2>{{ trans('index.sponsors.head.2') }}</h2>
+ <ul class="startpage">
+ @foreach($sponsors as $link)
+ <li class="sponsor">
+ <a href="{{ $link->link }}" target="_blank" rel="noopener"><p>{{ $link->linktext }}</p> <i class="fa fa-external-link-alt"></i></a>
+ </li>
+ @endforeach
+ </ul>
</div>
@endsection
diff --git a/resources/views/layouts/researchandtabs.blade.php b/resources/views/layouts/researchandtabs.blade.php
index 71d7592b9b54278e283e2ff5f6adc44257f0d9da..50f80a235e8f4254a9646177fb68f6a585b8dbd4 100644
--- a/resources/views/layouts/researchandtabs.blade.php
+++ b/resources/views/layouts/researchandtabs.blade.php
@@ -19,11 +19,11 @@
</div>
<div id="foki">
<div class="scrollbox">
- <div class="foki-scrollfade-left"></div>
+ <div class="scrollfade-left"></div>
<div id="foki-box">
@include('parts.foki')
</div>
- <div class="foki-scrollfade-right"></div>
+ <div class="scrollfade-right"></div>
</div>
</div>
<div id="results-container">
diff --git a/resources/views/layouts/staticPages.blade.php b/resources/views/layouts/staticPages.blade.php
index 084fa320eb98d52027aa7a41c59f12a6dc475219..8f05c140f6630cd67f5841ec2734bb55e6430f82 100644
--- a/resources/views/layouts/staticPages.blade.php
+++ b/resources/views/layouts/staticPages.blade.php
@@ -43,7 +43,7 @@
@include('parts.sidebar', ['id' => 'staticPagesSideBar'])
@include('parts.sidebar-opener', ['class' => 'fixed'])
<div class="wrapper {{$page or ''}}">
- <main class="mg-panel">
+ <main id="main-content">
@if (isset($success))
<div class="alert alert-success" role="alert">{{ $success }}</div>
@endif
@@ -58,7 +58,9 @@
@endif
@yield('content')
</main>
- @yield('optionalContent')
+ <div id="additional-content">
+ @yield('additional-content')
+ </div>
</div>
@if (isset($page) && $page === 'startpage')
@include('parts.footer', ['type' => 'startpage', 'id' => 'startPageFooter'])
diff --git a/resources/views/spende/beitritt.blade.php b/resources/views/spende/beitritt.blade.php
index 1f604df6eeaad004a0c8135f3ce834adda818c24..0e840d54d86a08eb45cf2de67a3adb1e65a16071 100644
--- a/resources/views/spende/beitritt.blade.php
+++ b/resources/views/spende/beitritt.blade.php
@@ -5,8 +5,8 @@
@section('navbarFocus.donate', 'class="dropdown active"')
@section('content')
- <link type="text/css" rel="stylesheet" href="{{ mix('/css/beitritt.css') }}" />
- <script src="{{ mix('js/scriptJoinPage.js') }}"></script>
+<link type="text/css" rel="stylesheet" href="{{ mix('/css/beitritt.css') }}" />
+<script src="{{ mix('js/scriptJoinPage.js') }}"></script>
<form id="donation-form">
<div class="card-heavy">
<h1>{{ trans('beitritt.heading.1') }}</h1>