diff options
Diffstat (limited to '')
| -rw-r--r-- | web_src/css/modules/button.css | 756 |
1 files changed, 756 insertions, 0 deletions
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css new file mode 100644 index 00000000..0799ab80 --- /dev/null +++ b/web_src/css/modules/button.css @@ -0,0 +1,756 @@ +/* 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 { + background: var(--color-button); + border: 1px solid var(--color-light-border); + color: var(--color-text); +} + +.ui.button:hover, +.ui.button:focus { + 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, +.ui.active.button:focus { + background: var(--color-active); + color: var(--color-text); +} + +.delete-button, +.delete-button:hover, +.delete-button:focus { + color: var(--color-red); +} + +/* btn is a plain button without any opinionated styling, it only uses flex for vertical alignment like ".ui.button" in base.css */ + +.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:hover { + border-color: var(--color-secondary-dark-2); +} + +.ui.buttons .button:hover + .button { + border-left: 1px solid var(--color-secondary-dark-2); +} + +/* TODO: these "tw-hidden" selectors are only used by "blame.tmpl" buttons: Raw/Normal View/History/Unescape, need to be refactored to a clear solution later */ +.ui.buttons .button:first-child, +.ui.buttons .button.tw-hidden:first-child + .button { + border-left: 1px solid var(--color-light-border); +} + +.ui.buttons .button:last-child, +.ui.buttons .button:nth-last-child(2):has(+ .button.tw-hidden) { + 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; +} + +/* apply the vertical padding of .compact to non-compact buttons when they contain a svg as they + would otherwise appear too large. Seen on "RSS Feed" button on repo releases tab. */ +.ui.small.button:not(.compact):has(.svg) { + padding-top: 0.58928571em; + padding-bottom: 0.58928571em; +} + +.ui.labeled.button.disabled > .button, +.ui.basic.buttons .button, +.ui.basic.button { + color: var(--color-text-light); + background: var(--color-button); +} + +.ui.basic.buttons .button:hover, +.ui.basic.button:hover, +.ui.basic.buttons .button:focus, +.ui.basic.button:focus { + color: var(--color-text); + background: var(--color-hover); + border-color: var(--color-secondary-dark-2); +} + +.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, +.ui.basic.buttons .active.button:focus, +.ui.basic.active.button:focus { + 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 { + background: var(--color-primary); + color: var(--color-primary-contrast); +} + +.ui.primary.button:hover, +.ui.primary.buttons .button:hover, +.ui.primary.button:focus, +.ui.primary.buttons .button:focus { + background: var(--color-primary-hover); + color: var(--color-primary-contrast); +} + +.ui.primary.button:active, +.ui.primary.buttons .button:active { + background: var(--color-primary-active); +} + +.ui.basic.primary.buttons .button, +.ui.basic.primary.button { + color: var(--color-primary); + border-color: var(--color-primary); +} + +.ui.basic.primary.buttons .button:hover, +.ui.basic.primary.button:hover, +.ui.basic.primary.buttons .button:focus, +.ui.basic.primary.button:focus { + 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 { + color: var(--color-secondary-button); + border-color: var(--color-secondary-button); +} + +.ui.basic.secondary.buttons .button:hover, +.ui.basic.secondary.button:hover, +.ui.basic.secondary.button:focus, +.ui.basic.secondary.buttons .button:focus { + 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 { + background: var(--color-red); +} + +.ui.red.button:hover, +.ui.red.buttons .button:hover, +.ui.red.button:focus, +.ui.red.buttons .button:focus { + 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 { + color: var(--color-red); + border-color: var(--color-red); +} + +.ui.basic.red.buttons .button:hover, +.ui.basic.red.button:hover, +.ui.basic.red.buttons .button:focus, +.ui.basic.red.button:focus { + 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); +} |