mirror of
https://github.com/netbymatt/ws4kp.git
synced 2026-04-14 15:49:31 -07:00
css constants cleanup
This commit is contained in:
@@ -1,5 +1,6 @@
|
|||||||
@use 'shared/_colors'as c;
|
@use 'shared/_colors'as c;
|
||||||
@use 'shared/_utils'as u;
|
@use 'shared/_utils'as u;
|
||||||
|
@use 'shared/positions'as p;
|
||||||
|
|
||||||
#hazards-html.weather-display {
|
#hazards-html.weather-display {
|
||||||
background-image: url('../images/backgrounds/7.png');
|
background-image: url('../images/backgrounds/7.png');
|
||||||
@@ -8,7 +9,7 @@
|
|||||||
.weather-display .main.hazards {
|
.weather-display .main.hazards {
|
||||||
&.main {
|
&.main {
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
height: 480px;
|
height: p.$standard-height;
|
||||||
background-color: rgb(112, 35, 35);
|
background-color: rgb(112, 35, 35);
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -34,7 +34,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#divQuery {
|
#divQuery {
|
||||||
max-width: 640px;
|
max-width: p.$standard-width;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
|
|
||||||
.buttons {
|
.buttons {
|
||||||
@@ -147,11 +147,11 @@ body {
|
|||||||
background-color: #000000;
|
background-color: #000000;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 640px;
|
max-width: p.$standard-width;
|
||||||
margin: 0; // Ensure edge-to-edge display
|
margin: 0; // Ensure edge-to-edge display
|
||||||
|
|
||||||
&.wide {
|
&.wide {
|
||||||
max-width: 854px;
|
max-width: p.$wide-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -160,12 +160,12 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#divTwcMain {
|
#divTwcMain {
|
||||||
width: 640px;
|
width: p.$standard-width;
|
||||||
height: 480px;
|
height: p.$standard-height;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.wide & {
|
.wide & {
|
||||||
width: 854px;
|
width: p.$wide-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -210,10 +210,10 @@ body {
|
|||||||
background-color: #000000;
|
background-color: #000000;
|
||||||
|
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
width: 640px;
|
width: p.$standard-width;
|
||||||
|
|
||||||
.wide & {
|
.wide & {
|
||||||
width: 854px;
|
width: p.$wide-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
@@ -275,7 +275,7 @@ body {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
background-color: #000000;
|
background-color: #000000;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
max-width: 640px;
|
max-width: p.$standard-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
#divTwcNav>div {
|
#divTwcNav>div {
|
||||||
@@ -337,8 +337,8 @@ body {
|
|||||||
|
|
||||||
#container {
|
#container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 640px;
|
width: p.$standard-width;
|
||||||
height: 480px;
|
height: p.$standard-height;
|
||||||
// overflow: hidden;
|
// overflow: hidden;
|
||||||
background-image: url(../images/backgrounds/1.png);
|
background-image: url(../images/backgrounds/1.png);
|
||||||
transform-origin: 0 0;
|
transform-origin: 0 0;
|
||||||
@@ -359,8 +359,8 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#loading {
|
#loading {
|
||||||
width: 640px;
|
width: p.$standard-width;
|
||||||
height: 480px;
|
height: p.$standard-height;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
text-shadow: 4px 4px black;
|
text-shadow: 4px 4px black;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
top: 15px;
|
top: 15px;
|
||||||
margin: 0px 10px;
|
margin: 0px 10px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: 310px;
|
height: p.$standard-scroll-height;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
|
|
||||||
|
|||||||
@@ -122,7 +122,7 @@
|
|||||||
&.has-scroll {
|
&.has-scroll {
|
||||||
width: p.$standard-width;
|
width: p.$standard-width;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
height: 310px;
|
height: p.$standard-scroll-height;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
&.no-header {
|
&.no-header {
|
||||||
@@ -132,8 +132,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.has-box {
|
&.has-box {
|
||||||
margin-left: 64px;
|
margin-left: p.$blue-box-margin;
|
||||||
margin-right: 64px;
|
margin-right: p.$blue-box-margin;
|
||||||
width: calc(100% - 128px);
|
width: calc(100% - 128px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -198,7 +198,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.wide #container>.scroll {
|
.wide #container>.scroll {
|
||||||
width: 854px;
|
width: p.$wide-width;
|
||||||
margin-left: -1*p.$wide-margin;
|
margin-left: -1*p.$wide-margin;
|
||||||
|
|
||||||
.scroll-container {
|
.scroll-container {
|
||||||
|
|||||||
@@ -2,6 +2,9 @@
|
|||||||
$standard-width: 640px;
|
$standard-width: 640px;
|
||||||
$standard-height: 480px;
|
$standard-height: 480px;
|
||||||
|
|
||||||
|
// height with scroll
|
||||||
|
$standard-scroll-height: 310px;
|
||||||
|
|
||||||
// blue box size
|
// blue box size
|
||||||
$blue-box-margin: 64px;
|
$blue-box-margin: 64px;
|
||||||
|
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user