synthing

a waveform sequencing synth on the web
Log | Files | Refs | Submodules

index.css (2355B)

      1 @font-face {
      2     font-family: Hack;
      3     src: local('Hack'),
      4          local('Hack-Regular'),
      5          url('fonts/Hack-Regular.ttf');
      6     weight: normal;
      7 }
      8 
      9 body {
     10     background-color: #fff7f0;
     11     margin: 0px 50px;
     12     padding: 0;
     13 }
     14 
     15 * {
     16     font-family: Hack, monospace, san-serif;
     17 }
     18 
     19 *:focus {
     20     outline: none !important;
     21 }
     22 
     23 button::-moz-focus-inner {
     24     border: 0;
     25     outline: none !important;
     26 }
     27 
     28 h1 {
     29     text-align: left;
     30 }
     31 
     32 .triangle {
     33     border-left: 0.3em solid transparent;
     34     border-top: solid 0.5em black;
     35     border-right: 0.3em solid transparent;
     36     transform: rotate(-90deg);
     37     width: 0;
     38     height: 0;
     39     position: relative;
     40     left: 0.05em;
     41 }
     42 
     43 .rectangle {
     44     width: 0.5em;
     45     height: 0.5em;
     46 }
     47 
     48 .circle {
     49     display: inline-flex;
     50     justify-content: center;
     51     align-items: center;
     52     height: 1em;
     53     width: 1em;
     54     border-radius: 1em;
     55     background: ;
     56 }
     57 
     58 .global-controls {
     59     display: flex;
     60     align-items: center;
     61     justify-content: space-between;
     62     flex-wrap: wrap;
     63     background: #f1ddd8;
     64     padding: 10px;
     65     margin: 15px 0;
     66 }
     67 
     68 .play-container, .adsr-container {
     69     display: flex;
     70     align-items: center;
     71     justify-content: center;
     72 }
     73 
     74 .adsr-container {
     75     padding-right: 10px;
     76 }
     77 
     78 .adsr-container .adsr {
     79 
     80 }
     81 
     82 .global-controls .circle {
     83     font-size: 35px;
     84 }
     85 
     86 .global-controls .adsr {
     87     align-self: right;
     88 }
     89 
     90 .total-wave * {
     91     background: none !important;
     92 }
     93 
     94 .total-wave {
     95     width: 800px;
     96     display: inline-flex;
     97 }
     98 
     99 .total-wave.-move {
    100     animation: wiggle linear 1s infinite;
    101 }
    102 
    103 .wave-scroller {
    104     padding: 3px 0;
    105     display: inline-flex;
    106     height: 50px;
    107     width: 200px;
    108     overflow: hidden;
    109     position: absolute;
    110     top: 15px;
    111     right: 50px;
    112     border-left: solid 1px rgba(0,0,0,0.1);
    113     border-right: solid 1px rgba(0,0,0,0.1);
    114 }
    115 
    116 @keyframes wiggle {
    117     from {
    118         margin-left: -100px;
    119     }
    120     to {
    121         margin-left: 0px;
    122     }
    123 }
    124 
    125 @media screen and (max-width: 882px) {
    126     .global-controls > div {
    127         align-items: center;
    128         justify-content: center;
    129         flex-grow: 1;
    130     }
    131 }
    132 @media screen and (max-width: 660px) {
    133     .adsr {
    134         display: inline-block;
    135     }
    136     .adsr > * {
    137         float: left;
    138     }
    139     body {
    140         margin: 10px;
    141     }
    142 }
    143 @media screen and (max-width: 580px) {
    144     .adsr > *:nth-child(2n+1) {
    145         clear: left;
    146     }
    147 }