smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Dark mode (#2006)

Browse source 
Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Michal Srb 2020-08-13 04:35:31 -07:00 • committed by GitHub
parent c9d5ec9277
commit c0dd870c6e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 660 additions and 358 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/components/ToolIcon.scss
View file

@ -1,12 +1,5 @@
@import "open-color/open-color.scss";
:root {
--button-gray-1: #{$oc-gray-2};
--button-gray-2: #{$oc-gray-4};
--button-gray-3: #{$oc-gray-5};
--button-blue: #{$oc-blue-2};
}
.ToolIcon {
display: inline-flex;
align-items: center;
@ -21,6 +14,7 @@
.ToolIcon__icon {
width: 2.5rem;
height: 2.5rem;
color: var(--icon-fill-color);
display: flex;
justify-content: center;
@ -31,6 +25,8 @@
svg {
position: relative;
height: 1em;
fill: var(--icon-fill-color);
color: var(--icon-fill-color);
}
& + .ToolIcon__label {
@ -39,6 +35,7 @@
}
.ToolIcon__label {
color: var(--icon-fill-color);
font-family: var(--ui-font);
margin: 0 0.8em;
text-overflow: ellipsis;
@ -63,7 +60,7 @@
background-color: var(--button-gray-2);
}
&:focus {
box-shadow: 0 0 0 2px var(--button-blue);
box-shadow: 0 0 0 2px var(--focus-highlight-color);
}
&.ToolIcon--selected {
background-color: var(--button-gray-2);
@ -86,11 +83,11 @@
opacity: 0;
pointer-events: none;
&:checked + .ToolIcon__icon {
&:not(.ToolIcon_toggle_opaque):checked + .ToolIcon__icon {
background-color: var(--button-gray-2);
}
&:focus + .ToolIcon__icon {
box-shadow: 0 0 0 2px var(--button-blue);
box-shadow: 0 0 0 2px var(--focus-highlight-color);
}
&:active + .ToolIcon__icon {
background-color: var(--button-gray-3);
@ -125,7 +122,7 @@
bottom: 2px;
right: 3px;
font-size: 0.5em;
color: var(--button-gray-3);
color: var(--keybinding-color);
font-family: var(--ui-font);
user-select: none;
}