diff --git a/package-lock.json b/package-lock.json
index 2a3cc32cf979ab46e1e114bb8c6b1ae943f2e4a5..f3441075deb843be404b45d9267b47d5ea6b8902 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2088,7 +2088,7 @@
"cross-spawn": {
"version": "6.0.5",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
- "integrity": "sha1-Sl7Hxk364iw6FBJNus3uhG2Ay8Q=",
+ "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
"dev": true,
"requires": {
"nice-try": "^1.0.4",
@@ -5758,7 +5758,7 @@
"nice-try": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
- "integrity": "sha1-ozeKdpbOfSI+iPybdkvX7xCJ42Y=",
+ "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
"dev": true
},
"no-case": {
diff --git a/resources/less/metager/general/base.less b/resources/less/metager/general/base.less
new file mode 100644
index 0000000000000000000000000000000000000000..d2a3bed82d55c2909d1bea3c9be7cc4286b2dc51
--- /dev/null
+++ b/resources/less/metager/general/base.less
@@ -0,0 +1,435 @@
+/* Default Font */
+
+@modal-content-box-shadow-color: fade(@color-black, 30%);
+@body-background-color: @background-color;
+@body-background-color-mobile: @background-color-mobile;
+@a-hover-color: red;
+
+html, body, * {
+ font-family: @metager-font;
+}
+
+/* Main Containers */
+
+html,
+body,
+.content-wrapper {
+ width: 100%;
+}
+
+html {
+ min-height: 100%;
+ height: auto;
+ display: flex;
+ font-size: 14px;
+ font-size: 3.8mm;
+}
+
+body {
+ flex-grow: 1;
+ background-image: inherit;
+ background-color: @body-background-color;
+ background-attachment: fixed;
+ min-height: 100%;
+ height: auto;
+ display: flex;
+ flex-direction: column;
+ margin: 0;
+ font-size: 1.0em;
+ @media(max-width: @screen-mobile){
+ background-color: @body-background-color-mobile
+ }
+}
+
+.wrapper {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin-top: 50px;
+ padding: 0px 8px;
+ overflow: hidden;
+ main {
+ width: 100%;
+ max-width: 1000px;
+ }
+}
+
+.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-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;
+ }
+ &:last-child {
+ margin-bottom: 0px;
+ }
+}
+
+h1 {
+ font-size: 2em;
+ .first-last-child-margin-fix;
+}
+
+h2 {
+ font-size: 1.5em;
+ .first-last-child-margin-fix;
+}
+
+h3 {
+ font-size: 1.3em;
+ .first-last-child-margin-fix;
+}
+
+p {
+ font-size: 1em;
+ .first-last-child-margin-fix;
+}
+
+body {
+ .first-last-child-margin-fix;
+}
+
+.page-title {
+ font-size: 2.5em;
+ text-align: center;
+}
+
+.page-subtitle {
+ font-size: 1em;
+ text-align: center;
+}
+
+.subheading {
+ font-size: 1.2em;
+ margin: 20px 0px;
+ white-space: center;
+}
+
+a {
+ font-size: 1em;
+ color: @link-color;
+ &:visited {
+ color: @link-color;
+ }
+ &:hover {
+ text-decoration: none;
+ color: @a-hover-color;
+ }
+}
+
+i.fa {
+ background-color: transparent;
+}
+
+/* Logo */
+
+.logo {
+ color: @metager-orange;
+ font-family: @metager-font;
+ font-style: italic;
+ font-weight: bold;
+ white-space: nowrap;
+}
+
+#startpage-logo {
+ .logo;
+ display: flex;
+ justify-content: center;
+ margin: 0px 0px 45px 0px;
+ white-space: nowrap;
+ text-align: center;
+ @media(max-width: @screen-mobile){
+ margin-bottom: 25px;
+ }
+ &>a {
+ .logo;
+ display: block;
+ width: fit-content;
+ text-decoration: none;
+ font-size: 2.7em;
+ @media(max-width: @screen-mobile) {
+ font-size: 2em;
+ }
+ >img {
+ width: 4.8em;
+ }
+ }
+}
+
+#subpage-logo {
+ padding: 16px 0 5px 0px;
+ .navbar-brand {
+ .noprint;
+ line-height: 100% !important;
+ padding: 0;
+ padding-left: 8px;
+ position: absolute;
+ z-index: 5;
+ left: 10px;
+ h1 {
+ .logo;
+ font-size: 1.6em;
+ margin: 0;
+ >img {
+ width: 4.8em;
+ }
+ }
+ }
+}
+
+/* Links that look like text */
+
+.mutelink {
+ &,
+ &:hover,
+ &:active,
+ &:focus,
+ &:visited {
+ color: inherit;
+ }
+}
+
+/* Summary Elements */
+
+summary {
+ cursor: pointer;
+ &::-webkit-details-marker {
+ display: none;
+ }
+ &::-moz-details-marker {
+ display: none;
+ }
+ &::-ms-details-marker {
+ display: none;
+ }
+ &::-o-details-marker {
+ display: none;
+ }
+ &::details-marker {
+ display: none;
+ }
+ &:focus {
+ outline: none;
+ }
+}
+
+/* Tooltips
+ *
+ * All elements with a "data-tooltip" attribute show a
+ * tooltip below on hover
+ */
+
+*[data-tooltip] {
+ position: relative;
+ &:hover {
+ &:after {
+ opacity: 1;
+ }
+ }
+ &:after {
+ content: attr(data-tooltip);
+ position: absolute;
+ top: 100%;
+ left: 0;
+ z-index: 1;
+ color: black;
+ background-color: white;
+ border: 2px solid @metager-orange;
+ border-radius: 6px;
+ padding: 3px 8px;
+ width: 200px;
+ white-space: pre-wrap;
+ font-size: .9em;
+ font-weight: normal;
+ text-decoration: none;
+ text-align: center;
+ pointer-events: none;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ text-transform: initial; // Resets specific styles
+ }
+ &.hide-tooltip-on-resultpage:after {
+ /* Auf kleinen Bildschirmen wird der Tooltip nicht angezeigt */
+ @media (max-width: 700px) {
+ display: none;
+ }
+ }
+ &.delayed:after {
+ transition-delay: 0.5s;
+ }
+ &.delayed-soft:after {
+ transition-delay: 0.2s;
+ }
+ &.delayed-strong:after {
+ transition-delay: 1s;
+ }
+}
+
+/* For Containers that are supposed to split their content up into two columns */
+
+.two-col {
+ >* {
+ width: 50%;
+ margin: 0;
+ padding: 0;
+ float: left;
+ @media (max-width: @screen-mobile) {
+ width: 100%;
+ }
+ }
+}
+
+/* Links */
+
+// Internal, but design differs from other pages
+.inlink {
+ &:after {
+ display: inline-block;
+ font: normal normal normal 14px/1 'Font Awesome 5 Free';
+ font-size: inherit;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ content: "\f35d";
+ }
+}
+
+// External
+.outlink {
+ &:after {
+ display: inline-block;
+ font: normal normal normal 14px/1 'Font Awesome 5 Free';
+ font-size: inherit;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ content: "\f35d";
+ }
+}
+
+/* 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 * {
+ 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 {
+ border: none;
+ background-color: transparent;
+}
+
+/* Lists with dots */
+
+.dotlist {
+ list-style-type: disc;
+ text-align: left;
+ li {
+ margin-bottom: 5px !important;
+ }
+}
+
+/* Code */
+
+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 {
+ text-decoration: none;
+ color: inherit;
+ }
+}
+
+// For Elements where newlines should actually be displayed
+.wrap {
+ white-space: pre-wrap;
+}
+
+// When the content should be centerd horizontally
+.center-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+#impressum, #kontakt, #team, #about {
+ .card-heavy {
+ margin: 8px 0;
+ }
+}
diff --git a/resources/less/metager/general/cards.less b/resources/less/metager/general/cards.less
index 9821c419acda6b28611fea43dd70be65a2115e81..5a856c6961bb1caac061c0aa3842d77397a4d15b 100644
--- a/resources/less/metager/general/cards.less
+++ b/resources/less/metager/general/cards.less
@@ -1,7 +1,7 @@
.card,
.card-medium {
- border: 1px solid #ccc;
- background-color: white;
+ border: 1px solid @border-color;
+ background-color: @card-background-color;
box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
padding: 8px;
margin: 4px;
diff --git a/resources/less/metager/general/forms.less b/resources/less/metager/general/forms.less
new file mode 100644
index 0000000000000000000000000000000000000000..64b6dc2719373463d750a564074695afd48aa164
--- /dev/null
+++ b/resources/less/metager/general/forms.less
@@ -0,0 +1,613 @@
+//
+// Forms (copied from Bootstrap)
+// --------------------------------------------------
+
+
+// Normalize non-controls
+//
+// Restyle and baseline non-control form elements.
+
+fieldset {
+ padding: 0;
+ margin: 0;
+ border: 0;
+ // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
+ // so we reset that to ensure it behaves more like a standard block element.
+ // See https://github.com/twbs/bootstrap/issues/12359.
+ min-width: 0;
+}
+
+legend {
+ display: block;
+ width: 100%;
+ padding: 0;
+ margin-bottom: @line-height-computed;
+ font-size: (@font-size-base * 1.5);
+ line-height: inherit;
+ color: @legend-color;
+ border: 0;
+ border-bottom: 1px solid @legend-border-color;
+}
+
+label {
+ display: inline-block;
+ max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
+ margin-bottom: 5px;
+ font-weight: bold;
+}
+
+
+// Normalize form controls
+//
+// While most of our form styles require extra classes, some basic normalization
+// is required to ensure optimum display with or without those classes to better
+// address browser inconsistencies.
+
+// Override content-box in Normalize (* isn't specific enough)
+input[type="search"] {
+ .box-sizing(border-box);
+}
+
+// Position radios and checkboxes better
+input[type="radio"],
+input[type="checkbox"] {
+ margin: 4px 0 0;
+ margin-top: 1px \9; // IE8-9
+ line-height: normal;
+}
+
+input[type="file"] {
+ display: block;
+}
+
+// Make range inputs behave like textual form controls
+input[type="range"] {
+ display: block;
+ width: 100%;
+}
+
+// Make multiple select elements height not fixed
+select[multiple],
+select[size] {
+ height: auto;
+}
+
+// Focus for file, radio, and checkbox
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
+ .tab-focus();
+}
+
+// Adjust output element
+output {
+ display: block;
+ padding-top: (@padding-base-vertical + 1);
+ font-size: @font-size-base;
+ line-height: @line-height-base;
+ color: @input-color;
+}
+
+
+// Common form controls
+//
+// Shared size and type resets for form controls. Apply `.form-control` to any
+// of the following form controls:
+//
+// select
+// textarea
+// input[type="text"]
+// input[type="password"]
+// input[type="datetime"]
+// input[type="datetime-local"]
+// input[type="date"]
+// input[type="month"]
+// input[type="time"]
+// input[type="week"]
+// input[type="number"]
+// input[type="email"]
+// input[type="url"]
+// input[type="search"]
+// input[type="tel"]
+// input[type="color"]
+
+.form-control {
+ display: block;
+ width: 100%;
+ height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+ padding: @padding-base-vertical @padding-base-horizontal;
+ font-size: @font-size-base;
+ line-height: @line-height-base;
+ color: @input-color;
+ background-color: @input-bg;
+ background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+ border: 1px solid @input-border;
+ border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+ .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
+
+ // Customize the `:focus` state to imitate native WebKit styles.
+ .form-control-focus();
+
+ // Placeholder
+ .placeholder();
+
+ // Unstyle the caret on `<select>`s in IE10+.
+ &::-ms-expand {
+ border: 0;
+ background-color: transparent;
+ }
+
+ // Disabled and read-only inputs
+ //
+ // HTML5 says that controls under a fieldset > legend:first-child won't be
+ // disabled if the fieldset is disabled. Due to implementation difficulty, we
+ // don't honor that edge case; we style them as disabled anyway.
+ &[disabled],
+ &[readonly],
+ fieldset[disabled] & {
+ background-color: @input-bg-disabled;
+ opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
+ }
+
+ &[disabled],
+ fieldset[disabled] & {
+ cursor: @cursor-disabled;
+ }
+
+ // Reset height for `textarea`s
+ textarea& {
+ height: auto;
+ }
+}
+
+
+// Search inputs in iOS
+//
+// This overrides the extra rounded corners on search inputs in iOS so that our
+// `.form-control` class can properly style them. Note that this cannot simply
+// be added to `.form-control` as it's not specific enough. For details, see
+// https://github.com/twbs/bootstrap/issues/11586.
+
+input[type="search"] {
+ -webkit-appearance: none;
+}
+
+
+// Special styles for iOS temporal inputs
+//
+// In Mobile Safari, setting `display: block` on temporal inputs causes the
+// text within the input to become vertically misaligned. As a workaround, we
+// set a pixel line-height that matches the given height of the input, but only
+// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
+//
+// Note that as of 9.3, iOS doesn't support `week`.
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+ input[type="date"],
+ input[type="time"],
+ input[type="datetime-local"],
+ input[type="month"] {
+ &.form-control {
+ line-height: @input-height-base;
+ }
+
+ &.input-sm,
+ .input-group-sm & {
+ line-height: @input-height-small;
+ }
+
+ &.input-lg,
+ .input-group-lg & {
+ line-height: @input-height-large;
+ }
+ }
+}
+
+
+// Form groups
+//
+// Designed to help with the organization and spacing of vertical forms. For
+// horizontal forms, use the predefined grid classes.
+
+.form-group {
+ margin-bottom: @form-group-margin-bottom;
+}
+
+
+// Checkboxes and radios
+//
+// Indent the labels to position radios/checkboxes as hanging controls.
+
+.radio,
+.checkbox {
+ position: relative;
+ display: block;
+ margin-top: 10px;
+ margin-bottom: 10px;
+
+ label {
+ min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text
+ padding-left: 20px;
+ margin-bottom: 0;
+ font-weight: normal;
+ cursor: pointer;
+ }
+}
+.radio input[type="radio"],
+.radio-inline input[type="radio"],
+.checkbox input[type="checkbox"],
+.checkbox-inline input[type="checkbox"] {
+ position: absolute;
+ margin-left: -20px;
+ margin-top: 4px \9;
+}
+
+.radio + .radio,
+.checkbox + .checkbox {
+ margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
+}
+
+// Radios and checkboxes on same line
+.radio-inline,
+.checkbox-inline {
+ position: relative;
+ display: inline-block;
+ padding-left: 20px;
+ margin-bottom: 0;
+ vertical-align: middle;
+ font-weight: normal;
+ cursor: pointer;
+}
+.radio-inline + .radio-inline,
+.checkbox-inline + .checkbox-inline {
+ margin-top: 0;
+ margin-left: 10px; // space out consecutive inline controls
+}
+
+// Apply same disabled cursor tweak as for inputs
+// Some special care is needed because <label>s don't inherit their parent's `cursor`.
+//
+// Note: Neither radios nor checkboxes can be readonly.
+input[type="radio"],
+input[type="checkbox"] {
+ &[disabled],
+ &.disabled,
+ fieldset[disabled] & {
+ cursor: @cursor-disabled;
+ }
+}
+// These classes are used directly on <label>s
+.radio-inline,
+.checkbox-inline {
+ &.disabled,
+ fieldset[disabled] & {
+ cursor: @cursor-disabled;
+ }
+}
+// These classes are used on elements with <label> descendants
+.radio,
+.checkbox {
+ &.disabled,
+ fieldset[disabled] & {
+ label {
+ cursor: @cursor-disabled;
+ }
+ }
+}
+
+
+// Static form control text
+//
+// Apply class to a `p` element to make any string of text align with labels in
+// a horizontal form layout.
+
+.form-control-static {
+ // Size it appropriately next to real form controls
+ padding-top: (@padding-base-vertical + 1);
+ padding-bottom: (@padding-base-vertical + 1);
+ // Remove default margin from `p`
+ margin-bottom: 0;
+ min-height: (@line-height-computed + @font-size-base);
+
+ &.input-lg,
+ &.input-sm {
+ padding-left: 0;
+ padding-right: 0;
+ }
+}
+
+
+// Form control sizing
+//
+// Build on `.form-control` with modifier classes to decrease or increase the
+// height and font-size of form controls.
+//
+// The `.form-group-* form-control` variations are sadly duplicated to avoid the
+// issue documented in https://github.com/twbs/bootstrap/issues/15074.
+
+.input-sm {
+ .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @input-border-radius-small);
+}
+.form-group-sm {
+ .form-control {
+ height: @input-height-small;
+ padding: @padding-small-vertical @padding-small-horizontal;
+ font-size: @font-size-small;
+ line-height: @line-height-small;
+ border-radius: @input-border-radius-small;
+ }
+ select.form-control {
+ height: @input-height-small;
+ line-height: @input-height-small;
+ }
+ textarea.form-control,
+ select[multiple].form-control {
+ height: auto;
+ }
+ .form-control-static {
+ height: @input-height-small;
+ min-height: (@line-height-computed + @font-size-small);
+ padding: (@padding-small-vertical + 1) @padding-small-horizontal;
+ font-size: @font-size-small;
+ line-height: @line-height-small;
+ }
+}
+
+.input-lg {
+ .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @input-border-radius-large);
+}
+.form-group-lg {
+ .form-control {
+ height: @input-height-large;
+ padding: @padding-large-vertical @padding-large-horizontal;
+ font-size: @font-size-large;
+ line-height: @line-height-large;
+ border-radius: @input-border-radius-large;
+ }
+ select.form-control {
+ height: @input-height-large;
+ line-height: @input-height-large;
+ }
+ textarea.form-control,
+ select[multiple].form-control {
+ height: auto;
+ }
+ .form-control-static {
+ height: @input-height-large;
+ min-height: (@line-height-computed + @font-size-large);
+ padding: (@padding-large-vertical + 1) @padding-large-horizontal;
+ font-size: @font-size-large;
+ line-height: @line-height-large;
+ }
+}
+
+
+// Form control feedback states
+//
+// Apply contextual and semantic states to individual form controls.
+
+.has-feedback {
+ // Enable absolute positioning
+ position: relative;
+
+ // Ensure icons don't overlap text
+ .form-control {
+ padding-right: (@input-height-base * 1.25);
+ }
+}
+// Feedback icon (requires .glyphicon classes)
+.form-control-feedback {
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 2; // Ensure icon is above input groups
+ display: block;
+ width: @input-height-base;
+ height: @input-height-base;
+ line-height: @input-height-base;
+ text-align: center;
+ pointer-events: none;
+}
+.input-lg + .form-control-feedback,
+.input-group-lg + .form-control-feedback,
+.form-group-lg .form-control + .form-control-feedback {
+ width: @input-height-large;
+ height: @input-height-large;
+ line-height: @input-height-large;
+}
+.input-sm + .form-control-feedback,
+.input-group-sm + .form-control-feedback,
+.form-group-sm .form-control + .form-control-feedback {
+ width: @input-height-small;
+ height: @input-height-small;
+ line-height: @input-height-small;
+}
+
+// Feedback states
+.has-success {
+ .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
+}
+.has-warning {
+ .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
+}
+.has-error {
+ .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
+}
+
+// Reposition feedback icon if input has visible label above
+.has-feedback label {
+
+ & ~ .form-control-feedback {
+ top: (@line-height-computed + 5); // Height of the `label` and its margin
+ }
+ &.sr-only ~ .form-control-feedback {
+ top: 0;
+ }
+}
+
+
+// Help text
+//
+// Apply to any element you wish to create light text for placement immediately
+// below a form control. Use for general help, formatting, or instructional text.
+
+.help-block {
+ display: block; // account for any element using help-block
+ margin-top: 5px;
+ margin-bottom: 10px;
+ color: lighten(@text-color, 25%); // lighten the text some for contrast
+}
+
+
+// Inline forms
+//
+// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
+// forms begin stacked on extra small (mobile) devices and then go inline when
+// viewports reach <768px.
+//
+// Requires wrapping inputs and labels with `.form-group` for proper display of
+// default HTML form controls and our custom form controls (e.g., input groups).
+//
+// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
+
+.form-inline {
+
+ // Kick in the inline
+ @media (min-width: @screen-sm-min) {
+ // Inline-block all the things for "inline"
+ .form-group {
+ display: inline-block;
+ margin-bottom: 0;
+ vertical-align: middle;
+ }
+
+ // In navbar-form, allow folks to *not* use `.form-group`
+ .form-control {
+ display: inline-block;
+ width: auto; // Prevent labels from stacking above inputs in `.form-group`
+ vertical-align: middle;
+ }
+
+ // Make static controls behave like regular ones
+ .form-control-static {
+ display: inline-block;
+ }
+
+ .input-group {
+ display: inline-table;
+ vertical-align: middle;
+
+ .input-group-addon,
+ .input-group-btn,
+ .form-control {
+ width: auto;
+ }
+ }
+
+ // Input groups need that 100% width though
+ .input-group > .form-control {
+ width: 100%;
+ }
+
+ .control-label {
+ margin-bottom: 0;
+ vertical-align: middle;
+ }
+
+ // Remove default margin on radios/checkboxes that were used for stacking, and
+ // then undo the floating of radios and checkboxes to match.
+ .radio,
+ .checkbox {
+ display: inline-block;
+ margin-top: 0;
+ margin-bottom: 0;
+ vertical-align: middle;
+
+ label {
+ padding-left: 0;
+ }
+ }
+ .radio input[type="radio"],
+ .checkbox input[type="checkbox"] {
+ position: relative;
+ margin-left: 0;
+ }
+
+ // Re-override the feedback icon.
+ .has-feedback .form-control-feedback {
+ top: 0;
+ }
+ }
+}
+
+
+// Horizontal forms
+//
+// Horizontal forms are built on grid classes and allow you to create forms with
+// labels on the left and inputs on the right.
+
+.form-horizontal {
+
+ // Consistent vertical alignment of radios and checkboxes
+ //
+ // Labels also get some reset styles, but that is scoped to a media query below.
+ .radio,
+ .checkbox,
+ .radio-inline,
+ .checkbox-inline {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-top: (@padding-base-vertical + 1); // Default padding plus a border
+ }
+ // Account for padding we're adding to ensure the alignment and of help text
+ // and other content below items
+ .radio,
+ .checkbox {
+ min-height: (@line-height-computed + (@padding-base-vertical + 1));
+ }
+
+ // Make form groups behave like rows
+ .form-group {
+ .make-row();
+ }
+
+ // Reset spacing and right align labels, but scope to media queries so that
+ // labels on narrow viewports stack the same as a default form example.
+ @media (min-width: @screen-sm-min) {
+ .control-label {
+ text-align: right;
+ margin-bottom: 0;
+ padding-top: (@padding-base-vertical + 1); // Default padding plus a border
+ }
+ }
+
+ // Validation states
+ //
+ // Reposition the icon because it's now within a grid column and columns have
+ // `position: relative;` on them. Also accounts for the grid gutter padding.
+ .has-feedback .form-control-feedback {
+ right: floor((@grid-gutter-width / 2));
+ }
+
+ // Form group sizes
+ //
+ // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
+ // inputs and labels within a `.form-group`.
+ .form-group-lg {
+ @media (min-width: @screen-sm-min) {
+ .control-label {
+ padding-top: (@padding-large-vertical + 1);
+ font-size: @font-size-large;
+ }
+ }
+ }
+ .form-group-sm {
+ @media (min-width: @screen-sm-min) {
+ .control-label {
+ padding-top: (@padding-small-vertical + 1);
+ font-size: @font-size-small;
+ }
+ }
+ }
+}
diff --git a/resources/less/metager/general/general.less b/resources/less/metager/general/general.less
index 2330809124dd29357c75668bdd443af5f4d6b753..0c6aabad4dbe76433345c706671ee278ad13a063 100644
--- a/resources/less/metager/general/general.less
+++ b/resources/less/metager/general/general.less
@@ -1,435 +1,3 @@
-/* Default Font */
-
-@modal-content-box-shadow-color: fade(@color-black, 30%);
-@body-background-color: @background-color;
-@body-background-color-mobile: @background-color-mobile;
-@a-hover-color: red;
-
-html, body, * {
- font-family: @metager-font;
-}
-
-/* Main Containers */
-
-html,
-body,
-.content-wrapper {
- width: 100%;
-}
-
-html {
- min-height: 100%;
- height: auto;
- display: flex;
- font-size: 14px;
- font-size: 3.8mm;
-}
-
-body {
- flex-grow: 1;
- background-image: inherit;
- background-color: @body-background-color;
- background-attachment: fixed;
- min-height: 100%;
- height: auto;
- display: flex;
- flex-direction: column;
- margin: 0;
- font-size: 1.0em;
- @media(max-width: @screen-mobile){
- background-color: @body-background-color-mobile
- }
-}
-
-.wrapper {
- flex-grow: 1;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- margin-top: 50px;
- padding: 0px 8px;
- overflow: hidden;
- main {
- width: 100%;
- max-width: 1000px;
- }
-}
-
-.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-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;
- }
- &:last-child {
- margin-bottom: 0px;
- }
-}
-
-h1 {
- font-size: 2em;
- .first-last-child-margin-fix;
-}
-
-h2 {
- font-size: 1.5em;
- .first-last-child-margin-fix;
-}
-
-h3 {
- font-size: 1.3em;
- .first-last-child-margin-fix;
-}
-
-p {
- font-size: 1em;
- .first-last-child-margin-fix;
-}
-
-body {
- .first-last-child-margin-fix;
-}
-
-.page-title {
- font-size: 2.5em;
- text-align: center;
-}
-
-.page-subtitle {
- font-size: 1em;
- text-align: center;
-}
-
-.subheading {
- font-size: 1.2em;
- margin: 20px 0px;
- white-space: center;
-}
-
-a {
- font-size: 1em;
- color: @link-color;
- &:visited {
- color: @link-color;
- }
- &:hover {
- text-decoration: none;
- color: @a-hover-color;
- }
-}
-
-i.fa {
- background-color: transparent;
-}
-
-/* Logo */
-
-.logo {
- color: @metager-orange;
- font-family: @metager-font;
- font-style: italic;
- font-weight: bold;
- white-space: nowrap;
-}
-
-#startpage-logo {
- .logo;
- display: flex;
- justify-content: center;
- margin: 0px 0px 45px 0px;
- white-space: nowrap;
- text-align: center;
- @media(max-width: @screen-mobile){
- margin-bottom: 25px;
- }
- &>a {
- .logo;
- display: block;
- width: fit-content;
- text-decoration: none;
- font-size: 2.7em;
- @media(max-width: @screen-mobile) {
- font-size: 2em;
- }
- >img {
- width: 4.8em;
- }
- }
-}
-
-#subpage-logo {
- padding: 16px 0 5px 0px;
- .navbar-brand {
- .noprint;
- line-height: 100% !important;
- padding: 0;
- padding-left: 8px;
- position: absolute;
- z-index: 5;
- left: 10px;
- h1 {
- .logo;
- font-size: 1.6em;
- margin: 0;
- >img {
- width: 4.8em;
- }
- }
- }
-}
-
-/* Links that look like text */
-
-.mutelink {
- &,
- &:hover,
- &:active,
- &:focus,
- &:visited {
- color: inherit;
- }
-}
-
-/* Summary Elements */
-
-summary {
- cursor: pointer;
- &::-webkit-details-marker {
- display: none;
- }
- &::-moz-details-marker {
- display: none;
- }
- &::-ms-details-marker {
- display: none;
- }
- &::-o-details-marker {
- display: none;
- }
- &::details-marker {
- display: none;
- }
- &:focus {
- outline: none;
- }
-}
-
-/* Tooltips
- *
- * All elements with a "data-tooltip" attribute show a
- * tooltip below on hover
- */
-
-*[data-tooltip] {
- position: relative;
- &:hover {
- &:after {
- opacity: 1;
- }
- }
- &:after {
- content: attr(data-tooltip);
- position: absolute;
- top: 100%;
- left: 0;
- z-index: 1;
- color: black;
- background-color: white;
- border: 2px solid @metager-orange;
- border-radius: 6px;
- padding: 3px 8px;
- width: 200px;
- white-space: pre-wrap;
- font-size: .9em;
- font-weight: normal;
- text-decoration: none;
- text-align: center;
- pointer-events: none;
- opacity: 0;
- transition: opacity 0.3s ease;
- text-transform: initial; // Resets specific styles
- }
- &.hide-tooltip-on-resultpage:after {
- /* Auf kleinen Bildschirmen wird der Tooltip nicht angezeigt */
- @media (max-width: 700px) {
- display: none;
- }
- }
- &.delayed:after {
- transition-delay: 0.5s;
- }
- &.delayed-soft:after {
- transition-delay: 0.2s;
- }
- &.delayed-strong:after {
- transition-delay: 1s;
- }
-}
-
-/* For Containers that are supposed to split their content up into two columns */
-
-.two-col {
- >* {
- width: 50%;
- margin: 0;
- padding: 0;
- float: left;
- @media (max-width: @screen-mobile) {
- width: 100%;
- }
- }
-}
-
-/* Links */
-
-// Internal, but design differs from other pages
-.inlink {
- &:after {
- display: inline-block;
- font: normal normal normal 14px/1 'Font Awesome 5 Free';
- font-size: inherit;
- text-rendering: auto;
- -webkit-font-smoothing: antialiased;
- content: "\f35d";
- }
-}
-
-// External
-.outlink {
- &:after {
- display: inline-block;
- font: normal normal normal 14px/1 'Font Awesome 5 Free';
- font-size: inherit;
- text-rendering: auto;
- -webkit-font-smoothing: antialiased;
- content: "\f35d";
- }
-}
-
-/* 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 * {
- 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 {
- border: none;
- background-color: transparent;
-}
-
-/* Lists with dots */
-
-.dotlist {
- list-style-type: disc;
- text-align: left;
- li {
- margin-bottom: 5px !important;
- }
-}
-
-/* Code */
-
-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 {
- text-decoration: none;
- color: inherit;
- }
-}
-
-// For Elements where newlines should actually be displayed
-.wrap {
- white-space: pre-wrap;
-}
-
-// When the content should be centerd horizontally
-.center-wrapper {
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-#impressum, #kontakt, #team, #about {
- .card-heavy {
- margin: 8px 0;
- }
-}
\ No newline at end of file
+@import "./base.less";
+@import "./cards.less";
+@import "./specific.less";
diff --git a/resources/less/metager/general/specific.less b/resources/less/metager/general/specific.less
index 1a00e3594a48b7fd2fc23264953a56f57f223180..028c845406144e4477c8459e2c156c52b69a9e5e 100644
--- a/resources/less/metager/general/specific.less
+++ b/resources/less/metager/general/specific.less
@@ -4,7 +4,7 @@
.form-group {
font-family: sans-serif;
font-size: 1em;
- color: @color-black;
+ color: @text-color;
background-color: transparent;
text-align: center;
}
diff --git a/resources/less/metager/metager-dark.less b/resources/less/metager/metager-dark.less
new file mode 100644
index 0000000000000000000000000000000000000000..931ad79b4daf31dca73068add6c6528a7482c1f7
--- /dev/null
+++ b/resources/less/metager/metager-dark.less
@@ -0,0 +1,16 @@
+@import "../bootstrap/bootstrap.less";
+
+// Variables
+@import "./variables-dark.less";
+// General
+@import "./general/general.less";
+// Pages
+@import "./pages/all.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";
+@import "./parts/bitpay.less";
diff --git a/resources/less/metager/metager.less b/resources/less/metager/metager.less
index edbe70c98e5312f06282cb485062b1febc6d2c22..64bb752a15f4b8634b01d1e21b2de5cd3ede4fe5 100644
--- a/resources/less/metager/metager.less
+++ b/resources/less/metager/metager.less
@@ -1,19 +1,11 @@
+@import "../bootstrap/bootstrap.less";
+
// Variables
@import "./variables.less";
// 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";
-@import "./pages/settings.less";
+@import "./pages/all.less";
// Parts
@import "./parts/aufruf-winter.less";
@import "./parts/footer.less";
@@ -21,4 +13,4 @@
@import "./parts/searchbar.less";
@import "./parts/settings.less";
@import "./parts/sidebar.less";
-@import "./parts/bitpay.less";
\ No newline at end of file
+@import "./parts/bitpay.less";
diff --git a/resources/less/metager/pages/all.less b/resources/less/metager/pages/all.less
new file mode 100644
index 0000000000000000000000000000000000000000..575bb053280ee3c7c952f1ef5b16e99068c108e2
--- /dev/null
+++ b/resources/less/metager/pages/all.less
@@ -0,0 +1,10 @@
+
+@import "./contact.less";
+@import "./donation.less";
+@import "./help_faq.less";
+@import "./language.less";
+@import "./privacy.less";
+@import "./resultpage.less";
+@import "./start-page.less";
+@import "./widget.less";
+@import "./settings.less";
diff --git a/resources/less/metager/pages/help_faq.less b/resources/less/metager/pages/help_faq.less
index 4e4f0d96382e16569ad5995a789bb18d7c10189c..61941d8b930d04fde1707940e32dc24c15a769a1 100644
--- a/resources/less/metager/pages/help_faq.less
+++ b/resources/less/metager/pages/help_faq.less
@@ -14,7 +14,7 @@
}
.search-example {
border: 1px solid #aaa;
- background-color: #eee;
+ background-color: @background-color;
border-radius: 5px;
padding: 10px;
}
@@ -24,7 +24,7 @@
img {
margin: 10px 0;
padding: 8px;
- border: 1px solid #ccc;
+ border: 1px solid @border-color;
border-radius: 3px;
}
}
diff --git a/resources/less/metager/pages/privacy.less b/resources/less/metager/pages/privacy.less
index 4836cea6cd2e70df45b7658d271fc13c5ebb99b4..c73638c0b5e9d7c34ae1fdab80f17007f28ed559 100644
--- a/resources/less/metager/pages/privacy.less
+++ b/resources/less/metager/pages/privacy.less
@@ -13,8 +13,8 @@
.card-heavy;
}
.kontext {
- border-bottom: 1px solid #ccc;
- border-top: 1px solid #ccc;
+ border-bottom: 1px solid @border-color;
+ border-top: 1px solid @border-color;
padding: 8px 0;
.datum-list {
margin-top: 8px;
diff --git a/resources/less/metager/pages/resultpage/quicktips.less b/resources/less/metager/pages/resultpage/quicktips.less
index e8d5b918eb83ecb24ebd68ad8028a3f5a9c24072..f7f3eb879083fa2a4d5f19dcd3a29e7936e60c2d 100644
--- a/resources/less/metager/pages/resultpage/quicktips.less
+++ b/resources/less/metager/pages/resultpage/quicktips.less
@@ -26,7 +26,7 @@
margin: 10px 0px;
padding: 10px 10px 10px 10px;
border: 1px solid #ccc;
- background-color: white;
+ background-color: @quicktip-background-color;
details:not([open=""]) {
.quicktip-summary p {
.overflow-ellipsis;
diff --git a/resources/less/metager/pages/resultpage/result-page.less b/resources/less/metager/pages/resultpage/result-page.less
index d11b397726df5f183090219d5ebf52be6645fa98..7e70f86be684ab115cc272a7bd7e1b16ac515ffd 100644
--- a/resources/less/metager/pages/resultpage/result-page.less
+++ b/resources/less/metager/pages/resultpage/result-page.less
@@ -1,5 +1,26 @@
/* Variables */
+// Background color
+@resultpage-background-color: @background-color;
+// Margin to the left of the results
+@results-margin-left: 16px;
+// Min and max widths of the 2 resultpage columns
+@results-width-min: 500px;
+@results-width-max: 800px;
+@additions-width-min: 500px;
+@additions-width-max: 500px;
+// Breakpoints for the 2 resultpage columns
+@resultpage-breakpoint-max: (@results-width-max + @additions-width-max + @padding-small-default * 2 + @padding-small-default * 4 + 6);
+@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: @resultpage-background-color;
+// Color of the Spruch author
+@spruch-author-color: @color-strong-grey;
/* Styles */
#header-logo {
@@ -245,7 +266,7 @@ a {
border-radius: 10px;
padding: 5px;
margin-left: 10px;
- background-color: white;
+ background-color: @resultpage-background-color;
box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
&:first-child {
margin-left: 0px;
@@ -333,7 +354,7 @@ a {
#research-bar-container {
grid-area: searchbar;
padding-top: @padding-small-default;
- background-color: white;
+ background-color: @resultpage-background-color;
box-shadow: 0px 1px 3px 2px white, 1px 0px 1px 2px white;
position: sticky;
}
@@ -417,8 +438,8 @@ a {
background-color: @resultpage-background-color;
max-width: @results-width-max;
#research-bar {
- background-color: white;
- border: 1px solid #ccc;
+ background-color: @resultpage-background-color;
+ border: 1px solid @border-color;
border-bottom: 1px solid @metager-orange;
box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
display: flex;
@@ -426,7 +447,7 @@ a {
padding: 4px;
.resultpage-searchbar {
.search-input-submit .search-input input {
- border-bottom: 1px solid #ccc;
+ border-bottom: 1px solid @border-color;
}
@media (max-width: @sidebar-opener-breakpoint) {
.search-focus-selector {
@@ -457,10 +478,10 @@ a {
display: flex;
width: 100%;
max-width: @results-width-max;
- background-color: white;
+ background-color: @resultpage-background-color;
overflow-x: auto;
padding: 8px;
- border-bottom: 1px solid #ccc;
+ border-bottom: 1px solid @border-color;
@media (max-width: @screen-mobile) {
.card;
margin: 0;
@@ -468,11 +489,11 @@ a {
&>div {
padding-right: 16px;
&>a {
- color: black;
+ color: @text-color;
}
&.active>a {
- border-bottom: 1px solid black;
- color: black;
+ border-bottom: 1px solid @text-color;
+ color: @text-color;
}
&:last-child {
padding-right: 20px
@@ -493,7 +514,7 @@ a {
#options {
grid-area: options;
- background-color: white;
+ background-color: @resultpage-background-color;
max-width: @results-width-max;
padding: 0 8px;
@media(max-width: @screen-mobile){
@@ -592,7 +613,7 @@ a {
#settings {
text-align: center;
a {
- color: #333;
+ color: @text-color;
&:hover {
color: red;
span.badge {
@@ -703,4 +724,4 @@ footer.resultPageFooter {
.settings-checkbox .settings-icon {
margin-left: 5px;
font-size: 1em;
-}
+}
\ No newline at end of file
diff --git a/resources/less/metager/pages/resultpage/result.less b/resources/less/metager/pages/resultpage/result.less
index eb42ae189ace4967a48dd030462389303458de84..f151b702cae22dbe4c98a9a27faae2d9e7fe27ff 100644
--- a/resources/less/metager/pages/resultpage/result.less
+++ b/resources/less/metager/pages/resultpage/result.less
@@ -1,3 +1,9 @@
+@result-font-large: 18px;
+@result-font-medium: 16px;
+@result-font-url: 14px;
+@result-font-small: 12px;
+@result-description-color: @text-color;
+@result-image-border-color: @color-almost-white;
.result {
// Remove the margin from the first result because it already has margin from the grid ruleset
@@ -38,7 +44,7 @@
&:hover,
&:focus,
&:visited {
- color: black;
+ color: @text-color;
text-decoration: none;
}
}
@@ -177,7 +183,7 @@
&:hover,
&:focus,
&:visited {
- color: black;
+ color: @text-color;
font-size: .7em;
text-decoration: none;
}
@@ -193,7 +199,7 @@
&:hover,
&:focus,
&:visited {
- color: black;
+ color: @text-color;
font-size: .7em;
text-decoration: none;
}
@@ -253,7 +259,7 @@
&>.result-options {
max-width: 100%;
&>.options {
- border-top: 1px solid #ccc;
+ border-top: 1px solid @border-color;
width: 100%;
text-align: right;
overflow: hidden;
diff --git a/resources/less/metager/parts/sidebar.less b/resources/less/metager/parts/sidebar.less
index faa068ec92cb12ea1c34135fe616393ecc548621..d417af9b8492275bc8a3607a0fbe56d04ca36ea6 100644
--- a/resources/less/metager/parts/sidebar.less
+++ b/resources/less/metager/parts/sidebar.less
@@ -1,5 +1,5 @@
.sidebar {
- border-left: 1px solid #ccc;
+ border-left: 1px solid @border-color;
box-shadow: 0px 1px 1.5px 1px #c0c0c0;
position: fixed;
display: block;
@@ -11,7 +11,8 @@
overflow: hidden;
overflow-y: auto;
z-index: 10;
- background-color: white;
+ background-color: @background-color;
+ color: @text-color;
transition: 0.5s;
border-left: none;
.sidebar-logo {
@@ -35,7 +36,7 @@
&>li {
width: 100%;
&:hover {
- background-color: @color-almost-white;
+ background-color: @sidebar-list-hover-color;
}
&>label,
&>a {
@@ -54,7 +55,7 @@
font-weight: normal;
text-decoration: none;
text-indent: 12px;
- color: black;
+ color: @text-color;
line-height: 20px;
display: inline-block;
width: 100%;
@@ -100,7 +101,7 @@
text-indent: 12px;
display: inline-block;
width: 100%;
- color: black;
+ color: @text-color;
&:hover, &:focus {
color: red;
}
@@ -196,7 +197,7 @@
line-height: 23px;
border-radius: 5px;
color: grey;
- background-color: white;
+ background-color: @background-color;
&:after {
content: "≡";
}
@@ -221,4 +222,4 @@
content: "×";
}
}
-}
\ No newline at end of file
+}
diff --git a/resources/less/metager/variables-dark.less b/resources/less/metager/variables-dark.less
new file mode 100644
index 0000000000000000000000000000000000000000..72a7ba33f57dd558731bba57f7753480ede196b5
--- /dev/null
+++ b/resources/less/metager/variables-dark.less
@@ -0,0 +1,16 @@
+
+@import "./variables.less";
+
+// Default Background Color
+@background-color: @color-almost-black;
+@background-color-mobile: @color-almost-black;
+// General text color.
+@text-color: @color-white;
+// Default textual link color.
+@link-color: #FF8000;
+// Sidebar styles
+@sidebar-list-hover-color: @color-strong-grey;
+// Card styles
+@card-background-color: @color-strong-grey;
+// Default Borde Color
+@border-color: #727272;
diff --git a/resources/less/metager/variables.less b/resources/less/metager/variables.less
index 2dc72d81cbf45c9c1b0acd986a092bdd592306d2..1541bf4acc6669dc8a4b0e598a86abcb4862ea36 100644
--- a/resources/less/metager/variables.less
+++ b/resources/less/metager/variables.less
@@ -11,6 +11,7 @@
// Default Background Color
@background-color: white;
@background-color-mobile: #FAFAFA;
+@sidebar-list-hover-color: @color-almost-white;
// Default Font
@metager-font:
"Liberation Sans",
@@ -28,6 +29,10 @@ sans-serif;
@screen-mobile: 760px;
@screen-small: 1000px;
@screen-medium: 1200px;
+// Card styles
+@card-background-color: @background-color;
+// Default Border Color
+@border-color: #ccc;
@result-font-large: 18px;
@result-font-medium: 16px;
@@ -56,4 +61,4 @@ sans-serif;
// Quicktip background color
@quicktip-background-color: @color-white;
// Color of the Spruch author
-@spruch-author-color: @color-strong-grey;
\ No newline at end of file
+@spruch-author-color: @color-strong-grey;
diff --git a/resources/views/layouts/resultPage.blade.php b/resources/views/layouts/resultPage.blade.php
index 4becd115b695cdf6d8a26ae5a28a3e04fcef91d2..697c6ecdec8683a5fd2eaac6de7d67e7409f9741 100644
--- a/resources/views/layouts/resultPage.blade.php
+++ b/resources/views/layouts/resultPage.blade.php
@@ -25,8 +25,8 @@
<link href="/fonts/liberationsans/stylesheet.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="{{ mix('css/fontawesome.css') }}" />
<link type="text/css" rel="stylesheet" href="{{ mix('css/fontawesome-solid.css') }}" />
- <link type="text/css" rel="stylesheet" href="{{ mix('css/bootstrap.css') }}" />
- <link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager.css') }}" />
+ <link type="text/css" rel="stylesheet alternate" href="{{ mix('css/themes/metager-dark.css') }}" title="MetaGer Dark"/>
+ <link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager.css') }}" title="MetaGer"/>
<meta name="referrer" content="origin">
<meta name="age-meta-label" content="age=18"/>
@include('parts.utility')
diff --git a/resources/views/layouts/staticPages.blade.php b/resources/views/layouts/staticPages.blade.php
index 1f92b3cae9c40aca190a8f309924609dea455cb2..445b92e726627562d8fa4526f021d1e21d9edfb8 100644
--- a/resources/views/layouts/staticPages.blade.php
+++ b/resources/views/layouts/staticPages.blade.php
@@ -22,8 +22,8 @@
<link rel="apple-touch-icon" sizes="152x152" href="/img/apple/touch-icon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple/touch-icon-180.png">
<link rel="search" type="application/opensearchdescription+xml" title="{{ trans('staticPages.opensearch') }}" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), action('StartpageController@loadPlugin')) }}">
- <link type="text/css" rel="stylesheet" href="{{ mix('css/bootstrap.css') }}" />
- <link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager.css') }}" />
+ <link type="text/css" rel="stylesheet alternate" href="{{ mix('css/themes/metager-dark.css') }}" title="MetaGer Dark"/>
+ <link type="text/css" rel="stylesheet" href="{{ mix('css/themes/metager.css') }}" title="MetaGer"/>
<link type="text/css" rel="stylesheet" href="{{ mix('css/utility.css') }}" />
<link href="/fonts/liberationsans/stylesheet.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="{{ mix('css/fontawesome.css') }}" />
diff --git a/resources/views/widget/widget.blade.php b/resources/views/widget/widget.blade.php
index 64fbb43fa6982753c0a3d0e669ad9fb2425fc1f8..059d80cb09ca6d33127009df1447d2d8d20dc6b0 100644
--- a/resources/views/widget/widget.blade.php
+++ b/resources/views/widget/widget.blade.php
@@ -6,7 +6,7 @@
<h1 class="page-title">{{ trans('widget.head') }}</h1>
<div class="card-medium">
<p>{{ trans('widget.body.1') }}</p>
- <p id="widgetLinks" class="btn-group"><a class="btn btn-default mutelink" href="websearch/">{{ trans('widget.body.2') }}</a><a class="btn btn-default mutelink" href="sitesearch/">{{ trans('widget.body.3') }}</a></p>
+ <p id="widgetLinks" class="btn-group"><a class="btn btn-default" href="websearch/">{{ trans('widget.body.2') }}</a><a class="btn btn-default" href="sitesearch/">{{ trans('widget.body.3') }}</a></p>
<p>{{ trans('widget.body.4') }}</p>
</div>
@endsection
diff --git a/webpack.mix.js b/webpack.mix.js
index 882de714d88b6a8ccde46693c544762dd324ada1..91565c2e243bffdfc366fe10fe028ee96cc9c072 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -22,6 +22,9 @@ mix
.less("resources/less/metager/metager.less", "public/css/themes/metager.css", {
strictMath: true
})
+ .less("resources/less/metager/metager-dark.less", "public/css/themes/metager-dark.css", {
+ strictMath: true
+ })
.less("resources/less/metager/pages/resultpage/quicktips.less", "public/css/quicktips.css", {
strictMath: true
})
@@ -80,4 +83,4 @@ mix
// source maps
.sourceMaps(false, "inline-source-map")
// versioning
- .version();
\ No newline at end of file
+ .version();