gitea/web_src/css/modules/button.css

.ui.button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  outline: none;
  font-family: var(--fonts-regular);
  margin: 0 0.25em 0 0;
  font-weight: var(--font-weight-normal);
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  line-height: 1;
  border-radius: var(--border-radius);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  justify-content: center;
  background: var(--color-button);
  border: 1px solid var(--color-light-border);
  color: var(--color-text);
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .ui.button {
    white-space: normal;
  }
}

.ui.button:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

.ui.button.hover-opaque:hover {
  /* ".ui.button:hover" uses alpha channel to "highlight", it doesn't work when the background is not body: the inherited color is not right
   for such case, use this opaque color */
  background: var(--color-hover-opaque);
}

.ui.active.button,
.ui.button:active,
.ui.active.button:active,
.ui.active.button:hover {
  background: var(--color-active);
  color: var(--color-text);
}

.ui.buttons .disabled.button:not(.basic),
.ui.disabled.button,
.ui.button:disabled,
.ui.disabled.button:hover,
.ui.disabled.active.button {
  cursor: default;
  opacity: var(--opacity-disabled) !important;
  background-image: none;
  pointer-events: none !important;
}

/* there is no "ui labeled icon button" support" because it is not used */
.ui.labeled.button:not(.icon) {
  flex-direction: row;
  background: none;
  padding: 0;
  border: none;
  min-height: unset;
}
.ui.labeled.button > .button {
  margin: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.ui.labeled.button > .label {
  display: flex;
  align-items: center;
  margin: 0 0 0 -1px !important;
  font-size: 1em;
  border-color: var(--color-light-border);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.ui.labeled.button > .label:hover {
  background: var(--color-hover);
}
.ui.labeled.button > .button:hover + .label {
  border-left-color: var(--color-secondary-dark-2);
}

.ui.button > .icon:not(.button) {
  height: auto;
  opacity: 0.8;
}
.ui.button:not(.icon) > .icon:not(.button):not(.dropdown) {
  margin: 0 0.42857143em 0 -0.21428571em;
  vertical-align: baseline;
}

/* reference sizes (not exactly at the moment): normal: padding-x=21, height=38 ; compact: padding-x=15, height=32 */
.ui.button { /* stylelint-disable-line no-duplicate-selectors -- deliberate second block for the reference sizes */
  gap: var(--gap-block);
  min-height: 38px;
  padding: 0.57em /* around 8px */ 1.43em /* around 20px */;
}
.ui.compact.buttons .button,
.ui.compact.button {
  gap: var(--gap-inline);
  padding: 0.42em /* around 8px */ 1.07em /* around 15px */;
  min-height: 32px;
}
.ui.compact.icon.buttons .button,
.ui.compact.icon.button {
  padding: 0.57em /* around 8px */;
}

/* reference size: mini: padding-x=16, height=30 ; compact: padding-x=12, height=26 */
.ui.ui.ui.ui.mini.button {
  gap: var(--gap-inline);
  font-size: 11px;
  min-height: 30px;
}
.ui.ui.ui.ui.mini.button.compact {
  min-height: 26px;
}

/* reference size: tiny: padding-x=18, height=32 ; compact: padding-x=13, height=28 */
.ui.tiny.buttons .dropdown,
.ui.tiny.buttons .dropdown .menu > .item,
.ui.tiny.buttons .button,
.ui.ui.ui.ui.tiny.button {
  gap: var(--gap-inline);
  font-size: 12px;
  min-height: 32px;
}
.ui.ui.ui.ui.tiny.button.compact {
  min-height: 28px;
}

/* reference size: small: padding-x=19, height=34 ; compact: padding-x=14, height=30 */
.ui.small.buttons .dropdown,
.ui.small.buttons .dropdown .menu > .item,
.ui.small.buttons .button,
.ui.ui.ui.ui.small.button {
  font-size: 13px;
  min-height: 34px;
}
.ui.ui.ui.ui.small.button.compact {
  min-height: 30px;
}

.ui.icon.buttons .button,
.ui.icon.button:not(.compact) {
  padding: 0.57em;
}
.ui.icon.buttons .button > .icon,
.ui.icon.button > .icon {
  margin: 0 !important;
  vertical-align: top;
}

.ui.basic.button {
  border-radius: var(--border-radius);
  color: var(--color-text-light);
  background: var(--color-button);
}

.ui.basic.button:hover {
  color: var(--color-text);
  background: var(--color-hover);
  border-color: var(--color-secondary-dark-2);
}

.ui.basic.button:active,
.ui.basic.active.button,
.ui.basic.active.button:hover {
  color: var(--color-text);
  background: var(--color-active);
}

.ui.fluid.button {
  width: 100%;
}

.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 {
  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.button {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: none;
}

.ui.basic.primary.button:hover {
  color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.ui.basic.primary.button:active {
  color: var(--color-primary-active);
  border-color: var(--color-primary-active);
}

.ui.red.button,
.ui.red.buttons .button {
  color: var(--color-white);
  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.button {
  color: var(--color-red);
  border-color: var(--color-red);
  background: none;
}

.ui.basic.red.button:hover {
  color: var(--color-red-dark-1);
  border-color: var(--color-red-dark-1);
}

.ui.basic.red.button:active {
  color: var(--color-red-dark-2);
  border-color: var(--color-red-dark-2);
}

.ui.green.button {
  color: var(--color-white);
  background: var(--color-green);
}

.ui.green.button:hover {
  background: var(--color-green-dark-1);
}

.ui.green.button:active {
  background: var(--color-green-dark-2);
}

.ui.basic.green.button {
  color: var(--color-green);
  border-color: var(--color-green);
  background: none;
}

.ui.basic.green.button:hover {
  color: var(--color-green-dark-1);
  border-color: var(--color-green-dark-1);
}

.ui.basic.green.button:active {
  color: var(--color-green-dark-2);
  border-color: var(--color-green-dark-2);
}

.ui.buttons {
  display: inline-flex;
  flex-direction: row;
  font-size: 0;
  vertical-align: baseline;
  margin: 0 0.25em 0 0;
}

/* 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 {
  background: none;
  border: none;
}

a.btn,
a.btn:hover {
  color: inherit;
}

.btn.tiny {
  font-size: 12px;
}

/* 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;
  border-radius: 0;
  flex-shrink: 0;
  margin: 0;
}
.ui.buttons .button:first-child {
  border-left: none;
  margin-left: 0;
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}
.ui.buttons .button:last-child {
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

.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;
}