|
|
|
|
@@ -4,6 +4,8 @@
|
|
|
|
|
--news-ticker-width: min(calc(820px * var(--hud-scale)), 58vw);
|
|
|
|
|
--news-ticker-edge-fade: calc(96px * var(--hud-scale));
|
|
|
|
|
--news-ticker-rule-color: var(--hud-border);
|
|
|
|
|
--news-ticker-line-color: var(--news-ticker-rule-color);
|
|
|
|
|
--news-ticker-hover-rule-color: rgba(214, 235, 255, 0.88);
|
|
|
|
|
--news-breaking-color: rgba(255, 166, 102, 0.46);
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: calc(var(--hud-offset) + calc(2px * var(--hud-scale)));
|
|
|
|
|
@@ -42,8 +44,8 @@
|
|
|
|
|
z-index: -1;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
background:
|
|
|
|
|
linear-gradient(90deg, transparent, var(--news-ticker-rule-color) var(--news-ticker-edge-fade), var(--news-ticker-rule-color) calc(100% - var(--news-ticker-edge-fade)), transparent) top / 100% 1px no-repeat,
|
|
|
|
|
linear-gradient(90deg, transparent, var(--news-ticker-rule-color) var(--news-ticker-edge-fade), var(--news-ticker-rule-color) calc(100% - var(--news-ticker-edge-fade)), transparent) bottom / 100% 1px no-repeat,
|
|
|
|
|
linear-gradient(90deg, transparent, var(--news-ticker-line-color) var(--news-ticker-edge-fade), var(--news-ticker-line-color) calc(100% - var(--news-ticker-edge-fade)), transparent) top / 100% 1px no-repeat,
|
|
|
|
|
linear-gradient(90deg, transparent, var(--news-ticker-line-color) var(--news-ticker-edge-fade), var(--news-ticker-line-color) calc(100% - var(--news-ticker-edge-fade)), transparent) bottom / 100% 1px no-repeat,
|
|
|
|
|
linear-gradient(90deg, rgba(17, 31, 53, 0), rgba(17, 31, 53, 0.84) var(--news-ticker-edge-fade), rgba(7, 17, 31, 0.84) calc(100% - var(--news-ticker-edge-fade)), rgba(7, 17, 31, 0));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@@ -94,6 +96,23 @@
|
|
|
|
|
--news-ticker-rule-color: var(--news-breaking-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.earth-news-ticker.has-breaking-watch {
|
|
|
|
|
--news-ticker-hover-rule-color: rgba(255, 225, 154, 0.9);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.earth-news-ticker.has-breaking-breaking {
|
|
|
|
|
--news-ticker-hover-rule-color: rgba(255, 191, 133, 0.9);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.earth-news-ticker.has-breaking-critical {
|
|
|
|
|
--news-ticker-hover-rule-color: rgba(255, 145, 145, 0.92);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.earth-news-ticker:hover,
|
|
|
|
|
.earth-news-ticker:focus-visible {
|
|
|
|
|
--news-ticker-line-color: var(--news-ticker-hover-rule-color);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.earth-news-ticker__region {
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 3;
|
|
|
|
|
@@ -537,7 +556,7 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.news-story-card {
|
|
|
|
|
--news-hover-tint: rgba(214, 235, 255, 0.16);
|
|
|
|
|
--news-hover-color: rgb(214 235 255);
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
@@ -567,12 +586,12 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.news-story-card:hover {
|
|
|
|
|
border-color: color-mix(in srgb, var(--news-hover-tint) 76%, rgba(214, 235, 255, 0.16));
|
|
|
|
|
border-color: color-mix(in srgb, var(--news-hover-color) 64%, transparent);
|
|
|
|
|
background:
|
|
|
|
|
linear-gradient(
|
|
|
|
|
180deg,
|
|
|
|
|
color-mix(in srgb, var(--news-hover-tint) 30%, rgba(255, 255, 255, 0.05)),
|
|
|
|
|
color-mix(in srgb, var(--news-hover-tint) 24%, rgba(92, 151, 218, 0.03))
|
|
|
|
|
color-mix(in srgb, var(--news-hover-color) 18%, rgba(255, 255, 255, 0.05)),
|
|
|
|
|
color-mix(in srgb, var(--news-hover-color) 14%, rgba(92, 151, 218, 0.03))
|
|
|
|
|
);
|
|
|
|
|
transform: translateY(-1px);
|
|
|
|
|
}
|
|
|
|
|
@@ -593,7 +612,7 @@
|
|
|
|
|
|
|
|
|
|
.news-story-card--breaking-watch {
|
|
|
|
|
--news-breaking-color: rgba(255, 213, 128, 0.42);
|
|
|
|
|
--news-hover-tint: var(--news-breaking-color);
|
|
|
|
|
--news-hover-color: rgb(255 213 128);
|
|
|
|
|
border-color: var(--news-breaking-color);
|
|
|
|
|
background:
|
|
|
|
|
linear-gradient(180deg, rgba(255, 248, 220, 0.08), rgba(255, 184, 77, 0.05));
|
|
|
|
|
@@ -601,7 +620,7 @@
|
|
|
|
|
|
|
|
|
|
.news-story-card--breaking-breaking {
|
|
|
|
|
--news-breaking-color: rgba(255, 151, 78, 0.5);
|
|
|
|
|
--news-hover-tint: var(--news-breaking-color);
|
|
|
|
|
--news-hover-color: rgb(255 151 78);
|
|
|
|
|
border-color: var(--news-breaking-color);
|
|
|
|
|
background:
|
|
|
|
|
linear-gradient(180deg, rgba(255, 205, 150, 0.1), rgba(255, 135, 80, 0.07));
|
|
|
|
|
@@ -609,7 +628,7 @@
|
|
|
|
|
|
|
|
|
|
.news-story-card--breaking-critical {
|
|
|
|
|
--news-breaking-color: rgba(255, 95, 95, 0.56);
|
|
|
|
|
--news-hover-tint: var(--news-breaking-color);
|
|
|
|
|
--news-hover-color: rgb(255 95 95);
|
|
|
|
|
border-color: var(--news-breaking-color);
|
|
|
|
|
background:
|
|
|
|
|
linear-gradient(180deg, rgba(255, 155, 155, 0.11), rgba(205, 58, 58, 0.08));
|
|
|
|
|
|