data/styles/rosetta.css

   1 body {
   2   line-height:1.4;
   3   margin-top:0;
   4   margin-left:0;
   5   margin-right:0;
   6   //width:650px;
   7   width:100%;
   8   display: grid;
   9   grid-template-columns:1 / -1;
  10   justify-items: center;
  11   justify-content:center;
  12 }
  13
  14 .rosetta {
  15   margin-top:1ex;
  16   margin-bottom:1ex;
  17   margin-left:1ex;
  18   margin-right:1ex;
  19   display:grid;
  20   justify-content:space-evenly;
  21   align-items:flex-start;
  22   align-content:space-around;
  23 }
  24 .rosetta-row {
  25   display: grid;
  26   grid-template-columns:6cm 11cm;
  27   break-inside:avoid;
  28   box-shadow:0 0 0 1px #AAA;
  29 }
  30 .rosetta-word:last-child {
  31   margin-bottom:0;
  32   margin-right:0;
  33 }
  34 .rosetta-cell {
  35 }
  36 .rosetta-cell-picture {
  37   display:flex;
  38   flex-direction:column;
  39   flex-wrap:nowrap;
  40   justify-content:flex-start;
  41   width:fit-content;
  42 }
  43 .rosetta-cell-picture img {
  44   display:block;
  45   border:0;
  46   place-content:center;
  47   vertical-align:center;
  48   width: 100%;
  49   object-fit: contain;
  50   object-position: center center;
  51 }
  52 .rosetta-cell-picture .rosetta-cell-picture-description {
  53   margin-left:0.2cm;
  54   margin-right:0.2cm;
  55   font-family:monospace;
  56   font-variant:small-caps;
  57   font-size:14pt;
  58 }
  59
  60 .rosetta-cell.rosetta-cell-words {
  61   padding-left:0.5cm;
  62 }
  63
  64 .writing-words {
  65   margin-top:1ex;
  66   margin-bottom:1ex;
  67   margin-left:1ex;
  68   margin-right:1ex;
  69   display:flex;
  70   flex-direction:row;
  71   flex-wrap:wrap;
  72   justify-content:flex-start;
  73   align-items:flex-start;
  74   align-content:space-around;
  75 }
  76 .writing-words-word {
  77   margin-left: 0;
  78   margin-right: 1cm;
  79   margin-bottom: 1ex;
  80   margin-top: 1ex;
  81 }
  82 .writing-words-row.writing-words-LangueMandarin .writing-words-word {
  83   margin-left: 0;
  84   margin-right: 1cm;
  85 }
  86 .writing-words-row {
  87   white-space:preserve-spaces;
  88   //width:100%;
  89   font-family: monospace;
  90   font-variant: small-caps;
  91   display: grid;
  92   gap: 0px;
  93   //justify-items: center;
  94   justify-self: center;
  95   //background-color:grey;
  96   place-content: center;
  97 }
  98 .writing-words-cell {
  99   display: grid;
 100   place-content: center;
 101   position: relative;
 102   box-shadow:0 0 0 1px #AAA;
 103   background-color:white;
 104   min-height:1cm;
 105   font-size: 20pt;
 106   padding-left:0;
 107   padding-right:0;
 108   margin-left:0;
 109   margin-right:0;
 110 }
 111 .writing-words-cell-space {
 112   box-shadow:0 0 0 0 red !important;
 113   border-left:1px solid #AAA;
 114 }
 115
 116 .writing-words-row.writing-words-row-input {
 117   color:#ddd;
 118 }
 119 .writing-words-row.writing-words-LangueMandarin .writing-words-cell {
 120   font-size:30pt;
 121 }
 122 .writing-words-row.writing-words-LangueMandarinPinyin .writing-words-cell {
 123   color:black;
 124   font-size:12pt;
 125   font-variant:normal;
 126 }
 127
 128 .landscape {
 129   .rosetta-row {
 130     grid-template-columns: 10cm 19.7cm;
 131   }
 132 }