mirror of
https://github.com/EnixCoda/Gitako.git
synced 2026-03-11 08:54:44 +00:00
chore: update GitHub color references
This commit is contained in:
EnixCoda
parent
869540b45c
commit
bd69007f4f
2 changed files with 82 additions and 110 deletions
|
|
@ -59,41 +59,6 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
|
||||
.#{$name}-ready {
|
||||
// github
|
||||
&.shrink-github-header {
|
||||
.js-header-wrapper {
|
||||
background: var(--gitako-bg-canvas-inverse); // REPLACE
|
||||
}
|
||||
.Header {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
@media (max-width: 1020px) {
|
||||
overflow: hidden; // prevent blank scroll area when Gitako is open and window is narrow
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
padding: 0 32px !important;
|
||||
}
|
||||
}
|
||||
main {
|
||||
// overflow: hidden;
|
||||
// This prevents blank scroll area when Gitako is open and window is narrow.
|
||||
// But it conflicts with the pr toolbar. Keep it here as a reminder.
|
||||
|
||||
& > *:first-child {
|
||||
// repo info and nav bar
|
||||
box-shadow: inset 0 -1px 0 var(--gitako-border-overlay); // from .UnderlineNav // REPLACE
|
||||
|
||||
& > * {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
nav {
|
||||
overflow: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// code folding start
|
||||
.blob-wrapper table .blob-num {
|
||||
position: relative; // for positioning
|
||||
|
|
@ -138,9 +103,9 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
}
|
||||
|
||||
@include interactive-background-on-before(
|
||||
var(--gitako-icon-tertiary), // REPLACE
|
||||
var(--gitako-icon-primary), // REPLACE
|
||||
var(--gitako-icon-secondary) // REPLACE
|
||||
var(--gitako-fg-default),
|
||||
var(--gitako-fg-default),
|
||||
var(--gitako-fg-muted)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -151,9 +116,9 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
}
|
||||
|
||||
@include interactive-background-on-before(
|
||||
var(--gitako-icon-secondary), // REPLACE
|
||||
var(--gitako-icon-tertiary), // REPLACE
|
||||
var(--gitako-icon-primary) // REPLACE
|
||||
var(--gitako-fg-muted),
|
||||
var(--gitako-fg-default),
|
||||
var(--gitako-fg-default)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -181,13 +146,13 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
.clippy {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid var(--gitako-border-tertiary); // REPLACE
|
||||
border: 1px solid var(--gitako-border-default);
|
||||
border-radius: 4px;
|
||||
|
||||
@include interactive-background(
|
||||
var(--gitako-btn-bg), // REPLACE
|
||||
var(--gitako-btn-hover-bg), // REPLACE
|
||||
var(--gitako-btn-focus-bg) // REPLACE
|
||||
var(--gitako-btn-bg),
|
||||
var(--gitako-btn-hover-bg),
|
||||
var(--gitako-btn-focus-bg)
|
||||
);
|
||||
.icon {
|
||||
width: 100%;
|
||||
|
|
@ -221,7 +186,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
|
||||
.with-gitako-spacing {
|
||||
@media screen {
|
||||
margin-left: var(--gitako-width); // REPLACE
|
||||
margin-left: var(--gitako-width);
|
||||
}
|
||||
|
||||
// gitee
|
||||
|
|
@ -268,8 +233,8 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
|
||||
@mixin icon-button(
|
||||
$default: transparent,
|
||||
$hover: var(--gitako-btn-hover-bg), // REPLACE
|
||||
$active: var(--gitako-btn-focus-bg), // REPLACE
|
||||
$hover: var(--gitako-btn-hover-bg),
|
||||
$active: var(--gitako-btn-focus-bg),
|
||||
$focus: $hover
|
||||
) {
|
||||
@include flex-center();
|
||||
|
|
@ -282,10 +247,10 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
|
||||
// Why does not TextInput get theme properly?
|
||||
@mixin input {
|
||||
color: var(--gitako-text-primary); // REPLACE
|
||||
background-color: var(--gitako-input-bg); // REPLACE
|
||||
border-color: var(--gitako-border-primary); // REPLACE
|
||||
box-shadow: var(--gitako-input-shadow); // REPLACE
|
||||
color: var(--gitako-fg-default);
|
||||
background-color: var(--gitako-canvas-default);
|
||||
border-color: var(--gitako-border-default);
|
||||
box-shadow: var(--gitako-primer-shadow-inset);
|
||||
}
|
||||
|
||||
.#{$name}-toggle-show-button-wrapper {
|
||||
|
|
@ -322,11 +287,11 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
height: 32px;
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--gitako-border-tertiary); // REPLACE
|
||||
background: var(--gitako-bg-tertiary); // REPLACE
|
||||
color: var(--gitako-icon-primary); // REPLACE
|
||||
border: 1px solid var(--gitako-border-default);
|
||||
background: var(--gitako-bg-subtle);
|
||||
color: var(--gitako-fg-default);
|
||||
&:active {
|
||||
color: var(--gitako-icon-tertiary); // REPLACE
|
||||
color: var(--gitako-fg-default);
|
||||
}
|
||||
transition: all ease 0.3s;
|
||||
font-size: 16px;
|
||||
|
|
@ -358,10 +323,10 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
margin-left: 4px;
|
||||
padding: 2px 4px;
|
||||
font-size: 12px;
|
||||
color: var(--gitako-text-red); // REPLACE
|
||||
border: 1px solid var(--gitako-border-overlay); // REPLACE
|
||||
color: var(--gitako-danger-fg);
|
||||
border: 1px solid var(--gitako-border-default);
|
||||
border-radius: 2px;
|
||||
background-color: var(--gitako-bg-tertiary); // REPLACE
|
||||
background-color: var(--gitako-bg-subtle);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -380,7 +345,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
font-weight: 600;
|
||||
}
|
||||
a {
|
||||
color: var(--gitako-text-link); // REPLACE
|
||||
color: var(--gitako-fg-accent);
|
||||
}
|
||||
|
||||
$resizeHandlerWidth: 1px;
|
||||
|
|
@ -402,12 +367,12 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
left: 0;
|
||||
transition: all 0.25s cubic-bezier(0.55, 0.06, 0.68, 0.19); // values from Chrome devtools
|
||||
&.collapsed {
|
||||
left: calc(0px - #{$resizeHandlerWidth} - var(--gitako-width)); // REPLACE
|
||||
left: calc(0px - #{$resizeHandlerWidth} - var(--gitako-width));
|
||||
}
|
||||
}
|
||||
|
||||
.gitako-side-bar-body-wrapper-content {
|
||||
width: var(--gitako-width); // REPLACE
|
||||
width: var(--gitako-width);
|
||||
}
|
||||
}
|
||||
.#{$name}-resize-handler {
|
||||
|
|
@ -416,15 +381,15 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
cursor: ew-resize;
|
||||
user-select: none;
|
||||
width: 0;
|
||||
background: var(--gitako-bg-tertiary); // REPLACE
|
||||
border-right: $resizeHandlerWidth solid var(--gitako-border-tertiary); // REPLACE
|
||||
background: var(--gitako-bg-subtle);
|
||||
border-right: $resizeHandlerWidth solid var(--gitako-border-default);
|
||||
overflow: hidden;
|
||||
box-sizing: content-box;
|
||||
&:hover,
|
||||
&:active {
|
||||
width: 16px;
|
||||
background: var(--gitako-bg-secondary); // REPLACE
|
||||
border-left: 1px solid var(--gitako-border-tertiary); // REPLACE
|
||||
background: var(--gitako-bg-subtle);
|
||||
border-left: 1px solid var(--gitako-border-default);
|
||||
}
|
||||
|
||||
.octicon.Grabber {
|
||||
|
|
@ -441,19 +406,19 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--gitako-bg-secondary); // REPLACE
|
||||
border-left: 1px solid var(--gitako-border-overlay); // REPLACE
|
||||
background: var(--gitako-bg-subtle);
|
||||
border-left: 1px solid var(--gitako-border-default);
|
||||
overflow: hidden;
|
||||
|
||||
.octicon {
|
||||
transition: transform 0.3s ease;
|
||||
color: var(--gitako-icon-tertiary); // REPLACE
|
||||
color: var(--gitako-fg-default);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.octicon-color {
|
||||
color: var(--gitako-icon-tertiary); // REPLACE
|
||||
color: var(--gitako-fg-default);
|
||||
}
|
||||
|
||||
.octicon-wrapper {
|
||||
|
|
@ -472,7 +437,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
.header {
|
||||
position: relative;
|
||||
min-height: 62px; // GitHub header height if login
|
||||
background: var(--gitako-bg-tertiary); // REPLACE
|
||||
background: var(--gitako-bg-subtle);
|
||||
padding: 6px 10px;
|
||||
flex-shrink: 0;
|
||||
position: relative; // prevent overlap by outline of other elements
|
||||
|
|
@ -482,7 +447,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
line-height: 32px;
|
||||
|
||||
a {
|
||||
color: var(--gitako-text-link); // REPLACE
|
||||
color: var(--gitako-fg-accent);
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
|
@ -490,8 +455,8 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
.branch-name {
|
||||
margin-left: 4px;
|
||||
padding: 4px 6px; // did not align well for some reason :/
|
||||
color: var(--gitako-branch-name-text); // REPLACE
|
||||
background-color: var(--gitako-branch-name-bg); // REPLACE
|
||||
color: var(--gitako-fg-muted);
|
||||
background-color: var(--gitako-accent-subtle);
|
||||
}
|
||||
|
||||
.close-side-bar-button-position {
|
||||
|
|
@ -510,11 +475,11 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
}
|
||||
|
||||
&.active .octicon {
|
||||
color: var(--gitako-icon-primary); // REPLACE
|
||||
color: var(--gitako-fg-default);
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
color: var(--gitako-icon-tertiary); // REPLACE
|
||||
color: var(--gitako-fg-default);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
|
|
@ -543,12 +508,12 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
@include flex-center();
|
||||
border-top: 1px solid var(--gitako-border-overlay); // REPLACE
|
||||
border-top: 1px solid var(--gitako-border-default);
|
||||
|
||||
.loading-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--gitako-text-placeholder); // REPLACE
|
||||
color: var(--gitako-fg-subtle);
|
||||
|
||||
&-icon {
|
||||
width: 20px;
|
||||
|
|
@ -588,14 +553,14 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
.search-input {
|
||||
width: 100%;
|
||||
box-shadow: none; // stay low
|
||||
border-color: var(--gitako-border-overlay); // REPLACE
|
||||
border-color: var(--gitako-border-default);
|
||||
border-radius: 0; // its rounded corner not match with nearby elements
|
||||
color: var(--gitako-text-primary); // REPLACE
|
||||
background: var(--gitako-bg-canvas); // REPLACE
|
||||
color: var(--gitako-fg-default);
|
||||
background: var(--gitako-bg-default);
|
||||
padding-right: 40px; // save space for actions
|
||||
|
||||
&.error {
|
||||
border-color: var(--gitako-border-danger); // REPLACE
|
||||
border-color: var(--gitako-danger-emphasis);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -613,18 +578,18 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
margin: 0;
|
||||
padding: 2px 4px;
|
||||
min-width: 32px;
|
||||
border: 1px solid var(--gitako-border-secondary); // REPLACE
|
||||
border: 1px solid var(--gitako-border-muted);
|
||||
border-radius: 8px;
|
||||
color: var(--gitako-text-secondary); // REPLACE
|
||||
color: var(--gitako-fg-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
outline: none;
|
||||
|
||||
@include interactive-background(
|
||||
var(--gitako-bg-primary), // REPLACE
|
||||
var(--gitako-bg-secondary), // REPLACE
|
||||
var(--gitako-bg-tertiary) // REPLACE
|
||||
var(--gitako-bg-default),
|
||||
var(--gitako-bg-subtle),
|
||||
var(--gitako-bg-subtle)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -646,21 +611,21 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
|
||||
&.focused {
|
||||
@include interactive-background(
|
||||
var(--gitako-bg-tertiary), // REPLACE
|
||||
var(--gitako-bg-tertiary), // REPLACE
|
||||
var(--gitako-bg-secondary) // REPLACE
|
||||
var(--gitako-bg-subtle),
|
||||
var(--gitako-bg-subtle),
|
||||
var(--gitako-bg-subtle)
|
||||
);
|
||||
}
|
||||
|
||||
@include interactive-background(
|
||||
var(--gitako-bg-primary), // REPLACE
|
||||
var(--gitako-bg-tertiary), // REPLACE
|
||||
var(--gitako-bg-secondary) // REPLACE
|
||||
var(--gitako-bg-default),
|
||||
var(--gitako-bg-subtle),
|
||||
var(--gitako-bg-subtle)
|
||||
);
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
color: var(--gitako-text-disabled); // REPLACE
|
||||
color: var(--gitako-fg-muted);
|
||||
}
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -671,17 +636,17 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
white-space: nowrap;
|
||||
transition: padding 0.3s ease; // on toggle expansion in search results
|
||||
|
||||
border-bottom: 1px solid var(--gitako-border-secondary); // REPLACE
|
||||
border-bottom: 1px solid var(--gitako-border-muted);
|
||||
&.compact {
|
||||
border-bottom: none;
|
||||
&.focused {
|
||||
border-top: 1px solid var(--gitako-border-secondary); // REPLACE
|
||||
border-bottom: 1px solid var(--gitako-border-secondary); // REPLACE
|
||||
border-top: 1px solid var(--gitako-border-muted);
|
||||
border-bottom: 1px solid var(--gitako-border-muted);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:hover) {
|
||||
color: var(--gitako-text-primary); // REPLACE
|
||||
color: var(--gitako-fg-default);
|
||||
}
|
||||
|
||||
@mixin icon-size() {
|
||||
|
|
@ -728,7 +693,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
|
||||
&:not(:hover) {
|
||||
.node-item-label .prefix {
|
||||
color: var(--gitako-text-tertiary); // REPLACE
|
||||
color: var(--gitako-fg-muted);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -740,7 +705,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
display: inline-block;
|
||||
width: 48px;
|
||||
padding: 0 4px;
|
||||
color: var(--gitako-text-tertiary); // REPLACE
|
||||
color: var(--gitako-fg-muted);
|
||||
|
||||
.octicon-wrapper {
|
||||
margin: 0; // make it closer to the comment amount label
|
||||
|
|
@ -781,12 +746,12 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
|
||||
.#{$name}-settings-bar {
|
||||
z-index: 2;
|
||||
background: var(--gitako-bg-tertiary); // REPLACE
|
||||
background: var(--gitako-bg-subtle);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: calc(100vh - 120px);
|
||||
&-title {
|
||||
border-top: 1px solid var(--gitako-border-secondary); // REPLACE
|
||||
border-top: 1px solid var(--gitako-border-muted);
|
||||
padding: 10px;
|
||||
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
|
||||
0 3px 3px -2px rgba(0, 0, 0, 0.12);
|
||||
|
|
@ -804,7 +769,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
height: 10px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: var(--gitako-bg-tertiary); // REPLACE
|
||||
background: var(--gitako-bg-subtle);
|
||||
z-index: 1;
|
||||
}
|
||||
.settings-section {
|
||||
|
|
@ -835,10 +800,10 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
// make it look like text inputs
|
||||
height: 36px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--gitako-input-border); // REPLACE
|
||||
background: var(--gitako-input-bg); // REPLACE
|
||||
color: var(--gitako-text-primary); // REPLACE
|
||||
box-shadow: var(--gitako-input-shadow); // REPLACE
|
||||
border: 1px solid var(--gitako-border-default);
|
||||
background: var(--gitako-canvas-default);
|
||||
color: var(--gitako-fg-default);
|
||||
box-shadow: var(--gitako-primer-shadow-inset);
|
||||
}
|
||||
&.field-checkbox {
|
||||
padding-left: 20px;
|
||||
|
|
@ -863,7 +828,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
margin-bottom: 4px;
|
||||
}
|
||||
.hint {
|
||||
color: var(--gitako-text-placeholder); // REPLACE
|
||||
color: var(--gitako-fg-subtle);
|
||||
}
|
||||
.access-token-input-control {
|
||||
display: flex;
|
||||
|
|
@ -885,10 +850,10 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 2px 6px 2px 10px;
|
||||
border-top: 1px solid var(--gitako-border-secondary); // REPLACE
|
||||
border-top: 1px solid var(--gitako-border-muted);
|
||||
|
||||
.version {
|
||||
color: var(--gitako-text-tertiary); // REPLACE
|
||||
color: var(--gitako-fg-muted);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,13 @@
|
|||
:root {
|
||||
// default, e.g. when not login
|
||||
@include setVariables(light.$variables);
|
||||
|
||||
// mapping 'canvas' to 'bg', this should be removed once GitHub exposes 'bg' colors
|
||||
--gitako-bg-default-transparent: var(--gitako-canvas-default-transparent);
|
||||
--gitako-bg-default: var(--gitako-canvas-default);
|
||||
--gitako-bg-inset: var(--gitako-canvas-inset);
|
||||
--gitako-bg-overlay: var(--gitako-canvas-overlay);
|
||||
--gitako-bg-subtle: var(--gitako-canvas-subtle);
|
||||
}
|
||||
|
||||
:root {
|
||||
|
|
|
|||
Loading…
Reference in a new issue