787 lines
12 KiB
Plaintext
787 lines
12 KiB
Plaintext
:root {
|
|
/* THEME INDEPENDENT COLORS */
|
|
--color-error: #8c0707;
|
|
--color-error-dark: #500303;
|
|
--color-warning: #fc9900;
|
|
--color-warning-dark: #c27400;
|
|
--color-success: #23d160;
|
|
--color-success-dark: #1ca64c;
|
|
--color-info: #c4c4c4;
|
|
--color-info-dark: #919191;
|
|
--color-lightblack: #1A2A36;
|
|
--color-lightwhite: #fcfffa;
|
|
--color-grey: #B1B5C0;
|
|
--color-grey-light: #efefef;
|
|
--color-grey-lighter: #f5f5f5;
|
|
--color-grey-medium: #9A989E;
|
|
--color-font: #34303a;
|
|
--color-fontsec: #5b5861;
|
|
|
|
|
|
/* FONTS */
|
|
--font-base: "Source Sans Pro", "Trebuchet MS", sans-serif;
|
|
--font-logo: "Roboto", var(--font-base);
|
|
|
|
/* DIMENSIONS */
|
|
--header-height: 100px;
|
|
--header-height-collapsed: 60px;
|
|
|
|
--asidenav-width-xl: 250px;
|
|
--asidenav-width-lg: 20%;
|
|
--asidenav-width-md: 60px;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
margin: 0;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
body {
|
|
background-color: white;
|
|
color: var(--color-font);
|
|
font-family: var(--font-base);
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
/* THEMES */
|
|
|
|
body {
|
|
/* DEFAULT LMU THEME */
|
|
--color-lmu-green: #0a9342;
|
|
--color-primary: var(--color-lmu-green);
|
|
--color-light: #31cc72;
|
|
--color-lighter: #35db7a;
|
|
--color-dark: #087536;
|
|
--color-darker: #075728;
|
|
--color-link: var(--color-font);
|
|
--color-link-hover: var(--color-font);
|
|
--color-lmu-box-border: var(--color-lightwhite);
|
|
|
|
&.theme--lavender {
|
|
--color-primary: #584c9c;
|
|
--color-light: #5969b5;
|
|
--color-lighter: #5f7dc2;
|
|
--color-dark: #4c4279;
|
|
--color-darker: #3c2765;
|
|
--color-link: var(--color-dark);
|
|
--color-link-hover: var(--color-darker);
|
|
}
|
|
|
|
&.theme--neutral-blue {
|
|
--color-primary: #3E606F;
|
|
--color-light: rgb(189, 201, 219);
|
|
--color-lighter: rgb(145, 159, 170);
|
|
--color-dark: rgb(42, 74, 88);
|
|
--color-darker: #193441;
|
|
}
|
|
|
|
&.theme--aberdeen-reds {
|
|
--color-primary: #820333;
|
|
--color-light: #C9283E;
|
|
--color-lighter: #F0433A;
|
|
--color-dark: #540032;
|
|
--color-darker: #2E112D;
|
|
}
|
|
|
|
&.theme--moss-green {
|
|
--color-primary: #5C996B;
|
|
--color-light: #7ACC8F;
|
|
--color-lighter: #99FFB2;
|
|
--color-dark: #3D6647;
|
|
--color-darker: #1F3324;
|
|
}
|
|
|
|
&.theme--sky-love {
|
|
--color-primary: #87ABE5;
|
|
--color-light: #A0C6F2;
|
|
--color-lighter: #BAE2FF;
|
|
--color-dark: #7A95DE;
|
|
--color-darker: #6B7BC9;
|
|
--color-link: var(--color-lightblack);
|
|
--color-link-hover: var(--color-darker);
|
|
}
|
|
}
|
|
|
|
/* END THEMES */
|
|
|
|
.emph {
|
|
font-style: italic;
|
|
}
|
|
|
|
a,
|
|
a:visited {
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
transition: color .2s ease, background-color .2s ease;
|
|
}
|
|
|
|
a {
|
|
color: var(--color-link);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--color-link-hover);
|
|
}
|
|
|
|
|
|
ul {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
h1, h2, h3, .div-h3 , h4, h5 {
|
|
font-weight: 600;
|
|
}
|
|
h1 {
|
|
font-size: 32px;
|
|
margin-bottom: 10px;
|
|
}
|
|
h2 {
|
|
font-size: 24px;
|
|
margin: 10px 0;
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
h3, .div-h3 {
|
|
font-size: 20px;
|
|
margin: 10px 0;
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
h4 {
|
|
font-size: 16px;
|
|
margin: 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
h1 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
h3, .div-h3 {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
/* LAYOUT */
|
|
.main {
|
|
position: relative;
|
|
}
|
|
|
|
.main__content {
|
|
position: relative;
|
|
background-color: white;
|
|
transition: padding-left .2s ease-out;
|
|
margin-top: var(--header-height-collapsed);
|
|
margin-left: 0;
|
|
|
|
> .container {
|
|
margin: 20px 0;
|
|
}
|
|
}
|
|
|
|
.main__content, .modal__content {
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
p, form, .div-p {
|
|
margin: 0.5rem 0;
|
|
|
|
&:last-child {
|
|
margin: 0.5rem 0 0;
|
|
|
|
&:first-child {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: 426px) {
|
|
.main__content {
|
|
margin-left: var(--asidenav-width-md, 50px);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 769px) {
|
|
.main__content {
|
|
margin-left: var(--asidenav-width-lg, 20%);
|
|
margin-top: var(--header-height);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.main__content {
|
|
margin-left: var(--asidenav-width-xl, 250px);
|
|
}
|
|
}
|
|
|
|
.main__content-body {
|
|
padding: 13px;
|
|
}
|
|
|
|
@media (min-width: 426px) {
|
|
.main__content-body {
|
|
padding: 13px 20px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 769px) {
|
|
.main__content-body {
|
|
padding: 20px 40px;
|
|
}
|
|
}
|
|
|
|
.pseudo-focus {
|
|
outline: 5px auto var(--color-light);
|
|
outline: 5px auto -webkit-focus-ring-color;
|
|
}
|
|
|
|
/* CONTAINER */
|
|
.container {
|
|
|
|
+ .container {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
|
|
/* GENERAL BUTTON STYLES */
|
|
input[type="submit"],
|
|
input[type="button"],
|
|
button,
|
|
.btn {
|
|
outline: 0;
|
|
border: 0;
|
|
box-shadow: 0;
|
|
background-color: var(--color-dark);
|
|
color: white;
|
|
padding: 10px 17px;
|
|
min-width: 100px;
|
|
transition: all .1s;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
|
|
a:hover {
|
|
color: white;
|
|
}
|
|
|
|
&:focus {
|
|
border-color: #3273dc;
|
|
box-shadow: 0 0 0 0.25rem rgba(50,115,220,.25);
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
input[type="submit"][disabled],
|
|
input[type="button"][disabled],
|
|
button[disabled],
|
|
.btn[disabled] {
|
|
opacity: 0.3;
|
|
background-color: var(--color-grey);
|
|
cursor: default;
|
|
}
|
|
|
|
input[type="submit"]:not([disabled]):hover,
|
|
input[type="button"]:not([disabled]):hover,
|
|
button:not([disabled]):hover,
|
|
.btn:not([disabled]):hover {
|
|
background-color: var(--color-light);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--color-primary);
|
|
}
|
|
|
|
.btn-info {
|
|
background-color: var(--color-info)
|
|
}
|
|
|
|
.btn--small {
|
|
padding: 4px 7px;
|
|
background-color: var(--color-darker);
|
|
}
|
|
|
|
input[type="submit"].btn-info:hover,
|
|
input[type="button"].btn-info:hover,
|
|
.btn-info:hover {
|
|
background-color: var(--color-grey)
|
|
}
|
|
|
|
/* GENERAL TABLE STYLES */
|
|
.table {
|
|
margin: 21px 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.table:only-child {
|
|
margin: 0;
|
|
}
|
|
|
|
.table--striped {
|
|
|
|
.table__row:not(.no-stripe):not(.table__row--sum):nth-child(even) {
|
|
background-color: rgba(0, 0, 0, 0.03);
|
|
}
|
|
}
|
|
|
|
.table--hover {
|
|
|
|
.table__row:not(.no-hover):not(.table__row--sum):not(.table__row--head):not(.table__row--foot):hover {
|
|
background-color: rgba(0, 0, 0, 0.07);
|
|
}
|
|
}
|
|
|
|
.table__row--sum td.table__td::before {
|
|
content: 'Σ';
|
|
font-weight: bold;
|
|
margin-right: .25em;
|
|
}
|
|
|
|
/* SCROLLTABLE */
|
|
.scrolltable {
|
|
overflow: auto;
|
|
}
|
|
|
|
.scrolltable--bordered {
|
|
box-shadow: 0 0 1px 1px var(--color-grey-light);
|
|
}
|
|
|
|
@media (max-width: 425px) {
|
|
|
|
.scrolltable {
|
|
margin-left: -10px;
|
|
padding-left: 10px;
|
|
margin-right: -10px;
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
|
|
/* TABLE DESIGN */
|
|
.table__td, .table__th {
|
|
padding-top: 14px;
|
|
padding-bottom: 10px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.table__td {
|
|
font-size: 16px;
|
|
color: var(--color-font);
|
|
line-height: 1.4;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.table__td--automatic {
|
|
font-style: oblique;
|
|
color: var(--color-fontsec);
|
|
}
|
|
|
|
.table__td--overriden {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.table__th {
|
|
background-color: var(--color-dark);
|
|
position: relative;
|
|
font-size: 16px;
|
|
color: white;
|
|
line-height: 1.4;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
|
|
a {
|
|
color: white;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
|
|
&:hover {
|
|
color: inherit;
|
|
}
|
|
|
|
&::before {
|
|
content: "\f0c1";
|
|
font-family: "Font Awesome 5 Free";
|
|
font-weight: 900;
|
|
margin-right: 0.25em;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
|
|
.table th {
|
|
padding: 4px 6px;
|
|
}
|
|
}
|
|
|
|
.table__td-content {
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.table__th-link {
|
|
font-weight: bold;
|
|
|
|
&::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.table--vertical {
|
|
|
|
th {
|
|
background-color: transparent;
|
|
color: var(--color-font);
|
|
width: 170px;
|
|
text-align: right;
|
|
padding-right: 15px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
td {
|
|
font-weight: 600;
|
|
color: var(--color-font);
|
|
}
|
|
}
|
|
|
|
.table--condensed {
|
|
margin: 0;
|
|
|
|
.table__th,
|
|
.table__td {
|
|
padding: 4px 8px;
|
|
}
|
|
}
|
|
|
|
/* UNORDERED LIST */
|
|
.list-ul__item {
|
|
// padding: 4px 0;
|
|
line-height: 25px;
|
|
}
|
|
|
|
/* LIST MODIFIERS */
|
|
.list--iconless {
|
|
list-style-type: none;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.list--inline {
|
|
ul {
|
|
display: inline-block;
|
|
margin-left: 0;
|
|
|
|
li {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul.list--inline {
|
|
|
|
display: inline-block;
|
|
margin-left: 0;
|
|
|
|
li {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.list--comma-separated li {
|
|
&::after {
|
|
content: ', ';
|
|
white-space: pre;
|
|
}
|
|
|
|
&:last-of-type::after {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
.list--space-separated li {
|
|
&::after {
|
|
content: ' ';
|
|
white-space: pre;
|
|
}
|
|
|
|
&:last-of-type::after {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
.list--icon-width li {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
|
|
/* DEFINITION LIST */
|
|
.deflist {
|
|
display: grid;
|
|
grid-template-columns: 100%;
|
|
}
|
|
.deflist__dt,
|
|
.deflist__dd {
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.deflist__dt {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.deflist__dd {
|
|
font-size: 18px;
|
|
margin-bottom: 10px;
|
|
|
|
> p, > .div-p {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
|
|
.deflist {
|
|
grid-template-columns: fit-content(25vw) 1fr;
|
|
|
|
.deflist {
|
|
margin-top: -10px;
|
|
margin-right: -15px;
|
|
|
|
.deflist__dd {
|
|
padding-right: 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.deflist__dt,
|
|
.deflist__dd {
|
|
padding: 12px 0;
|
|
margin: 0;
|
|
font-size: 16px;
|
|
|
|
&:last-of-type {
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
.deflist__dt {
|
|
padding-right: 50px;
|
|
}
|
|
|
|
.deflist__dd {
|
|
padding-right: 15px;
|
|
}
|
|
}
|
|
|
|
section {
|
|
padding-bottom: 30px;
|
|
border-bottom: 1px solid #d3d3d3;
|
|
|
|
+ section {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0px;
|
|
}
|
|
}
|
|
|
|
.pseudonym {
|
|
font-family: monospace;
|
|
}
|
|
|
|
.headline-one {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Notification style used as requested by @hamanf in #298, but class was not globally available. Copied from dead-code. For @hamanf to clean up: */
|
|
|
|
.notification {
|
|
position: relative;
|
|
border-radius: 3px;
|
|
padding: 10px 20px 20px;
|
|
margin: 40px auto;
|
|
box-shadow: 0 0 4px 2px inset currentColor;
|
|
padding-left: 100px;
|
|
min-height: 100px;
|
|
max-width: 700px;
|
|
font-weight: 600;
|
|
vertical-align: center;
|
|
display: grid;
|
|
grid-column: 2;
|
|
|
|
&::before {
|
|
font-family: "Font Awesome 5 Free";
|
|
font-weight: 600;
|
|
position: absolute;
|
|
display: flex;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 100px;
|
|
font-size: 50px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.notification__content {
|
|
grid-column: 1;
|
|
align-self: center;
|
|
|
|
color: var(--color-font);
|
|
}
|
|
|
|
&.notification--broad {
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
.form-section-notification {
|
|
display: grid;
|
|
grid-template-columns: 1fr 3fr;
|
|
grid-gap: 5px;
|
|
|
|
fieldset {
|
|
display: grid;
|
|
grid-template-columns: 1fr 3fr;
|
|
grid-gap: 5px;
|
|
grid-column: 1/3;
|
|
}
|
|
|
|
.notification {
|
|
margin: 0;
|
|
}
|
|
|
|
+ .form-group, + .form-section-legend, + .form-section-notification {
|
|
margin-top: 11px;
|
|
}
|
|
|
|
+ .form-section-title {
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.form-section-notification {
|
|
grid-template-columns: 1fr;
|
|
margin-top: 17px;
|
|
|
|
fieldset {
|
|
grid-template-columns: 1fr;
|
|
grid-column: 1/2;
|
|
}
|
|
}
|
|
|
|
.notification {
|
|
grid-column: 1;
|
|
|
|
max-width: none;
|
|
|
|
padding-left: 40px;
|
|
|
|
&::before {
|
|
height: auto;
|
|
width: 45px;
|
|
font-size: 40px;
|
|
top: 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.notification-error {
|
|
color: var(--color-error) ;
|
|
}
|
|
|
|
.notification-warning {
|
|
color: var(--color-warning) ;
|
|
}
|
|
|
|
.notification-info {
|
|
color: var(--color-lightblack) ;
|
|
}
|
|
|
|
.notification-success {
|
|
color: var(--color-warning) ;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
"Heated" element.
|
|
Set custom property "--hotness" to a value from 0 to 1 to turn
|
|
the element's background to a color on a gradient from green to red.
|
|
|
|
TBD:
|
|
- move to a proper place
|
|
- think about font-weight...
|
|
|
|
Example:
|
|
<div .heated style="--hotness: 0.2">Lorem ipsum
|
|
*/
|
|
|
|
.heated {
|
|
--hotness: 0;
|
|
--red: calc(var(--hotness) * 200);
|
|
--green: calc(255 - calc(var(--hotness) * 255));
|
|
--opacity: calc(calc(var(--red) / 600) + 0.1);
|
|
|
|
font-weight: var(--weight, 600);
|
|
background-color: rgba(var(--red), var(--green), 0, var(--opacity));
|
|
}
|
|
|
|
|
|
.uuid {
|
|
font-family: monospace;
|
|
}
|
|
|
|
|
|
.form--inline {
|
|
display: inline-block;
|
|
}
|
|
|
|
|
|
.ribbon {
|
|
position: fixed;
|
|
top: calc(40px + var(--header-height));
|
|
transition: all .2s cubic-bezier(0.03, 0.43, 0.58, 1);
|
|
right: -63px;
|
|
transform: rotate(45deg);
|
|
width: 250px;
|
|
background: var(--color-error);
|
|
text-align: center;
|
|
color: var(--color-lightwhite);
|
|
font-weight: 600;
|
|
font-size: 1.25rem;
|
|
line-height: 2em;
|
|
box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
|
|
z-index: 19;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.ribbon {
|
|
top: calc(20px + var(--header-height-collapsed));
|
|
right: -83px;
|
|
transform: rotate(45deg) scale(0.6);
|
|
}
|
|
}
|