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

     1  /* Content managed by Project Forge, see [projectforge.md] for details. */
     2  .theme-container {
     3    display: flex;
     4    flex-wrap: wrap;
     5  }
     6  
     7  .theme-container .theme-item {
     8    margin: 0 var(--padding);
     9  }
    10  
    11  .mockup {
    12    text-align: left;
    13    margin: auto;
    14    width: 166px;
    15    height: 126px;
    16    font-size: 80%;
    17  }
    18  
    19  .mockup .mock-link:hover, .mockup .mock-link-visited:hover, .mockup .mock-link-selected:hover {
    20    text-decoration: underline;
    21    cursor: pointer;
    22  }
    23  
    24  .mockup .mock-nav {
    25    height: 18px;
    26  }
    27  
    28  .mockup .mock-nav .icon {
    29    margin-left: 2px;
    30  }
    31  
    32  .mockup .mock-muted {
    33    margin: 2px 6px;
    34    padding: 2px;
    35  }
    36  
    37  .mockup .mock-menu {
    38    float: left;
    39    width: 30px;
    40    height: 102px;
    41  }
    42  .mockup .mock-menu .mock-link, .mockup .mock-menu .mock-link-selected {
    43    padding-left: 4px;
    44  }
    45  
    46  .mockup .mock-main {
    47    padding: 4px 4px 4px 30px;
    48    height: 102px;
    49  }
    50  .mockup .mock-main ul {
    51    margin-top: var(--padding-small);
    52  }
    53  
    54  .mockup .mock-list {
    55    margin-left: 2px;
    56    padding-left: 4px;
    57  }
    58  
    59  .icon-container {
    60    margin: var(--padding);
    61    width: 80px;
    62    text-align: center;
    63  }
    64  .icon-container svg {
    65    width: 64px;
    66    height: 64px
    67  }
    68  
    69  .choice label {
    70    display: block;
    71    float: left;
    72    margin-right: var(--padding);
    73  }
    74  
    75  .choice input {
    76    display: none;
    77  }
    78  
    79  .choice .title {
    80    text-align: center;
    81    cursor: pointer;
    82  }
    83  
    84  .choice input ~ * {
    85    border: 3px solid transparent;
    86  }
    87  .choice input:checked ~ * {
    88    border: 3px solid var(--color-background-muted);
    89    background-color: var(--color-background-muted);
    90  }
    91  
    92  .only-light-theme { display: inline-block; }
    93  .only-dark-theme { display: none; }
    94  .mode-light .only-light-theme { display: inline-block; }
    95  .mode-light .only-dark-theme { display: none; }
    96  .mode-dark .only-light-theme { display: none; }
    97  .mode-dark .only-dark-theme { display: inline-block; }
    98  
    99  @media (prefers-color-scheme: dark) {
   100    .only-light-theme { display: none; }
   101    .only-dark-theme { display: inline-block; }
   102    .mode-light .only-light-theme { display: inline-block; }
   103    .mode-light .only-dark-theme { display: none; }
   104    .mode-dark .only-light-theme { display: none; }
   105    .mode-dark .only-dark-theme { display: inline-block; }
   106  }