prepare intranet for first Dokploy deployment
This commit is contained in:
@@ -0,0 +1,340 @@
|
||||
/* Gesamtes Seiten-Layout */
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: 'SUSE', sans-serif;
|
||||
font-size: 20px;
|
||||
background-image: url('cloudy.jpg');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Content Board Layout */
|
||||
.content-board {
|
||||
background-color: #a8a6a7a7;
|
||||
width: 99%;
|
||||
height: 97%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
border-radius: 0;
|
||||
padding: 0 6px 7px 3px;
|
||||
}
|
||||
|
||||
.content-column-left {
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content-column-right {
|
||||
width: 58%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.temperature {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 5px 0 0 0;
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.verse {
|
||||
text-align: justify;
|
||||
color: rgb(67, 67, 67);
|
||||
padding: 5px 15px 5px 15px;
|
||||
}
|
||||
|
||||
.date {
|
||||
color: rgb(67, 67, 67);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content-column-right-upper-box-left {
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content-column-right-upper-box-right {
|
||||
width: 39%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content-column-right-upper-box {
|
||||
width: 100%;
|
||||
height: 51%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content-item-time {
|
||||
border-radius: 0;
|
||||
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.16);
|
||||
background-color: #ffffffab;
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
margin: 15px 0 15px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content-item-news {
|
||||
border-radius: 0;
|
||||
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.16);
|
||||
background-color: #ffffffab;
|
||||
width: 100%;
|
||||
height: 63%;
|
||||
margin: 15px 0 15px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content-item-video {
|
||||
border-radius: 0;
|
||||
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.16);
|
||||
background-color: #cbc5bc;
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
margin: 15px 0 15px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content-item-middle-top {
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.16);
|
||||
background-color: #cbc5bc;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
margin: 15px 0 15px 0;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Pseudoelement für den animierten border-bottom Effekt */
|
||||
.content-item-middle-top::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
background: linear-gradient(to bottom, transparent, #cbc5bc);
|
||||
}
|
||||
|
||||
/* Monatsplan: jetzt mit weißem Hintergrund */
|
||||
.content-item-month {
|
||||
border-radius: 0;
|
||||
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.16);
|
||||
background-color: #cbc5bc7d;
|
||||
width: 100%;
|
||||
height: 56%;
|
||||
margin: 15px 0 15px 0;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
.content-item-month-cell {
|
||||
display: flex;
|
||||
background-color: #ffffffe5;
|
||||
justify-content: center; /* Zentriere die Bilder horizontal */
|
||||
height: 94%;
|
||||
align-items: center; /* Zentriere die Bilder vertikal */
|
||||
}
|
||||
|
||||
.content-item-month-cell img {
|
||||
max-width: 100%; /* Verhindert, dass das Bild größer als der Container wird */
|
||||
max-height: 100%; /* Verhindert Verzerrungen, indem es die maximale Höhe auf die Containerhöhe beschränkt */
|
||||
object-fit: contain; /* Stellt sicher, dass das Bild im Container bleibt, ohne gestreckt zu werden */
|
||||
}
|
||||
|
||||
.content-item-daily {
|
||||
border-radius: 0;
|
||||
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.16);
|
||||
background-color: #edebe8;
|
||||
width: 100%;
|
||||
height: 63%;
|
||||
margin: 15px 0 15px 0;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header-sticky-note {
|
||||
font-size: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
padding: 5px 0 15px 0;
|
||||
border-bottom: 2px solid #38312430;
|
||||
background-color: #cbc5bc;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 80px;
|
||||
text-align: center;
|
||||
padding: 8px 0 0 0;
|
||||
}
|
||||
|
||||
.bible {
|
||||
text-align: center;
|
||||
font-size: 60px;
|
||||
padding: 10px 0 10px 0;
|
||||
border-bottom: 2px solid #38312456;
|
||||
background-color: #edebe8;
|
||||
}
|
||||
|
||||
.GB {
|
||||
text-align: center;
|
||||
font-size: 60px;
|
||||
padding: 5px 0 0 0;
|
||||
}
|
||||
|
||||
.GB-title {
|
||||
text-align: center;
|
||||
color: rgb(67, 67, 67);
|
||||
}
|
||||
|
||||
.content-column-double-item {
|
||||
width: 100%;
|
||||
height: 33%;
|
||||
margin: 15px 0 15px 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Elemente innerhalb des Content Boards */
|
||||
.content-item {
|
||||
border-radius: 0;
|
||||
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.16);
|
||||
background-color: #edebe8;
|
||||
height: 100%;
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.content-item-bottom-box {
|
||||
border-radius: 0;
|
||||
box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.16);
|
||||
background-color: #edebe8;
|
||||
margin: 6px 0 0 0;
|
||||
height: 47.5%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border: 5px solid #cbc5bc;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.video-container video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: scale(1.2);
|
||||
object-fit: cover;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40%;
|
||||
background-color: #38312431;
|
||||
border-radius: 0;
|
||||
border: 2px solid #38312440;
|
||||
}
|
||||
|
||||
.text-outdoor {
|
||||
font-weight: bold;
|
||||
padding: 9px 0 0 0;
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
|
||||
.text-indoor {
|
||||
font-weight: bold;
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
|
||||
.news-box {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 5px 15px 5px 15px;
|
||||
border-bottom: 2px solid #38312456;
|
||||
background-color: #edebe8;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.news-date {
|
||||
font-weight: bold;
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
|
||||
.news-subtitle {
|
||||
color: rgba(67, 67, 67, 0.657);
|
||||
}
|
||||
|
||||
.news-container {
|
||||
height: 290px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.news-scroll {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation-name: scroll-v;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
--scroll-distance-v: 0px;
|
||||
}
|
||||
@keyframes scroll-v {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(var(--scroll-distance-v)); }
|
||||
}
|
||||
|
||||
.aushang-flex img {
|
||||
border-radius: 0;
|
||||
margin: 0 10px 0 0;
|
||||
border: 2px solid #38312440;
|
||||
box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.aushang-flex {
|
||||
padding: 0 5px 0 5px;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
height: 90.5%;
|
||||
border-radius: 0;
|
||||
|
||||
animation-name: scroll-h;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
--scroll-distance-h: 0px;
|
||||
}
|
||||
@keyframes scroll-h {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(var(--scroll-distance-h)); }
|
||||
}
|
||||
Reference in New Issue
Block a user