Skip to content
GitLab
Commit fe617e59 authored by Phil Höfer's avatar Phil Höfer
Browse files

Update resources/less/metager/general/base.less,... 

Update resources/less/metager/general/base.less, resources/less/metager/general/general.less, resources/less/metager/metager.less, resources/less/metager/metager-dark.less files
parent 079f508f
Show whitespace changes
Inline Side-by-side
resources/less/metager/general/base.less 0 → 100644
View file @ fe617e59
/* 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;
}
}
resources/less/metager/general/general.less
View file @ fe617e59
/* 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 {