mirror of
https://codeberg.org/forgejo/forgejo
synced 2024-11-26 19:56:11 +01:00
8099238618
I think it's better if the primary actions have primary color instead of green which fits better into the overall single-color UI design. This PR currently replaces every green button with primary: <img width="141" alt="Screenshot 2023-09-16 at 14 07 59" src="https://github.com/go-gitea/gitea/assets/115237/843c1e50-4fb2-4ec6-84ba-0efb9472dcbe"> <img width="161" alt="Screenshot 2023-09-16 at 14 07 51" src="https://github.com/go-gitea/gitea/assets/115237/9442195a-a3b2-4a42-b262-8377d6f5c0d1"> Modal actions now use uncolored/primary instead of previous green/red colors. I also removed the box-shadow on all basic buttons: <img width="259" alt="Screenshot 2023-09-16 at 14 16 39" src="https://github.com/go-gitea/gitea/assets/115237/5beea529-127a-44b0-8d4c-afa7b034a490"> <img width="261" alt="Screenshot 2023-09-16 at 14 17 42" src="https://github.com/go-gitea/gitea/assets/115237/4757f7b2-4d46-49bc-a797-38bb28437b88"> The change currently includes the "Merge PR" button, for which we might want to make an exception to match the icon color there: <img width="442" alt="Screenshot 2023-09-16 at 14 33 53" src="https://github.com/go-gitea/gitea/assets/115237/993ac1a5-c94d-4895-b76c-0d872181a70b">
732 lines
16 KiB
CSS
732 lines
16 KiB
CSS
/* this contains override styles for buttons and related elements */
|
|
|
|
/* these styles changed the Fomantic UI's rules, Fomantic UI expects only "basic" buttons have borders */
|
|
.ui.button,
|
|
.ui.button:focus {
|
|
background: var(--color-button);
|
|
border: 1px solid var(--color-light-border);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.ui.button:hover {
|
|
background: var(--color-hover);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.page-content .ui.button {
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.ui.active.button,
|
|
.ui.button:active,
|
|
.ui.active.button:active,
|
|
.ui.active.button:hover {
|
|
background: var(--color-active);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.delete-button,
|
|
.delete-button:hover {
|
|
color: var(--color-red);
|
|
}
|
|
|
|
/* btn is a plain button without any opinionated styling */
|
|
|
|
.btn {
|
|
background: transparent;
|
|
border-radius: var(--border-radius);
|
|
border: none;
|
|
color: inherit;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.btn:hover,
|
|
.btn:active,
|
|
.btn:focus {
|
|
background: none;
|
|
border: none;
|
|
}
|
|
|
|
a.btn,
|
|
a.btn:hover {
|
|
color: inherit;
|
|
}
|
|
|
|
/* By default, Fomantic UI doesn't support "bordered" buttons group, but Gitea would like to use it.
|
|
And the default buttons always have borders now (not the same as Fomantic UI's default buttons, see above).
|
|
It needs some tricks to tweak the left/right borders with active state */
|
|
|
|
.ui.buttons .button {
|
|
border-right: none;
|
|
}
|
|
|
|
.ui.buttons .button:first-child {
|
|
border-left: 1px solid var(--color-light-border);
|
|
}
|
|
|
|
.ui.buttons .button:last-child {
|
|
border-right: 1px solid var(--color-light-border);
|
|
}
|
|
|
|
.ui.buttons .button.active {
|
|
border-left: 1px solid var(--color-light-border);
|
|
border-right: 1px solid var(--color-light-border);
|
|
}
|
|
|
|
.ui.buttons .button.active + .button {
|
|
border-left: none;
|
|
}
|
|
|
|
.ui.basic.buttons .button,
|
|
.ui.basic.button,
|
|
.ui.basic.buttons .button:hover,
|
|
.ui.basic.button:hover {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.ui.labeled.button.disabled > .button,
|
|
.ui.basic.buttons .button,
|
|
.ui.basic.button,
|
|
.ui.basic.buttons .button:focus,
|
|
.ui.basic.button:focus {
|
|
color: var(--color-text-light);
|
|
background: var(--color-button);
|
|
}
|
|
|
|
.ui.basic.buttons .button:hover,
|
|
.ui.basic.button:hover {
|
|
color: var(--color-text);
|
|
background: var(--color-hover);
|
|
}
|
|
|
|
.ui.basic.buttons .button:active,
|
|
.ui.basic.button:active,
|
|
.ui.basic.buttons .active.button,
|
|
.ui.basic.active.button,
|
|
.ui.basic.buttons .active.button:hover,
|
|
.ui.basic.active.button:hover {
|
|
color: var(--color-text);
|
|
background: var(--color-active);
|
|
}
|
|
|
|
.ui.labeled.button > .label {
|
|
border-color: var(--color-light-border);
|
|
}
|
|
|
|
.ui.labeled.icon.buttons > .button > .icon,
|
|
.ui.labeled.icon.button > .icon {
|
|
background: var(--color-hover);
|
|
}
|
|
|
|
/* primary */
|
|
|
|
.ui.primary.labels .label,
|
|
.ui.ui.ui.primary.label,
|
|
.ui.primary.button,
|
|
.ui.primary.buttons .button,
|
|
.ui.primary.button:focus,
|
|
.ui.primary.buttons .button:focus {
|
|
background: var(--color-primary);
|
|
}
|
|
|
|
.ui.primary.button:hover,
|
|
.ui.primary.buttons .button:hover {
|
|
background: var(--color-primary-hover);
|
|
}
|
|
|
|
.ui.primary.button:active,
|
|
.ui.primary.buttons .button:active {
|
|
background: var(--color-primary-active);
|
|
}
|
|
|
|
.ui.basic.primary.buttons .button,
|
|
.ui.basic.primary.button,
|
|
.ui.basic.primary.buttons .button:focus,
|
|
.ui.basic.primary.button:focus {
|
|
color: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
.ui.basic.primary.buttons .button:hover,
|
|
.ui.basic.primary.button:hover {
|
|
color: var(--color-primary-hover);
|
|
border-color: var(--color-primary-hover);
|
|
}
|
|
|
|
.ui.basic.primary.buttons .button:active,
|
|
.ui.basic.primary.button:active {
|
|
color: var(--color-primary-active);
|
|
border-color: var(--color-primary-active);
|
|
}
|
|
|
|
/* secondary */
|
|
|
|
.ui.secondary.labels .label,
|
|
.ui.ui.ui.secondary.label,
|
|
.ui.secondary.button,
|
|
.ui.secondary.buttons .button,
|
|
.ui.secondary.button:focus,
|
|
.ui.secondary.buttons .button:focus {
|
|
background: var(--color-secondary-button);
|
|
}
|
|
|
|
.ui.secondary.button:hover,
|
|
.ui.secondary.buttons .button:hover {
|
|
background: var(--color-secondary-hover);
|
|
}
|
|
|
|
.ui.secondary.button:active,
|
|
.ui.secondary.buttons .button:active {
|
|
background: var(--color-secondary-active);
|
|
}
|
|
|
|
.ui.basic.secondary.buttons .button,
|
|
.ui.basic.secondary.button,
|
|
.ui.basic.secondary.button:focus,
|
|
.ui.basic.secondary.buttons .button:focus {
|
|
color: var(--color-secondary-button);
|
|
border-color: var(--color-secondary-button);
|
|
}
|
|
|
|
.ui.basic.secondary.buttons .button:hover,
|
|
.ui.basic.secondary.button:hover {
|
|
color: var(--color-secondary-hover);
|
|
border-color: var(--color-secondary-hover);
|
|
}
|
|
|
|
.ui.basic.secondary.buttons .button:active,
|
|
.ui.basic.secondary.button:active {
|
|
color: var(--color-secondary-active);
|
|
border-color: var(--color-secondary-active);
|
|
}
|
|
|
|
/* red */
|
|
|
|
.ui.red.labels .label,
|
|
.ui.ui.ui.red.label,
|
|
.ui.red.button,
|
|
.ui.red.buttons .button,
|
|
.ui.red.button:focus,
|
|
.ui.red.buttons .button:focus {
|
|
background: var(--color-red);
|
|
}
|
|
|
|
.ui.red.button:hover,
|
|
.ui.red.buttons .button:hover {
|
|
background: var(--color-red-dark-1);
|
|
}
|
|
|
|
.ui.red.button:active,
|
|
.ui.red.buttons .button:active {
|
|
background: var(--color-red-dark-2);
|
|
}
|
|
|
|
.ui.basic.red.buttons .button,
|
|
.ui.basic.red.button,
|
|
.ui.basic.red.buttons .button:focus,
|
|
.ui.basic.red.button:focus {
|
|
color: var(--color-red);
|
|
border-color: var(--color-red);
|
|
}
|
|
|
|
.ui.basic.red.buttons .button:hover,
|
|
.ui.basic.red.button:hover {
|
|
color: var(--color-red-dark-1);
|
|
border-color: var(--color-red-dark-1);
|
|
}
|
|
|
|
.ui.basic.red.buttons .button:active,
|
|
.ui.basic.red.button:active {
|
|
color: var(--color-red-dark-2);
|
|
border-color: var(--color-red-dark-2);
|
|
}
|
|
|
|
/* orange */
|
|
|
|
.ui.orange.labels .label,
|
|
.ui.ui.ui.orange.label,
|
|
.ui.orange.button,
|
|
.ui.orange.buttons .button,
|
|
.ui.orange.button:focus,
|
|
.ui.orange.buttons .button:focus {
|
|
background: var(--color-orange);
|
|
}
|
|
|
|
.ui.orange.button:hover,
|
|
.ui.orange.buttons .button:hover {
|
|
background: var(--color-orange-dark-1);
|
|
}
|
|
|
|
.ui.orange.button:active,
|
|
.ui.orange.buttons .button:active {
|
|
background: var(--color-orange-dark-2);
|
|
}
|
|
|
|
.ui.basic.orange.buttons .button,
|
|
.ui.basic.orange.button,
|
|
.ui.basic.orange.buttons .button:focus,
|
|
.ui.basic.orange.button:focus {
|
|
color: var(--color-orange);
|
|
border-color: var(--color-orange);
|
|
}
|
|
|
|
.ui.basic.orange.buttons .button:hover,
|
|
.ui.basic.orange.button:hover {
|
|
color: var(--color-orange-dark-1);
|
|
border-color: var(--color-orange-dark-1);
|
|
}
|
|
|
|
.ui.basic.orange.buttons .button:active,
|
|
.ui.basic.orange.button:active {
|
|
color: var(--color-orange-dark-2);
|
|
border-color: var(--color-orange-dark-2);
|
|
}
|
|
|
|
/* yellow */
|
|
|
|
.ui.yellow.labels .label,
|
|
.ui.ui.ui.yellow.label,
|
|
.ui.yellow.button,
|
|
.ui.yellow.buttons .button,
|
|
.ui.yellow.button:focus,
|
|
.ui.yellow.buttons .button:focus {
|
|
background: var(--color-yellow);
|
|
}
|
|
|
|
.ui.yellow.button:hover,
|
|
.ui.yellow.buttons .button:hover {
|
|
background: var(--color-yellow-dark-1);
|
|
}
|
|
|
|
.ui.yellow.button:active,
|
|
.ui.yellow.buttons .button:active {
|
|
background: var(--color-yellow-dark-2);
|
|
}
|
|
|
|
.ui.basic.yellow.buttons .button,
|
|
.ui.basic.yellow.button,
|
|
.ui.basic.yellow.buttons .button:focus,
|
|
.ui.basic.yellow.button:focus {
|
|
color: var(--color-yellow);
|
|
border-color: var(--color-yellow);
|
|
}
|
|
|
|
.ui.basic.yellow.buttons .button:hover,
|
|
.ui.basic.yellow.button:hover {
|
|
color: var(--color-yellow-dark-1);
|
|
border-color: var(--color-yellow-dark-1);
|
|
}
|
|
|
|
.ui.basic.yellow.buttons .button:active,
|
|
.ui.basic.yellow.button:active {
|
|
color: var(--color-yellow-dark-2);
|
|
border-color: var(--color-yellow-dark-2);
|
|
}
|
|
|
|
/* olive */
|
|
|
|
.ui.olive.labels .label,
|
|
.ui.ui.ui.olive.label,
|
|
.ui.olive.button,
|
|
.ui.olive.buttons .button,
|
|
.ui.olive.button:focus,
|
|
.ui.olive.buttons .button:focus {
|
|
background: var(--color-olive);
|
|
}
|
|
|
|
.ui.olive.button:hover,
|
|
.ui.olive.buttons .button:hover {
|
|
background: var(--color-olive-dark-1);
|
|
}
|
|
|
|
.ui.olive.button:active,
|
|
.ui.olive.buttons .button:active {
|
|
background: var(--color-olive-dark-2);
|
|
}
|
|
|
|
.ui.basic.olive.buttons .button,
|
|
.ui.basic.olive.button,
|
|
.ui.basic.olive.buttons .button:focus,
|
|
.ui.basic.olive.button:focus {
|
|
color: var(--color-olive);
|
|
border-color: var(--color-olive);
|
|
}
|
|
|
|
.ui.basic.olive.buttons .button:hover,
|
|
.ui.basic.olive.button:hover {
|
|
color: var(--color-olive-dark-1);
|
|
border-color: var(--color-olive-dark-1);
|
|
}
|
|
|
|
.ui.basic.olive.buttons .button:active,
|
|
.ui.basic.olive.button:active {
|
|
color: var(--color-olive-dark-2);
|
|
border-color: var(--color-olive-dark-2);
|
|
}
|
|
|
|
/* green */
|
|
|
|
.ui.green.labels .label,
|
|
.ui.ui.ui.green.label,
|
|
.ui.green.button,
|
|
.ui.green.buttons .button,
|
|
.ui.green.button:focus,
|
|
.ui.green.buttons .button:focus {
|
|
background: var(--color-green);
|
|
}
|
|
|
|
.ui.green.button:hover,
|
|
.ui.green.buttons .button:hover {
|
|
background: var(--color-green-dark-1);
|
|
}
|
|
|
|
.ui.green.button:active,
|
|
.ui.green.buttons .button:active {
|
|
background: var(--color-green-dark-2);
|
|
}
|
|
|
|
.ui.basic.green.buttons .button,
|
|
.ui.basic.green.button,
|
|
.ui.basic.green.buttons .button:focus,
|
|
.ui.basic.green.button:focus {
|
|
color: var(--color-green);
|
|
border-color: var(--color-green);
|
|
}
|
|
|
|
.ui.basic.green.buttons .button:hover,
|
|
.ui.basic.green.button:hover {
|
|
color: var(--color-green-dark-1);
|
|
border-color: var(--color-green-dark-1);
|
|
}
|
|
|
|
.ui.basic.green.buttons .button:active,
|
|
.ui.basic.green.button:active {
|
|
color: var(--color-green-dark-2);
|
|
border-color: var(--color-green-dark-2);
|
|
}
|
|
|
|
/* teal */
|
|
|
|
.ui.teal.labels .label,
|
|
.ui.ui.ui.teal.label,
|
|
.ui.teal.button,
|
|
.ui.teal.buttons .button,
|
|
.ui.teal.button:focus,
|
|
.ui.teal.buttons .button:focus {
|
|
background: var(--color-teal);
|
|
}
|
|
|
|
.ui.teal.button:hover,
|
|
.ui.teal.buttons .button:hover {
|
|
background: var(--color-teal-dark-1);
|
|
}
|
|
|
|
.ui.teal.button:active,
|
|
.ui.teal.buttons .button:active {
|
|
background: var(--color-teal-dark-2);
|
|
}
|
|
|
|
.ui.basic.teal.buttons .button,
|
|
.ui.basic.teal.button,
|
|
.ui.basic.teal.buttons .button:focus,
|
|
.ui.basic.teal.button:focus {
|
|
color: var(--color-teal);
|
|
border-color: var(--color-teal);
|
|
}
|
|
|
|
.ui.basic.teal.buttons .button:hover,
|
|
.ui.basic.teal.button:hover {
|
|
color: var(--color-teal-dark-1);
|
|
border-color: var(--color-teal-dark-1);
|
|
}
|
|
|
|
.ui.basic.teal.buttons .button:active,
|
|
.ui.basic.teal.button:active {
|
|
color: var(--color-teal-dark-2);
|
|
border-color: var(--color-teal-dark-2);
|
|
}
|
|
|
|
/* blue */
|
|
|
|
.ui.blue.labels .label,
|
|
.ui.ui.ui.blue.label,
|
|
.ui.blue.button,
|
|
.ui.blue.buttons .button,
|
|
.ui.blue.button:focus,
|
|
.ui.blue.buttons .button:focus {
|
|
background: var(--color-blue);
|
|
}
|
|
|
|
.ui.blue.button:hover,
|
|
.ui.blue.buttons .button:hover {
|
|
background: var(--color-blue-dark-1);
|
|
}
|
|
|
|
.ui.blue.button:active,
|
|
.ui.blue.buttons .button:active {
|
|
background: var(--color-blue-dark-2);
|
|
}
|
|
|
|
.ui.basic.blue.buttons .button,
|
|
.ui.basic.blue.button,
|
|
.ui.basic.blue.buttons .button:focus,
|
|
.ui.basic.blue.button:focus {
|
|
color: var(--color-blue);
|
|
border-color: var(--color-blue);
|
|
}
|
|
|
|
.ui.basic.blue.buttons .button:hover,
|
|
.ui.basic.blue.button:hover {
|
|
color: var(--color-blue-dark-1);
|
|
border-color: var(--color-blue-dark-1);
|
|
}
|
|
|
|
.ui.basic.blue.buttons .button:active,
|
|
.ui.basic.blue.button:active {
|
|
color: var(--color-blue-dark-2);
|
|
border-color: var(--color-blue-dark-2);
|
|
}
|
|
|
|
/* violet */
|
|
|
|
.ui.violet.labels .label,
|
|
.ui.ui.ui.violet.label,
|
|
.ui.violet.button,
|
|
.ui.violet.buttons .button,
|
|
.ui.violet.button:focus,
|
|
.ui.violet.buttons .button:focus {
|
|
background: var(--color-violet);
|
|
}
|
|
|
|
.ui.violet.button:hover,
|
|
.ui.violet.buttons .button:hover {
|
|
background: var(--color-violet-dark-1);
|
|
}
|
|
|
|
.ui.violet.button:active,
|
|
.ui.violet.buttons .button:active {
|
|
background: var(--color-violet-dark-2);
|
|
}
|
|
|
|
.ui.basic.violet.buttons .button,
|
|
.ui.basic.violet.button,
|
|
.ui.basic.violet.buttons .button:focus,
|
|
.ui.basic.violet.button:focus {
|
|
color: var(--color-violet);
|
|
border-color: var(--color-violet);
|
|
}
|
|
|
|
.ui.basic.violet.buttons .button:hover,
|
|
.ui.basic.violet.button:hover {
|
|
color: var(--color-violet-dark-1);
|
|
border-color: var(--color-violet-dark-1);
|
|
}
|
|
|
|
.ui.basic.violet.buttons .button:active,
|
|
.ui.basic.violet.button:active {
|
|
color: var(--color-violet-dark-2);
|
|
border-color: var(--color-violet-dark-2);
|
|
}
|
|
|
|
/* purple */
|
|
|
|
.ui.purple.labels .label,
|
|
.ui.ui.ui.purple.label,
|
|
.ui.purple.button,
|
|
.ui.purple.buttons .button,
|
|
.ui.purple.button:focus,
|
|
.ui.purple.buttons .button:focus {
|
|
background: var(--color-purple);
|
|
}
|
|
|
|
.ui.purple.button:hover,
|
|
.ui.purple.buttons .button:hover {
|
|
background: var(--color-purple-dark-1);
|
|
}
|
|
|
|
.ui.purple.button:active,
|
|
.ui.purple.buttons .button:active {
|
|
background: var(--color-purple-dark-2);
|
|
}
|
|
|
|
.ui.basic.purple.buttons .button,
|
|
.ui.basic.purple.button,
|
|
.ui.basic.purple.buttons .button:focus,
|
|
.ui.basic.purple.button:focus {
|
|
color: var(--color-purple);
|
|
border-color: var(--color-purple);
|
|
}
|
|
|
|
.ui.basic.purple.buttons .button:hover,
|
|
.ui.basic.purple.button:hover {
|
|
color: var(--color-purple-dark-1);
|
|
border-color: var(--color-purple-dark-1);
|
|
}
|
|
|
|
.ui.basic.purple.buttons .button:active,
|
|
.ui.basic.purple.button:active {
|
|
color: var(--color-purple-dark-2);
|
|
border-color: var(--color-purple-dark-2);
|
|
}
|
|
|
|
/* pink */
|
|
|
|
.ui.pink.labels .label,
|
|
.ui.ui.ui.pink.label,
|
|
.ui.pink.button,
|
|
.ui.pink.buttons .button,
|
|
.ui.pink.button:focus,
|
|
.ui.pink.buttons .button:focus {
|
|
background: var(--color-pink);
|
|
}
|
|
|
|
.ui.pink.button:hover,
|
|
.ui.pink.buttons .button:hover {
|
|
background: var(--color-pink-dark-1);
|
|
}
|
|
|
|
.ui.pink.button:active,
|
|
.ui.pink.buttons .button:active {
|
|
background: var(--color-pink-dark-2);
|
|
}
|
|
|
|
.ui.basic.pink.buttons .button,
|
|
.ui.basic.pink.button,
|
|
.ui.basic.pink.buttons .button:focus,
|
|
.ui.basic.pink.button:focus {
|
|
color: var(--color-pink);
|
|
border-color: var(--color-pink);
|
|
}
|
|
|
|
.ui.basic.pink.buttons .button:hover,
|
|
.ui.basic.pink.button:hover {
|
|
color: var(--color-pink-dark-1);
|
|
border-color: var(--color-pink-dark-1);
|
|
}
|
|
|
|
.ui.basic.pink.buttons .button:active,
|
|
.ui.basic.pink.button:active {
|
|
color: var(--color-pink-dark-2);
|
|
border-color: var(--color-pink-dark-2);
|
|
}
|
|
|
|
/* brown */
|
|
|
|
.ui.brown.labels .label,
|
|
.ui.ui.ui.brown.label,
|
|
.ui.brown.button,
|
|
.ui.brown.buttons .button,
|
|
.ui.brown.button:focus,
|
|
.ui.brown.buttons .button:focus {
|
|
background: var(--color-brown);
|
|
}
|
|
|
|
.ui.brown.button:hover,
|
|
.ui.brown.buttons .button:hover {
|
|
background: var(--color-brown-dark-1);
|
|
}
|
|
|
|
.ui.brown.button:active,
|
|
.ui.brown.buttons .button:active {
|
|
background: var(--color-brown-dark-2);
|
|
}
|
|
|
|
.ui.basic.brown.buttons .button,
|
|
.ui.basic.brown.button,
|
|
.ui.basic.brown.buttons .button:focus,
|
|
.ui.basic.brown.button:focus {
|
|
color: var(--color-brown);
|
|
border-color: var(--color-brown);
|
|
}
|
|
|
|
.ui.basic.brown.buttons .button:hover,
|
|
.ui.basic.brown.button:hover {
|
|
color: var(--color-brown-dark-1);
|
|
border-color: var(--color-brown-dark-1);
|
|
}
|
|
|
|
.ui.basic.brown.buttons .button:active,
|
|
.ui.basic.brown.button:active {
|
|
color: var(--color-brown-dark-2);
|
|
border-color: var(--color-brown-dark-2);
|
|
}
|
|
|
|
/* negative */
|
|
|
|
.ui.negative.buttons .button,
|
|
.ui.negative.button,
|
|
.ui.negative.buttons .button:focus,
|
|
.ui.negative.button:focus {
|
|
background: var(--color-red);
|
|
}
|
|
|
|
.ui.negative.buttons .button:hover,
|
|
.ui.negative.button:hover {
|
|
background: var(--color-red-dark-1);
|
|
}
|
|
|
|
.ui.negative.buttons .button:active,
|
|
.ui.negative.button:active {
|
|
background: var(--color-red-dark-2);
|
|
}
|
|
|
|
.ui.basic.negative.buttons .button,
|
|
.ui.basic.negative.button,
|
|
.ui.basic.negative.buttons .button:focus,
|
|
.ui.basic.negative.button:focus {
|
|
color: var(--color-red);
|
|
border-color: var(--color-red);
|
|
}
|
|
|
|
.ui.basic.negative.buttons .button:hover,
|
|
.ui.basic.negative.button:hover {
|
|
color: var(--color-red-dark-1);
|
|
border-color: var(--color-red-dark-1);
|
|
}
|
|
|
|
.ui.basic.negative.buttons .button:active,
|
|
.ui.basic.negative.button:active {
|
|
color: var(--color-red-dark-2);
|
|
border-color: var(--color-red-dark-2);
|
|
}
|
|
|
|
/* positive */
|
|
|
|
.ui.positive.buttons .button,
|
|
.ui.positive.button,
|
|
.ui.positive.buttons .button:focus,
|
|
.ui.positive.button:focus {
|
|
background: var(--color-green);
|
|
}
|
|
|
|
.ui.positive.buttons .button:hover,
|
|
.ui.positive.button:hover {
|
|
background: var(--color-green-dark-1);
|
|
}
|
|
|
|
.ui.positive.buttons .button:active,
|
|
.ui.positive.button:active {
|
|
background: var(--color-green-dark-2);
|
|
}
|
|
|
|
.ui.basic.positive.buttons .button,
|
|
.ui.basic.positive.button,
|
|
.ui.basic.positive.buttons .button:focus,
|
|
.ui.basic.positive.button:focus {
|
|
color: var(--color-green);
|
|
border-color: var(--color-green);
|
|
}
|
|
|
|
.ui.basic.positive.buttons .button:hover,
|
|
.ui.basic.positive.button:hover {
|
|
color: var(--color-green-dark-1);
|
|
border-color: var(--color-green-dark-1);
|
|
}
|
|
|
|
.ui.basic.positive.buttons .button:active,
|
|
.ui.basic.positive.button:active {
|
|
color: var(--color-green-dark-2);
|
|
border-color: var(--color-green-dark-2);
|
|
}
|