217 lines
4.1 KiB
CSS
217 lines
4.1 KiB
CSS
/* Catppuccin Macchiato Palette */
|
|
|
|
:root {
|
|
--vimium-rosewater: #f4dbd6;
|
|
--vimium-peach: #f5a97f;
|
|
--vimium-green: #a6da95;
|
|
--vimium-blue: #8aadf4;
|
|
--vimium-lavender: #b7bdf8;
|
|
--vimium-text: #cad3f5;
|
|
--vimium-mauve: #c6a0f6;
|
|
--vimium-subtext0: #a5adcb
|
|
--vimium-subtext1: #b8c0e0
|
|
--vimium-surface2: #5b6078;
|
|
--vimium-surface1: #494d64;
|
|
--vimium-surface0: #363a4f;
|
|
--vimium-base: #24273a;
|
|
--vimium-mantle: #1e2030;
|
|
--vimium-crust: #181926;
|
|
|
|
--vimium-foreground-text-color: var(--vimium-text);
|
|
--vimium-background-text-color: var(--vimium-text);
|
|
--vimium-foreground-color: var(--vimium-mantle);
|
|
}
|
|
|
|
/* link hints */
|
|
|
|
#vimium-hint-marker-container div.internal-vimium-hint-marker,
|
|
#vimium-hint-marker-container div.vimiumHintMarker {
|
|
padding: 3px 4px;
|
|
background: var(--vimium-mauve);
|
|
border: 10px;
|
|
border-color: var(--vimium-mantle);
|
|
box-shadow: none;
|
|
}
|
|
|
|
#vimium-hint-marker-container div span {
|
|
color: var(--vimium-mantle);
|
|
text-shadow: none;
|
|
}
|
|
|
|
#vimium-hint-marker-container div span.matchingCharacter {
|
|
color: var(--vimium-surface2);
|
|
}
|
|
|
|
/* vomnibar */
|
|
|
|
#vomnibar {
|
|
background: var(--vimium-base);
|
|
border: 2px solid var(--vimium-lavender);
|
|
animation: show 200ms cubic-bezier(0, 0, 0.2, 1) forwards;
|
|
max-height: calc(100vh - 70px);
|
|
overflow: hidden;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
@keyframes show {
|
|
0% {
|
|
transform: translateY(50px);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
#vomnibar input {
|
|
color: var(--vimium-text);
|
|
background: var(--vimium-base);
|
|
border: none;
|
|
box-shadow: none;
|
|
height: unset;
|
|
padding: 16px 30px;
|
|
}
|
|
|
|
#vomnibar #vomnibar-search-area {
|
|
border: none;
|
|
padding: unset;
|
|
background: var(--vimium-base);
|
|
}
|
|
|
|
#vomnibar ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
background: var(--vimium-base);
|
|
border-top: 1px solid var(--vimium-surface0);
|
|
}
|
|
|
|
#vomnibar li {
|
|
padding: 10px;
|
|
border-bottom: 1px solid var(--vimium-surface0);
|
|
}
|
|
|
|
#vomnibar li .top-half,
|
|
#vomnibar li .bottom-half {
|
|
padding: 3px 0;
|
|
}
|
|
|
|
#vomnibar li .source {
|
|
color: var(--vimium-mauve);
|
|
}
|
|
|
|
#vomnibar li em,
|
|
#vomnibar li .title {
|
|
color: var(--vimium-blue);
|
|
font-weight: bold;
|
|
}
|
|
|
|
#vomnibar li .url {
|
|
color: var(--vimium-rosewater);
|
|
}
|
|
|
|
#vomnibar li .match {
|
|
color: var(--vimium-green);
|
|
font-weight: bold;
|
|
}
|
|
|
|
#vomnibar li .title .match {
|
|
color: var(--vimium-blue);
|
|
}
|
|
|
|
#vomnibar li.selected {
|
|
background-color: var(--vimium-surface0);
|
|
}
|
|
|
|
/* search/find hud */
|
|
|
|
div#hud-container {
|
|
background: var(--vimium-base);
|
|
border: 1px solid var(--vimium-text);
|
|
box-shadow: none;
|
|
}
|
|
|
|
div#hud-container span#hud-find-input,
|
|
div#hud-container div#hud {
|
|
color: var(--vimium-text);
|
|
}
|
|
|
|
div#hud-container .hud-find,
|
|
div#hud-container #search-area {
|
|
background-color: var(--vimium-base);
|
|
}
|
|
|
|
::selection {
|
|
background-color: var(--vimium-peach) !important;
|
|
color: var(--vimium-mantle) !important;
|
|
}
|
|
|
|
/* vimium settings */
|
|
|
|
body.vimium-body header,
|
|
body.vimium-body label,
|
|
body.vimium-body {
|
|
color: var(--vimium-text);
|
|
background-color: var(--vimium-base);
|
|
}
|
|
|
|
body.vimium-body button,
|
|
body.vimium-body footer,
|
|
body.vimium-body textarea,
|
|
body.vimium-body input {
|
|
scrollbar-color: var(--vimium-surface2) var(--vimium-surface0);
|
|
background-color: var(--vimium-mantle);
|
|
}
|
|
|
|
body.vimium-body #wrapper .example {
|
|
color: var(--vimium-subtext1);
|
|
}
|
|
|
|
body.vimium-body a {
|
|
color: var(--vimium-lavender);
|
|
}
|
|
|
|
body.vimium-body input,
|
|
body.vimium-body button {
|
|
border-color: var(--vimium-crust);
|
|
}
|
|
|
|
body.vimium-body button:focus {
|
|
border-color: var(--vimium-blue);
|
|
}
|
|
|
|
/* help dialog */
|
|
|
|
#dialog {
|
|
color: var(--vimium-text);
|
|
background: var(--vimium-mantle);
|
|
}
|
|
|
|
#dialog .divider {
|
|
background: var(--vimium-text);
|
|
}
|
|
|
|
#dialog a,
|
|
#dialog span.vim {
|
|
color: var(--vimium-blue);
|
|
}
|
|
|
|
#dialog div.help-description,
|
|
#dialog h2,
|
|
#dialog h1,
|
|
#dialog a#close {
|
|
color: var(--vimium-text);
|
|
}
|
|
|
|
#dialog a#close:hover {
|
|
color: var(--vimium-surface0);
|
|
}
|
|
|
|
#dialog .key,
|
|
body.vimium-body .key {
|
|
color: var(--vimium-text);
|
|
background: var(--vimium-mantle);
|
|
border-color: var(--vimium-surface1);
|
|
}
|
|
|