65 lines
1.6 KiB
CSS
65 lines
1.6 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root, :root[data-theme="day"] {
|
|
--containerBg: rgba(255,255,255,0.5);
|
|
--textColor: #000000;
|
|
color: #000000;
|
|
--iconColor: #000000;
|
|
}
|
|
:root[data-theme="night"] {
|
|
--containerBg: rgba(20,20,20,0.8);
|
|
--textColor: #b0b0b0;
|
|
color: #b0b0b0;
|
|
--iconColor: #b0b0b0;
|
|
}
|
|
|
|
body, main {
|
|
background: #000;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
main {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"date-weather date-weather calendar"
|
|
"date-weather date-weather calendar"
|
|
"map dvb news"
|
|
"map spotify news";
|
|
grid-template-columns: 28vw auto 28vw;
|
|
grid-template-rows: 18vh 19vh 19vh 19vh;
|
|
column-gap: 3vw;
|
|
row-gap: 5vh;
|
|
padding: 5vh 3vw;
|
|
align-items: stretch;
|
|
justify-content: stretch;
|
|
max-width: 100%;
|
|
font-family: "Roboto";
|
|
transition: background-image 1s linear;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
}
|
|
|
|
:root[data-theme="night"] main {
|
|
background-image: url("../images/custom/bg/3.jpg") !important;
|
|
}
|
|
|
|
:root[data-theme="day"] .radar {display: block;}
|
|
:root[data-theme="night"] .radar {display: none;}
|
|
:root[data-theme="day"] .radarNight {display: none;}
|
|
:root[data-theme="night"] .radarNight {display: block;}
|
|
|
|
.container {
|
|
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
|
|
border-radius: 10px;
|
|
background: var(--containerBg);
|
|
backdrop-filter: blur(5px);
|
|
padding:10px;
|
|
overflow:hidden;
|
|
} |