fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-27 11:28:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve visibility of Eyedropper widget on dark backgrounds (closes #802)

Browse Source
This commit is contained in:
Keavon Chambers
2022-10-21 16:33:39 -07:00
parent 58a53a995d
commit 7b4c43ff8d
1 changed files with 19 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/floating-menus/EyedropperPreview.vue
+19 -5
View File
@@ -29,25 +29,39 @@
border-left-color: var(--ring-color-primary); border-left-color: var(--ring-color-primary);
border-bottom-color: var(--ring-color-secondary); border-bottom-color: var(--ring-color-secondary);
border-right-color: var(--ring-color-secondary); border-right-color: var(--ring-color-secondary);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
&::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: -9px;
left: -9px;
padding: 8px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}
.canvas-container { .canvas-container {
transform: rotate(-45deg); transform: rotate(-45deg);
canvas { canvas {
display: block;
width: 110px; width: 110px;
height: 110px; height: 110px;
border-radius: 50%; border-radius: 50%;
image-rendering: pixelated; image-rendering: pixelated;
border: 1px solid rgba(255, 255, 255, 0.25);
} }
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 0; top: 1px;
left: 0; left: 1px;
width: 100%; width: calc(100% - 2px);
height: 100%; height: calc(100% - 2px);
border-radius: 50%; border-radius: 50%;
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.25); box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.25);
} }