114 lines
1.6 KiB
SCSS
114 lines
1.6 KiB
SCSS
@use 'shared/_colors'as c;
|
|
@use 'shared/_utils'as u;
|
|
|
|
#radar-html.weather-display {
|
|
background-image: url('../images/BackGround4_1.png');
|
|
|
|
.header {
|
|
height: 83px;
|
|
|
|
.title.dual {
|
|
color: white;
|
|
font-family: 'Arial', sans-serif;
|
|
font-weight: bold;
|
|
font-size: 28pt;
|
|
left: 155px;
|
|
|
|
.top {
|
|
top: -4px;
|
|
}
|
|
|
|
.bottom {
|
|
top: 31px;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
position: absolute;
|
|
right: 0px;
|
|
width: 360px;
|
|
margin-top: 2px;
|
|
font-family: 'Star4000';
|
|
font-size: 18pt;
|
|
font-weight: bold;
|
|
@include u.text-shadow();
|
|
text-align: center;
|
|
|
|
.scale>div {
|
|
display: inline-block;
|
|
}
|
|
|
|
.scale-table {
|
|
display: table-row;
|
|
border-collapse: collapse;
|
|
|
|
.box {
|
|
display: table-cell;
|
|
border: 2px solid black;
|
|
width: 17px;
|
|
height: 24px;
|
|
padding: 0
|
|
}
|
|
|
|
.box-1 {
|
|
background-color: rgb(49, 210, 22);
|
|
}
|
|
|
|
.box-2 {
|
|
background-color: rgb(28, 138, 18);
|
|
}
|
|
|
|
.box-3 {
|
|
background-color: rgb(20, 90, 15);
|
|
}
|
|
|
|
.box-4 {
|
|
background-color: rgb(10, 40, 10);
|
|
}
|
|
|
|
.box-5 {
|
|
background-color: rgb(196, 179, 70);
|
|
}
|
|
|
|
.box-6 {
|
|
background-color: rgb(190, 72, 19);
|
|
}
|
|
|
|
.box-7 {
|
|
background-color: rgb(171, 14, 14);
|
|
}
|
|
|
|
.box-8 {
|
|
background-color: rgb(115, 31, 4);
|
|
}
|
|
}
|
|
|
|
.scale {
|
|
.text {
|
|
position: relative;
|
|
top: -5px;
|
|
}
|
|
}
|
|
|
|
.time {
|
|
position: relative;
|
|
font-weight: normal;
|
|
top: -14px;
|
|
font-family: 'Star4000 Small';
|
|
font-size: 24pt;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.weather-display .main.radar {
|
|
overflow: hidden;
|
|
height: 367px;
|
|
|
|
.container {
|
|
|
|
.scroll-area {
|
|
position: relative;
|
|
}
|
|
}
|
|
} |