universe

Universe
git clone https://git.dasho.dev/universe.git
Log | Files | Refs | Submodules | README

rooms.css (2715B)

      1 /* Room selection styling */
      2 #roomblock {
      3  background: rgba(0, 0, 0, 0.7) !important; /* More opaque since it's not in iframe */
      4  backdrop-filter: blur(10px);
      5  border: 1px solid var(--accent);
      6  border-radius: 8px;
      7  padding: 8px;
      8  margin: 4px 0;
      9  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     10  transition: all 0.3s ease;
     11  display: inline-block;
     12  width: 100%; /* Fill the container */
     13  box-sizing: border-box;
     14 }
     15 
     16 #roomblock:hover {
     17  background: rgba(0, 0, 0, 0.8) !important; /* More opaque on hover */
     18  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
     19  transform: translateY(-1px);
     20 }
     21 
     22 .room-header {
     23  margin-bottom: 6px;
     24  text-align: center;
     25 }
     26 
     27 .room-label {
     28  color: var(--accent);
     29  font-size: 11px;
     30  font-weight: bold;
     31  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
     32  display: inline-block;
     33 }
     34 
     35 .room-selector {
     36  display: flex;
     37  align-items: center;
     38  justify-content: center;
     39  gap: 4px;
     40  flex-wrap: wrap;
     41 }
     42 
     43 #roomblock select#room {
     44  background: var(--lv2-col);
     45  color: var(--button-text-col);
     46  border: 1px solid var(--accent);
     47  border-radius: 4px;
     48  padding: 3px 5px;
     49  font-size: 10px;
     50  min-width: 100px;
     51  cursor: pointer;
     52  transition: all 0.2s ease;
     53  flex: 1;
     54 }
     55 
     56 #roomblock select#room:hover {
     57  background: var(--accent2);
     58  border-color: var(--accent);
     59 }
     60 
     61 #roomblock select#room:focus {
     62  outline: none;
     63  background: var(--lv3-col);
     64  border-color: var(--accent);
     65  box-shadow: 0 0 4px rgba(255, 255, 128, 0.4);
     66 }
     67 
     68 #roomblock select#room option {
     69  background: var(--lv2-col);
     70  color: var(--button-text-col);
     71  padding: 2px;
     72 }
     73 
     74 #roomblock select#room option:selected {
     75  background: var(--accent2);
     76  color: var(--button-text-col);
     77 }
     78 
     79 #roomblock input[type="submit"] {
     80  background: linear-gradient(135deg, var(--accent2), var(--accent));
     81  color: var(--button-text-col);
     82  border: 1px solid var(--accent);
     83  border-radius: 4px;
     84  padding: 3px 6px;
     85  font-size: 10px;
     86  cursor: pointer;
     87  transition: all 0.2s ease;
     88  font-weight: bold;
     89  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
     90  white-space: nowrap;
     91 }
     92 
     93 #roomblock input[type="submit"]:hover {
     94  background: linear-gradient(135deg, var(--accent), var(--accent3));
     95  transform: translateY(-1px);
     96  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
     97 }
     98 
     99 #roomblock input[type="submit"]:active {
    100  transform: translateY(0);
    101  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    102 }
    103 
    104 /* Responsive design for smaller screens */
    105 @media (max-width: 480px) {
    106  #roomblock {
    107    margin: 2px 0;
    108    padding: 6px;
    109  }
    110  
    111  .room-selector {
    112    flex-direction: column;
    113    gap: 3px;
    114  }
    115  
    116  #roomblock select#room {
    117    width: 100%;
    118    min-width: 80px;
    119  }
    120  
    121  #roomblock input[type="submit"] {
    122    width: 100%;
    123  }
    124  
    125  .room-label {
    126    font-size: 10px;
    127  }
    128 }