Commit e79b734c authored by Phil Höfer's avatar Phil Höfer
Browse files

Merge branch '932-dark-stylesheet-alternative' into 'development'

Resolve "Dark stylesheet alternative"

Closes #933 and #932

See merge request !1506
parents ed7b4825 8828d367
......@@ -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": {
......
/* 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;
}
}
.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;
......
//
// 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
//