ws4kp/server/styles/scss/_weather-display.scss

127 lines
1.7 KiB
SCSS
Raw Normal View History

2022-08-05 19:03:14 +00:00
@use 'shared/_colors'as c;
@use 'shared/_utils'as u;
2022-07-29 21:12:42 +00:00
.weather-display {
width: 640px;
height: 480px;
overflow: hidden;
position: relative;
background-image: url(../images/BackGround1_1.png);
2022-08-04 16:07:35 +00:00
/* this method is required to hide blocks so they can be measured while off screen */
height: 0px;
2022-07-29 21:12:42 +00:00
&.show {
2022-08-04 16:07:35 +00:00
height: 480px;
2022-07-29 21:12:42 +00:00
}
.template {
display: none;
}
.header {
width: 640px;
height: 60px;
padding-top: 30px;
.title {
color: c.$title-color;
@include u.text-shadow(3px, 1.5px);
font-family: 'Star4000';
font-size: 24pt;
position: absolute;
2022-08-05 01:50:14 +00:00
width: 250px;
2022-07-29 21:12:42 +00:00
&.single {
left: 170px;
top: 25px;
}
&.dual {
left: 170px;
&>div {
position: absolute;
}
.top {
top: -3px;
}
.bottom {
top: 26px;
}
}
}
2022-07-29 21:12:42 +00:00
.logo {
top: 30px;
left: 50px;
position: absolute;
z-index: 10;
}
2022-07-29 21:12:42 +00:00
.noaa-logo {
position: absolute;
top: 39px;
left: 356px;
}
.title.single {
top: 40px;
}
.date-time {
white-space: pre;
color: c.$date-time;
font-family: 'Star4000 Small';
font-size: 24pt;
@include u.text-shadow(3px, 1.5px);
left: 415px;
width: 170px;
text-align: right;
position: absolute;
&.date {
padding-top: 22px;
}
}
}
.main {
position: relative;
2022-07-29 21:12:42 +00:00
&.has-scroll {
width: 640px;
height: 310px;
overflow: hidden;
2022-12-14 22:28:33 +00:00
&.no-header {
height: 400px;
}
2022-07-29 21:12:42 +00:00
}
&.has-box {
margin-left: 64px;
margin-right: 64px;
width: calc(100% - 128px);
}
2022-08-04 17:49:04 +00:00
2022-07-29 21:12:42 +00:00
}
.scroll {
2022-08-04 18:49:53 +00:00
@include u.text-shadow(3px, 1.5px);
2022-07-29 21:12:42 +00:00
width: 640px;
2022-08-05 20:40:53 +00:00
height: 70px;
2022-07-29 21:12:42 +00:00
overflow: hidden;
margin-top: 10px;
2022-08-04 18:49:53 +00:00
.fixed {
font-family: 'Star4000';
font-size: 24pt;
margin-left: 55px;
}
2022-07-29 21:12:42 +00:00
}
}