prehistoric-systems/Gitako
1
1
Fork 0
mirror of https://github.com/EnixCoda/Gitako.git synced 2026-03-11 08:54:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

chore: check colors visually

Browse source
This commit is contained in:
EnixCoda 2021-11-01 16:05:43 +08:00
parent bd69007f4f
commit 98abbd3433
1 changed files with 50 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
src/styles/index.scss
View file

@ -13,7 +13,35 @@ $github-header-z-index: 32;
$github-pull-request-float-header-z-index: 110;
$minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-z-index) + 1;
@mixin interactive-background($default, $hover, $active, $focus: $hover) {
@mixin interactive-frame() {
@include interactive-border;
@include interactive-background;
}
@mixin interactive-border(
$default: var(--gitako-btn-border),
$hover: var(--gitako-btn-hover-border),
$active: var(--gitako-btn-active-border),
$focus: $hover
) {
border: 1px solid $default;
&:hover {
border: 1px solid $hover;
}
&:focus {
border: 1px solid $focus;
}
&:active {
border: 1px solid $active;
}
}
@mixin interactive-background(
$default: var(--gitako-btn-bg),
$hover: var(--gitako-btn-hover-bg),
$active: var(--gitako-btn-active-bg),
$focus: $hover
) {
background-color: $default;
&:hover {
background-color: $hover;
@ -103,7 +131,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
}
@include interactive-background-on-before(
var(--gitako-fg-default),
var(--gitako-fg-subtle),
var(--gitako-fg-default),
var(--gitako-fg-muted)
);
@ -118,7 +146,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
@include interactive-background-on-before(
var(--gitako-fg-muted),
var(--gitako-fg-default),
var(--gitako-fg-default)
var(--gitako-fg-subtle)
);
}
}
@ -149,11 +177,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
border: 1px solid var(--gitako-border-default);
border-radius: 4px;
@include interactive-background(
var(--gitako-btn-bg),
var(--gitako-btn-hover-bg),
var(--gitako-btn-focus-bg)
);
@include interactive-background;
.icon {
width: 100%;
height: 100%;
@ -287,11 +311,10 @@ $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-default);
background: var(--gitako-bg-subtle);
@include interactive-frame;
color: var(--gitako-fg-default);
&:active {
color: var(--gitako-fg-default);
color: var(--gitako-fg-subtle);
}
transition: all ease 0.3s;
font-size: 16px;
@ -307,13 +330,13 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
object-fit: contain;
transition: all ease 0.4s;
transform: translateX(-8px);
filter: drop-shadow(0 0 1px var(--gitako-bg-backdrop)); // REPLACE
filter: drop-shadow(0 0 1px var(--gitako-primer-canvas-backdrop));
}
&:active,
&:hover {
.tentacle {
transform: translateX(-4px);
filter: drop-shadow(0 0 2px var(--gitako-bg-backdrop)); // REPLACE
filter: drop-shadow(0 0 2px var(--gitako-primer-canvas-backdrop));
}
}
}
@ -345,7 +368,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
font-weight: 600;
}
a {
color: var(--gitako-fg-accent);
color: var(--gitako-accent-fg);
}
$resizeHandlerWidth: 1px;
@ -412,13 +435,13 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
.octicon {
transition: transform 0.3s ease;
color: var(--gitako-fg-default);
color: var(--gitako-fg-subtle);
width: 100%;
height: 100%;
}
.octicon-color {
color: var(--gitako-fg-default);
color: var(--gitako-fg-subtle);
}
.octicon-wrapper {
@ -447,7 +470,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
line-height: 32px;
a {
color: var(--gitako-fg-accent);
color: var(--gitako-accent-fg);
white-space: normal;
}
}
@ -475,11 +498,11 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
}
&.active .octicon {
color: var(--gitako-fg-default);
color: var(--gitako-fg-subtle);
}
.action-icon {
color: var(--gitako-fg-default);
color: var(--gitako-fg-subtle);
width: 20px;
height: 20px;
text-align: center;
@ -553,6 +576,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
.search-input {
width: 100%;
box-shadow: none; // stay low
border-width: 1px 0 1px 0; // remove border on left&right to make UI clear
border-color: var(--gitako-border-default);
border-radius: 0; // its rounded corner not match with nearby elements
color: var(--gitako-fg-default);
@ -586,11 +610,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
line-height: 1;
outline: none;
@include interactive-background(
var(--gitako-bg-default),
var(--gitako-bg-subtle),
var(--gitako-bg-subtle)
);
@include interactive-frame;
}
}
}
@ -611,16 +631,16 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
&.focused {
@include interactive-background(
var(--gitako-bg-subtle),
var(--gitako-bg-subtle),
var(--gitako-bg-subtle)
var(--gitako-canvas-subtle),
var(--gitako-canvas-subtle),
var(--gitako-canvas-inset),
);
}
@include interactive-background(
var(--gitako-bg-default),
var(--gitako-bg-subtle),
var(--gitako-bg-subtle)
var(--gitako-canvas-default),
var(--gitako-canvas-subtle),
var(--gitako-canvas-inset),
);
&.disabled {