unicornpaint

A web-based painting app for raspberry PI and pimoroni Unicorn Hat HD
Log | Files | Refs | README

App.css (1788B)

      1 body {
      2     background: black;
      3     color: aliceblue;
      4     padding: 10px;
      5 }
      6 
      7 .container {
      8     display: flex;
      9     flex-flow: row wrap;
     10     justify-content: center;
     11 }
     12 
     13 .header {
     14     width: 100%;
     15     text-align: center;
     16 }
     17 
     18 .liveFeed {
     19     margin-left: 10px;
     20 }
     21 
     22 .framePaintContainer {
     23     flex-direction: column;
     24 }
     25 
     26 .paintContainer {
     27     display: grid;
     28     grid-template-columns: 10fr 32fr 5fr;
     29     grid-template-rows: 32fr 8fr;
     30 }
     31 
     32 .paint {
     33     grid-column-start: 1;
     34     grid-column-end: 3;
     35     grid-row-start: 1;
     36     grid-row-end: 2;
     37 
     38     display: grid;
     39     grid-template: repeat(16, 1fr) / repeat(16, 1fr);
     40 }
     41 
     42 .paintAreaCell {
     43     border: 1px solid grey;
     44 }
     45 
     46 
     47 .tools {
     48     grid-column-start: 3;   
     49     grid-row-start: 1;
     50     grid-row-end: 3;
     51 
     52     display: flex;
     53     flex-direction: column;
     54     align-items: center;
     55 }
     56 
     57 .paintCol {
     58     grid-row-start: 2;
     59     grid-column-start: 1;
     60 }
     61 
     62 .palette {
     63     background: fuchsia;
     64     grid-row-start: 2;
     65     grid-column-start: 2;
     66 
     67     width: 100%;
     68     height: 100%;
     69     display: grid;
     70     grid-template-columns: repeat(8, 1fr);
     71     grid-template-rows: 1fr 1fr;
     72 }
     73 
     74 .paletteItem {
     75     border: 1px solid black;
     76 }
     77 
     78 .paletteItem.selected {
     79     border: 1px solid red;
     80 }
     81 
     82 .frameControl {
     83     grid-row-start: 3;
     84     grid-column-start: 1;
     85     grid-column-end: 4;
     86 
     87     display: flex;
     88     flex-flow: row wrap;
     89     max-width: 400px;
     90 }
     91 
     92 .framePreviewWrapper {
     93     padding: 5px;
     94 }
     95 
     96 .animationPreviewWrapper {
     97     padding: 5px;
     98 }
     99 
    100 .framePreviewWrapper.selected { 
    101     border: 2px solid red;
    102 }
    103 
    104 .framePreview { 
    105     display: grid;
    106     grid-template: repeat(16, 1fr) / repeat(16, 1fr);
    107 }
    108 .framePreviewCell {
    109     width: 4px;
    110     height: 4px;
    111 }
    112 
    113 .animationPreview {
    114     width: 64px;
    115     height: 64px;
    116     background-size: 64px 64px;
    117     transform: rotate(180deg) scaleX(-1);
    118 }