code.gitea.io/gitea@v1.22.3/web_src/css/modules/button.css (about)

     1  /* based on Fomantic UI checkbox module, with just the parts extracted that we use. If you find any
     2     unused rules here after refactoring, please remove them. */
     3  
     4  .ui.button {
     5    cursor: pointer;
     6    display: inline-block;
     7    min-height: 1em;
     8    outline: none;
     9    vertical-align: baseline;
    10    font-family: var(--fonts-regular);
    11    margin: 0 0.25em 0 0;
    12    padding: 0.78571429em 1.5em;
    13    font-weight: var(--font-weight-normal);
    14    text-align: center;
    15    text-decoration: none;
    16    line-height: 1;
    17    border-radius: 0.28571429rem;
    18    user-select: none;
    19    -webkit-tap-highlight-color: transparent;
    20    justify-content: center;
    21    background: var(--color-button);
    22    border: 1px solid var(--color-light-border);
    23    color: var(--color-text);
    24    white-space: nowrap;
    25  }
    26  
    27  .ui.button:focus-visible {
    28    box-shadow: inset 0 0 0 2px currentcolor;
    29  }
    30  
    31  @media (max-width: 767.98px) {
    32    .ui.button {
    33      white-space: normal;
    34    }
    35  }
    36  
    37  .ui.button:hover {
    38    background: var(--color-hover);
    39    color: var(--color-text);
    40  }
    41  
    42  .ui.active.button,
    43  .ui.button:active,
    44  .ui.active.button:active,
    45  .ui.active.button:hover {
    46    background: var(--color-active);
    47    color: var(--color-text);
    48  }
    49  
    50  .ui.buttons .disabled.button:not(.basic),
    51  .ui.disabled.button,
    52  .ui.button:disabled,
    53  .ui.disabled.button:hover,
    54  .ui.disabled.active.button {
    55    cursor: default;
    56    opacity: var(--opacity-disabled) !important;
    57    background-image: none;
    58    pointer-events: none !important;
    59  }
    60  
    61  .ui.labeled.button:not(.icon) {
    62    display: inline-flex;
    63    flex-direction: row;
    64    background: none;
    65    padding: 0 !important;
    66    border: none;
    67  }
    68  .ui.labeled.button > .button {
    69    margin: 0;
    70    border-top-right-radius: 0;
    71    border-bottom-right-radius: 0;
    72  }
    73  .ui.labeled.button > .label {
    74    display: flex;
    75    align-items: center;
    76    margin: 0 0 0 -1px !important;
    77    font-size: 1em;
    78    border-color: var(--color-light-border);
    79    border-top-left-radius: 0;
    80    border-bottom-left-radius: 0;
    81  }
    82  .ui.labeled.button > .label:hover {
    83    background: var(--color-hover);
    84  }
    85  .ui.labeled.button > .button:hover + .label {
    86    border-left-color: var(--color-secondary-dark-2);
    87  }
    88  
    89  .ui.button > .icon:not(.button) {
    90    height: auto;
    91    opacity: 0.8;
    92  }
    93  .ui.button:not(.icon) > .icon:not(.button):not(.dropdown),
    94  .ui.button:not(.icon) > .icons:not(.button):not(.dropdown) {
    95    margin: 0 0.42857143em 0 -0.21428571em;
    96    vertical-align: baseline;
    97  }
    98  .ui.button:not(.icon) > .icons:not(.button):not(.dropdown) > .icon {
    99    vertical-align: baseline;
   100  }
   101  .ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) {
   102    margin: 0 -0.21428571em 0 0.42857143em;
   103  }
   104  
   105  .ui.compact.buttons .button,
   106  .ui.compact.button {
   107    padding: 0.58928571em 1.125em;
   108  }
   109  .ui.compact.icon.buttons .button,
   110  .ui.compact.icon.button {
   111    padding: 0.58928571em;
   112  }
   113  .ui.compact.labeled.icon.button {
   114    padding: 0.58928571em 3.69642857em;
   115  }
   116  .ui.compact.labeled.icon.button > .icon {
   117    padding: 0.58928571em 0;
   118  }
   119  
   120  .ui.buttons .button,
   121  .ui.button {
   122    font-size: 1rem;
   123  }
   124  .ui.mini.buttons .dropdown,
   125  .ui.mini.buttons .dropdown .menu > .item,
   126  .ui.mini.buttons .button,
   127  .ui.ui.ui.ui.mini.button {
   128    font-size: 0.78571429rem;
   129  }
   130  .ui.tiny.buttons .dropdown,
   131  .ui.tiny.buttons .dropdown .menu > .item,
   132  .ui.tiny.buttons .button,
   133  .ui.ui.ui.ui.tiny.button {
   134    font-size: 0.85714286rem;
   135  }
   136  .ui.small.buttons .dropdown,
   137  .ui.small.buttons .dropdown .menu > .item,
   138  .ui.small.buttons .button,
   139  .ui.ui.ui.ui.small.button {
   140    font-size: 0.92857143rem;
   141  }
   142  
   143  .ui.icon.buttons .button,
   144  .ui.icon.button:not(.compact) {
   145    padding: 0.78571429em;
   146  }
   147  .ui.icon.buttons .button > .icon,
   148  .ui.icon.button > .icon {
   149    margin: 0 !important;
   150    vertical-align: top;
   151  }
   152  
   153  .ui.basic.buttons .button,
   154  .ui.basic.button {
   155    border-radius: 0.28571429rem;
   156    background: none;
   157  }
   158  .ui.basic.buttons {
   159    border: 1px solid var(--color-secondary);
   160    border-radius: 0.28571429rem;
   161  }
   162  .ui.basic.buttons .button {
   163    border-radius: 0;
   164    border-left: 1px solid var(--color-secondary);
   165  }
   166  
   167  .ui.labeled.button.disabled > .button,
   168  .ui.basic.buttons .button,
   169  .ui.basic.button {
   170    color: var(--color-text-light);
   171    background: var(--color-button);
   172  }
   173  
   174  .ui.basic.buttons .button:hover,
   175  .ui.basic.button:hover {
   176    color: var(--color-text);
   177    background: var(--color-hover);
   178    border-color: var(--color-secondary-dark-2);
   179  }
   180  
   181  .ui.basic.buttons .button:active,
   182  .ui.basic.button:active,
   183  .ui.basic.buttons .active.button,
   184  .ui.basic.active.button,
   185  .ui.basic.buttons .active.button:hover,
   186  .ui.basic.active.button:hover {
   187    color: var(--color-text);
   188    background: var(--color-active);
   189  }
   190  
   191  .ui.labeled.icon.button {
   192    position: relative;
   193    padding-left: 4.07142857em !important;
   194    padding-right: 1.5em !important;
   195  }
   196  
   197  .ui.labeled.icon.button > .icon {
   198    position: absolute;
   199    top: 0;
   200    left: 0;
   201    height: 100%;
   202    line-height: 1;
   203    border-radius: 0;
   204    border-top-left-radius: inherit;
   205    border-bottom-left-radius: inherit;
   206    text-align: center;
   207    animation: none;
   208    padding: 0.78571429em 0;
   209    margin: 0;
   210    width: 2.57142857em;
   211    background: var(--color-hover);
   212  }
   213  
   214  .ui.button.toggle.active {
   215    background-color: var(--color-green);
   216    color: var(--color-white);
   217  }
   218  .ui.button.toggle.active:hover {
   219    background-color: var(--color-green-dark-1);
   220    color: var(--color-white);
   221  }
   222  
   223  .ui.fluid.button {
   224    width: 100%;
   225    display: block;
   226  }
   227  
   228  .ui.primary.button,
   229  .ui.primary.buttons .button {
   230    background: var(--color-primary);
   231    color: var(--color-primary-contrast);
   232  }
   233  
   234  .ui.primary.button:hover,
   235  .ui.primary.buttons .button:hover {
   236    background: var(--color-primary-hover);
   237    color: var(--color-primary-contrast);
   238  }
   239  
   240  .ui.primary.button:active,
   241  .ui.primary.buttons .button:active {
   242    background: var(--color-primary-active);
   243  }
   244  
   245  .ui.basic.primary.buttons .button,
   246  .ui.basic.primary.button {
   247    color: var(--color-primary);
   248    border-color: var(--color-primary);
   249    background: none;
   250  }
   251  
   252  .ui.basic.primary.buttons .button:hover,
   253  .ui.basic.primary.button:hover {
   254    color: var(--color-primary-hover);
   255    border-color: var(--color-primary-hover);
   256  }
   257  
   258  .ui.basic.primary.buttons .button:active,
   259  .ui.basic.primary.button:active {
   260    color: var(--color-primary-active);
   261    border-color: var(--color-primary-active);
   262  }
   263  
   264  .ui.red.button,
   265  .ui.red.buttons .button {
   266    color: var(--color-white);
   267    background: var(--color-red);
   268  }
   269  
   270  .ui.red.button:hover,
   271  .ui.red.buttons .button:hover {
   272    background: var(--color-red-dark-1);
   273  }
   274  
   275  .ui.red.button:active,
   276  .ui.red.buttons .button:active {
   277    background: var(--color-red-dark-2);
   278  }
   279  
   280  .ui.basic.red.buttons .button,
   281  .ui.basic.red.button {
   282    color: var(--color-red);
   283    border-color: var(--color-red);
   284    background: none;
   285  }
   286  
   287  .ui.basic.red.buttons .button:hover,
   288  .ui.basic.red.button:hover {
   289    color: var(--color-red-dark-1);
   290    border-color: var(--color-red-dark-1);
   291  }
   292  
   293  .ui.basic.red.buttons .button:active,
   294  .ui.basic.red.button:active {
   295    color: var(--color-red-dark-2);
   296    border-color: var(--color-red-dark-2);
   297  }
   298  
   299  .ui.green.button,
   300  .ui.green.buttons .button {
   301    color: var(--color-white);
   302    background: var(--color-green);
   303  }
   304  
   305  .ui.green.button:hover,
   306  .ui.green.buttons .button:hover {
   307    background: var(--color-green-dark-1);
   308  }
   309  
   310  .ui.green.button:active,
   311  .ui.green.buttons .button:active {
   312    background: var(--color-green-dark-2);
   313  }
   314  
   315  .ui.basic.green.buttons .button,
   316  .ui.basic.green.button {
   317    color: var(--color-green);
   318    border-color: var(--color-green);
   319    background: none;
   320  }
   321  
   322  .ui.basic.green.buttons .button:hover,
   323  .ui.basic.green.button:hover {
   324    color: var(--color-green-dark-1);
   325    border-color: var(--color-green-dark-1);
   326  }
   327  
   328  .ui.basic.green.buttons .button:active,
   329  .ui.basic.green.button:active {
   330    color: var(--color-green-dark-2);
   331    border-color: var(--color-green-dark-2);
   332  }
   333  
   334  .ui.buttons {
   335    display: inline-flex;
   336    flex-direction: row;
   337    font-size: 0;
   338    vertical-align: baseline;
   339    margin: 0 0.25em 0 0;
   340  }
   341  
   342  .delete-button,
   343  .delete-button:hover {
   344    color: var(--color-red);
   345  }
   346  
   347  /* btn is a plain button without any opinionated styling, it only uses flex for vertical alignment like ".ui.button" in base.css */
   348  
   349  .btn {
   350    background: transparent;
   351    border-radius: var(--border-radius);
   352    border: none;
   353    color: inherit;
   354    margin: 0;
   355    padding: 0;
   356  }
   357  
   358  .btn:hover,
   359  .btn:active {
   360    background: none;
   361    border: none;
   362  }
   363  
   364  a.btn,
   365  a.btn:hover {
   366    color: inherit;
   367  }
   368  
   369  /* By default, Fomantic UI doesn't support "bordered" buttons group, but Gitea would like to use it.
   370  And the default buttons always have borders now (not the same as Fomantic UI's default buttons, see above).
   371  It needs some tricks to tweak the left/right borders with active state */
   372  
   373  .ui.buttons .button {
   374    border-right: none;
   375    flex: 1 0 auto;
   376    border-radius: 0;
   377    margin: 0;
   378  }
   379  .ui.buttons .button:first-child {
   380    border-left: none;
   381    margin-left: 0;
   382    border-top-left-radius: 0.28571429rem;
   383    border-bottom-left-radius: 0.28571429rem;
   384  }
   385  .ui.buttons .button:last-child {
   386    border-top-right-radius: 0.28571429rem;
   387    border-bottom-right-radius: 0.28571429rem;
   388  }
   389  
   390  .ui.buttons .button:hover {
   391    border-color: var(--color-secondary-dark-2);
   392  }
   393  
   394  .ui.buttons .button:hover + .button {
   395    border-left: 1px solid var(--color-secondary-dark-2);
   396  }
   397  
   398  /* 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 */
   399  .ui.buttons .button:first-child,
   400  .ui.buttons .button.tw-hidden:first-child + .button {
   401    border-left: 1px solid var(--color-light-border);
   402  }
   403  
   404  .ui.buttons .button:last-child,
   405  .ui.buttons .button:nth-last-child(2):has(+ .button.tw-hidden) {
   406    border-right: 1px solid var(--color-light-border);
   407  }
   408  
   409  .ui.buttons .button.active {
   410    border-left: 1px solid var(--color-light-border);
   411    border-right: 1px solid var(--color-light-border);
   412  }
   413  
   414  .ui.buttons .button.active + .button {
   415    border-left: none;
   416  }
   417  
   418  /* apply the vertical padding of .compact to non-compact buttons when they contain a svg as they
   419     would otherwise appear too large. Seen on "RSS Feed" button on repo releases tab. */
   420  .ui.small.button:not(.compact):has(.svg) {
   421    padding-top: 0.58928571em;
   422    padding-bottom: 0.58928571em;
   423  }