544 lines
8.3 KiB
Plaintext
544 lines
8.3 KiB
Plaintext
:root {
|
|
/* THEME INDEPENDENT COLORS */
|
|
--color-error: #8c0707;
|
|
--color-warning: #fc9900;
|
|
--color-success: #23d160;
|
|
--color-info: #c4c4c4;
|
|
--color-lightblack: #1A2A36;
|
|
--color-lightwhite: #fcfffa;
|
|
--color-grey: #B1B5C0;
|
|
--color-grey-light: #efefef;
|
|
--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: 50px;
|
|
}
|
|
|
|
* {
|
|
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 */
|
|
|
|
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, h4, h5 {
|
|
font-weight: 600;
|
|
}
|
|
h1 {
|
|
font-size: 32px;
|
|
margin-bottom: 10px;
|
|
}
|
|
h2 {
|
|
font-size: 24px;
|
|
margin: 10px 0;
|
|
}
|
|
h3 {
|
|
font-size: 20px;
|
|
margin: 10px 0;
|
|
}
|
|
h4 {
|
|
font-size: 16px;
|
|
margin: 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
h1 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
p {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
p:last-child {
|
|
margin: 10px 0 0;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 426px) {
|
|
:not(.modal) {
|
|
.main__content {
|
|
margin-left: var(--asidenav-width-md, 50px);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: 769px) {
|
|
:not(.modal) {
|
|
.main__content {
|
|
margin-left: var(--asidenav-width-lg, 20%);
|
|
margin-top: var(--header-height);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
:not(.modal) {
|
|
.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;
|
|
}
|
|
}
|
|
|
|
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):nth-child(even) {
|
|
background-color: rgba(0, 0, 0, 0.03);
|
|
}
|
|
}
|
|
|
|
.table--hover {
|
|
|
|
.table__row:not(.no-hover):not(.table__row--head):hover {
|
|
background-color: rgba(0, 0, 0, 0.07);
|
|
}
|
|
}
|
|
|
|
/* SCROLLTABLE */
|
|
.scrolltable {
|
|
overflow: auto;
|
|
box-shadow: 0 0 3px 0 var(--color-grey);
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
@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__th {
|
|
background-color: var(--color-dark);
|
|
position: relative;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
line-height: 1.4;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
|
|
.table th {
|
|
padding: 4px 6px;
|
|
}
|
|
}
|
|
|
|
.table__td-content {
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.table__th-link {
|
|
color: white;
|
|
font-weight: bold;
|
|
|
|
&:hover {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
|
|
.deflist {
|
|
grid-template-columns: max-content minmax(auto, max-content);
|
|
|
|
.deflist {
|
|
margin-top: -10px;
|
|
margin-right: -15px;
|
|
|
|
.deflist__dd {
|
|
padding-right: 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.deflist__dt,
|
|
.deflist__dd {
|
|
border-bottom: 1px solid #d3d3d3;
|
|
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: 20px;
|
|
margin-bottom: 20px;
|
|
border-bottom: 1px solid #d3d3d3;
|
|
|
|
+ section {
|
|
margin-top: 20px;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
section {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.pseudonym {
|
|
font-family: monospace;
|
|
}
|
|
|
|
.headline-one {
|
|
margin-bottom: 15px;
|
|
}
|