synthing

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

style.css (1657B)

      1 .beats {
      2     display: flex;
      3 }
      4 
      5 .beats > * {
      6     margin: 5px;
      7 }
      8 
      9 .beats > *:first-child {
     10     margin-right: 10px;
     11 }
     12 
     13 .wave-manager {
     14     padding: 2px 5px;
     15     margin: 5px 0;
     16     display: inline-flex;
     17     align-self: left;
     18     flex-direction: column;
     19 }
     20 
     21 .wave-manager .buttons {
     22     display: flex;
     23     justify-content: space-between;
     24     padding: 5px 5px 0 5px;
     25 }
     26 
     27 .wave-manager .buttons .item {
     28     margin: 0 5px;
     29     cursor: pointer;
     30     padding: 2px 5px;
     31     font-size: 10pt;
     32 }
     33 
     34 .wave-manager .buttons .item:first-child {
     35     margin-left: 0;
     36 }
     37 
     38 .wave-manager .buttons .item:last-child {
     39     margin-right: 0;
     40 }
     41 
     42 .wave-manager .buttons button.item {
     43     outline: 0;
     44     border: 0;
     45     background: none;
     46 }
     47 
     48 .wave-manager .buttons button.item {
     49     opacity: 0.8;
     50 }
     51 .wave-manager .buttons button.item:hover {
     52     opacity: 1;
     53 }
     54 
     55 
     56 /* solo button */
     57 .wave-manager .buttons button.item.solo {
     58     color: #0040d1;
     59 }
     60 
     61 .wave-manager .buttons button.item.solo.active,
     62 .wave-manager .buttons button.item.solo:active {
     63     color: #ffffff;
     64     background: #0040d1;
     65 }
     66 
     67 /* mute button */
     68 .wave-manager .buttons button.item.mute {
     69     color: #474747;
     70 }
     71 
     72 .wave-manager .buttons button.item.mute.active,
     73 .wave-manager .buttons button.item.mute:active {
     74     color: #ffffff;
     75     background: #474747;
     76 }
     77 
     78 .wave-manager.selected {
     79     background: #f1ddd8;
     80 }
     81 
     82 .wave-manager .item.active {
     83     background: red;
     84 }
     85 
     86 .wave-manager.selected .checkbox:not(.beat),
     87 .wave-manager.selected .checkbox.beat .checkbox-circle,
     88 .wave-manager.selected .wave-table {
     89     background: #fff;
     90 }
     91 
     92 .wave-manager .icons-ex:before {
     93     color: red;
     94 }
     95 
     96 .wave-manager .icons-dupe:before {
     97     color: green;
     98 }