Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
de0535be32 | ||
|
|
b74e9bbd69 |
@@ -71,15 +71,6 @@ section article {
|
|||||||
font-size: 1.30em;
|
font-size: 1.30em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
div.zelle > label {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.http-error {
|
|
||||||
header {
|
|
||||||
background: hsl(340, 90%, 50%);
|
|
||||||
color: hsl(0, 0%, 95%);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -72,18 +72,6 @@ main {
|
|||||||
margin: @sectionMargin;
|
margin: @sectionMargin;
|
||||||
text-indent: @sectionMargin * 2;
|
text-indent: @sectionMargin * 2;
|
||||||
}
|
}
|
||||||
ul, ol {
|
|
||||||
margin: initial;
|
|
||||||
li {
|
|
||||||
margin: initial;
|
|
||||||
padding: initial;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
dl {
|
|
||||||
dd {
|
|
||||||
margin-left: 2em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
table {
|
table {
|
||||||
thead {
|
thead {
|
||||||
tr:last-child {
|
tr:last-child {
|
||||||
@@ -116,7 +104,7 @@ main {
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0.5rem;
|
margin: 0.5rem;
|
||||||
}
|
}
|
||||||
input, textarea {
|
input {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: @formItemWidth;
|
width: @formItemWidth;
|
||||||
padding: 0.25rem;
|
padding: 0.25rem;
|
||||||
@@ -124,38 +112,6 @@ main {
|
|||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: thin;
|
border-width: thin;
|
||||||
}
|
}
|
||||||
div.radio-button {
|
|
||||||
padding-left: 20%;
|
|
||||||
label, input {
|
|
||||||
display: inline;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
margin-top: inherit;
|
|
||||||
margin-right: 1rem;
|
|
||||||
margin-left: 1rem;
|
|
||||||
margin-bottom: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
textarea {
|
|
||||||
height: 10rem;
|
|
||||||
}
|
|
||||||
ul.suche {
|
|
||||||
width: 30rem;
|
|
||||||
margin-left: @formLabelWidth + 1.5rem;
|
|
||||||
margin-top: -1rem;
|
|
||||||
background: white;
|
|
||||||
position: absolute;
|
|
||||||
border: solid thin;
|
|
||||||
li {list-style: none;
|
|
||||||
text-indent: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
background: @mainColorLight;
|
|
||||||
color: @mainColor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -188,48 +144,3 @@ main {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
aside {
|
|
||||||
background: @mainColorLight ;
|
|
||||||
li {
|
|
||||||
background: @mainColorLight;
|
|
||||||
color: @mainColor;
|
|
||||||
font-weight: bold ;
|
|
||||||
&:not(:first-child) {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
padding: 1.25rem .5rem;
|
|
||||||
text-decoration: none;
|
|
||||||
color: @mainColor;
|
|
||||||
&:hover, &:active, &:focus {
|
|
||||||
color: darken(@mainColor,10%,relative);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:hover, &:active, &:focus {
|
|
||||||
background: lighten(@mainColorLight,10%,relative);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
form {
|
|
||||||
@paddingForm: 0.5rem;
|
|
||||||
@paddingInput: @paddingForm/2;
|
|
||||||
background: @mainColorLight;
|
|
||||||
color: @mainColor;
|
|
||||||
padding: 2 * @paddingForm @paddingForm;
|
|
||||||
input {
|
|
||||||
display: block;
|
|
||||||
width: @breiteNavBereich - (@paddingForm + @paddingInput) * 2 ;
|
|
||||||
border: none;
|
|
||||||
margin-bottom: @paddingForm;
|
|
||||||
padding: @paddingInput;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
line-height: 1.5em;
|
|
||||||
text-align: left;
|
|
||||||
.hyphens();
|
|
||||||
margin: 1em;
|
|
||||||
font-size: 85%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -137,6 +137,7 @@
|
|||||||
width: @breiteNavBereich;
|
width: @breiteNavBereich;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 830px) {
|
@media screen and (max-width: 830px) {
|
||||||
html body {
|
html body {
|
||||||
@boxHeight: 5rem;
|
@boxHeight: 5rem;
|
||||||
@@ -145,19 +146,21 @@
|
|||||||
font-size: @boxHeight;
|
font-size: @boxHeight;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
& > footer {
|
||||||
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
& > nav {
|
& > nav {
|
||||||
background: none;
|
|
||||||
left:auto;
|
|
||||||
ul {
|
ul {
|
||||||
li {
|
li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border: none;
|
border: none;
|
||||||
width: auto;
|
width: auto;
|
||||||
a {
|
height: 1.5em;
|
||||||
padding: 0.75rem;
|
padding-top: 0.25em;
|
||||||
}
|
a {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
&:not(:first-child) {
|
&:not(:first-child) {
|
||||||
border-left: none;
|
border-left: none;
|
||||||
}
|
}
|
||||||
@@ -184,6 +187,7 @@
|
|||||||
@formLabelWidth: 10rem;
|
@formLabelWidth: 10rem;
|
||||||
@formItemWidth: 40rem;
|
@formItemWidth: 40rem;
|
||||||
@sectionMargin: 1rem;
|
@sectionMargin: 1rem;
|
||||||
|
margin: @sectionMargin;
|
||||||
fieldset {
|
fieldset {
|
||||||
width: auto;
|
width: auto;
|
||||||
margin: 1rem auto;
|
margin: 1rem auto;
|
||||||
@@ -262,6 +266,41 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 720px) {
|
@media screen and (max-width: 720px) {
|
||||||
|
html body {
|
||||||
|
@boxHeight: 2.5rem;
|
||||||
|
& > header {
|
||||||
|
height: @boxHeight;
|
||||||
|
font-size: @boxHeight;
|
||||||
|
text-align: center;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > nav {
|
||||||
|
.hamburgerMenu();
|
||||||
|
}
|
||||||
|
main section header {
|
||||||
|
h1, h2 {
|
||||||
|
text-align: center;
|
||||||
|
margin: 0.5rem auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
margin: 1rem 0;
|
||||||
|
td, th {
|
||||||
|
padding: 0.25rem;
|
||||||
|
}
|
||||||
|
colgroup:not(:first-child) col:first-child{
|
||||||
|
border-left: solid thin;
|
||||||
|
}
|
||||||
|
thead {
|
||||||
|
th {
|
||||||
|
font-size: 100%;
|
||||||
|
font-weight: bold;
|
||||||
|
.hyphens();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -1,14 +1,3 @@
|
|||||||
.clearfix() {
|
|
||||||
&:after {
|
|
||||||
content: ".";
|
|
||||||
display: block;
|
|
||||||
height: 0;
|
|
||||||
line-height: 0;
|
|
||||||
clear: both;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hyphens() {
|
.hyphens() {
|
||||||
-webkit-hyphens: auto;
|
-webkit-hyphens: auto;
|
||||||
-moz-hyphens: auto;
|
-moz-hyphens: auto;
|
||||||
@@ -59,27 +48,22 @@
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mywrap() {
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburgerMenu() {
|
.hamburgerMenu() {
|
||||||
color: white;
|
color: white;
|
||||||
width: 3rem;
|
width: 3rem;
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
top: 0.5rem;
|
top: 0.25rem;
|
||||||
right: 0.5rem;
|
left: 0.25rem;
|
||||||
left: auto;
|
|
||||||
.border-radius(4px);
|
.border-radius(4px);
|
||||||
border: none;
|
border: none;
|
||||||
.vertical-gradient(#555; #000);
|
.vertical-gradient(@mainColorDark; @mainColor);
|
||||||
> ul {
|
> ul {
|
||||||
height: auto;
|
height: auto;
|
||||||
width: auto;
|
width: auto;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
left: 0;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
background: fade(black,80%);
|
background: fade(@mainColorDark,80%);
|
||||||
.border-radius(5px);
|
.border-radius(5px);
|
||||||
display: none;
|
display: none;
|
||||||
> li {
|
> li {
|
||||||
@@ -100,7 +84,7 @@
|
|||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
color: white;
|
color: white;
|
||||||
.vertical-gradient(#59b4fd; #0560e8);
|
.vertical-gradient(@mainColorLight; @mainColor);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:first-child {
|
&:first-child {
|
||||||
@@ -115,7 +99,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover, &:focus, &:active {
|
&:hover, &:focus, &:active, &:checked {
|
||||||
ul {
|
ul {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
@@ -130,19 +114,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.transition(@property) {
|
|
||||||
-moz-transition: ~"@{property}";
|
|
||||||
-webkit-transition: ~"@{property}";
|
|
||||||
-o-transition: ~"@{property}";
|
|
||||||
-ms-transition: ~"@{property}";
|
|
||||||
transition: ~"@{property}";
|
|
||||||
-moz-transition-duration: 0.5s;
|
|
||||||
-webkit-transition-duration: 0.5s;
|
|
||||||
-o-transition-duration: 0.5s;
|
|
||||||
-ms-transition-duration: 0.5s;
|
|
||||||
transition-duration: 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexEltern() {
|
.flexEltern() {
|
||||||
display:-ms-flexbox;
|
display:-ms-flexbox;
|
||||||
display: flexbox;
|
display: flexbox;
|
||||||
@@ -171,18 +142,4 @@
|
|||||||
-ms-flex: @num;
|
-ms-flex: @num;
|
||||||
flex: @num;
|
flex: @num;
|
||||||
flex-grow: @num;
|
flex-grow: @num;
|
||||||
}
|
|
||||||
|
|
||||||
.background-size(...) {
|
|
||||||
-webkit-background-size: @arguments;
|
|
||||||
-moz-background-size: @arguments;
|
|
||||||
background-size: @arguments;
|
|
||||||
}
|
|
||||||
|
|
||||||
.transform(...) {
|
|
||||||
-ms-transform: @arguments;
|
|
||||||
-webkit-transform: @arguments;
|
|
||||||
-o-transform: @arguments;
|
|
||||||
-moz-transform: @arguments;
|
|
||||||
transform: @arguments;
|
|
||||||
}
|
}
|
||||||
@@ -75,9 +75,6 @@ section article {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.http-error {
|
&.http-error {
|
||||||
header {
|
display: none;
|
||||||
background: hsl(340, 90%, 50%);
|
|
||||||
color: hsl(0, 0%, 95%);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -21,17 +21,15 @@ html {
|
|||||||
margin: 1rem;
|
margin: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
> nav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
> footer {
|
> footer {
|
||||||
color: contrast(@mainColor);
|
color: contrast(@mainColor);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#inhalts-bereich {
|
|
||||||
background-color: @mainColorLight;
|
|
||||||
color: @mainColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
main {
|
||||||
* {
|
* {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
@@ -46,22 +44,10 @@ main {
|
|||||||
h1, h2 {
|
h1, h2 {
|
||||||
margin: @sectionMargin;
|
margin: @sectionMargin;
|
||||||
}
|
}
|
||||||
p, ul, ol, dl {
|
p {
|
||||||
margin: @sectionMargin;
|
margin: @sectionMargin;
|
||||||
text-indent: @sectionMargin * 2;
|
text-indent: @sectionMargin * 2;
|
||||||
}
|
}
|
||||||
ul, ol {
|
|
||||||
margin: initial;
|
|
||||||
li {
|
|
||||||
margin: initial;
|
|
||||||
padding: initial;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
dl {
|
|
||||||
dd {
|
|
||||||
margin-left: 2em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
table {
|
table {
|
||||||
colgroup:not(:first-child) col:first-child{
|
colgroup:not(:first-child) col:first-child{
|
||||||
border-left: solid medium;
|
border-left: solid medium;
|
||||||
@@ -86,70 +72,10 @@ main {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
form {
|
form {
|
||||||
@formLabelWidth: 10rem;
|
display: none;
|
||||||
@formItemWidth: 40rem;
|
}
|
||||||
fieldset {
|
button {
|
||||||
width: @formItemWidth + @formLabelWidth + 2rem;
|
display: none;
|
||||||
margin: 1rem auto;
|
|
||||||
border-style: solid ;
|
|
||||||
padding: @sectionMargin;
|
|
||||||
&.tasten {
|
|
||||||
border: none;
|
|
||||||
background-color: @mainColorLight;
|
|
||||||
}
|
|
||||||
legend {
|
|
||||||
margin: @sectionMargin;
|
|
||||||
margin-left: @sectionMargin * 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
div.zelle {
|
|
||||||
& > label {
|
|
||||||
width: @formLabelWidth;
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0.5rem;
|
|
||||||
}
|
|
||||||
input, textarea {
|
|
||||||
display: inline-block;
|
|
||||||
width: @formItemWidth;
|
|
||||||
padding: 0.25rem;
|
|
||||||
margin-bottom: 1.0rem;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: thin;
|
|
||||||
}
|
|
||||||
div.radio-button {
|
|
||||||
padding-left: 20%;
|
|
||||||
label, input {
|
|
||||||
display: inline;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
margin-top: inherit;
|
|
||||||
margin-right: 1rem;
|
|
||||||
margin-left: 1rem;
|
|
||||||
margin-bottom: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
textarea {
|
|
||||||
height: 10rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
@farbeHintergrund: @mainColorLight;
|
|
||||||
@farbeHintergrundHell: lighten(@farbeHintergrund,50%,relativ);
|
|
||||||
@farbeText: spin(lighten(@farbeHintergrund,66%,relativ),@mainColor);
|
|
||||||
@farbeSchatten: fade(@farbeHintergrund,50%);
|
|
||||||
height: 2.5em;
|
|
||||||
.border-radius(1.25em);
|
|
||||||
padding: 0.5em 1.25em;
|
|
||||||
.vertical-gradient(@farbeHintergrundHell,@farbeHintergrund);
|
|
||||||
.box-shadow(0.1em 0.2em 0.5em @farbeSchatten);
|
|
||||||
color: @farbeText;
|
|
||||||
font-weight: bold;
|
|
||||||
&:hover {
|
|
||||||
.vertical-gradient(@farbeHintergrund,@farbeHintergrundHell);
|
|
||||||
}
|
|
||||||
margin: 0.25rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
footer {
|
footer {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
@@ -170,49 +96,4 @@ main {
|
|||||||
border-bottom-style: solid;
|
border-bottom-style: solid;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
aside {
|
|
||||||
background: @subColorLight ;
|
|
||||||
li {
|
|
||||||
background: @mainColorLight;
|
|
||||||
color: @mainColor;
|
|
||||||
font-weight: bold ;
|
|
||||||
&:not(:first-child) {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
padding: 1.25rem .5rem;
|
|
||||||
text-decoration: none;
|
|
||||||
color: @mainColor;
|
|
||||||
&:hover, &:active, &:focus {
|
|
||||||
color: darken(@mainColor,10%,relative);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:hover, &:active, &:focus {
|
|
||||||
background: lighten(@mainColor,10%,relative);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
form {
|
|
||||||
@paddingForm: 0.5rem;
|
|
||||||
@paddingInput: @paddingForm/2;
|
|
||||||
background: @mainColorLight;
|
|
||||||
color: @mainColor;
|
|
||||||
padding: 2 * @paddingForm @paddingForm;
|
|
||||||
input {
|
|
||||||
display: block;
|
|
||||||
width: @mainColor - (@paddingForm + @paddingInput) * 2 ;
|
|
||||||
border: none;
|
|
||||||
margin-bottom: @paddingForm;
|
|
||||||
padding: @paddingInput;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
line-height: 1.5em;
|
|
||||||
text-align: left;
|
|
||||||
.hyphens();
|
|
||||||
margin: 1em;
|
|
||||||
font-size: 85%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user