github.com/kyleu/dbaudit@v0.0.2-0.20240321155047-ff2f2c940496/client/src/style/nav.css (about)

     1  /* Content managed by Project Forge, see [projectforge.md] for details. */
     2  #navbar {
     3    top: 0;
     4    position: fixed;
     5    z-index: 1;
     6    width: 100%;
     7    height: var(--nav-height);
     8    display: flex;
     9    color: var(--color-nav-foreground);
    10    background-color: var(--color-nav-background);
    11  }
    12  
    13  #navbar .menu-toggle {
    14    display: none;
    15    order: -1;
    16    transition: all 0.3s;
    17    box-sizing: border-box;
    18    cursor: pointer;
    19    height: 24px;
    20    width: 24px;
    21    margin: 16px 12px 0 12px;
    22  }
    23  
    24  @media (prefers-reduced-motion) {
    25    #navbar .menu-toggle {
    26      transition: none;
    27    }
    28  }
    29  
    30  #navbar .menu-toggle a {
    31    color: var(--color-nav-foreground);
    32  }
    33  
    34  @media (max-width: 800px) {
    35    #navbar .menu-toggle {
    36      display: block;
    37    }
    38    #navbar .logo {
    39      display: none;
    40    }
    41  }
    42  
    43  #navbar #menu-toggle-input:checked ~ .menu-container {
    44    transform: translateX(0);
    45  }
    46  
    47  .menu-toggle .spinner {
    48    transition: all 0.3s;
    49    box-sizing: border-box;
    50    position: absolute;
    51    height: 3px;
    52    width: 100%;
    53    background-color: var(--color-nav-foreground);
    54  }
    55  
    56  .menu-toggle .horizontal {
    57    transition: all 0.3s;
    58    box-sizing: border-box;
    59    position: relative;
    60    float: left;
    61    margin-top: 3px;
    62  }
    63  
    64  .menu-toggle .diagonal.part-1 {
    65    position: relative;
    66    transition: all 0.3s;
    67    box-sizing: border-box;
    68    float: left;
    69  }
    70  
    71  .menu-toggle .diagonal.part-2 {
    72    transition: all 0.3s;
    73    box-sizing: border-box;
    74    position: relative;
    75    float: left;
    76    margin-top: 3px;
    77  }
    78  
    79  input[type=checkbox]:checked ~ .menu-toggle > .horizontal {
    80    transition: all 0.3s;
    81    box-sizing: border-box;
    82    opacity: 0;
    83  }
    84  
    85  input[type=checkbox]:checked ~ .menu-toggle > .diagonal.part-1 {
    86    transition: all 0.3s;
    87    box-sizing: border-box;
    88    transform: rotate(135deg);
    89    margin-top: 8px;
    90  }
    91  
    92  input[type=checkbox]:checked ~ .menu-toggle > .diagonal.part-2 {
    93    transition: all 0.3s;
    94    box-sizing: border-box;
    95    transform: rotate(-135deg);
    96    margin-top: -9px;
    97  }
    98  
    99  @media (prefers-reduced-motion) {
   100    .menu-toggle .spinner {
   101      transition: none;
   102    }
   103    .menu-toggle .horizontal {
   104      transition: none;
   105    }
   106    .menu-toggle .diagonal.part-1 {
   107      transition: none;
   108    }
   109    .menu-toggle .diagonal.part-2 {
   110      transition: none;
   111    }
   112    input[type=checkbox]:checked ~ .menu-toggle > .horizontal {
   113      transition: none;
   114    }
   115    input[type=checkbox]:checked ~ .menu-toggle > .diagonal.part-1 {
   116      transition: none;
   117    }
   118    input[type=checkbox]:checked ~ .menu-toggle > .diagonal.part-2 {
   119      transition: none;
   120    }
   121  }
   122  
   123  #navbar .logo {
   124    margin: 8px;
   125    color: var(--color-nav-foreground);
   126  }
   127  
   128  #navbar .breadcrumbs {
   129    height: 40px;
   130    line-height: var(--nav-height);
   131    font-size: 24px;
   132    flex-grow: 1;
   133    overflow: hidden;
   134  }
   135  
   136  #navbar .breadcrumbs a {
   137    color: var(--color-nav-foreground);
   138  }
   139  
   140  #navbar .nav-root-icon {
   141    display: none;
   142  }
   143  
   144  #navbar .breadcrumb-icon {
   145    padding-top: 10px;
   146  }
   147  
   148  #navbar .nav-item-title {
   149    padding-left: var(--padding-small);
   150  }
   151  
   152  @media (max-width: 800px) {
   153    #navbar .nav-root-icon {
   154      display: inline;
   155    }
   156    #navbar .nav-root-item {
   157      display: none;
   158    }
   159    #navbar .nav-item-title {
   160      display: none;
   161    }
   162    #navbar .last .nav-item-title {
   163      display: inline;
   164    }
   165  }
   166  
   167  #navbar .search-image {
   168    display: block !important;
   169  }
   170  
   171  #navbar .profile {
   172    margin: 12px;
   173    color: var(--color-nav-foreground);
   174  }