mirror of
https://codeberg.org/forgejo/forgejo
synced 2025-10-19 13:00:51 +02:00
84e9b566a0
Related: https://codeberg.org/forgejo/forgejo/issues/2650, https://codeberg.org/forgejo/forgejo/pulls/6044 * improve consistency by getting rid of the less usual button kinds * same as changes to profile buttons in https://codeberg.org/forgejo/forgejo/pulls/9359 * transparent outline button is now secondary * bulb-bright red button is now secondary * I think that actions like Close and Reopen shouldn't attract much attention, so they are secondary * add icons to better visually indicate the action * yes this is inspired by GitHub * unlike in GitHub, the icons are monochrome: * colored icons had bad contrast due to buttons being brighter than the usual areas with colored icons * they are not at all common inside of buttons in our UI * convert the buttons to the new CSS * differences are described in https://codeberg.org/forgejo/forgejo/pulls/9359 * a few general CSS improvements * prevent 1px vertical padding on `<button>` provided by browser defaults * wasn't noticed before because no `<buttons>` were converted yet * increased the default gap (for buttons with such icons) to 0.5rem * looks much better than Fomantic's 0.25rem * I took this opportunity because no buttons with icons were converted yet, so there's no blast radius to worry about yet Preview B: https://codeberg.org/attachments/3cdb2fc8-3887-4e82-8213-45dde42a5b33 A: https://codeberg.org/attachments/133b59c2-470f-4f97-8e85-e374e0a0b52e B: https://codeberg.org/attachments/d814d2dc-d2a2-4daf-ba65-70d9097bb046 A: https://codeberg.org/attachments/2f2e0214-33e5-4ca9-a315-21252dc27525 Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9598 Reviewed-by: Mathieu Fenniak <mfenniak@noreply.codeberg.org> Reviewed-by: Michael Kriese <michael.kriese@gmx.de>
94 lines
2.1 KiB
CSS
94 lines
2.1 KiB
CSS
/* Copyright 2024-2025 The Forgejo Authors. All rights reserved.
|
|
* SPDX-License-Identifier: GPL-3.0-or-later */
|
|
|
|
:root {
|
|
--button-min-height: 36px;
|
|
--button-padding-inline: 1.35rem;
|
|
}
|
|
|
|
:root .small.button,
|
|
:root .small.button-row,
|
|
:root .small.button-sequence {
|
|
--button-min-height: 34px;
|
|
--button-padding-inline: 1.25rem;
|
|
}
|
|
|
|
@media (pointer: coarse) {
|
|
:root {
|
|
--button-min-height: 40px;
|
|
}
|
|
|
|
:root .small.button,
|
|
:root .small.button-row,
|
|
:root .small.button-sequence {
|
|
--button-min-height: 38px;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: var(--button-min-height);
|
|
padding-block: 0;
|
|
padding-inline: var(--button-padding-inline);
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.button:hover,
|
|
.button:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.button.primary {
|
|
background: var(--color-primary);
|
|
color: var(--color-primary-contrast);
|
|
}
|
|
|
|
.button.primary:hover,
|
|
.button.primary:focus {
|
|
background: var(--color-primary-hover);
|
|
}
|
|
|
|
.button.secondary {
|
|
background: var(--color-button);
|
|
border: 1px solid var(--color-light-border);
|
|
color: var(--color-text-light);
|
|
}
|
|
|
|
.button.secondary:hover,
|
|
.button.secondary:focus {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
/* Dropdown openers should be at least tall as buttons they are in line with, and
|
|
* as wide as they are tall */
|
|
.button-row details.dropdown summary,
|
|
.button-sequence details.dropdown summary {
|
|
min-height: var(--button-min-height);
|
|
min-width: var(--button-min-height);
|
|
}
|
|
|
|
/* button-row is a simple helper made to improve consistency of fomantic buttons
|
|
* placed in a row. It provides gap and cancels out fomantic's margins */
|
|
.button-row {
|
|
gap: var(--button-spacing);
|
|
}
|
|
|
|
/* button-sequence is a more complex helper that has wrap. Using it is preferred
|
|
* but also requires deeper consideration */
|
|
.button-sequence {
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
gap: var(--button-spacing);
|
|
}
|
|
|
|
/* Fomantic buttons have annoying margins to set distance between elements. In
|
|
* the button-row/sequence helpers this is set by flex+gap */
|
|
.button-row .ui.button {
|
|
margin-right: 0;
|
|
}
|
|
.button-sequence .ui.button {
|
|
margin: 0 !important;
|
|
}
|