obsqrbtz/goose-highlighter
1
0
Fork 0
mirror of https://github.com/obsqrbtz/goose-highlighter.git synced 2026-04-08 20:19:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: colorbox styling

Browse Source
This commit is contained in:
Daniel Dada
2025-06-26 23:59:12 +03:00
parent b30fac5ded
commit 1e704b51a8
1 changed files with 65 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
popup/popup.css
View File

@@ -7,6 +7,7 @@
--button-hover: #444; --button-hover: #444;
--button-text: white; --button-text: white;
--accent: #ec9c23; --accent: #ec9c23;
--accent-hover: #ffb84d;
--accent-text: #000; --accent-text: #000;
--highlight-tag: #292929; --highlight-tag: #292929;
--highlight-tag-border: #444; --highlight-tag-border: #444;
@@ -18,6 +19,10 @@
--switch-bg: #444; --switch-bg: #444;
--checkbox-accent: #ec9c23; --checkbox-accent: #ec9c23;
--checkbox-border: #666; --checkbox-border: #666;
--scrollbar-bg: var(--section-bg);
--scrollbar-thumb: var(--accent);
--scrollbar-thumb-hover: var(--accent-hover);
--scrollbar-thumb-border: var(--section-bg);
} }
body { body {
@@ -114,7 +119,7 @@ textarea {
} }
input[type="color"] { input[type="color"] {
background: var(--input-bg); background: none;
border: 2px solid var(--input-border); border: 2px solid var(--input-border);
border-radius: 8px; border-radius: 8px;
box-shadow: 0 1px 4px rgba(0,0,0,0.10); box-shadow: 0 1px 4px rgba(0,0,0,0.10);
@@ -126,37 +131,29 @@ input[type="color"] {
transition: border 0.2s, box-shadow 0.2s; transition: border 0.2s, box-shadow 0.2s;
appearance: none; appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
overflow: hidden;
} }
input[type="color"]:focus,
input[type="color"]:hover {
border: 2px solid var(--accent);
box-shadow: 0 2px 8px rgba(236,156,35,0.15);
outline: none;
}
.color-label input[type="color"] {
width: 32px;
height: 32px;
margin-left: 0;
}
/* Remove default color input styling for Webkit browsers */
input[type="color"]::-webkit-color-swatch-wrapper { input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0; padding: 0;
border-radius: 8px; border-radius: 0;
} }
input[type="color"]::-webkit-color-swatch { input[type="color"]::-webkit-color-swatch {
border-radius: 8px; border-radius: 0;
border: none; border: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
} }
/* Remove default color input styling for Firefox */
input[type="color"]::-moz-color-swatch { input[type="color"]::-moz-color-swatch {
border-radius: 8px; border-radius: 0;
border: none; border: none;
padding: 0; padding: 0;
width: 100%;
height: 100%;
} }
input[type="checkbox"] { input[type="checkbox"] {
@@ -165,9 +162,9 @@ input[type="checkbox"] {
background-color: var(--input-bg); background-color: var(--input-bg);
border: 1px solid var(--checkbox-border); border: 1px solid var(--checkbox-border);
border-radius: 4px; border-radius: 4px;
width: 16px; width: 12px;
height: 16px; height: 12px;
transform: scale(1.2); transform: scale(1);
cursor: pointer; cursor: pointer;
position: relative; position: relative;
} }
@@ -175,10 +172,10 @@ input[type="checkbox"] {
input[type="checkbox"]:checked::after { input[type="checkbox"]:checked::after {
content: ""; content: "";
position: absolute; position: absolute;
top: 2px; top: 1px;
left: 5px; left: 3px;
width: 4px; width: 3px;
height: 9px; height: 7px;
border: solid var(--checkbox-accent); border: solid var(--checkbox-accent);
border-width: 0 2px 2px 0; border-width: 0 2px 2px 0;
transform: rotate(45deg); transform: rotate(45deg);
@@ -448,10 +445,51 @@ body::-webkit-scrollbar-thumb {
#wordList::-webkit-scrollbar-thumb:hover, #wordList::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover { body::-webkit-scrollbar-thumb:hover {
background: #ffb84d; background: var(--accent-hover);
} }
#wordList::-webkit-scrollbar-corner, #wordList::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner { body::-webkit-scrollbar-corner {
background: var(--section-bg); background: var(--section-bg);
}
:root {
--scrollbar-bg: var(--section-bg);
--scrollbar-thumb: var(--accent);
--scrollbar-thumb-hover: var(--accent-hover);
--scrollbar-thumb-border: var(--section-bg);
}
html, body, #wordList {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#wordList::-webkit-scrollbar {
width: 8px;
background: var(--scrollbar-bg);
border-radius: 8px;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
#wordList::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border-radius: 8px;
min-height: 24px;
border: 2px solid var(--scrollbar-thumb-border);
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
#wordList::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover);
}
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
#wordList::-webkit-scrollbar-corner {
background: var(--scrollbar-bg);
} }