mirror of https://github.com/josh-berry/tab-stash
148 lines
3.0 KiB
Plaintext
148 lines
3.0 KiB
Plaintext
// The prototypical toolbar button, or "action".
|
|
.action {
|
|
.icon-wrapper();
|
|
.icon-background-setup();
|
|
color: var(--page-fg);
|
|
cursor: default;
|
|
|
|
&:hover,
|
|
&:focus-within {
|
|
background-color: var(--button-hover-bg);
|
|
box-shadow: none; // Overrides generic :focus box-shadow
|
|
}
|
|
|
|
&:active {
|
|
background-color: var(--button-active-bg);
|
|
}
|
|
}
|
|
|
|
// A group of related actions packaged together into a single container
|
|
nav.action-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
|
|
// For child actions, we override the border-radius so we can get a nice
|
|
// "pill" look to the entire group.
|
|
.action {
|
|
border-radius: 0;
|
|
}
|
|
|
|
& > .action:first-child,
|
|
& > :first-child .action {
|
|
border-top-left-radius: var(--ctrl-border-radius);
|
|
border-bottom-left-radius: var(--ctrl-border-radius);
|
|
}
|
|
|
|
& > .action:last-child,
|
|
& > :last-child .action {
|
|
border-top-right-radius: var(--ctrl-border-radius);
|
|
border-bottom-right-radius: var(--ctrl-border-radius);
|
|
}
|
|
}
|
|
|
|
.action.first {
|
|
border-top-left-radius: var(--ctrl-border-radius);
|
|
border-bottom-left-radius: var(--ctrl-border-radius);
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.action.middle {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.action.last {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
border-top-right-radius: var(--ctrl-border-radius);
|
|
border-bottom-right-radius: var(--ctrl-border-radius);
|
|
}
|
|
|
|
//
|
|
// SPECIFIC ACTIONS
|
|
//
|
|
|
|
// Background colors for each action
|
|
.action-container:hover .action {
|
|
.def(@color) {
|
|
background-color: var(e("--@{color}-bg"));
|
|
&:hover {
|
|
background-color: var(e("--@{color}-hover-bg"));
|
|
}
|
|
&:active {
|
|
background-color: var(e("--@{color}-active-bg"));
|
|
}
|
|
}
|
|
&.neutral {
|
|
.def(button);
|
|
}
|
|
&.rename {
|
|
.def(update);
|
|
}
|
|
&.stash {
|
|
.def(create);
|
|
}
|
|
&.restore {
|
|
.def(read);
|
|
}
|
|
&.restore-remove {
|
|
.def(update);
|
|
}
|
|
&.remove {
|
|
.def(delete);
|
|
}
|
|
}
|
|
|
|
// Icons for each action
|
|
.action {
|
|
&.mainmenu {
|
|
background-image: var(--icon-mainmenu);
|
|
}
|
|
&.collapse {
|
|
background-image: var(--icon-collapse-open);
|
|
}
|
|
&.expand {
|
|
background-image: var(--icon-collapse-closed);
|
|
}
|
|
&.cancel {
|
|
background-image: var(--icon-cancel);
|
|
}
|
|
&.stash {
|
|
background-image: var(--icon-stash);
|
|
}
|
|
&.stash.one {
|
|
background-image: var(--icon-stash-one);
|
|
}
|
|
&.stash.newgroup {
|
|
background-image: var(--icon-new-empty-group);
|
|
}
|
|
&.rename {
|
|
background-image: var(--icon-rename);
|
|
}
|
|
&.restore {
|
|
background-image: var(--icon-restore);
|
|
}
|
|
&.restore-remove {
|
|
background-image: var(--icon-restore-del);
|
|
}
|
|
&.remove {
|
|
background-image: var(--icon-delete);
|
|
}
|
|
&.remove.stashed {
|
|
background-image: var(--icon-delete-stashed);
|
|
}
|
|
&.remove.opened {
|
|
background-image: var(--icon-delete-opened);
|
|
}
|
|
&.back {
|
|
background-image: var(--icon-back);
|
|
}
|
|
}
|
|
|
|
// A "cancel" action within a notification should use the inverse icon (since
|
|
// notifications have inverse coloration)
|
|
.notification .action.cancel {
|
|
background-image: var(--icon-cancel-inverse);
|
|
}
|