mirror of
https://github.com/tridactyl/tridactyl.git
synced 2026-09-10 07:16:33 -04:00
Merge pull request #5276 from Chic-Tweetz/hint-element-overlays
Enhance theming with hint element overlays
This commit is contained in:
Oliver Blanthorn
GitHub
commit
d2aa586833
|
|
@ -58,7 +58,11 @@ function distance(l1: number, r1: number, l2: number, r2: number): number {
|
|||
* */
|
||||
class HintState {
|
||||
public focusedHint: Hint
|
||||
readonly hud = document.createElement("div")
|
||||
readonly hudTranslate = document.createElement("div")
|
||||
readonly hintHost = document.createElement("div")
|
||||
readonly highlightHost: Element | null = null
|
||||
readonly outlineHost: Element | null = null
|
||||
readonly hints: Hint[] = []
|
||||
public selectedHints: Hint[] = []
|
||||
public filter = ""
|
||||
|
|
@ -70,7 +74,21 @@ class HintState {
|
|||
public reject: (x) => void,
|
||||
public rapid: boolean,
|
||||
) {
|
||||
this.hintHost.classList.add("TridactylHintHost", "cleanslate")
|
||||
this.hud.classList.add("TridactylHud", "cleanslate")
|
||||
this.hudTranslate.classList.add("TridactylHudTranslation")
|
||||
this.hintHost.classList.add("TridactylHintHost")
|
||||
|
||||
const { overlay, overlayoutline } = config.get("hintstyles")
|
||||
if (overlay !== "none") {
|
||||
this.highlightHost = document.createElement("div")
|
||||
this.highlightHost.classList.add("TridactylHintHighlightHost")
|
||||
}
|
||||
if (overlayoutline !== "none") {
|
||||
this.outlineHost = document.createElement("div")
|
||||
this.outlineHost.classList.add("TridactylHintOutlineHost")
|
||||
}
|
||||
|
||||
this.hudTranslate.style.translate = `${-window.scrollX}px ${-window.scrollY}px`
|
||||
}
|
||||
|
||||
get activeHints() {
|
||||
|
|
@ -87,7 +105,7 @@ class HintState {
|
|||
}
|
||||
|
||||
// Remove all hints from the DOM.
|
||||
this.hintHost.remove()
|
||||
this.hud.remove()
|
||||
}
|
||||
|
||||
resolveHinting() {
|
||||
|
|
@ -546,8 +564,17 @@ export function hintPage(
|
|||
// Just focus first link
|
||||
modeState.focusedHint = modeState.hints[0]
|
||||
modeState.focusedHint.focused = true
|
||||
document.documentElement.appendChild(modeState.hintHost)
|
||||
|
||||
if (modeState.highlightHost)
|
||||
modeState.hudTranslate.appendChild(modeState.highlightHost)
|
||||
if (modeState.outlineHost)
|
||||
modeState.hudTranslate.appendChild(modeState.outlineHost)
|
||||
modeState.hudTranslate.appendChild(modeState.hintHost)
|
||||
modeState.hud.appendChild(modeState.hudTranslate)
|
||||
document.documentElement.appendChild(modeState.hud)
|
||||
modeState.deOverlap()
|
||||
window.removeEventListener("scroll", updateHudOffset)
|
||||
window.addEventListener("scroll", updateHudOffset)
|
||||
}
|
||||
|
||||
/** @hidden */
|
||||
|
|
@ -676,6 +703,8 @@ type HintSelectedCallback = (x: any) => any
|
|||
@hidden */
|
||||
class Hint {
|
||||
public readonly flag = document.createElement("span")
|
||||
public readonly highlight: HTMLElement | null = null
|
||||
public readonly outline: HTMLElement | null = null
|
||||
public readonly rect: ClientRect = null
|
||||
public result: any = null
|
||||
|
||||
|
|
@ -736,6 +765,43 @@ class Hint {
|
|||
this.flag.classList.add("TridactylHint" + target.tagName)
|
||||
classes?.forEach(f => this.flag.classList.add(f))
|
||||
|
||||
// Add optional overlays
|
||||
if (modeState.highlightHost || modeState.outlineHost) {
|
||||
const mainRect = document.createElement("div")
|
||||
// Add all rectangles for highlights / outlines
|
||||
for (const recti of clientRects) {
|
||||
let rectElem
|
||||
let inset
|
||||
if (recti === rect) {
|
||||
rectElem = mainRect
|
||||
inset = `${rect.top + window.scrollY}px ${rect.left + window.scrollX}px`
|
||||
} else {
|
||||
// Position extra rects relative to the main rect
|
||||
rectElem = document.createElement("div")
|
||||
mainRect.appendChild(rectElem)
|
||||
inset = `${recti.top - rect.top}px ${recti.left - rect.left}px`
|
||||
}
|
||||
|
||||
rectElem.style.cssText = `
|
||||
inset: ${inset} !important;
|
||||
width: ${recti.width}px !important;
|
||||
height: ${recti.height}px !important;
|
||||
`
|
||||
}
|
||||
|
||||
if (modeState.highlightHost) {
|
||||
this.highlight = mainRect
|
||||
this.highlight.className = "TridactylHintHighlight"
|
||||
modeState.highlightHost.appendChild(this.highlight)
|
||||
}
|
||||
|
||||
if (modeState.outlineHost) {
|
||||
this.outline = this.highlight ? (this.highlight as any).cloneNode(true) : mainRect
|
||||
this.outline.className = "TridactylHintOutline"
|
||||
modeState.outlineHost.appendChild(this.outline)
|
||||
}
|
||||
}
|
||||
|
||||
const top = rect.top > 0 ? this.rect.top : offsetTop + pad
|
||||
const left = rect.left > 0 ? this.rect.left : offsetLeft + pad
|
||||
this.x = window.scrollX + left
|
||||
|
|
@ -765,8 +831,12 @@ class Hint {
|
|||
if (hide) {
|
||||
this.focused = false
|
||||
this.target.classList.remove("TridactylHintElem")
|
||||
this.highlight?.setAttribute("hidden", "")
|
||||
this.outline?.setAttribute("hidden", "")
|
||||
} else {
|
||||
this.target.classList.add("TridactylHintElem")
|
||||
this.highlight?.removeAttribute("hidden")
|
||||
this.outline?.removeAttribute("hidden")
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -774,9 +844,25 @@ class Hint {
|
|||
if (focus) {
|
||||
this.target.classList.add("TridactylHintActive")
|
||||
this.target.classList.remove("TridactylHintElem")
|
||||
|
||||
if (this.highlight)
|
||||
this.highlight.classList.add("TridactylHintHighlightActive")
|
||||
|
||||
if (this.outline)
|
||||
this.outline.classList.add("TridactylHintOutlineActive")
|
||||
|
||||
this.flag.classList.add("TridactylHintSpanActive")
|
||||
} else {
|
||||
this.target.classList.add("TridactylHintElem")
|
||||
this.target.classList.remove("TridactylHintActive")
|
||||
|
||||
if (this.highlight)
|
||||
this.highlight.classList.remove("TridactylHintHighlightActive")
|
||||
|
||||
if (this.outline)
|
||||
this.outline.classList.remove("TridactylHintOutlineActive")
|
||||
|
||||
this.flag.classList.remove("TridactylHintSpanActive")
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -823,6 +909,12 @@ class Hint {
|
|||
}
|
||||
}
|
||||
|
||||
function updateHudOffset() {
|
||||
window.requestAnimationFrame(() => {
|
||||
modeState.hudTranslate.style.translate = `${-window.scrollX}px ${-window.scrollY}px`
|
||||
})
|
||||
}
|
||||
|
||||
/** @hidden */
|
||||
type HintBuilder = (
|
||||
hintables: Hintables[],
|
||||
|
|
@ -1082,6 +1174,7 @@ function reset() {
|
|||
}
|
||||
modeState = undefined
|
||||
contentState.mode = "normal"
|
||||
window.removeEventListener("scroll", updateHudOffset)
|
||||
}
|
||||
|
||||
function popKey() {
|
||||
|
|
|
|||
|
|
@ -56,9 +56,13 @@ export async function theme(element) {
|
|||
|
||||
const hintElemOptions = await config.getAsync("hintstyles")
|
||||
|
||||
// Allow for different hint text colours if using overlays (can help visibility issues)
|
||||
const hintFgVar = hintElemOptions.overlay === "all" ? "--tridactyl-hint-highlight-fg" : "--tridactyl-hint-fg"
|
||||
const activeFgVar = hintElemOptions.overlay === "all" ? "--tridactyl-hint-highlight-active-fg" : "--tridactyl-hint-active-fg"
|
||||
|
||||
const hintElemRules =
|
||||
(hintElemOptions.fg === "all"
|
||||
? " color: var(--tridactyl-hint-active-fg) !important;\n"
|
||||
? ` color: var(${hintFgVar}) !important;\n`
|
||||
: "") +
|
||||
(hintElemOptions.bg === "all"
|
||||
? " background: var(--tridactyl-hint-bg) !important;\n"
|
||||
|
|
@ -69,7 +73,7 @@ export async function theme(element) {
|
|||
|
||||
const activeElemRules =
|
||||
(hintElemOptions.fg !== "none"
|
||||
? " color: var(--tridactyl-hint-active-fg) !important;\n"
|
||||
? ` color: var(${activeFgVar}) !important;\n`
|
||||
: "") +
|
||||
(hintElemOptions.bg !== "none"
|
||||
? " background: var(--tridactyl-hint-active-bg) !important;\n"
|
||||
|
|
@ -78,13 +82,23 @@ export async function theme(element) {
|
|||
? " outline: var(--tridactyl-hint-active-outline) !important;\n"
|
||||
: "")
|
||||
|
||||
// If these are set to "none" they won't be added to the page at all so only need to handle active
|
||||
const activeOverlayRules =
|
||||
(hintElemOptions.overlay === "active"
|
||||
? ".TridactylHintHighlight { display:none; } .TridactylHintHighlightActive { display: block !important; }"
|
||||
: "") +
|
||||
(hintElemOptions.overlayoutline === "active"
|
||||
? ".TridactylHintOutline { display:none; } .TridactylHintOutlineActive { display: block !important; }"
|
||||
: "")
|
||||
|
||||
hintElemCss.code =
|
||||
(hintElemRules !== ""
|
||||
? ".TridactylHintElem {\n" + hintElemRules + "}\n"
|
||||
: "") +
|
||||
(activeElemRules !== ""
|
||||
? ".TridactylHintActive {\n" + activeElemRules + "}\n"
|
||||
: "")
|
||||
: "") +
|
||||
activeOverlayRules
|
||||
|
||||
if (hintElemCss.code !== "") {
|
||||
await browserBg.tabs.insertCSS(await ownTabId(), hintElemCss)
|
||||
|
|
@ -152,6 +166,7 @@ function retheme() {
|
|||
}
|
||||
|
||||
config.addChangeListener("theme", retheme)
|
||||
config.addChangeListener("hintstyles", retheme)
|
||||
|
||||
/**
|
||||
* DEPRECATED
|
||||
|
|
|
|||
|
|
@ -6433,4 +6433,27 @@ export async function profilerename(oldName: string, newName: string) {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Disable all hilighting of hintable elements when hinting.
|
||||
* Only hint flags will remain, Vimium style.
|
||||
*/
|
||||
export function hintstylesnohighlights() {
|
||||
["fg","bg","outline","overlay","overlayoutline"].forEach(type => config.set("hintstyles", type, "none"))
|
||||
}
|
||||
|
||||
/**
|
||||
* Add highlights over the page when hinting and leave original elements unchanged.
|
||||
*/
|
||||
export function hintstylesoverlays() {
|
||||
["fg", "bg","outline"].forEach(type => config.set("hintstyles", type, "none"))
|
||||
;["overlay","overlayoutline"].forEach(type => config.set("hintstyles", type, "all"))
|
||||
}
|
||||
|
||||
/**
|
||||
* Style hintable elements directly when hinting.
|
||||
*/
|
||||
export function hintstylesdirect() {
|
||||
["fg","bg","outline"].forEach(type => config.set("hintstyles", type, "all"))
|
||||
;["overlay","overlayoutline"].forEach(type => config.set("hintstyles", type, "none"))
|
||||
}
|
||||
// }}}
|
||||
|
|
|
|||
|
|
@ -1378,6 +1378,7 @@ export class default_config {
|
|||
|
||||
/**
|
||||
* Which css styles to add for hint elements.
|
||||
* Optionally add extra elements to the page to highlight hints using overlay and overlay outline.
|
||||
*
|
||||
* Use `hintstyles.fg` for text color, `hintstyles.bg` for background color, `hintstyles.outline` for outlines.
|
||||
* Values may be set to "all" to enable the style for all hints, "active" to enable the style only for the currently selected hint, or "none" to disable the style completely.
|
||||
|
|
@ -1389,6 +1390,8 @@ export class default_config {
|
|||
fg: "all",
|
||||
bg: "all",
|
||||
outline: "all",
|
||||
overlay: "none",
|
||||
overlayoutline: "none",
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ span.TridactylHint {
|
|||
font-size: var(--tridactyl-hintspan-font-size) !important;
|
||||
font-weight: var(--tridactyl-hintspan-font-weight) !important;
|
||||
color: var(--tridactyl-hintspan-fg) !important;
|
||||
background-color: var(--tridactyl-hintspan-bg) !important;
|
||||
background: var(--tridactyl-hintspan-bg) !important;
|
||||
border-color: var(--tridactyl-hintspan-border-color) !important;
|
||||
border-width: var(--tridactyl-hintspan-border-width) !important;
|
||||
min-width: 0.75em !important;
|
||||
|
|
@ -16,6 +16,12 @@ span.TridactylHint {
|
|||
z-index: 2147483646 !important;
|
||||
}
|
||||
|
||||
span.TridactylHint.TridactylHintSpanActive {
|
||||
color: var(--tridactyl-hintspan-active-fg) !important;
|
||||
background: var(--tridactyl-hintspan-active-bg) !important;
|
||||
border-color: var(--tridactyl-hintspan-active-border-color) !important;
|
||||
}
|
||||
|
||||
span.TridactylHintCharPressed {
|
||||
color: var(--tridactyl-hintspan-pressed-fg) !important;
|
||||
}
|
||||
|
|
@ -44,3 +50,55 @@ span.TridactylJSHint {
|
|||
.TridactylKilledElem {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
div.TridactylHud {
|
||||
position: fixed !important;
|
||||
inset: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
z-index: 2147483647 !important;
|
||||
overflow: clip !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
div.TridactylHud > * {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
div.TridactylHudTranslation {
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
div.TridactylHintHighlight,
|
||||
div.TridactylHintOutline,
|
||||
div.TridactylHintHighlightActive,
|
||||
div.TridactylHintOutlineActive {
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
div.TridactylHintHighlight {
|
||||
background: var(--tridactyl-hint-highlight-bg) !important;
|
||||
}
|
||||
|
||||
div.TridactylHintHighlightActive {
|
||||
background: var(--tridactyl-hint-highlight-active-bg) !important;
|
||||
}
|
||||
|
||||
div.TridactylHintOutline {
|
||||
outline: var(--tridactyl-hint-highlight-outline) !important;
|
||||
}
|
||||
|
||||
div.TridactylHintOutlineActive {
|
||||
outline: var(--tridactyl-hint-highlight-active-outline) !important;
|
||||
}
|
||||
|
||||
div.TridactylHintHighlight *, div.TridactylHintOutline * {
|
||||
position: absolute !important;
|
||||
background: inherit !important;
|
||||
outline: inherit !important;
|
||||
}
|
||||
|
||||
div.TridactylHintHighlightHost {
|
||||
opacity: var(--tridactyl-hint-highlight-opacity) !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,14 +34,28 @@
|
|||
--tridactyl-hintspan-border-style: solid;
|
||||
--tridactyl-hintspan-js-background: hsla(0, 0%, 65%);
|
||||
|
||||
--tridactyl-hintspan-active-fg: var(--tridactyl-hintspan-fg);
|
||||
--tridactyl-hintspan-active-bg: var(--tridactyl-hintspan-bg);
|
||||
--tridactyl-hintspan-active-border-color: var(--tridactyl-hintspan-border-color);
|
||||
|
||||
/* Element highlights */
|
||||
--tridactyl-hint-active-fg: var(--tridactyl-fg);
|
||||
--tridactyl-hint-fg: var(--tridactyl-fg);
|
||||
--tridactyl-hint-active-fg: var(--tridactyl-hint-fg);
|
||||
--tridactyl-hint-active-bg: #88ff00;
|
||||
--tridactyl-hint-active-outline: 1px solid #cc0000;
|
||||
|
||||
--tridactyl-hint-bg: rgba(255, 255, 0, 0.25);
|
||||
--tridactyl-hint-outline: 1px solid #8f5902;
|
||||
|
||||
/* Element highlight overlays */
|
||||
--tridactyl-hint-highlight-fg: var(--tridactyl-hint-fg);
|
||||
--tridactyl-hint-highlight-active-fg: var(--tridactyl-hint-active-fg);
|
||||
--tridactyl-hint-highlight-bg: var(--tridactyl-hint-bg);
|
||||
--tridactyl-hint-highlight-active-bg: var(--tridactyl-hint-active-bg);
|
||||
--tridactyl-hint-highlight-outline: var(--tridactyl-hint-outline);
|
||||
--tridactyl-hint-highlight-active-outline: var(--tridactyl-hint-active-outline);
|
||||
--tridactyl-hint-highlight-opacity: 0.25;
|
||||
|
||||
/* :viewsource */
|
||||
--tridactyl-vs-bg: var(--tridactyl-bg);
|
||||
--tridactyl-vs-fg: var(--tridactyl-fg);
|
||||
|
|
|
|||
260
src/static/themes/tokyonight/tokyonight.css
Normal file
260
src/static/themes/tokyonight/tokyonight.css
Normal file
|
|
@ -0,0 +1,260 @@
|
|||
:root {
|
||||
/* Colour swatches */
|
||||
|
||||
/* declaring variables like this allows rgba() conversion for opacity */
|
||||
--tritheme-red-rgb: 247, 118, 142;
|
||||
--tritheme-orange-rgb: 255, 158, 100;
|
||||
--tritheme-orange2-rgb: 252, 161, 48;
|
||||
--tritheme-orange3-rgb: 255, 150, 108;
|
||||
--tritheme-yellow-rgb: 224, 175, 104;
|
||||
--tritheme-green-rgb: 115, 122, 162;
|
||||
--tritheme-cyan-rgb: 125, 207, 255;
|
||||
--tritheme-lightblue-rgb: 200, 211, 245;
|
||||
--tritheme-blue-rgb: 61, 89, 161;
|
||||
--tritheme-blue2-rgb: 86, 95, 137;
|
||||
--tritheme-blue3-rgb: 99, 109, 166;
|
||||
--tritheme-darkblue-rgb: 31, 35, 53;
|
||||
--tritheme-darkblue2-rgb: 21, 17, 51;
|
||||
--tritheme-darkblue3-rgb: 59, 66, 97;
|
||||
--tritheme-darkblue4-rgb: 34, 36, 54;
|
||||
--tritheme-darkblue5-rgb: 41, 46, 66;
|
||||
--tritheme-purple-rgb: 157, 124, 216;
|
||||
|
||||
/* Tokyonight moon colours */
|
||||
--tritheme-moon-orange-rgb: 56, 52, 61;
|
||||
--tritheme-moon-yellow-rgb: 255, 199, 119;
|
||||
--tritheme-moon-green-rgb: 195, 232, 141;
|
||||
--tritheme-moon-green2-rgb: 79, 214, 190;
|
||||
--tritheme-moon-green3-rgb: 200, 211, 245;
|
||||
--tritheme-moon-teal-rgb: 79, 214, 190;
|
||||
--tritheme-moon-blue-rgb: 130, 170, 255;
|
||||
--tritheme-moon-blue2-rgb: 101, 188, 255;
|
||||
--tritheme-moon-blue3-rgb: 13, 185, 215;
|
||||
--tritheme-moon-blue4-rgb: 62, 104, 215;
|
||||
--tritheme-moon-darkblue-rgb: 32, 51, 70;
|
||||
--tritheme-moon-darkblue2-rgb: 30, 32, 48;
|
||||
--tritheme-moon-purple-rgb: 252, 167, 234;
|
||||
--tritheme-moon-magenta-rgb: 192, 153, 255;
|
||||
--tritheme-moon-magenta2-rgb: 255, 0, 124;
|
||||
|
||||
/* rgb colours */
|
||||
--tritheme-red: rgb(var(--tritheme-red-rgb));
|
||||
--tritheme-orange: rgb(var(--tritheme-orange-rgb));
|
||||
--tritheme-orange2: rgb(var(--tritheme-orange2-rgb));
|
||||
--tritheme-orange3: rgb(var(--tritheme-orange3-rgb));
|
||||
--tritheme-yellow: rgb(var(--tritheme-yellow-rgb));
|
||||
--tritheme-green: rgb(var(--tritheme-green-rgb));
|
||||
--tritheme-cyan: rgb(var(--tritheme-cyan-rgb));
|
||||
--tritheme-lightblue: rgb(var(--tritheme-lightblue-rgb));
|
||||
--tritheme-blue: rgb(var(--tritheme-blue-rgb));
|
||||
--tritheme-blue2: rgb(var(--tritheme-blue2-rgb));
|
||||
--tritheme-blue3: rgb(var(--tritheme-blue3-rgb));
|
||||
--tritheme-darkblue: rgb(var(--tritheme-darkblue-rgb));
|
||||
--tritheme-darkblue2: rgb(var(--tritheme-darkblue2-rgb));
|
||||
--tritheme-darkblue3: rgb(var(--tritheme-darkblue3-rgb));
|
||||
--tritheme-darkblue4: rgb(var(--tritheme-darkblue4-rgb));
|
||||
--tritheme-purple: rgb(var(--tritheme-purple-rgb));
|
||||
|
||||
--tritheme-moon-orange: rgb(var(--tritheme-moon-orange-rgb));
|
||||
--tritheme-moon-yellow: rgb(var(--tritheme-moon-yellow-rgb));
|
||||
--tritheme-moon-green: rgb(var(--tritheme-moon-green-rgb));
|
||||
--tritheme-moon-green2: rgb(var(--tritheme-moon-green2-rgb));
|
||||
--tritheme-moon-green3: rgb(var(--tritheme-moon-green3-rgb));
|
||||
--tritheme-moon-teal: rgb(var(--tritheme-moon-teal-rgb));
|
||||
--tritheme-moon-blue: rgb(var(--tritheme-moon-blue-rgb));
|
||||
--tritheme-moon-blue2: rgb(var(--tritheme-moon-blue2-rgb));
|
||||
--tritheme-moon-blue3: rgb(var(--tritheme-moon-blue3-rgb));
|
||||
--tritheme-moon-blue4: rgb(var(--tritheme-moon-blue4-rgb));
|
||||
--tritheme-moon-darkblue: rgb(var(--tritheme-moon-darkblue-rgb));
|
||||
--tritheme-moon-darkblue2: rgb(var(--tritheme-moon-darkblue2-rgb));
|
||||
--tritheme-moon-purple: rgb(var(--tritheme-moon-purple-rgb));
|
||||
--tritheme-moon-magenta: rgb(var(--tritheme-moon-magenta-rgb));
|
||||
--tritheme-moon-magenta2: rgb(var(--tritheme-moon-magenta2-rgb));
|
||||
|
||||
/* Generic */
|
||||
--tridactyl-font-family: "JetBrains Mono", "SF Mono", monospace;
|
||||
--tridactyl-bg: var(--tritheme-darkblue4);
|
||||
--tridactyl-fg: var(--tritheme-lightblue);
|
||||
--tridactyl-private-window-icon-url: url("chrome://global/skin/icons/indicator-private-browsing.svg");
|
||||
|
||||
/* Mode indicator */
|
||||
--tridactyl-status-fg: white;
|
||||
--tridactyl-status-border: var(--tritheme-darkblue2) solid 1.5px;
|
||||
--tridactyl-status-bg: rgba(var(--tritheme-darkblue4-rgb), 0.5);
|
||||
|
||||
--tritheme-status-private-border: var(--tridactyl-status-border);
|
||||
--tritheme-status-private-bg: var(--tridactyl-status-bg);
|
||||
|
||||
/* Search highlight */
|
||||
--tridactyl-search-highlight-color: yellow;
|
||||
|
||||
/* Hinting */
|
||||
|
||||
/* Hint character tags */
|
||||
--tridactyl-hintspan-font-family: var(--tridactyl-font-family);
|
||||
--tridactyl-hintspan-font-size: var(--tridactyl-small-font-size);
|
||||
--tridactyl-hintspan-bg: var(--tritheme-moon-darkblue);
|
||||
--tridactyl-hintspan-fg: var(--tritheme-moon-green2);
|
||||
--tridactyl-hintspan-js-background: var(--tritheme-darkblue4);
|
||||
--tridactyl-hintspan-border-width: 1px;
|
||||
--tridactyl-hintspan-border-color: var(--tritheme-moon-magenta);
|
||||
|
||||
--tritheme-hintspan-padding: 0.5px;
|
||||
|
||||
--tridactyl-hintspan-active-fg: var(--tridactyl-hintspan-bg);
|
||||
--tridactyl-hintspan-active-bg: var(--tritheme-moon-yellow);
|
||||
|
||||
--tridactyl-hintspan-pressed-fg: grey;
|
||||
|
||||
/* Element highlights */
|
||||
--tritactyl-hint-fg: rgb(211, 235, 249);
|
||||
--tridactyl-hint-bg: rgba(0, 4, 66, 0.35);
|
||||
--tridactyl-hint-outline: 1px solid var(--tritheme-purple);
|
||||
|
||||
--tridactyl-hint-active-fg: rgb(27, 29, 43);
|
||||
--tridactyl-hint-active-bg: var(--tritheme-orange3);
|
||||
--tridactyl-hint-active-outline: 1px solid var(--tritheme-moon-yellow);
|
||||
|
||||
--tridactyl-hint-highlight-opacity: 0.25;
|
||||
|
||||
--tridactyl-hint-highlight-fg: var(--tritheme-cyan);
|
||||
--tridactyl-hint-highlight-bg: var(--tritheme-moon-blue2);
|
||||
|
||||
--tridactyl-hint-highlight-active-fg: var(--tritheme-moon-yellow);
|
||||
--tridactyl-hint-highlight-active-bg: var(--tritheme-orange);
|
||||
|
||||
/* Commandline */
|
||||
|
||||
--tridactyl-cmdl-fg: var(--tritheme-lightblue);
|
||||
--tridactyl-cmdl-bg: var(--tritheme-darkblue4);
|
||||
--tridactyl-cmdl-font-family: var(--tridactyl-font-family);
|
||||
|
||||
--tritheme-cmdl-border-color: var(--tritheme-moon-blue3);
|
||||
--tridactyl-cmdl-input-border: 0.5px solid var(--tritheme-cmdl-border-color);
|
||||
|
||||
--tritheme-cmdl-before-fg: var(--tritheme-moon-blue3);
|
||||
--tritheme-cmdl-before-content: "> ";
|
||||
|
||||
/* Completions */
|
||||
|
||||
/* Completions - Generic */
|
||||
|
||||
--tridactyl-cmplt-fg: var(--tritheme-moon-magenta);
|
||||
--tridactyl-cmplt-bg: var(--tritheme-moon-darkblue2);
|
||||
--tridactyl-cmplt-font-family: var(--tridactyl-font-family);
|
||||
--tridactyl-cmplt-border-top: 1px solid #0c0c0d;
|
||||
|
||||
/* Completions - Excmds */
|
||||
|
||||
--tritheme-cmpltexcmds-fg: var(--tritheme-moon-magenta);
|
||||
|
||||
/* Completions - Documentation */
|
||||
|
||||
--tritheme-cmddoc-fg: var(--tritheme-blue3);
|
||||
|
||||
/* Section header */
|
||||
--tridactyl-header-first-bg: var(--tritheme-darkblue4);
|
||||
--tridactyl-header-second-bg: var(--tritheme-darkblue4);
|
||||
--tridactyl-header-third-bg: var(--tritheme-darkblue4);
|
||||
|
||||
/* URL style */
|
||||
|
||||
--tridactyl-url-fg: var(--tritheme-purple);
|
||||
--tridactyl-url-bg: none;
|
||||
|
||||
/* Option focused */
|
||||
|
||||
--tridactyl-of-fg: var(--tritheme-moon-yellow);
|
||||
--tridactyl-of-bg: var(--tritheme-moon-orange);
|
||||
|
||||
/* New tab - generic */
|
||||
|
||||
--tritheme-link-fg: var(--tritheme-cyan);
|
||||
|
||||
/* New tab - spoiler box */
|
||||
|
||||
--tridactyl-highlight-box-bg: #4a4a4f;
|
||||
--tridactyl-highlight-box-fg: #d7d7db;
|
||||
|
||||
--tritheme-changelog-border-colour: #737373;
|
||||
}
|
||||
|
||||
#command-line-holder {
|
||||
border-top: var(--tridactyl-cmdl-input-border);
|
||||
border-bottom: var(--tridactyl-cmdl-input-border);
|
||||
}
|
||||
|
||||
.TridactylPrivate {
|
||||
border: var(--tritheme-status-private-border) !important;
|
||||
background: var(--tritheme-status-private-bg) !important;
|
||||
}
|
||||
|
||||
span.TridactylHint {
|
||||
padding: var(--tritheme-hintspan-padding) !important;
|
||||
}
|
||||
|
||||
span.TridactylHint.TridactylJSHint {
|
||||
color: var(--tritheme-orange2) !important;
|
||||
}
|
||||
|
||||
span.TridactylHint.TridactylJSHint.TridactylHintSpanActive {
|
||||
color: var(--tridactyl-hintspan-active-fg) !important;
|
||||
}
|
||||
|
||||
:root #tridactyl-colon::before,
|
||||
:root .ExcmdCompletionOption td.excmd::before {
|
||||
color: var(--tritheme-cmdl-before-fg);
|
||||
content: var(--tritheme-cmdl-before-content);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* prevent input from going to two lines with the ::before chars */
|
||||
:root #tridactyl-input {
|
||||
width: calc(100% - 3em);
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
:root #completions .focused,
|
||||
:root #completions .focused .url {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* styles for specific completion types */
|
||||
:root #completions td.documentation,
|
||||
:root #completions td.doc {
|
||||
color: var(--tritheme-cmddoc-fg);
|
||||
font-style: italic;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.focused td.documentation,
|
||||
.focused td.doc {
|
||||
color: var(--tridactyl-of-fg);
|
||||
}
|
||||
|
||||
td.excmd,
|
||||
td.name {
|
||||
color: var(--tritheme-cmpltexcmds-fg);
|
||||
}
|
||||
|
||||
td.excmd {
|
||||
/* line up excmds + ::before with input */
|
||||
padding-left: 0.125ex !important;
|
||||
}
|
||||
|
||||
td.title {
|
||||
color: var(--tritheme-cyan);
|
||||
}
|
||||
|
||||
/* tridactyl changelog on new tab page */
|
||||
:root.TridactylOwnNamespace input[id^="spoiler"] ~ .spoiler {
|
||||
border-color: var(--tritheme-changelog-border-colour);
|
||||
}
|
||||
|
||||
/* link colours on the tridactyl new tab page */
|
||||
:root.TridactylOwnNamespace a {
|
||||
color: var(--tritheme-link-fg);
|
||||
}
|
||||
|
||||
130
src/static/themes/vimium/vimium.css
Normal file
130
src/static/themes/vimium/vimium.css
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
:root {
|
||||
--tritheme-red: rgb(217,16,70);
|
||||
|
||||
--tridactyl-hintspan-fg: black;
|
||||
--tridactyl-hintspan-bg: linear-gradient(0, rgb(255, 197, 66) 0, rgb(255,247,133) 100%);
|
||||
|
||||
--tridactyl-hintspan-active-fg: white;
|
||||
--tridactyl-hintspan-active-bg: linear-gradient(0, rgb(180,8,50) 0, var(--tritheme-red) 100%);
|
||||
--tridactyl-hintspan-active-border-color: rgb(190,0,25);
|
||||
--tridactyl-hintspan-active-border-width: 1px;
|
||||
--tridactyl-hintspan-pressed-fg: rgb(212, 172, 58);
|
||||
|
||||
--tridactyl-hint-fg: black;
|
||||
--tridactyl-hint-bg: rgba(251, 255, 118, 0.25);
|
||||
--tridactyl-hint-outline: 1px solid #91804c;
|
||||
|
||||
--tridactyl-hint-active-fg: var(--tritheme-red);
|
||||
--tridactyl-hint-active-bg: rgba(180, 16, 60, 0.25);
|
||||
--tridactyl-hint-active-outline: 1px solid var(--tritheme-red);
|
||||
|
||||
--tridactyl-hint-highlight-bg: rgb(255, 236, 118);
|
||||
--tridactyl-hint-highlight-active-bg: var(--tritheme-red);
|
||||
|
||||
--tridactyl-cmdl-font-size: 1.5rem;
|
||||
--tridactyl-cmdl-line-height: 1.5;
|
||||
|
||||
--tridactyl-cmplt-option-height: 1.4em;
|
||||
--tridactyl-cmplt-font-size: var(--tridactyl-small-font-size);
|
||||
--tridactyl-cmplt-border-top: unset;
|
||||
}
|
||||
|
||||
span.TridactylHint {
|
||||
box-shadow: rgba(0,0,0,0.3) 0 3px 7px 0 !important;
|
||||
padding: 1px 3px 0 !important;
|
||||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
span.TridactylHintSpanActive > span.TridactylHintCharPressed {
|
||||
color: rgb(120, 20, 20) !important;
|
||||
}
|
||||
|
||||
/* Shydactyl's command line rules follow */
|
||||
:root #command-line-holder {
|
||||
order: 1;
|
||||
border: 2px solid var(--tridactyl-cmdl-fg);
|
||||
color: var(--tridactyl-cmdl-bg);
|
||||
}
|
||||
|
||||
:root #tridactyl-input {
|
||||
width: 90%;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
:root #completions table {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 200;
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
padding: 1rem;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
:root #completions > div {
|
||||
max-height: calc(20 * var(--tridactyl-cmplt-option-height));
|
||||
min-height: calc(10 * var(--tridactyl-cmplt-option-height));
|
||||
}
|
||||
|
||||
/* COMPLETIONS */
|
||||
|
||||
:root #completions {
|
||||
font-weight: 200;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
/* Olie doesn't know how CSS inheritance works */
|
||||
:root #completions .HistoryCompletionSource {
|
||||
max-height: unset;
|
||||
min-height: unset;
|
||||
}
|
||||
|
||||
:root #completions .HistoryCompletionSource table {
|
||||
width: 100%;
|
||||
font-size: 9pt;
|
||||
border-spacing: 0;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
/* redundancy 2: redundancy 2: more redundancy */
|
||||
:root #completions .BmarkCompletionSource {
|
||||
max-height: unset;
|
||||
min-height: unset;
|
||||
}
|
||||
|
||||
:root #completions table tr td.prefix,
|
||||
:root #completions table tr td.privatewindow,
|
||||
:root #completions table tr td.container,
|
||||
:root #completions table tr td.icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:root #completions .BufferCompletionSource table {
|
||||
width: unset;
|
||||
font-size: unset;
|
||||
border-spacing: unset;
|
||||
table-layout: unset;
|
||||
}
|
||||
|
||||
:root #completions table tr {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
:root #completions .sectionHeader {
|
||||
background: unset;
|
||||
padding: 1rem !important;
|
||||
padding-left: unset;
|
||||
padding-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
:root #cmdline_iframe {
|
||||
position: fixed !important;
|
||||
bottom: unset;
|
||||
top: 25% !important;
|
||||
left: 10% !important;
|
||||
z-index: 2147483647 !important;
|
||||
width: 80% !important;
|
||||
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px !important;
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue