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

     1  #navbar {
     2    display: flex;
     3    align-items: center;
     4    justify-content: space-between;
     5    background: var(--color-nav-bg);
     6    border-bottom: 1px solid var(--color-secondary);
     7    margin: 0 !important;
     8    padding: 0 10px;
     9  }
    10  
    11  #navbar,
    12  #navbar .navbar-left,
    13  #navbar .navbar-right {
    14    min-height: 49px; /* +1px border-bottom */
    15  }
    16  
    17  #navbar .navbar-left,
    18  #navbar .navbar-right {
    19    margin: 0;
    20    display: flex;
    21    align-items: center;
    22    gap: 5px;
    23  }
    24  
    25  #navbar-logo {
    26    margin: 0;
    27  }
    28  
    29  .navbar-left > .item,
    30  .navbar-right > .item {
    31    color: var(--color-nav-text);
    32    position: relative;
    33    text-decoration: none;
    34    line-height: var(--line-height-default);
    35    flex: 0 0 auto;
    36    font-weight: var(--font-weight-normal);
    37    align-items: center;
    38    padding: .78571429em .92857143em;
    39    border-radius: .28571429rem;
    40  }
    41  
    42  #navbar .item {
    43    min-height: 36px;
    44    min-width: 36px;
    45    padding-top: 3px;
    46    padding-bottom: 3px;
    47    display: flex;
    48  }
    49  
    50  #navbar .dropdown .item {
    51    justify-content: stretch;
    52  }
    53  
    54  #navbar a.item:hover,
    55  #navbar button.item:hover {
    56    background: var(--color-nav-hover-bg);
    57  }
    58  
    59  #navbar .secondary.menu > .item > .svg,
    60  #navbar .right.menu > .item > .svg {
    61    margin-right: 0;
    62  }
    63  
    64  @media (max-width: 767.98px) {
    65    #navbar {
    66      align-items: stretch;
    67    }
    68    /* hide all items */
    69    #navbar .item {
    70      display: none;
    71    }
    72    #navbar #navbar-logo {
    73      display: flex;
    74    }
    75    /* show the first navbar item (logo and its mobile right items) */
    76    #navbar .navbar-left {
    77      flex: 1;
    78      display: flex;
    79      justify-content: space-between;
    80    }
    81    #navbar .navbar-mobile-right {
    82      display: flex;
    83      margin: 0 0 0 auto !important;
    84      width: auto !important;
    85    }
    86    #navbar .navbar-mobile-right > .item {
    87      display: flex;
    88      width: auto !important;
    89    }
    90    /* show items if the navbar is open */
    91    #navbar.navbar-menu-open {
    92      padding-bottom: 8px;
    93    }
    94    #navbar.navbar-menu-open,
    95    #navbar.navbar-menu-open .navbar-right {
    96      flex-direction: column;
    97    }
    98    #navbar.navbar-menu-open .navbar-left {
    99      display: flex;
   100      flex-wrap: wrap;
   101    }
   102    #navbar.navbar-menu-open .item {
   103      display: flex;
   104      width: 100%;
   105      margin: 0;
   106    }
   107    #navbar.navbar-menu-open .navbar-left #navbar-logo {
   108      justify-content: flex-start;
   109      width: auto;
   110    }
   111    #navbar.navbar-menu-open .navbar-left .navbar-mobile-right {
   112      justify-content: flex-end;
   113      width: 50%;
   114      min-height: 48px;
   115    }
   116    #navbar #mobile-stopwatch-icon,
   117    #navbar #mobile-notifications-icon {
   118      margin-right: 6px !important;
   119    }
   120  }
   121  
   122  #navbar a.item:hover .notification_count,
   123  #navbar a.item:hover .header-stopwatch-dot {
   124    border-color: var(--color-nav-hover-bg);
   125  }
   126  
   127  #navbar a.item .notification_count,
   128  #navbar a.item .header-stopwatch-dot {
   129    color: var(--color-nav-bg);
   130    padding: 0 3.75px;
   131    font-size: 12px;
   132    line-height: 12px;
   133    font-weight: var(--font-weight-bold);
   134    background: var(--color-primary);
   135    border: 2px solid var(--color-nav-bg);
   136    position: absolute;
   137    left: 6px;
   138    top: -9px;
   139    min-width: 17px;
   140    height: 17px;
   141    border-radius: 11px; /* (height + 2 * borderThickness) / 2 */
   142    display: flex;
   143    align-items: center;
   144    justify-content: center;
   145    z-index: 1; /* prevent menu button background from overlaying icon */
   146    user-select: none;
   147    white-space: nowrap;
   148  }
   149  
   150  .secondary-nav {
   151    background: var(--color-secondary-nav-bg) !important; /* important because of .ui.secondary.menu */
   152  }
   153  
   154  .issue-navbar {
   155    display: flex;
   156    justify-content: space-between;
   157  }