mirror of
https://github.com/fleetdm/fleet
synced 2026-04-21 13:37:30 +00:00
Fleet UI: Dark mode tweaks 1 (#43422)
This commit is contained in:
RachelElysia
GitHub
parent
f091018166
commit
49b1b6194f
8 changed files with 60 additions and 106 deletions
|
|
@ -43,18 +43,24 @@
|
|||
&--tooltip-link,
|
||||
&--flash-message-link {
|
||||
font-size: inherit; // Overrides link default font size with parent tooltip font size
|
||||
@include animated-bottom-border($core-fleet-white, $ui-off-white);
|
||||
// Use static (non-themed) colors so the underline and icon stay light on
|
||||
// the always-dark tooltip/flash background regardless of light/dark mode.
|
||||
@include animated-bottom-border($static-white, rgba($static-white, 0.4));
|
||||
|
||||
.external-link-icon__outline {
|
||||
stroke: $core-fleet-white;
|
||||
stroke: $static-white;
|
||||
}
|
||||
|
||||
.external-link-icon__arrow {
|
||||
stroke: $static-white;
|
||||
}
|
||||
|
||||
// Inverse hover over effect
|
||||
&:hover {
|
||||
color: $ui-off-white;
|
||||
color: rgba($static-white, 0.7);
|
||||
|
||||
.external-link-icon__outline {
|
||||
fill: $ui-off-white;
|
||||
fill: rgba($static-white, 0.7);
|
||||
}
|
||||
|
||||
.external-link-icon__arrow {
|
||||
|
|
|
|||
|
|
@ -1,25 +1,25 @@
|
|||
.ace_editor.ace-fleet {
|
||||
font-family: "SourceCodePro", monospace;
|
||||
font-size: 14px;
|
||||
background-color: #fafafa;
|
||||
background-color: var(--ui-light-grey);
|
||||
color: #66696f;
|
||||
border-radius: 4px;
|
||||
border: solid 1px #dbe3e5;
|
||||
border: solid 1px var(--ui-blue-gray);
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.ace_editor.ace-fleet:hover {
|
||||
border: 1px solid #8b8fa2; /* $ui-fleet-black-50 */
|
||||
border: 1px solid var(--ui-fleet-black-50);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ace_editor.ace-fleet.ace_focus {
|
||||
border: 1px solid #192147; /* $core-fleet-black */
|
||||
border: 1px solid var(--ui-fleet-black-75-down);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.ace_editor.ace-fleet.ace_focus .ace_scroller {
|
||||
box-shadow: 1px 1px 1px 1px #192147; /* $core-fleet-black */
|
||||
box-shadow: 1px 1px 1px 1px var(--ui-fleet-black-75-down);
|
||||
}
|
||||
|
||||
.ace-fleet.ace_autocomplete .ace_content {
|
||||
|
|
@ -31,25 +31,25 @@
|
|||
}
|
||||
|
||||
.ace-fleet .ace_content {
|
||||
background: #fff; /* $core-fleet-white */
|
||||
background: var(--core-fleet-white);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ace-fleet .ace_gutter {
|
||||
background: #fff; /* $core-fleet-white */
|
||||
color: #515774; /* #$ui-fleet-black-75 */
|
||||
background: var(--core-fleet-white);
|
||||
color: var(--ui-fleet-black-75);
|
||||
z-index: 1;
|
||||
border-right: solid 1px #e3e3e3;
|
||||
border-right: solid 1px var(--ui-gray);
|
||||
}
|
||||
|
||||
.ace-fleet .ace_gutter-active-line {
|
||||
background-color: #f4f4f6; /* $ui-fleet-black-5 */
|
||||
background-color: var(--ui-fleet-black-5);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.ace-fleet .ace_print-margin {
|
||||
width: 1px;
|
||||
background: #f6f6f6;
|
||||
background: var(--ui-fleet-black-5);
|
||||
}
|
||||
|
||||
.ace-fleet .ace_scrollbar {
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
}
|
||||
|
||||
.ace-fleet .ace_cursor {
|
||||
color: #aeafad;
|
||||
color: var(--ui-fleet-black-50);
|
||||
}
|
||||
|
||||
/* Hide cursor in read-only mode */
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
}
|
||||
|
||||
.ace-fleet.ace_multiselect .ace_selection.ace_start {
|
||||
box-shadow: 0 0 3px 0px #ffffff;
|
||||
box-shadow: 0 0 3px 0px var(--core-fleet-white);
|
||||
}
|
||||
|
||||
.ace-fleet .ace_marker-layer .ace_step {
|
||||
|
|
@ -79,25 +79,25 @@
|
|||
|
||||
.ace-fleet .ace_marker-layer .ace_bracket {
|
||||
margin: -1px 0 0 -1px;
|
||||
border: 1px solid #d1d1d1;
|
||||
border: 1px solid var(--ui-fleet-black-25);
|
||||
}
|
||||
|
||||
.ace-fleet .ace_marker-layer .ace_selected-word {
|
||||
border: 1px solid #d6d6d6;
|
||||
border: 1px solid var(--ui-fleet-black-25);
|
||||
}
|
||||
|
||||
.ace-fleet .ace_invisible {
|
||||
color: #d1d1d1;
|
||||
color: var(--ui-fleet-black-25);
|
||||
}
|
||||
|
||||
.ace-fleet .ace_keyword {
|
||||
color: #515774; /* $ui-fleet-black-75 */
|
||||
color: var(--ui-fleet-black-75);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ace-fleet .ace_osquery-token {
|
||||
border-radius: 3px;
|
||||
background-color: #ae6ddf;
|
||||
background-color: var(--core-fleet-purple);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
|
||||
.ace-fleet .ace_invalid.ace_deprecated {
|
||||
color: #ffffff;
|
||||
background-color: #ae6ddf;
|
||||
background-color: var(--core-fleet-purple);
|
||||
}
|
||||
|
||||
.ace-fleet .ace_fold {
|
||||
|
|
@ -183,63 +183,11 @@
|
|||
right repeat-y;
|
||||
}
|
||||
|
||||
/* Dark mode overrides */
|
||||
/* Dark mode overrides — only for values without a matching CSS custom property */
|
||||
body.dark-mode .ace_editor.ace-fleet {
|
||||
background-color: #161819;
|
||||
color: #b3b6c1;
|
||||
border-color: #2e3035;
|
||||
}
|
||||
|
||||
body.dark-mode .ace_editor.ace-fleet:hover {
|
||||
border-color: #636777;
|
||||
}
|
||||
|
||||
body.dark-mode .ace_editor.ace-fleet.ace_focus {
|
||||
border-color: #7b79ff;
|
||||
}
|
||||
|
||||
body.dark-mode .ace_editor.ace-fleet.ace_focus .ace_scroller {
|
||||
box-shadow: 1px 1px 1px 1px #7b79ff;
|
||||
}
|
||||
|
||||
body.dark-mode .ace-fleet .ace_content {
|
||||
background: #111214;
|
||||
}
|
||||
|
||||
body.dark-mode .ace-fleet .ace_gutter {
|
||||
background: #111214;
|
||||
color: #636777;
|
||||
border-right-color: #2e3035;
|
||||
}
|
||||
|
||||
body.dark-mode .ace-fleet .ace_gutter-active-line {
|
||||
background-color: #1e2024;
|
||||
}
|
||||
|
||||
body.dark-mode .ace-fleet .ace_cursor {
|
||||
color: #b3b6c1;
|
||||
}
|
||||
|
||||
body.dark-mode .ace-fleet .ace_keyword {
|
||||
color: #b3b6c1;
|
||||
color: var(--ui-fleet-black-33);
|
||||
}
|
||||
|
||||
body.dark-mode .ace-fleet .ace_marker-layer .ace_selection {
|
||||
background: rgba(123, 121, 255, 0.2);
|
||||
}
|
||||
|
||||
body.dark-mode .ace-fleet .ace_marker-layer .ace_bracket {
|
||||
border-color: #3e4248;
|
||||
}
|
||||
|
||||
body.dark-mode .ace-fleet .ace_marker-layer .ace_selected-word {
|
||||
border-color: #3e4248;
|
||||
}
|
||||
|
||||
body.dark-mode .ace-fleet .ace_invisible {
|
||||
color: #3e4248;
|
||||
}
|
||||
|
||||
body.dark-mode .ace-fleet .ace_print-margin {
|
||||
background: #1e2024;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
$shadow-width: 40px;
|
||||
$shadow-transition-width: 10px;
|
||||
$shadow-transition-width: 16px;
|
||||
|
||||
.data-table-block {
|
||||
position: relative;
|
||||
|
|
@ -23,8 +23,16 @@ $shadow-transition-width: 10px;
|
|||
),
|
||||
linear-gradient(to left, $core-fleet-white, $transparent),
|
||||
/* Shadow covers */
|
||||
linear-gradient(to right, $ui-shadow, $core-fleet-white $shadow-transition-width),
|
||||
linear-gradient(to left, $ui-shadow, $core-fleet-white $shadow-transition-width);
|
||||
linear-gradient(
|
||||
to right,
|
||||
$ui-shadow,
|
||||
$core-fleet-white $shadow-transition-width
|
||||
),
|
||||
linear-gradient(
|
||||
to left,
|
||||
$ui-shadow,
|
||||
$core-fleet-white $shadow-transition-width
|
||||
);
|
||||
|
||||
background-position: left center, right center, left center, right center;
|
||||
background-repeat: no-repeat;
|
||||
|
|
|
|||
|
|
@ -335,9 +335,11 @@ export const generateCustomDropdownStyles = (
|
|||
padding: 0,
|
||||
};
|
||||
},
|
||||
singleValue: (provided) => ({
|
||||
singleValue: (provided, state) => ({
|
||||
...provided,
|
||||
color: COLORS["core-fleet-black"],
|
||||
color: state.isDisabled
|
||||
? COLORS["ui-fleet-black-50"]
|
||||
: COLORS["core-fleet-black"],
|
||||
fontSize: "13px",
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
|
|
|
|||
|
|
@ -97,11 +97,12 @@ const GitOpsModeIndicator = () => {
|
|||
underline={false}
|
||||
showArrow
|
||||
tipContent={tipContent}
|
||||
className={baseClass}
|
||||
tipOffset={2}
|
||||
>
|
||||
<Icon name="gitops-mode" />
|
||||
<div className={`${baseClass}__text`}>GitOps mode</div>
|
||||
<div className={`${baseClass}__content`}>
|
||||
<Icon name="gitops-mode" />
|
||||
GitOps mode
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -22,25 +22,15 @@
|
|||
gap: $pad-large;
|
||||
}
|
||||
|
||||
.gitops-mode-indicator {
|
||||
.component__tooltip-wrapper {
|
||||
&__element {
|
||||
min-height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $pad-small;
|
||||
color: $ui-fleet-black-75;
|
||||
font-weight: $regular;
|
||||
font-size: $xxx-small;
|
||||
cursor: default;
|
||||
}
|
||||
&__tip-text {
|
||||
text-align: center;
|
||||
color: $core-fleet-white;
|
||||
font-size: $xx-small;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
.gitops-mode-indicator__content {
|
||||
min-height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $pad-small;
|
||||
color: $ui-fleet-black-75;
|
||||
font-weight: $regular;
|
||||
font-size: $xxx-small;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.site-nav-item {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -131,7 +131,7 @@ body.dark-mode {
|
|||
--ui-gray: #32363e;
|
||||
--ui-light-grey: #1e2128;
|
||||
--ui-off-white: #1e2128;
|
||||
--ui-shadow: #0e1014;
|
||||
--ui-shadow: #32363e;
|
||||
--ui-vibrant-blue-50: rgba(123, 121, 255, 0.3);
|
||||
--ui-vibrant-blue-25: #282736;
|
||||
--ui-vibrant-blue-10: #1e1f2a;
|
||||
|
|
|
|||
Loading…
Reference in a new issue