Skip to content
This repository was archived by the owner on Jul 30, 2025. It is now read-only.

Commit ee9eb63

Browse files
starpitstarpit
committed
fix: improve contrast of top tab stripe versus sidecar title stripe
Fixes #3956
1 parent cb23c63 commit ee9eb63

File tree

4 files changed

+84
-96
lines changed

4 files changed

+84
-96
lines changed

‎plugins/plugin-carbon-themes/web/css/carbon-gray10.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,8 +101,8 @@ body[kui-theme="Carbon Gray10"] {
101101
--color-content-divider: #bfc0c2;
102102
--color-selection-background: #b3e6ff;
103103

104-
--color-stripe-01: #f5f7fa;
105-
--color-stripe-02: var(--color-base03);
104+
--color-stripe-01: var(--color-base03);
105+
--color-stripe-02: #f5f7fa;
106106
--tab-gray-text-color: var(--color-text-01);
107107
--active-tab-color: #0f62fe;
108108
--color-repl-background: var(--color-base01);

‎plugins/plugin-client-common/web/css/static/TopTabStripe.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.bx--header {
2-
background-color: var(--color-stripe-02);
2+
background-color: var(--color-stripe-01);
33
border-bottom: none;
44
transition-property: background-color;
55
position: unset;

‎plugins/plugin-sidecar/src/view/components/TitleBar.tsx

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -80,12 +80,7 @@ export default class Window extends React.PureComponent<Props, State> {
8080
private closeButton() {
8181
return (
8282
!this.props.fixedWidth && (
83-
<div
84-
className="sidecar-bottom-stripe-button sidecar-bottom-stripe-close toggle-sidecar-button"
85-
data-balloon="Minimize"
86-
data-balloon-length="small"
87-
data-balloon-pos="down-right"
88-
>
83+
<div className="sidecar-bottom-stripe-button sidecar-bottom-stripe-close toggle-sidecar-button">
8984
<a
9085
href="#"
9186
className="graphical-icon kui--tab-navigatable kui--notab-when-sidecar-hidden"
@@ -128,12 +123,7 @@ export default class Window extends React.PureComponent<Props, State> {
128123

129124
private quitButton() {
130125
return (
131-
<div
132-
className="sidecar-bottom-stripe-button sidecar-bottom-stripe-quit"
133-
data-balloon="Close"
134-
data-balloon-length="small"
135-
data-balloon-pos="down-right"
136-
>
126+
<div className="sidecar-bottom-stripe-button sidecar-bottom-stripe-quit">
137127
<a
138128
href="#"
139129
className="graphical-icon kui--tab-navigatable kui--notab-when-sidecar-hidden"

‎plugins/plugin-sidecar/web/css/static/sidecar-main.css

Lines changed: 79 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -664,90 +664,88 @@ body.os-win32 .kui--sidecar .sidecar-bottom-stripe-button-container:hover .sidec
664664
transition-delay: 750ms;
665665
}
666666

667-
/* sidecar minimize to stripe */
668-
.kui--sidecar.minimized {
669-
flex: 0 0 calc(0.375rem * 2 + 0.75rem); /* designed to match the ? in the header */
670-
align-items: stretch;
671-
}
672-
.kui--sidecar.minimized header.sidecar-header {
673-
display: none;
674-
}
675-
.kui--sidecar.minimized .header-left-bits {
676-
overflow: visible;
677-
}
678667
.kui--sidecar .sidecar-header-icon-wrapper > span {
679668
padding: 0 0.5em;
680669
}
681-
.kui--sidecar.minimized .sidecar-header-icon-wrapper {
682-
width: calc(0.375rem * 2 + 0.75rem); /* match sidecar.minimized flex-basis */
683-
display: flex;
684-
align-items: flex-end;
685-
justify-content: center;
686-
margin: 0.375em 0;
687-
overflow: unset; /* see overflow:hidden for sidecar .sidecar-header-icon-wrapper */
688-
border: none;
689-
padding: 0;
690-
}
691-
.kui--sidecar.minimized .sidecar-header-icon {
692-
width: 0;
693-
height: calc(0.375rem * 2 + 0.75rem); /* match sidecar.minimized flex-basis */
694-
flex: 1;
695-
transform-origin: 0% 0%;
696-
justify-content: flex-start;
697-
}
698-
.kui--sidecar.minimized .sidecar-bottom-stripe-left-bits {
699-
align-items: unset;
700-
}
701-
.kui--sidecar.minimized .sidecar-bottom-stripe-left-bits .sidecar-header-icon-wrapper {
702-
padding: 0;
703-
margin: 0;
704-
}
705-
.kui--sidecar.minimized header.sidecar-header .sidecar-header-secondary-content,
706-
.kui--sidecar.minimized header.sidecar-header .sidecar-header-right-bits,
707-
.kui--sidecar.minimized .sidecar-header-name,
708-
.kui--sidecar.minimized .sidecar-content-container,
709-
.kui--sidecar.minimized .sidecar-header-icon-wrapper-for-namespace,
710-
.kui--sidecar.minimized .sidecar-bottom-stripe-left-bits > div:not(.sidecar-header-icon-wrapper),
711-
.kui--sidecar.minimized .sidecar-bottom-stripe-toolbar,
712-
.kui--sidecar.minimized .header-right-bits {
713-
display: none;
714-
flex: 0;
715-
opacity: 0;
716-
margin: 0;
717-
width: 0;
718-
height: 0;
719-
}
720-
.kui--sidecar.minimized .sidecar-header-icon-wrapper .sidecar-header-icon {
721-
transform: rotate(-90deg);
722-
transform-origin: center;
723-
}
724-
.kui--sidecar.minimized .sidecar-bottom-stripe {
725-
align-items: center;
726-
padding: 0 0.375em;
727-
box-shadow: none;
728-
flex: 1;
729-
flex-direction: column;
730-
border-left: 1px solid var(--color-base03);
731-
border-bottom: none;
732-
}
733-
.kui--sidecar.minimized .sidecar-bottom-stripe-button:not(.sidecar-bottom-stripe-close) {
734-
/*flex: 0;*/
735-
display: none;
736-
}
737-
.kui--sidecar.minimized .sidecar-bottom-stripe-button.sidecar-bottom-stripe-close {
738-
padding: 1ex 0;
739-
margin: 0;
740-
text-align: center;
741-
}
742-
.kui--sidecar.minimized .graphical-icon {
743-
justify-content: center;
744-
transform: scaleX(-1);
745-
height: unset !important;
746-
padding: 0 !important;
747-
}
748-
.kui--sidecar.minimized [data-balloon]:before,
749-
.kui--sidecar.minimized [data-balloon]:after {
750-
opacity: 0;
670+
671+
/* sidecar minimize to stripe */
672+
[kui-theme-style] .kui--sidecar.minimized {
673+
flex: 0 0 calc(0.375rem * 2 + 0.75rem); /* designed to match the ? in the header */
674+
align-items: stretch;
675+
676+
header.sidecar-header {
677+
display: none;
678+
}
679+
.header-left-bits {
680+
overflow: visible;
681+
}
682+
.sidecar-header-icon-wrapper {
683+
width: calc(0.375rem * 2 + 0.75rem); /* match sidecar.minimized flex-basis */
684+
display: flex;
685+
align-items: flex-end;
686+
justify-content: center;
687+
margin: 0.375em 0;
688+
overflow: unset; /* see overflow:hidden for sidecar .sidecar-header-icon-wrapper */
689+
border: none;
690+
padding: 0;
691+
}
692+
.sidecar-header-icon {
693+
width: 0;
694+
height: calc(0.375rem * 2 + 0.75rem); /* match sidecar.minimized flex-basis */
695+
flex: 1;
696+
transform-origin: 0% 0%;
697+
justify-content: flex-start;
698+
}
699+
.sidecar-bottom-stripe-left-bits {
700+
align-items: unset;
701+
}
702+
.sidecar-bottom-stripe-left-bits .sidecar-header-icon-wrapper {
703+
padding: 0;
704+
margin: 0;
705+
}
706+
header.sidecar-header .sidecar-header-secondary-content,
707+
header.sidecar-header .sidecar-header-right-bits,
708+
.sidecar-header-name,
709+
.sidecar-content-container,
710+
.sidecar-header-icon-wrapper-for-namespace,
711+
.sidecar-bottom-stripe-left-bits > div:not(.sidecar-header-icon-wrapper),
712+
.sidecar-bottom-stripe-toolbar,
713+
.header-right-bits {
714+
display: none;
715+
flex: 0;
716+
opacity: 0;
717+
margin: 0;
718+
width: 0;
719+
height: 0;
720+
}
721+
.sidecar-header-icon-wrapper .sidecar-header-icon {
722+
transform: rotate(-90deg);
723+
transform-origin: center;
724+
}
725+
.sidecar-bottom-stripe {
726+
align-items: center;
727+
padding: 0 0.375em;
728+
box-shadow: none;
729+
flex: 1;
730+
flex-direction: column;
731+
border-left: 1px solid var(--color-base03);
732+
border-bottom: none;
733+
}
734+
.sidecar-bottom-stripe-button:not(.sidecar-bottom-stripe-close) {
735+
/*flex: 0;*/
736+
display: none;
737+
}
738+
.sidecar-bottom-stripe-button.sidecar-bottom-stripe-close {
739+
padding: 1ex 0;
740+
margin: 0;
741+
text-align: center;
742+
}
743+
.graphical-icon {
744+
justify-content: center;
745+
transform: scaleX(-1);
746+
height: unset !important;
747+
padding: 0 !important;
748+
}
751749
}
752750

753751
@keyframes fadein {

0 commit comments

Comments
 (0)