Skip to content

Css color consistency #1431

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Arnei wants to merge 13 commits into
base: develop
Choose a base branch
from
Open

Css color consistency #1431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
15fd335
Align dropdown colors
Arnei Aug 15, 2025
05edee1
Adjust header and button colors
Arnei Aug 15, 2025
9e12f1b
Adjust published cell
Arnei Sep 2, 2025
66ede6c
Progress bar leftover colors
Arnei Sep 2, 2025
3952dd8
Remove unused css from wizard stepper
Arnei Sep 2, 2025
58da7be
Turn "OK" button colors to variables
Arnei Sep 2, 2025
90d84e5
Normalize table border colors
Arnei Sep 2, 2025
6cb7168
Normalize various table colors
Arnei Sep 2, 2025
58f6e42
Normalize statistics dropdown colors
Arnei Sep 2, 2025
80bb941
Normalize colors in various modals
Arnei Sep 2, 2025
a6fb6e1
Fix chevron color
Arnei Sep 8, 2025
968a2af
Merge branch 'css-more-cleanup' into css-color-consistency
Arnei Sep 16, 2025
ea1a238
Merge remote-tracking branch 'upstream/develop' into css-color-consis…
Arnei Nov 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/components/events/partials/PublishedCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ const PublishCell = ({
return (
<>
{ publications.length > 0 &&
<div className="popover-wrapper">
<>
{onlyEngage && (
// <Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.PLAYER")}> // Disabled due to performance concerns
<a className="crosslink" href={publications[0].url} rel="noreferrer" target="_blank">
Expand All @@ -88,7 +88,7 @@ const PublishCell = ({
)}
{!onlyEngage &&
<>
<ButtonLikeAnchor className="popover-wrapper__trigger">
<ButtonLikeAnchor className="crosslink">
<span onClick={() => setShowPopup(!showPopup)}>{t("YES")}</span>
</ButtonLikeAnchor>
{showPopup && (
Expand Down Expand Up @@ -123,7 +123,7 @@ const PublishCell = ({
)}
</>
}
</div>
</>
}
</>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/shared/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ const TableHeadRows = ({ forceDeselectAll }: { forceDeselectAll: () => unknown }
className={cn("chevron-up", { active: reverse === "ASC" && column.name === sortBy })}
/>
<LuChevronDown
className={cn("chevron-down", { active: reverse === "ASC" && column.name === sortBy })}
className={cn("chevron-down", { active: reverse === "DESC" && column.name === sortBy })}
/>
</div>
</span>
Expand Down
21 changes: 11 additions & 10 deletions src/styles/base/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ $off-white: $primary-color-white;

$bright-blue: #4da1f7;
$ref-blue: #1d5888;
$ref-blue-button: #069;
$red: #fa1919;
$alt-red: #e45253;
$orange: #ff8c00;
Expand All @@ -65,25 +66,24 @@ $color-silver: #CCC;
$color-lightgray: #F8F8F8;
$color-white: #fff;

$l-blue-gradient: #2b77b9;
$b-blue-gradient: #55cef2;



// Primary color with light/medium/darker shades
$prim-color: color.adjust(#fff, $lightness: -50%);
$light-prim-color: color.adjust($prim-color, $lightness: 15%);
$medium-prim-color: color.adjust($prim-color, $lightness: -10%);
$dark-prim-color: color.adjust($prim-color, $lightness: -30%);
$light-prim-color: color.adjust($prim-color, $lightness: 15%); //#a6a6a6
$medium-prim-color: color.adjust($prim-color, $lightness: -10%); //#666666
$dark-prim-color: color.adjust($prim-color, $lightness: -30%); //#333333

$global-text-color: $medium-prim-color;

// Alpha Channel
$light-black-alpha: rgba($black, 0.04);



// Element Colors
// ----------------------------------------

$body-background: $off-white;
$table-title-color: #46647e;
$header-link-color: #435263;
$color-link: $medium-prim-color;
$color-link-hover: $dark-prim-color;
Expand All @@ -105,6 +105,7 @@ $table-highlight: color.adjust($light-prim-color, $lightness: 28%);

$main-border-color: #c9d0d3;
$light-border-color: #cfd3d5;
$lighter-border-color: #e2e2e2;
$main-border-radius: 4px;
$thin-border: 1px;
$thin-border-stroke: $thin-border solid;
Expand Down Expand Up @@ -147,8 +148,8 @@ $modal-nav-bg-color: #eeeff0;
$modal-nav-border-color: #d6d6d6;
$modal-nav-link-color: #646E75;
$modal-nav-link-active-color: $header-link-color;
$subpage-navigation-link-color: color.adjust($header-link-color, $lightness: 25%);
$subpage-navigation-link-hover-color: color.adjust($header-link-color, $lightness: 35%);
$subpage-navigation-link-color: color.adjust($header-link-color, $lightness: 25%); //#fafafa
$subpage-navigation-link-hover-color: color.adjust($header-link-color, $lightness: 35%); //#9cabbc

// Stats
// ----------------------------------------
Expand Down
28 changes: 2 additions & 26 deletions src/styles/components/_dropdowns.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,8 +99,8 @@
line-height: 20px;

&:hover, &:focus {
color: variables.$global-text-color;
background: #f2f2f2;
color: variables.$off-white;
background: variables.$bright-blue;
}

&.more-link {
Expand Down Expand Up @@ -155,21 +155,12 @@
z-index: variables.$max-z + 10;

> li {
text-decoration: none;
text-shadow: 0 1px 0 variables.$white;
color: variables.$medium-prim-color;
font-size: 12px;
line-height: 20px;
font-weight: 600;
cursor: default;
display: block;
position: relative;
transition: all 200ms;

span {
padding: 3px 15px 3px 45px;
display: block;
}

span > span {
display: block;
Expand All @@ -181,21 +172,6 @@
button {
display: block;
padding: 4px 15px;

&:hover, &:focus {
color: variables.$global-text-color;
background: #f2f2f2;
}

&.more-link {
text-align: center;
color: variables.$l-blue;
}
}

&:last-child a {
border-bottom-left-radius: variables.$main-border-radius;
border-bottom-right-radius: variables.$main-border-radius;
}
}
}
Expand Down
12 changes: 6 additions & 6 deletions src/styles/components/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@
height: $height;
box-shadow: 0 1px 3px 1px rgba(variables.$black, 0.3);
position: relative;
border-bottom: 1px solid #1d3041;
background: linear-gradient(to bottom, #388ed6, #2075b1);
border-bottom: 1px solid color.adjust(variables.$d-blue, $lightness: -5%); //1d3041;
background: linear-gradient(to bottom, variables.$l-blue, color.adjust(variables.$l-blue, $lightness: -9%)); //2075b1

.header-branding {
float: left;
Expand Down Expand Up @@ -220,10 +220,10 @@
.menu-top {
width: 80px;
height: 42px;
background: #243e55;
background: color.adjust(variables.$d-blue, $lightness: -3%);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: variables.$thin-border-stroke color.adjust(#1e364b, $lightness: -3%);
border: variables.$thin-border-stroke color.adjust(variables.$d-blue, $lightness: -12%);
border-bottom: none;
margin: 0 variables.$side-margin;
position: relative;
Expand All @@ -232,13 +232,13 @@
width: 100%;
height: 100%;
font-size: 22px;
color: #9badbb;
color: variables.$color-silver; //9badbb;
display: flex;
align-items: center;
justify-content: center;

&:hover {
color: #b9c6d0;
color: variables.$off-white; //b9c6d0;
}
}
}
Expand Down
49 changes: 0 additions & 49 deletions src/styles/components/_inputs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,55 +94,6 @@ select[multiple] {
}
}

// Input made by Joshua Hibbert | http://codepen.io/joshnh/pen/hjbuH
input[type="checkbox"].ios,
input[type="radio"].ios {

$white: variables.$white;
$grey: #d3d3d3;
$transition-duration: 250ms;

background-color: color.adjust($white, $lightness: -2%);
border: 1px solid $grey;
border-radius: 26px;
box-shadow: inset 0 0 0 1px $grey;
cursor: pointer;
height: 28px;
position: relative;
transition: border $transition-duration 150ms, box-shadow $transition-duration 300ms, padding $transition-duration;
width: 44px;
vertical-align: top;

&:after {
background-color: $white;
border: 1px solid $grey;
border-radius: 24px;
box-shadow: inset 0 -3px 3px hsla(0, 0%, 0%, 0.025), 0 1px 4px hsla(0, 0%, 0%, 0.15), 0 4px 4px hsla(0, 0%, 0%, 0.1);
content: '';
display: block;
height: 24px;
left: 0;
position: absolute;
right: 16px;
top: 0;
transition: border 250ms 150ms, left 250ms 100ms, right 150ms 175ms;
}

&:checked {
border-color: variables.$green;
box-shadow: inset 0 0 0 13px variables.$green;
padding-left: 18px;
transition: border 250ms, box-shadow 250ms, padding 250ms 150ms;

&:after {
border-color: variables.$green;
left: 16px;
right: 0;
transition: border 250ms, left 150ms 250ms, right 250ms 175ms;
}
}
}

.search-container {
width: 100% !important;
height: 40px;
Expand Down
4 changes: 2 additions & 2 deletions src/styles/components/_menu-dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@
$point-position-from-right: 10px;

// Link Properties (List Items)
$link-hover-color: rgba(variables.$black, 0.05);
$link-padding: 8px 15px;
$link-transition-property: background, color;
$link-transition-duration: 250ms;
Expand Down Expand Up @@ -68,7 +67,8 @@
text-align: left;

&:hover, &:focus {
background: $link-hover-color;
color: variables.$off-white;
background: variables.$bright-blue;
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/styles/components/_menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
float: left;
width: 80px;
background: variables.$white;
border: variables.$thin-border-stroke #c3cbd0;
border: variables.$thin-border-stroke variables.$color-silver;
border-top: none;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
Expand Down Expand Up @@ -64,7 +64,7 @@
font-size: 29px;
vertical-align: middle;
transition: all .2s;
color: #818181;
color: variables.$color-gray;
}

&:hover > .main-nav-icon,
Expand Down
4 changes: 2 additions & 2 deletions src/styles/components/_multi-value.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@
}

&-green {
background: #4bcc8f;
background: variables.$primary-color-green-light-1;
}

&-red {
background: #ff0000;
background: variables.$red;
}
}
59 changes: 1 addition & 58 deletions src/styles/components/_popover.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,14 @@
@use "../base/variables";

// controlling element of the popover
.popover-wrapper {
position: relative;
}

.popover-wrapper__trigger {
color: #4D687E;

&:hover {
text-decoration: underline;
}
}

.popover {
position: absolute;
width: 250px;
background: #efefef;
background: variables.$table-highlight;
border-radius: variables.$main-border-radius;
border: variables.$thin-border-stroke variables.$main-border-color;
z-index: 1;
}

.popover.popover-right {
&:after {
right: 100%;
top: 2px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-right-color: variables.$main-border-color;
border-width: 10px;
margin-top: 0;
}
}
@mixin popover-arrow() {
top: 0;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-width: 10px;
}

.popover.popover-left {
&:after {
@include popover-arrow();
border-left-color: variables.$main-border-color;
left: 100%;
}
}

.popover.popover-right {
&:after {
@include popover-arrow();
right: 100%;
border-right-color: variables.$main-border-color;
}
}

.popover__header {
background: variables.$main-border-color;
height: 26px;
Expand Down
Loading