prime8dev

prime8dev
git clone https://git.prime8.dev/prime8dev.git
Log | Files | Refs | README | LICENSE

header.css (1624B)

      1 #tabs {
      2   display: flex;
      3   align-items: center;
      4   gap: 4px;
      5   background: var(--bg-alt);
      6   border-bottom: 1px solid var(--border);
      7   padding: 0 12px;
      8   height: 36px;
      9   position: sticky;
     10   top: 0;
     11   z-index: 100;
     12   user-select: none;
     13 }
     14 
     15 #tabs * {
     16   user-select: none;
     17 }
     18 
     19 .tab-nav {
     20   display: flex;
     21   align-items: stretch;
     22   align-self: stretch;
     23   margin-left: -12px;
     24 }
     25 
     26 /* dwm-style tags: flush cells, the selected one filled */
     27 .tab {
     28   display: flex;
     29   align-items: center;
     30   padding: 0 10px;
     31   color: var(--fg-dim);
     32   cursor: pointer;
     33   text-decoration: none;
     34 }
     35 
     36 .tab:hover {
     37   color: var(--fg);
     38 }
     39 
     40 .tab.active {
     41   background: var(--accent);
     42   color: var(--bg);
     43   font-weight: bold;
     44 }
     45 
     46 .tab-spacer {
     47   flex: 1;
     48 }
     49 
     50 .status {
     51   display: flex;
     52   align-items: center;
     53   gap: 8px;
     54   color: var(--fg-dim);
     55   font-size: var(--fs-11);
     56   margin-right: 8px;
     57 }
     58 
     59 .dpad {
     60   display: inline-flex;
     61   flex-direction: column;
     62   align-items: center;
     63   gap: 1px;
     64   font-size: var(--fs-8);
     65   line-height: 1;
     66 }
     67 
     68 .dpad-row {
     69   display: flex;
     70   gap: 1px;
     71 }
     72 
     73 .dpad-key {
     74   width: 12px;
     75   height: 10px;
     76   display: flex;
     77   align-items: center;
     78   justify-content: center;
     79   background: var(--border);
     80   border-radius: 2px;
     81   color: var(--fg);
     82 }
     83 
     84 @media (max-width: 768px) {
     85   #tabs {
     86     flex-wrap: wrap;
     87     height: auto;
     88     min-height: 36px;
     89     padding: 0;
     90     gap: 0;
     91   }
     92 
     93   .tab-nav {
     94     width: 100%;
     95     margin-left: 0;
     96   }
     97 
     98   .tab {
     99     justify-content: center;
    100     min-height: 36px;
    101     padding: 0 8px;
    102     font-size: var(--fs-12);
    103     flex: 1;
    104     text-align: center;
    105   }
    106 
    107   .tab-spacer,
    108   .status,
    109   .tab-num {
    110     display: none;
    111   }
    112 }