849 lines
14 KiB
CSS
849 lines
14 KiB
CSS
|
|
|
|
:root {
|
|
--marine: #27177A;
|
|
--royalblau: #3F34C6;
|
|
--orange: #F07C3C;
|
|
--pastelorange: #FFC192;
|
|
--nude: #FAD8C4;
|
|
--helllachs: #FFF5EE;
|
|
|
|
--borderRadSmall: 14px;
|
|
--borderRadLarge: 30px;
|
|
|
|
}
|
|
|
|
/*----------------------------------------------------*/
|
|
/*------------------- ALLGEMEIN ----------------------*/
|
|
/*----------------------------------------------------*/
|
|
|
|
body {
|
|
|
|
height: 100vh;
|
|
min-height: -webkit-fill-available;
|
|
position: fixed;
|
|
|
|
overflow: hidden;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
height: -webkit-fill-available;
|
|
}
|
|
|
|
|
|
h1 {
|
|
color: #fff5ee;
|
|
font-family: bd-supper, sans-serif;
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
|
|
h2 {
|
|
font-family: bd-supper, sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
p{
|
|
font-family: input-sans-condensed, sans-serif;
|
|
font-weight: 200;
|
|
font-style: normal;
|
|
}
|
|
|
|
p.italic{
|
|
font-family: input-sans-condensed, sans-serif;
|
|
font-weight: 200;
|
|
font-style: italic;
|
|
}
|
|
|
|
#logo {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
height: 115px;
|
|
width: 115px;
|
|
}
|
|
|
|
div.mapControls {
|
|
height: 140px;
|
|
width: 40px;
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 10px;
|
|
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
img.mapControl {
|
|
height: 40px;
|
|
width: 40px;
|
|
margin-top: 5px;
|
|
|
|
}
|
|
|
|
|
|
.hideButton {
|
|
opacity: 0 ;
|
|
transition: 0.5s ;
|
|
-webkit-transition: 0.5s ;
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
.desktopOnly{
|
|
display: none;
|
|
}
|
|
|
|
/*----------------------------------------------------*/
|
|
/*-------------------- STARTSCREEN -------------------*/
|
|
/*----------------------------------------------------*/
|
|
|
|
#startScreen {
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: 0.5s ;
|
|
-webkit-transition: 0.5s ;
|
|
|
|
position: fixed;
|
|
background-color: var(--orange);
|
|
opacity: .9;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
#LogoLarge {
|
|
width: 75%;
|
|
margin-top: 50%;
|
|
|
|
}
|
|
|
|
#startText {
|
|
font-family: bd-supper, sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
|
|
color: var(--marine);
|
|
text-align: center;
|
|
margin: 0 10% 30% 10%;
|
|
}
|
|
|
|
.hideElement {
|
|
opacity: 0 !important;
|
|
pointer-events: none !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*----------------------------------------------------*/
|
|
/*-------------- OVERLAY ALLGEMEIN -------------------*/
|
|
/*----------------------------------------------------*/
|
|
|
|
#overlay{
|
|
background-image: url("../images/backgroundBlue.svg");
|
|
background-size:cover;
|
|
position: fixed;
|
|
bottom: -0vh;
|
|
height: 75%;
|
|
width: 100vw;
|
|
max-width: 500px;
|
|
border-radius: 30px 30px 0 0;
|
|
background-color: #27177A;
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
|
|
|
|
}
|
|
|
|
#overlay::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
#overlay_container{
|
|
|
|
margin: 3%;
|
|
height: 94%;
|
|
}
|
|
|
|
.hidden{
|
|
position: absolute;
|
|
transition: 0.3s;
|
|
-webkit-transition: 0.3s;
|
|
transform: translateY(100%);
|
|
-webkit-transform: translateY(100%);
|
|
}
|
|
|
|
.show{
|
|
transform: translateY(0);
|
|
-webkit-transform: translateY(0);
|
|
|
|
transition: 0.3s;
|
|
-webkit-transition: 0.3s;
|
|
display: block;
|
|
}
|
|
|
|
|
|
#cancel {
|
|
z-index: 100;
|
|
transform: translateZ(10px);
|
|
width: 40px;
|
|
height: 40px;
|
|
position: sticky;
|
|
float: right;
|
|
right: 18px;
|
|
top: 18px;
|
|
}
|
|
|
|
cancel:active {
|
|
transition: 0.3s;
|
|
-webkit-transition: 0.3s;
|
|
|
|
transform: scale(1.1);
|
|
-webkit-transform: scale(1.1);
|
|
}
|
|
|
|
|
|
/*----------------------------------------------------*/
|
|
/*------------------ IDEE ERFASSEN -------------------*/
|
|
/*----------------------------------------------------*/
|
|
|
|
form{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
height: 93%;
|
|
margin-top: 7%;
|
|
margin-bottom: -25px;
|
|
}
|
|
|
|
input, textarea{
|
|
background-color: #F07C3C;
|
|
color: #fff5ee;
|
|
display: block;
|
|
border-radius: 14px;
|
|
width: 96%;
|
|
padding: 0;
|
|
border: 0;
|
|
font-size: 18pt;
|
|
|
|
padding: 5px 0 3px 4%;
|
|
|
|
font-family: bd-supper, sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
|
|
}
|
|
|
|
div.textAndImage {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
background-color: #F07C3C;
|
|
border-radius: 14px;
|
|
width: 100%;
|
|
padding: 0;
|
|
border: 0;
|
|
height: 80%;
|
|
}
|
|
|
|
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
|
color: #fff5ee;
|
|
opacity: .8;
|
|
opacity: 1; /* Firefox */
|
|
}
|
|
|
|
|
|
|
|
textarea {
|
|
background-color: none;
|
|
font-family: input-sans-condensed, sans-serif;
|
|
font-weight: 200;
|
|
font-style: normal;
|
|
font-size: 12pt;
|
|
margin-top: 5px;
|
|
height: 75%;
|
|
}
|
|
|
|
input.titel{
|
|
width: 75%;
|
|
margin-bottom: 3%;
|
|
height: 30px;
|
|
max-height: 15%;
|
|
}
|
|
|
|
input.adresse{
|
|
margin-bottom: 3%;
|
|
height: 30px;
|
|
max-height: 15%;
|
|
font-size: 12pt;
|
|
}
|
|
|
|
|
|
button.submit{
|
|
background-image: url("../images/absenden.svg");
|
|
background-repeat: no-repeat;
|
|
background-color: transparent;
|
|
border-radius: 40px;
|
|
border: none;
|
|
width: 80px;
|
|
height: 80px;
|
|
position: relative;
|
|
bottom: 25px;
|
|
left: 25px;
|
|
}
|
|
|
|
button.submit:active{
|
|
transition: 0.3s;
|
|
-webkit-transition: 0.3s;
|
|
transform: scale(1.1);
|
|
-webkit-transform: scale(1.1);
|
|
}
|
|
|
|
|
|
|
|
div.image-preview{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-direction: row-reverse;
|
|
align-items: flex-end;
|
|
margin: 20px;
|
|
|
|
height: 60px;
|
|
|
|
}
|
|
|
|
div.ImgPrevContainer {
|
|
height: 100%;
|
|
margin-left: 100%;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
div.prevIMG {
|
|
aspect-ratio: 1;
|
|
background-position: center;
|
|
background-size: cover;
|
|
margin-right: 5px;
|
|
height: 60px;
|
|
border-radius: var(--borderRadSmall);
|
|
}
|
|
|
|
|
|
|
|
/*------------- Upload Care Widget ----------------*/
|
|
|
|
.uploadcare--widget{
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
|
|
.uploadcare--widget__button,
|
|
.uploadcare--widget__button_type_open{
|
|
height: 40px;
|
|
width: 40px;
|
|
background-image: url("../images/uploadImage.svg");
|
|
background-color: transparent;
|
|
}
|
|
|
|
.uploadcare--widget__button_type_open{
|
|
position: relative;
|
|
left: 90%;
|
|
left: calc(100% - 40px);
|
|
}
|
|
|
|
.uploadcare--progress_type_canvas{
|
|
color: var(--marine);
|
|
border-color: var(--orange);
|
|
}
|
|
|
|
.uploadcare--widget__text{
|
|
font-family: bd-supper, sans-serif;
|
|
}
|
|
|
|
.uploadcare--link, .uploadcare--widget__file-size{
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
.uploadcare--widget__button_type_cancel{
|
|
height: 40px;
|
|
width: 40px;
|
|
background-image: url("../images/cancelImage.svg");
|
|
background-color: transparent;
|
|
}
|
|
|
|
.uploadcare--widget__button_type_remove{
|
|
height: 40px;
|
|
width: 40px;
|
|
background-image: url("../images/cancelImage.svg");
|
|
background-color: transparent;
|
|
}
|
|
|
|
.uploadcare--widget__button_type_cancel:active, .uploadcare--widget__button_type_cancel:hover, .uploadcare--widget__button_type_remove:active, .uploadcare--widget__button_type_remove:hover {
|
|
background: none;
|
|
background-image: url("../images/cancel.svg");
|
|
}
|
|
|
|
.uploadcare--widget__button_type_open:active, .uploadcare--widget__button_type_open:hover {
|
|
background-image: url("../images/uploadImageHover.svg");
|
|
background-color: transparent;
|
|
|
|
}
|
|
|
|
/*----------------------------------------------------*/
|
|
/*------------------ IDEE ANZEIGEN -------------------*/
|
|
/*----------------------------------------------------*/
|
|
|
|
|
|
|
|
div.ImgContainer {
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
margin-right: 0;
|
|
height: 160px;
|
|
background-position: center;
|
|
background-size: cover;
|
|
border-radius: var(--borderRadSmall);
|
|
display: flex;
|
|
position: relative;
|
|
z-index: 12;
|
|
|
|
|
|
}
|
|
|
|
.pswp img {
|
|
max-width: none;
|
|
object-fit: contain;
|
|
}
|
|
|
|
div.ImgContainer a:first-child{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
img.thumbnail{
|
|
|
|
opacity: 0;
|
|
}
|
|
|
|
#inhaltContainer {
|
|
margin-top: 15px;
|
|
padding-bottom: 0.1px;
|
|
background-color: var(--orange);
|
|
border-radius: var(--borderRadSmall);
|
|
}
|
|
|
|
.topMargin {
|
|
margin-top: 80px !important;
|
|
}
|
|
|
|
.kommentarFormular {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 10px;
|
|
height: 80px;
|
|
}
|
|
|
|
.kommentarText {
|
|
background-color: var(--pastelorange);
|
|
width: 70%;
|
|
height: 62px;
|
|
margin: 5px 0 5px 0;
|
|
padding: 5px 8px 3px 8px;
|
|
|
|
color: var(--marine);
|
|
|
|
font-family: bd-supper, sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
|
|
|
|
|
|
}
|
|
|
|
.kommentarText::placeholder {
|
|
color: var(--marine);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
p.likeDisplay {
|
|
display: inline-block;
|
|
color: var(--marine);
|
|
|
|
font-family: bd-supper, sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
|
|
font-size: 13px;
|
|
|
|
margin: 10px 5px 5px 10px ;
|
|
|
|
}
|
|
|
|
h1.ideeTitel {
|
|
color: var(--helllachs);
|
|
font-size: 28px;
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
p.ideeAdresse{
|
|
color: white;
|
|
font-size: 9pt;
|
|
margin: 0;
|
|
font-family: bd-supper, sans-serif;
|
|
}
|
|
|
|
div.titleLocationContainer{
|
|
margin: 10px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
border-top: var(--marine);
|
|
border-bottom: var(--marine);
|
|
border-left: transparent;
|
|
border-right: transparent;
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
}
|
|
|
|
p.ideeInhalt {
|
|
margin: 20px 5px;
|
|
padding: 0 5px 0 5px;
|
|
color: var(--helllachs);
|
|
}
|
|
|
|
input.kommentarSubmit{
|
|
background-image: url("../images/absenden.svg");
|
|
border-radius: 40px;
|
|
border: none;
|
|
height: 50px;
|
|
width: 50px;
|
|
margin: 15px;
|
|
|
|
background-color: #fad8c4;
|
|
}
|
|
|
|
#kommentare_container {
|
|
background-color: var(--pastelorange);
|
|
border-radius: var(--borderRadSmall);
|
|
margin: 10px;
|
|
padding-top: 0.01px;
|
|
}
|
|
|
|
div.comment {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin: 10px;
|
|
border-bottom: var(--marine);
|
|
border-top: transparent;
|
|
border-left: transparent;
|
|
border-right: transparent;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
}
|
|
|
|
div.comment:last-child {
|
|
border-bottom: transparent;
|
|
}
|
|
|
|
div.commentRight {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
p.commentText{
|
|
font-style: italic;
|
|
font-weight: 200;
|
|
font-size: 14px;
|
|
color: var(--marine);
|
|
|
|
margin: 5px 0 10px;
|
|
|
|
padding-right: 20px;
|
|
}
|
|
|
|
p.commentLikeNumber{
|
|
font-family: bd-supper, sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 13px;
|
|
color: var(--marine);
|
|
|
|
margin: 5px 0;
|
|
|
|
padding-right: 20px;
|
|
}
|
|
|
|
img.commentLike{
|
|
width: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.herz {
|
|
float: right;
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: 10px 10px 5px 5px;
|
|
}
|
|
|
|
|
|
/*----------------------------------------------------*/
|
|
/*---------------------- OTHER -----------------------*/
|
|
/*----------------------------------------------------*/
|
|
|
|
|
|
#map {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
float: left;
|
|
}
|
|
|
|
#currentLocation {
|
|
height: 40px;
|
|
width: 40px;
|
|
z-index: 100;
|
|
}
|
|
|
|
|
|
|
|
|
|
#idee {
|
|
height: 50vh;
|
|
width: 50vh;
|
|
float: left;
|
|
}
|
|
|
|
|
|
.ideeBilder {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.image-preview ._list {
|
|
padding-top: 20px;
|
|
}
|
|
.image-preview ._item {
|
|
padding: 0 0 10px;
|
|
display: inline-block;
|
|
text-align: center;
|
|
vertical-align: top;
|
|
width: 100px;
|
|
word-break: break-word;
|
|
font-size: 12px;
|
|
line-height: normal;
|
|
}
|
|
.image-preview ._item img {
|
|
display: block;
|
|
width: 80px;
|
|
height: 80px;
|
|
padding: 0 10px 6px;
|
|
}
|
|
|
|
|
|
/*----------------------------------------------------*/
|
|
/*---------------------- ABOUT -----------------------*/
|
|
/*----------------------------------------------------*/
|
|
|
|
|
|
body.aboutInfo {
|
|
background-image: url("/images/Background2.svg");
|
|
background-size: cover;
|
|
color: var(--royalblau);
|
|
position: relative;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
div.content {
|
|
|
|
margin: 20px;
|
|
padding-bottom: 80px;
|
|
|
|
}
|
|
|
|
div.subPageHeader {
|
|
height: 130px;
|
|
}
|
|
|
|
body.aboutInfo h1 {
|
|
background-color: var(--helllachs);
|
|
color: var(--royalblau);
|
|
|
|
font-weight: 400;
|
|
font-size: 22pt;
|
|
|
|
width: fit-content;
|
|
|
|
padding: 10px 13px 6px 10px;
|
|
margin-top: 25px;
|
|
margin-bottom: 12px;
|
|
border-radius: var(--borderRadSmall);
|
|
}
|
|
|
|
div.textContainer {
|
|
background-color: var(--helllachs);
|
|
padding: 10px;
|
|
border-radius: var(--borderRadSmall);
|
|
|
|
}
|
|
|
|
.activeLink {
|
|
opacity: .6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.fixedPos {
|
|
position: fixed;
|
|
top: 7px;
|
|
}
|
|
|
|
|
|
|
|
/*------- Loading --------*/
|
|
|
|
.loadingscreen{
|
|
position: absolute;
|
|
top: 80px;
|
|
left: 43%;
|
|
z-index: 10;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: auto;
|
|
|
|
}
|
|
|
|
.loader {
|
|
border: 10px solid rgba(0,0,0,0);
|
|
border-radius: 50%;
|
|
border-top: 13px solid var(--orange);
|
|
width: 50px;
|
|
height: 50px;
|
|
animation: spinner 2s linear infinite;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes spinner {
|
|
|
|
0% { transform: rotate(0deg); }
|
|
|
|
100% { transform: rotate(360deg); }
|
|
|
|
}
|
|
|
|
|
|
|
|
/*------- DESKTOP -----------*/
|
|
|
|
@media screen and (min-width: 900px) {
|
|
div.content{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
margin: auto;
|
|
|
|
padding: 0;
|
|
min-height: 500px;
|
|
|
|
width: 70%;
|
|
background-color: var(--helllachs);
|
|
border-radius: var(--borderRadSmall);
|
|
|
|
}
|
|
|
|
div.innerContent{
|
|
display: flex;
|
|
}
|
|
|
|
article{
|
|
margin: 20px;
|
|
width: calc(50% - 40px);
|
|
background-color: none;
|
|
}
|
|
|
|
body.aboutInfo h1{
|
|
border-color: var(--royalblau);
|
|
border-radius: 100px;
|
|
padding: 2px 25px 0px;
|
|
border-style: solid;
|
|
border-width: 2px;
|
|
}
|
|
|
|
a.desktopOnly{
|
|
display: flex;
|
|
align-self: flex-end;
|
|
margin-right: 20px;
|
|
margin-bottom: 20px;
|
|
border-radius: 1000px;
|
|
padding: 10px 20px 8px;
|
|
background-color: var(--royalblau);
|
|
color: var(--helllachs);
|
|
text-decoration: none;
|
|
transition: background-color .5s;
|
|
}
|
|
|
|
a.desktopOnly:hover{
|
|
background-color: var(--marine);
|
|
transition: background-color .5s;
|
|
}
|
|
|
|
.desktopOnly p{
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
/*------- Overlay --------*/
|
|
|
|
#overlay{
|
|
bottom: 5vh;
|
|
right: 0;
|
|
border-radius: var(--borderRadLarge) 0 0 var(--borderRadLarge) ;
|
|
}
|
|
|
|
.hidden{
|
|
|
|
transform: translateX(100%);
|
|
-webkit-transform: translateX(100%);
|
|
}
|
|
|
|
.show{
|
|
|
|
transform: translateX(0);
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
|
|
|
|
} |