physics-simulations

A collection of physics simulations
git clone https://git.ashermorgan.net/physics-simulations/
Log | Files | Refs | README

styles.css (2553B)

      1 * {
      2     padding: 0px;
      3     margin: 0px;
      4     box-sizing: border-box;
      5     font-family: Segoe UI, sans-serif;
      6 }
      7 div[hidden] {
      8     display: none !important;
      9 }
     10 
     11 #app {
     12     touch-action: manipulation;
     13 }
     14 
     15 header {
     16     background-color: #48d1cc;
     17     color: #000000;
     18     width: 100%;
     19     text-align: center;
     20     padding: 10px;
     21     margin-bottom: 10px;
     22 }
     23 header h1 {
     24     font-size: 25px;
     25 }
     26 header a {
     27     position: absolute;
     28     left: 5px;
     29 }
     30 header button {
     31     position: absolute;
     32     right: 5px;
     33 }
     34 
     35 noscript {
     36     color: #ff0000;
     37     margin-bottom: 10px;
     38     text-align: center;
     39 }
     40 
     41 .icon, .icon:focus {
     42     background-color: #00000000;
     43     border: none;
     44     padding: 5px;
     45     cursor: pointer;
     46     vertical-align: middle;
     47     outline: 0;
     48 }
     49 #simulation .icon:disabled {
     50     filter: invert(50%);
     51     cursor: default;
     52 }
     53 
     54 #simulation {
     55     display: flex;
     56     flex-direction: column;
     57     align-items: center;
     58 }
     59 
     60 #input, #data {
     61     display: flex;
     62     flex-direction: row;
     63     align-items: center;
     64     justify-content: center;
     65     flex-wrap: wrap;
     66     padding: 5px;
     67     background-color: #f0f0f0;
     68 }
     69 #input>*, #data>* {
     70     margin: 5px 10px;
     71 }
     72 #input>section>* {
     73     display:block;
     74     width: 200px;
     75 }
     76 
     77 #output {
     78     position: relative;
     79     left: 0px;
     80     margin: 10px;
     81     width: min-content;
     82     border: 1px solid #000000;
     83 }
     84 #output>#simControls {
     85     position: absolute;
     86     right: 0px;
     87     padding: 5px;
     88     padding-bottom: 0px;
     89 }
     90 #output>#zoomControls {
     91     position: absolute;
     92     left: 0px;
     93     padding: 5px;
     94     padding-bottom: 0px;
     95 }
     96 @media only screen and (max-width: 800px) {
     97     #output {
     98         width: calc(100% - 20px);
     99     }
    100     #output>svg {
    101         width: 100%;
    102     }
    103     #output .icon {
    104         padding: 10px;
    105     }
    106 }
    107 @media only screen and (max-width: 350px) {
    108     header a.icon {
    109         position: static;
    110         float: left;
    111     }
    112     header button.icon {
    113         position: static;
    114         float: right;
    115     }
    116 }
    117 
    118 #info {
    119     max-width: 750px;
    120     margin: auto;
    121     padding: 15px;
    122     padding-top: 0px;
    123 }
    124 #info h2 {
    125     text-align: center;
    126     margin-bottom: 5px;
    127 }
    128 #info>* {
    129     margin-bottom: 15px;
    130 }
    131 #info p + ul {
    132     margin-top: -15px;
    133 }
    134 #info li {
    135     margin-left: 30px;
    136 }
    137 #info img {
    138     vertical-align: middle;
    139 }
    140 
    141 /* dark mode */
    142 @media only screen and (prefers-color-scheme: dark) {
    143     body {
    144         background: #202020;
    145         color: #e0e0e0;
    146     }
    147     #output {
    148         border: 1px solid #e0e0e0;
    149     }
    150     #input, #data {
    151         background-color: #404040;
    152     }
    153     #simulation .icon, #info img {
    154         filter: invert(1);
    155     }
    156 }