mirror of
https://github.com/netbymatt/ws4kp.git
synced 2026-04-18 09:39:30 -07:00
regional forecast font cleanup
This commit is contained in:
Matt Walsh
@@ -1,5 +1,5 @@
|
||||
@use 'colors'as c;
|
||||
@use 'utils'as u;
|
||||
@use 'shared/_colors'as c;
|
||||
@use 'shared/_utils'as u;
|
||||
|
||||
.weather-display .main.current-weather {
|
||||
&.main {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@use 'colors'as c;
|
||||
@use 'utils'as u;
|
||||
@use 'shared/_colors'as c;
|
||||
@use 'shared/_utils'as u;
|
||||
|
||||
#extended-forecast-html.weather-display {
|
||||
background-image: url('../images/BackGround2_1.png');
|
||||
@@ -49,10 +49,10 @@
|
||||
.temperature-block {
|
||||
display: inline-block;
|
||||
width: 44%;
|
||||
vertical-align: top;
|
||||
|
||||
>div {
|
||||
text-align: center;
|
||||
;
|
||||
}
|
||||
|
||||
.value {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@use 'colors'as c;
|
||||
@use 'utils'as u;
|
||||
@use 'shared/_colors'as c;
|
||||
@use 'shared/_utils'as u;
|
||||
|
||||
.weather-display .main.hourly {
|
||||
&.main {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@use 'colors'as c;
|
||||
@use 'utils'as u;
|
||||
@use 'shared/_colors'as c;
|
||||
@use 'shared/_utils'as u;
|
||||
|
||||
.weather-display .latest-observations {
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@use 'colors'as c;
|
||||
@use 'utils'as u;
|
||||
@use 'shared/_colors'as c;
|
||||
@use 'shared/_utils'as u;
|
||||
|
||||
.weather-display .local-forecast {
|
||||
.container {
|
||||
|
||||
365
server/styles/scss/_page.scss
Normal file
365
server/styles/scss/_page.scss
Normal file
@@ -0,0 +1,365 @@
|
||||
@font-face {
|
||||
font-family: "Star4000";
|
||||
src: url('../fonts/Star4000.woff') format('woff');
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Star4000";
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
font-family: "Star4000";
|
||||
}
|
||||
|
||||
#imgGetGps {
|
||||
height: 13px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#txtAddress {
|
||||
width: 490px;
|
||||
font-size: 16pt;
|
||||
}
|
||||
|
||||
#btnGetGps,
|
||||
#btnGetLatLng,
|
||||
#btnClearQuery {
|
||||
font-size: 16pt;
|
||||
}
|
||||
|
||||
.autocomplete-suggestions {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #000000;
|
||||
/*overflow: auto;*/
|
||||
}
|
||||
|
||||
.autocomplete-suggestion {
|
||||
/*padding: 2px 5px;*/
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 16pt;
|
||||
}
|
||||
|
||||
.autocomplete-selected {
|
||||
background-color: #0000ff;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#divTwc {
|
||||
display: block;
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
#divTwcLeft {
|
||||
display: none;
|
||||
text-align: right;
|
||||
flex-direction: column;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#divTwcLeft>div {
|
||||
flex: 1;
|
||||
padding-right: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#divTwcRight {
|
||||
text-align: left;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#divTwcRight>div {
|
||||
flex: 1;
|
||||
padding-left: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#divTwcBottom {
|
||||
/* visibility: hidden; */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#divTwcBottom>div {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
#divTwcBottomLeft {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#divTwcBottomMiddle {
|
||||
flex: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#divTwcBottomRight {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#divTwcNavContainer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#divTwcNav {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
#divTwcNav>div {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
#divTwcNavLeft {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#divTwcNavMiddle {
|
||||
flex: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#divTwcNavRight {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#imgPause1x,
|
||||
#imgPause2x {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.HideCursor {
|
||||
cursor: none !important;
|
||||
}
|
||||
|
||||
#txtScrollText {
|
||||
width: 475px;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Star4000";
|
||||
src: url('../fonts/Star4000.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Star 4 Radar";
|
||||
src: url('../fonts/Star 4 Radar.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Star4000 Extended';
|
||||
src: url('../fonts/Star4000 Extended.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Star4000LCN';
|
||||
src: url('../fonts/Star4000LCN.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Star4000 Large Compressed';
|
||||
src: url('../fonts/Star4000 Large Compressed.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Star4000 Large';
|
||||
src: url('../fonts/Star4000 Large.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Star4000 Small';
|
||||
src: url('../fonts/Star4000 Small.woff') format('woff');
|
||||
}
|
||||
|
||||
#display {
|
||||
font-family: "Star4000";
|
||||
margin: 0 0 0 0;
|
||||
/* overflow: hidden; */
|
||||
width: 100%;
|
||||
/* height: 480px; */
|
||||
/* max-width: 640px; */
|
||||
}
|
||||
|
||||
jsgif {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#Star4000 {
|
||||
font-family: 'Star4000';
|
||||
}
|
||||
|
||||
#Star4000Extended {
|
||||
font-family: 'Star4000 Extended';
|
||||
}
|
||||
|
||||
#Star4000LargeCompressed {
|
||||
font-family: 'Star4000 Large Compressed';
|
||||
}
|
||||
|
||||
#Star4000Large {
|
||||
font-family: 'Star4000 Large';
|
||||
}
|
||||
|
||||
#Star4000LargeCompressedNumbers {
|
||||
font-family: 'Star4000LCN';
|
||||
}
|
||||
|
||||
#Star4000Small {
|
||||
font-family: 'Star4000 Small';
|
||||
}
|
||||
|
||||
#Star4Radar {
|
||||
font-family: 'Star 4 Radar';
|
||||
}
|
||||
|
||||
#container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
/* max-width: 640px; */
|
||||
height: 100%;
|
||||
max-height: 480;
|
||||
background-image: url(../images/BackGround1_1.png);
|
||||
}
|
||||
|
||||
#divTwc:fullscreen #container {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
#loading {
|
||||
width: 640px;
|
||||
height: 480px;
|
||||
max-width: 100%;
|
||||
text-shadow: 4px 4px black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#loading .title {
|
||||
font-family: Star4000 Large;
|
||||
font-size: 36px;
|
||||
color: yellow;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
#loading .instructions {
|
||||
font-size: 18pt;
|
||||
}
|
||||
|
||||
#container canvas {
|
||||
/* position: absolute; */
|
||||
width: 100%;
|
||||
/* max-width: 640px; */
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-weight: bold;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#enabledDisplays {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#enabledDisplays label {
|
||||
display: block;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
#divTwcBottom img {
|
||||
zoom: 150%;
|
||||
}
|
||||
|
||||
#divTwc:fullscreen {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
#divTwc:fullscreen #display {
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#divTwc:fullscreen #divTwcBottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: rgb(0 0 0 / 0.5);
|
||||
color: #ffffff;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
@media screen and (orientation: portrait) {
|
||||
#divTwc:fullscreen canvas {
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#divTwc:fullscreen #container {
|
||||
width: 100vw;
|
||||
height: auto;
|
||||
max-height: unset;
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
#divTwc:fullscreen canvas {
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#divTwc:fullscreen #container {
|
||||
height: 100vh;
|
||||
width: auto;
|
||||
max-width: 100vw;
|
||||
max-height: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.navButton {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity 1s linear;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 0s 1s, opacity 1s linear
|
||||
}
|
||||
85
server/styles/scss/_progress.scss
Normal file
85
server/styles/scss/_progress.scss
Normal file
@@ -0,0 +1,85 @@
|
||||
@use 'shared/_colors'as c;
|
||||
@use 'shared/_utils'as u;
|
||||
|
||||
.weather-display .progress {
|
||||
@include u.text-shadow();
|
||||
font-family: 'Star4000 Extended';
|
||||
font-size: 19pt;
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
top: 15px;
|
||||
margin: 0px 10px;
|
||||
box-sizing: border-box;
|
||||
height: 280px;
|
||||
overflow: hidden;
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
|
||||
&::after {
|
||||
content: '........................................................................';
|
||||
}
|
||||
}
|
||||
|
||||
.links {
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
|
||||
>div {
|
||||
background-color: c.$blue-box;
|
||||
display: none;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
color: #ffff00;
|
||||
}
|
||||
|
||||
.press-here {
|
||||
color: #00ff00;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.failed {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
color: #C0C0C0;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: #C0C0C0;
|
||||
}
|
||||
|
||||
&.loading .loading {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.press-here .press-here {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.failed .failed {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.no-data .no-data {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.disabled .disabled {
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
@use 'colors'as c;
|
||||
@use 'utils'as u;
|
||||
@use 'shared/_colors'as c;
|
||||
@use 'shared/_utils'as u;
|
||||
|
||||
#regional-forecast-html.weather-display {
|
||||
background-image: url('../images/BackGround5_1.png');
|
||||
@@ -35,10 +35,10 @@
|
||||
}
|
||||
|
||||
.temp {
|
||||
font-family: 'Star4000 Large Compressed';
|
||||
font-family: 'Star4000 Large';
|
||||
font-size: 28px;
|
||||
color: c.$title-color;
|
||||
top: 32px;
|
||||
top: 28px;
|
||||
text-align: right;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@use 'colors'as c;
|
||||
@use 'utils'as u;
|
||||
@use 'shared/_colors'as c;
|
||||
@use 'shared/_utils'as u;
|
||||
|
||||
.weather-display {
|
||||
width: 640px;
|
||||
@@ -1,7 +0,0 @@
|
||||
@use '_weatherdisplay';
|
||||
@use '_hourly';
|
||||
@use '_current-weather';
|
||||
@use '_local-forecast';
|
||||
@use '_latest-observations';
|
||||
@use '_regional-forecast';
|
||||
@use '_extended-forecast';
|
||||
9
server/styles/scss/main.scss
Normal file
9
server/styles/scss/main.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
@import 'page';
|
||||
@import 'current-weather';
|
||||
@import 'extended-forecast';
|
||||
@import 'hourly';
|
||||
@import 'latest-observations';
|
||||
@import 'local-forecast';
|
||||
@import 'progress';
|
||||
@import 'regional-forecast';
|
||||
@import 'weather-display';
|
||||
@@ -7,4 +7,6 @@ $column-header: rgb(32, 0, 87);
|
||||
$gradient-main-background-1: #102080;
|
||||
$gradient-main-background-2: #001040;
|
||||
|
||||
$extended-low: #8080FF;
|
||||
$extended-low: #8080FF;
|
||||
|
||||
$blue-box: #26235a;
|
||||
Reference in New Issue
Block a user