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

     1  .ui.menu {
     2    display: flex;
     3    margin: 1rem 0;
     4    font-family: var(--fonts-regular);
     5    font-weight: var(--font-weight-normal);
     6    background: var(--color-menu);
     7    border: 1px solid var(--color-secondary);
     8    border-radius: 0.28571429rem;
     9    min-height: 2.85714286em;
    10    font-size: 1rem;
    11  }
    12  .ui.menu:first-child {
    13    margin-top: 0;
    14  }
    15  .ui.menu:last-child {
    16    margin-bottom: 0;
    17  }
    18  
    19  .ui.menu .menu {
    20    margin: 0;
    21  }
    22  .ui.menu:not(.vertical) > .menu {
    23    display: flex;
    24  }
    25  
    26  .ui.menu:not(.vertical) .item {
    27    display: flex;
    28    align-items: center;
    29  }
    30  
    31  .ui.menu .item {
    32    position: relative;
    33    vertical-align: middle;
    34    line-height: var(--line-height-default);
    35    text-decoration: none;
    36    flex: 0 0 auto;
    37    background: none;
    38    padding: 0.92857143em 1.14285714em;
    39    color: var(--color-text);
    40    font-weight: var(--font-weight-normal);
    41  }
    42  .ui.menu > .item:first-child {
    43    border-radius: 0.28571429rem 0 0 0.28571429rem;
    44  }
    45  
    46  .ui.menu .item::before {
    47    position: absolute;
    48    content: "";
    49    top: 0;
    50    right: 0;
    51    height: 100%;
    52    width: 1px;
    53    background: var(--color-secondary);
    54  }
    55  
    56  .ui.menu .item > .svg {
    57    margin-right: 0.35em;
    58  }
    59  
    60  .ui.menu .item > a:not(.ui),
    61  .ui.menu .item > p:only-child {
    62    line-height: 1.3;
    63  }
    64  .ui.menu .item > p:first-child {
    65    margin-top: 0;
    66  }
    67  .ui.menu .item > p:last-child {
    68    margin-bottom: 0;
    69  }
    70  
    71  .ui.menu .item > i.icon {
    72    opacity: 0.9;
    73    float: none;
    74    margin: 0 0.35714286em 0 0;
    75  }
    76  
    77  .ui.menu:not(.vertical) .item > .button {
    78    position: relative;
    79    top: 0;
    80    margin: -0.5em 0;
    81    padding: 0.58928571em 1.125em;
    82    font-size: 1em;
    83  }
    84  
    85  .ui.menu > .grid,
    86  .ui.menu > .container {
    87    display: flex;
    88    align-items: inherit;
    89    flex-direction: inherit;
    90  }
    91  
    92  .ui.menu .item > .input {
    93    width: 100%;
    94  }
    95  .ui.menu:not(.vertical) .item > .input {
    96    position: relative;
    97    top: 0;
    98    margin: -0.5em 0;
    99  }
   100  .ui.menu .item > .input input {
   101    font-size: 1em;
   102    padding-top: 0.57142857em;
   103    padding-bottom: 0.57142857em;
   104  }
   105  
   106  .ui.menu .header.item,
   107  .ui.vertical.menu .header.item {
   108    margin: 0;
   109    font-size: 1.1em;
   110    background: var(--color-box-header);
   111    font-weight: var(--font-weight-medium);
   112  }
   113  .ui.vertical.menu .item > .header:not(.ui) {
   114    margin: 0 0 0.5em;
   115    font-size: 1em;
   116    font-weight: var(--font-weight-medium);
   117  }
   118  
   119  .ui.menu .item > i.dropdown.icon {
   120    padding: 0;
   121    float: right;
   122    margin: 0 0 0 1em;
   123  }
   124  
   125  .ui.menu .dropdown.item .menu {
   126    min-width: calc(100% - 1px);
   127    border-radius: 0 0 0.28571429rem 0.28571429rem;
   128    background: var(--color-body);
   129    margin: 0;
   130    flex-direction: column !important;
   131  }
   132  
   133  .ui.menu .ui.dropdown .menu > .item {
   134    margin: 0;
   135    text-align: left;
   136    font-size: 1em !important;
   137    padding: 0.78571429em 1.14285714em !important;
   138    background: transparent !important;
   139    color: var(--color-text) !important;
   140    font-weight: var(--font-weight-normal) !important;
   141  }
   142  .ui.menu .ui.dropdown .menu > .item:hover {
   143    color: var(--color-text) !important;
   144    background: var(--color-hover) !important;
   145  }
   146  .ui.menu .ui.dropdown .menu > .selected.item {
   147    color: var(--color-text) !important;
   148    background: var(--color-hover) !important;
   149  }
   150  .ui.menu .ui.dropdown .menu > .active.item {
   151    color: var(--color-text) !important;
   152    background: var(--color-active) !important;
   153    font-weight: var(--font-weight-medium) !important;
   154  }
   155  
   156  .ui.menu .ui.dropdown.item .menu .item {
   157    width: 100%;
   158  }
   159  
   160  .ui.menu .ui.dropdown.item .menu .item:not(.filtered) {
   161    display: block;
   162  }
   163  .ui.menu .ui.dropdown .menu > .item > i.icon:not(.dropdown) {
   164    display: inline-block;
   165    font-size: 1em !important;
   166    float: none;
   167    margin: 0 0.75em 0 0 !important;
   168  }
   169  
   170  .ui.secondary.menu .dropdown.item > .menu {
   171    border-radius: 0.28571429rem;
   172    margin-top: 0.35714286em;
   173  }
   174  
   175  .ui.menu .pointing.dropdown.item .menu {
   176    margin-top: 0.75em;
   177  }
   178  
   179  .ui.menu .item > .label:not(.floating) {
   180    margin-left: 1em;
   181    padding: 0.3em 0.78571429em;
   182  }
   183  .ui.vertical.menu .item > .label {
   184    margin-top: -0.15em;
   185    margin-bottom: -0.15em;
   186    padding: 0.3em 0.78571429em;
   187    float: right;
   188    text-align: center;
   189  }
   190  .ui.menu .item > .floating.label {
   191    padding: 0.3em 0.78571429em;
   192  }
   193  .ui.menu .item > .label {
   194    background: var(--color-label-bg);
   195    color: var(--color-label-text);
   196  }
   197  .ui.menu .item > .image.label img {
   198    margin: -0.2833em 0.8em -0.2833em -0.8em;
   199    height: 1.5666em;
   200  }
   201  
   202  .ui.menu .item > img:not(.ui) {
   203    display: inline-block;
   204    vertical-align: middle;
   205    margin: -0.3em 0;
   206    width: 2.5em;
   207  }
   208  .ui.vertical.menu .item > img:not(.ui):only-child {
   209    display: block;
   210    max-width: 100%;
   211    width: auto;
   212  }
   213  
   214  .ui.menu .list .item::before {
   215    background: none !important;
   216  }
   217  
   218  @media only screen and (max-width: 767.98px) {
   219    .ui.menu > .ui.container {
   220      width: 100% !important;
   221      margin-left: 0 !important;
   222      margin-right: 0 !important;
   223    }
   224  }
   225  
   226  .ui.menu .dropdown.item:hover,
   227  .ui.menu a.item:hover {
   228    cursor: pointer;
   229  }
   230  
   231  .ui.menu a.item:active {
   232    color: var(--color-text);
   233    background: none;
   234  }
   235  
   236  .ui.menu .active.item {
   237    color: var(--color-text);
   238    background: var(--color-active);
   239    font-weight: var(--font-weight-normal);
   240  }
   241  .ui.menu .active.item > i.icon {
   242    opacity: 1;
   243  }
   244  
   245  .ui.ui.menu .item.disabled {
   246    cursor: default;
   247    background-color: transparent;
   248    pointer-events: none;
   249    opacity: var(--opacity-disabled);
   250  }
   251  
   252  .ui.menu:not(.vertical) .left.item,
   253  .ui.menu:not(.vertical) .left.menu {
   254    display: flex;
   255    margin-right: auto !important;
   256  }
   257  
   258  .ui.menu:not(.vertical) .right.item,
   259  .ui.menu:not(.vertical) .right.menu {
   260    display: flex;
   261    margin-left: auto !important;
   262  }
   263  .ui.menu:not(.vertical) :not(.dropdown) > .left.menu,
   264  .ui.menu:not(.vertical) :not(.dropdown) > .right.menu {
   265    display: inherit;
   266  }
   267  
   268  .ui.menu:not(.vertical) .center.item {
   269    display: flex;
   270    margin-left: auto !important;
   271    margin-right: auto !important;
   272  }
   273  
   274  .ui.menu .right.item::before,
   275  .ui.menu .right.menu > .item::before {
   276    right: auto;
   277    left: 0;
   278  }
   279  
   280  .ui.menu .center.item:last-child::before {
   281    display: none;
   282  }
   283  
   284  .ui.vertical.menu {
   285    display: block;
   286    flex-direction: column;
   287    background: var(--color-menu);
   288    width: 15rem;
   289  }
   290  
   291  .ui.vertical.menu .item {
   292    display: block;
   293    background: none;
   294    border-top: none;
   295    border-right: none;
   296  }
   297  .ui.vertical.menu > .item:first-child {
   298    border-radius: 0.28571429rem 0.28571429rem 0 0;
   299  }
   300  .ui.vertical.menu > .item:last-child {
   301    border-radius: 0 0 0.28571429rem 0.28571429rem;
   302  }
   303  
   304  .ui.vertical.menu .item > i.icon {
   305    width: 1.18em;
   306    float: right;
   307    margin: 0 0 0 0.5em;
   308  }
   309  .ui.vertical.menu .item > .label + i.icon {
   310    float: none;
   311    margin: 0 0.5em 0 0;
   312  }
   313  
   314  .ui.vertical.menu .item::before {
   315    position: absolute;
   316    content: "";
   317    top: 0;
   318    left: 0;
   319    width: 100%;
   320    height: 1px;
   321    background: var(--color-secondary);
   322  }
   323  .ui.vertical.menu .item:first-child::before {
   324    display: none !important;
   325  }
   326  
   327  .ui.vertical.menu .item > .menu {
   328    margin: 0.5em -1.14285714em 0;
   329  }
   330  .ui.vertical.menu .menu .item {
   331    background: none;
   332    padding: 0.5em 1.33333333em;
   333    font-size: 0.85714286em;
   334    color: var(--color-text-light-2);
   335  }
   336  
   337  .ui.vertical.menu .item .menu .item {
   338    color: var(--color-text-light-2);
   339    text-indent: 16px;
   340  }
   341  
   342  .ui.vertical.menu .item .menu .item:hover,
   343  .ui.vertical.menu .item .menu a.item:hover {
   344    color: var(--color-text-light-1);
   345  }
   346  
   347  .ui.vertical.menu .item .menu .active.item {
   348    background-color: transparent;
   349    font-weight: var(--font-weight-medium);
   350    color: var(--color-text);
   351  }
   352  
   353  .ui.vertical.menu .item .menu a.item:hover {
   354    color: var(--color-text);
   355  }
   356  .ui.vertical.menu .menu .item::before {
   357    display: none;
   358  }
   359  
   360  .ui.vertical.menu .active.item {
   361    background: var(--color-active);
   362    border-radius: 0;
   363  }
   364  .ui.vertical.menu > .active.item:first-child {
   365    border-radius: 0.28571429rem 0.28571429rem 0 0;
   366  }
   367  .ui.vertical.menu > .active.item:last-child {
   368    border-radius: 0 0 0.28571429rem 0.28571429rem;
   369  }
   370  .ui.vertical.menu > .active.item:only-child {
   371    border-radius: 0.28571429rem;
   372  }
   373  .ui.vertical.menu .active.item .menu .active.item {
   374    border-left: none;
   375  }
   376  
   377  .ui.tabular.menu {
   378    border-radius: 0;
   379    border: none;
   380    background: none transparent;
   381    border-bottom: 1px solid var(--color-secondary);
   382  }
   383  .ui.tabular.fluid.menu {
   384    width: calc(100% + 2px) !important;
   385  }
   386  .ui.tabular.menu .item {
   387    background: transparent;
   388    border-bottom: none;
   389    border-left: 1px solid transparent;
   390    border-right: 1px solid transparent;
   391    border-top: 2px solid transparent;
   392    color: var(--color-text-light-2);
   393  }
   394  .ui.tabular.menu .item::before {
   395    display: none;
   396  }
   397  
   398  .ui.tabular.menu .item:hover {
   399    background-color: transparent;
   400  }
   401  
   402  .ui.tabular.menu .active.item,
   403  .ui.tabular.menu .active.item:hover {
   404    background: var(--color-body);
   405    border-top-width: 1px;
   406    border-color: var(--color-secondary);
   407    color: var(--color-text-dark);
   408    margin-bottom: -1px;
   409    border-radius: 0.28571429rem 0.28571429rem 0 0 !important;
   410  }
   411  
   412  .ui.tabular.menu + .attached:not(.top).segment,
   413  .ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {
   414    border-top: none;
   415    margin-left: 0;
   416    margin-top: 0;
   417    margin-right: 0;
   418    width: 100%;
   419  }
   420  
   421  .ui.tabular.menu .active.dropdown.item {
   422    margin-bottom: 0;
   423    border-left: 1px solid transparent;
   424    border-right: 1px solid transparent;
   425    border-top: 2px solid transparent;
   426    border-bottom: none;
   427  }
   428  
   429  .ui.pagination.menu {
   430    margin: 0;
   431    display: inline-flex;
   432    vertical-align: middle;
   433  }
   434  .ui.pagination.menu .item:last-child {
   435    border-radius: 0 0.28571429rem 0.28571429rem 0;
   436  }
   437  .ui.compact.menu .item:last-child {
   438    border-radius: 0 0.28571429rem 0.28571429rem 0;
   439  }
   440  .ui.pagination.menu .item:last-child::before {
   441    display: none;
   442  }
   443  .ui.pagination.menu .item {
   444    min-width: 3em;
   445    text-align: center;
   446  }
   447  .ui.pagination.menu .icon.item i.icon {
   448    vertical-align: top;
   449  }
   450  
   451  .ui.pagination.menu .active.item,
   452  .ui.pagination.menu .active.item:hover {
   453    border-top: none;
   454    padding-top: 0.92857143em;
   455    color: var(--color-text);
   456    background: var(--color-active);
   457  }
   458  
   459  @media (max-width: 767.98px) {
   460    .ui.pagination.menu .item:not(.active,.navigation),
   461    .ui.pagination.menu .item.navigation span.navigation_label {
   462      display: none;
   463    }
   464  }
   465  
   466  .ui.pagination.menu.narrow .item {
   467    padding-left: 8px;
   468    padding-right: 8px;
   469    min-width: 1em;
   470    text-align: center;
   471  }
   472  
   473  .ui.pagination.menu.narrow .item .icon {
   474    margin-right: 0;
   475  }
   476  
   477  .ui.secondary.menu {
   478    background: none;
   479    margin-left: 0;
   480    margin-right: 0;
   481    gap: .35714286em;
   482    border-radius: 0;
   483    border: none;
   484  }
   485  
   486  .ui.secondary.menu .item {
   487    align-self: center;
   488    border: none;
   489    padding: 0.78571429em 0.92857143em;
   490    margin: 0;
   491    background: none;
   492    border-radius: 0.28571429rem;
   493  }
   494  
   495  .ui.secondary.menu .item::before {
   496    display: none !important;
   497  }
   498  
   499  .ui.secondary.menu .header.item {
   500    border-radius: 0;
   501    border-right: none;
   502    background: none transparent;
   503  }
   504  
   505  .ui.secondary.menu .item > img:not(.ui) {
   506    margin: 0;
   507  }
   508  
   509  .ui.secondary.menu .dropdown.item:hover,
   510  .ui.secondary.menu a.item:hover {
   511    color: var(--color-text);
   512    background: var(--color-hover);
   513  }
   514  
   515  .ui.secondary.menu .active.item {
   516    border-radius: 0.28571429rem;
   517  }
   518  
   519  .ui.secondary.menu .active.item,
   520  .ui.secondary.menu .active.item:hover {
   521    color: var(--color-text-dark);
   522    background: var(--color-active);
   523  }
   524  
   525  .ui.secondary.item.menu {
   526    margin-left: 0;
   527    margin-right: 0;
   528  }
   529  .ui.secondary.item.menu .item:last-child {
   530    margin-right: 0;
   531  }
   532  
   533  .ui.vertical.secondary.menu .item:not(.dropdown) > .menu {
   534    margin: 0 -0.92857143em;
   535  }
   536  .ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {
   537    margin: 0;
   538    padding: 0.5em 1.33333333em;
   539  }
   540  .ui.secondary.vertical.menu > .item {
   541    border: none;
   542    margin: 0 0 0.35714286em;
   543    border-radius: 0.28571429rem !important;
   544  }
   545  .ui.secondary.vertical.menu > .header.item {
   546    border-radius: 0;
   547  }
   548  
   549  .ui.vertical.secondary.menu .item > .menu .item {
   550    background-color: transparent;
   551  }
   552  
   553  .ui.secondary.pointing.menu {
   554    margin-left: 0;
   555    margin-right: 0;
   556    border-bottom: 2px solid var(--color-secondary);
   557  }
   558  .ui.secondary.pointing.menu .item {
   559    border-bottom-color: transparent;
   560    border-bottom-style: solid;
   561    border-radius: 0;
   562    align-self: flex-end;
   563    margin: 0 0 -2px;
   564    padding: 0.85714286em 1.14285714em;
   565    border-bottom-width: 2px;
   566  }
   567  .ui.secondary.pointing.menu .ui.dropdown .menu .item {
   568    border-bottom-width: 0;
   569  }
   570  .ui.secondary.pointing.menu .item > .label:not(.floating) {
   571    margin-top: -0.3em;
   572    margin-bottom: -0.3em;
   573  }
   574  .ui.secondary.pointing.menu .item > .circular.label {
   575    margin-top: -0.5em;
   576    margin-bottom: -0.5em;
   577  }
   578  
   579  .ui.secondary.pointing.menu .header.item {
   580    color: var(--color-text) !important;
   581  }
   582  .ui.secondary.pointing.menu .item::after {
   583    display: none;
   584  }
   585  
   586  .ui.secondary.pointing.menu .dropdown.item:hover,
   587  .ui.secondary.pointing.menu a.item:hover {
   588    background-color: transparent;
   589    color: var(--color-text);
   590  }
   591  
   592  .ui.secondary.pointing.menu .dropdown.item:active,
   593  .ui.secondary.pointing.menu a.item:active {
   594    background-color: transparent;
   595  }
   596  
   597  .ui.secondary.pointing.menu .active.item {
   598    background-color: transparent;
   599    border-color: currentcolor;
   600    font-weight: var(--font-weight-medium);
   601  }
   602  
   603  .ui.secondary.pointing.menu .active.item,
   604  .ui.secondary.pointing.menu .active.item:hover,
   605  .ui.secondary.pointing.menu .dropdown.item:hover {
   606    color: var(--color-text-dark);
   607  }
   608  
   609  .ui.secondary.pointing.menu .active.dropdown.item {
   610    border-color: transparent;
   611  }
   612  
   613  @media only screen and (max-width: 767.98px) {
   614    .ui.stackable.menu {
   615      flex-direction: column;
   616    }
   617    .ui.stackable.menu .item {
   618      width: 100% !important;
   619    }
   620    .ui.stackable.menu .left.menu,
   621    .ui.stackable.menu .left.item {
   622      margin-right: 0 !important;
   623    }
   624    .ui.stackable.menu .right.menu,
   625    .ui.stackable.menu .right.item {
   626      margin-left: 0 !important;
   627    }
   628    .ui.stackable.menu .center.item {
   629      margin-left: 0 !important;
   630      margin-right: 0 !important;
   631    }
   632    .ui.stackable.menu .right.menu,
   633    .ui.stackable.menu .left.menu {
   634      flex-direction: column;
   635    }
   636  }
   637  
   638  .ui.floated.menu {
   639    float: left;
   640    margin: 0 0.5rem 0 0;
   641  }
   642  .ui.floated.menu .item:last-child::before {
   643    display: none;
   644  }
   645  .ui.right.floated.menu {
   646    float: right;
   647    margin: 0 0 0 0.5rem;
   648  }
   649  
   650  .ui.borderless.menu .item::before,
   651  .ui.borderless.menu .item .menu .item::before,
   652  .ui.menu .borderless.item::before {
   653    background: none !important;
   654  }
   655  
   656  .ui.compact.menu {
   657    display: inline-flex;
   658    margin: 0;
   659    vertical-align: middle;
   660  }
   661  .ui.compact.vertical.menu {
   662    display: inline-block;
   663    width: auto !important;
   664  }
   665  .ui.compact.menu:not(.secondary) .item:last-child {
   666    border-radius: 0 0.28571429rem 0.28571429rem 0;
   667  }
   668  .ui.compact.menu .item:last-child::before {
   669    display: none;
   670  }
   671  .ui.compact.vertical.menu .item:last-child::before {
   672    display: block;
   673  }
   674  
   675  .ui.menu.fluid,
   676  .ui.vertical.menu.fluid {
   677    width: 100% !important;
   678  }
   679  
   680  .ui.item.menu,
   681  .ui.item.menu .item {
   682    width: 100%;
   683    padding-left: 0 !important;
   684    padding-right: 0 !important;
   685    margin-left: 0 !important;
   686    margin-right: 0 !important;
   687    text-align: center;
   688    justify-content: center;
   689  }
   690  .ui.attached.item.menu:not(.tabular) {
   691    margin: 0 -1px !important;
   692  }
   693  .ui.item.menu .item:last-child::before {
   694    display: none;
   695  }
   696  .ui.menu.two.item .item {
   697    width: 50%;
   698  }
   699  
   700  .ui.pointing.menu .item::after {
   701    visibility: hidden;
   702    position: absolute;
   703    content: "";
   704    top: 100%;
   705    left: 50%;
   706    transform: translateX(-50%) translateY(-50%) rotate(45deg);
   707    background: none;
   708    margin: 0.5px 0 0;
   709    width: 0.57142857em;
   710    height: 0.57142857em;
   711    border: none;
   712    border-bottom: 1px solid var(--color-secondary);
   713    border-right: 1px solid var(--color-secondary);
   714    z-index: 2;
   715  }
   716  .ui.pointing.menu .ui.dropdown .menu .item::after {
   717    display: none;
   718  }
   719  
   720  .ui.pointing.menu .active.item::after {
   721    visibility: visible;
   722  }
   723  .ui.pointing.menu .active.dropdown.item::after {
   724    visibility: hidden;
   725  }
   726  
   727  .ui.pointing.menu .dropdown.active.item::after,
   728  .ui.pointing.menu .active.item .menu .active.item::after {
   729    display: none;
   730  }
   731  
   732  .ui.pointing.menu .active.item::after,
   733  .ui.pointing.menu .active.item:hover::after {
   734    background-color: var(--color-active);
   735  }
   736  
   737  .ui.attached.menu {
   738    top: 0;
   739    bottom: 0;
   740    border-radius: 0;
   741    margin: 0 -1px;
   742    width: calc(100% + 2px);
   743    max-width: calc(100% + 2px);
   744  }
   745  .ui.attached + .ui.attached.menu:not(.top) {
   746    border-top: none;
   747  }
   748  
   749  .ui[class*="top attached"].menu {
   750    bottom: 0;
   751    margin-bottom: 0;
   752    top: 0;
   753    margin-top: 1rem;
   754    border-radius: 0.28571429rem 0.28571429rem 0 0;
   755  }
   756  .ui.menu[class*="top attached"]:first-child {
   757    margin-top: 0;
   758  }
   759  
   760  .ui.top.attached.menu > .item:first-child {
   761    border-radius: 0.28571429rem 0 0;
   762  }
   763  
   764  .ui.attached.menu:not(.tabular) {
   765    border: 1px solid var(--color-secondary);
   766  }
   767  .ui.attached.tabular.menu {
   768    margin-left: 0;
   769    margin-right: 0;
   770    width: 100%;
   771  }
   772  
   773  .ui.mini.menu,
   774  .ui.mini.menu .dropdown,
   775  .ui.mini.menu .dropdown .menu > .item {
   776    font-size: 0.78571429rem;
   777  }
   778  .ui.mini.vertical.menu:not(.icon) {
   779    width: 9rem;
   780  }
   781  .ui.tiny.menu,
   782  .ui.tiny.menu .dropdown,
   783  .ui.tiny.menu .dropdown .menu > .item {
   784    font-size: 0.85714286rem;
   785  }
   786  .ui.tiny.vertical.menu:not(.icon) {
   787    width: 11rem;
   788  }
   789  .ui.small.menu,
   790  .ui.small.menu .dropdown,
   791  .ui.small.menu .dropdown .menu > .item {
   792    font-size: 0.92857143rem;
   793  }
   794  .ui.small.vertical.menu:not(.icon) {
   795    width: 13rem;
   796  }
   797  
   798  .ui .menu:not(.vertical) .item > .button.small {
   799    font-size: 0.92857143rem;
   800  }
   801  
   802  .ui.segment .ui.tabular.menu .active.item,
   803  .ui.segment .ui.tabular.menu .active.item:hover {
   804    background: var(--color-box-body);
   805  }
   806  
   807  .small-menu-items {
   808    min-height: 35.4px !important; /* match .small.button in height */
   809    background: none !important; /* fomantic sets a color here which does not play well with active transparent color on the item, so unset and set the colors on the item */
   810    user-select: none;
   811  }
   812  
   813  .small-menu-items .item {
   814    background: var(--color-menu) !important;
   815    padding-top: 6px !important;
   816    padding-bottom: 6px !important;
   817  }
   818  
   819  .small-menu-items .item:hover {
   820    background: var(--color-hover) !important;
   821  }
   822  
   823  .small-menu-items .item.active {
   824    background: var(--color-active) !important;
   825  }