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