mirror of https://github.com/josh-berry/tab-stash
83 lines
2.9 KiB
Plaintext
83 lines
2.9 KiB
Plaintext
& {
|
|
--modal-bg: hsla(240deg, 4%, 5%, 30%);
|
|
|
|
--page-bg: hsl(240deg, 1%, 100%);
|
|
--page-fg: hsl(240deg, 4%, 5%);
|
|
--disabled-fg: hsl(0deg, 0%, 45%);
|
|
--userlink-fg: hsl(214deg, 100%, 44%);
|
|
--userlink-hover-fg: hsl(214deg, 100%, 60%);
|
|
--userlink-hover-bg: var(--button-bg);
|
|
--userlink-active-fg: hsl(214deg, 100%, 70%);
|
|
--userlink-active-bg: var(--button-hover-bg);
|
|
|
|
--selected-bg: hsl(214deg, 100%, 90%);
|
|
--selected-hover-bg: hsl(214deg, 100%, 80%);
|
|
|
|
--ctrl-bg: hsl(240deg, 1%, 100%);
|
|
--ctrl-border-clr: hsla(240deg, 4%, 5%, 25%);
|
|
--button-bg: hsla(240deg, 4%, 5%, 10%);
|
|
--button-hover-bg: hsla(240deg, 4%, 5%, 20%);
|
|
--button-active-bg: hsla(240deg, 4%, 5%, 30%);
|
|
|
|
--ephemeral-hover-shadow-clr: hsla(240deg, 4%, 5%, 15%);
|
|
|
|
--group-bg: hsl(240deg, 1%, 95%);
|
|
--group-border-clr: hsl(240deg, 1%, 80%);
|
|
--group-disabled-bg: hsl(240deg, 15%, 90%);
|
|
|
|
--indent-guide-border-clr: hsla(240deg, 1%, 80%, 60%);
|
|
|
|
--action-bg-alpha: 40%;
|
|
--action-hover-bg-alpha: 60%;
|
|
--action-active-bg-alpha: 90%;
|
|
|
|
/* CRUD colors */
|
|
--create-bg: hsla(214deg, 100%, 80%, var(--action-bg-alpha));
|
|
--create-hover-bg: hsla(214deg, 100%, 75%, var(--action-hover-bg-alpha));
|
|
--create-active-bg: hsla(214deg, 100%, 70%, var(--action-active-bg-alpha));
|
|
--read-bg: hsla(154deg, 100%, 50%, var(--action-bg-alpha));
|
|
--read-hover-bg: hsla(154deg, 100%, 45%, var(--action-hover-bg-alpha));
|
|
--read-active-bg: hsla(154deg, 100%, 40%, var(--action-active-bg-alpha));
|
|
--update-bg: hsla(54deg, 100%, 45%, var(--action-bg-alpha));
|
|
--update-hover-bg: hsla(54deg, 100%, 40%, var(--action-hover-bg-alpha));
|
|
--update-active-bg: hsla(54deg, 100%, 35%, var(--action-active-bg-alpha));
|
|
--delete-bg: hsla(354deg, 100%, 80%, var(--action-bg-alpha));
|
|
--delete-hover-bg: hsla(354deg, 100%, 75%, var(--action-hover-bg-alpha));
|
|
--delete-active-bg: hsla(354deg, 100%, 70%, var(--action-active-bg-alpha));
|
|
|
|
// Spinner colors (which should be more saturated CRUD colors)
|
|
--spinner-gradient: conic-gradient(
|
|
hsl(354, 100%, 80%),
|
|
hsl(54, 100%, 45%),
|
|
hsl(154, 100%, 50%),
|
|
hsl(214, 100%, 80%),
|
|
hsl(354, 100%, 80%)
|
|
);
|
|
|
|
// "Advanced" options background
|
|
--advanced-bg: hsla(354deg, 100%, 80%, 25%);
|
|
|
|
// Container colors and styles. Colors are chosen to be the same as
|
|
// Firefox's to align with FF's visual style.
|
|
--container-color-blue: #37adff;
|
|
--container-color-turquoise: #00c79a;
|
|
--container-color-green: #51cd00;
|
|
--container-color-yellow: #ffcb00;
|
|
--container-color-orange: #ff9f00;
|
|
--container-color-red: #ff613d;
|
|
--container-color-pink: #ff4bda;
|
|
--container-color-purple: #af51f5;
|
|
--container-color-toolbar: #c0c0c0;
|
|
|
|
// The thickness of the container indicator changes between themes because of
|
|
// differing contrast.
|
|
--container-indicator-shadow-style: inset -3px 0px 0px 0px;
|
|
}
|
|
|
|
&[data-view="tab"] {
|
|
--page-bg: hsl(240deg, 15%, 95%);
|
|
--group-bg: hsl(240deg, 1%, 100%);
|
|
}
|
|
|
|
.icon-vars(@theme: light, @inverse: dark);
|