data/styles/rosetta.css

   1 body {
   2   background:rgb(204,204,204);
   3   display:grid;
   4   font-size:12pt;
   5   grid-template-columns:1 / -1;
   6   height:100%;
   7   justify-content:center;
   8   justify-items:center;
   9   line-height:1.4;
  10   margin:0 auto;
  11   padding:0;
  12   width:300mm;
  13 }
  14 * {
  15   box-sizing:border-box;
  16   -moz-box-sizing:border-box;
  17 }
  18 .main-page {
  19   margin:10mm auto;
  20   background-color:white;
  21   box-shadow:0 0 0.5cm rgba(0,0,0,0.5);
  22 }
  23 .sub-page {
  24   padding:1cm;
  25 }
  26 .page-PageSizeA4-PageOrientationPortrait {
  27   height:297mm;
  28   width:210mm;
  29 }
  30 .page-PageSizeA4-PageOrientationLandscape {
  31   height:210mm;
  32   width:297mm;
  33 }
  34 @page {
  35   margin:0;
  36 }
  37 @media print {
  38   .main-page {
  39     padding:0;
  40     margin:0;
  41     border:initial;
  42     border-radius:initial;
  43     width:initial;
  44     min-height:initial;
  45     box-shadow:initial;
  46     background:white;
  47     page-break-after:always;
  48   }
  49 }
  50
  51 .rosetta {
  52   margin:0mm;
  53   /* ExplanationNote: even when printing with the option "Shrink to Print Area"
  54    * pixels too close to the border can get cropped.
  55    */
  56   padding:1.5mm;
  57   display:grid;
  58   column-gap:5mm;
  59   row-gap:1mm;
  60   justify-content:space-evenly;
  61   align-items:flex-start;
  62   align-content:space-around;
  63 }
  64 .rosetta-cell {
  65   /* ExplanationNote: by default, a grid item cannot be smaller than the size of its content.
  66    * Change that.
  67    */
  68   min-height:0;
  69   min-width:0;
  70   overflow:hidden;
  71 }
  72 .rosetta-cell-picture {
  73   display:flex;
  74   flex-direction:column;
  75   flex-wrap:nowrap;
  76   justify-content:flex-start;
  77   width:100%;
  78   height:100%;
  79 }
  80 .rosetta-cell-picture img {
  81   display:block;
  82   border:0;
  83   width:100%;
  84   object-position:right center;
  85   overflow:hidden;
  86 }
  87 .rosetta-cell-picture .rosetta-cell-picture-description {
  88   margin-left:0.2cm;
  89   margin-right:0.2cm;
  90   font-family:monospace;
  91   font-variant:small-caps;
  92   font-size:14pt;
  93 }
  94
  95 .rosetta-cell.writing-words {
  96   height:100%;
  97 }
  98 .writing-words {
  99   margin-top:0;
 100   margin-bottom:0;
 101   margin-left:0;
 102   margin-right:0;
 103   display:flex;
 104   flex-direction:row;
 105   flex-wrap:wrap;
 106   justify-content:flex-start;
 107   align-items:flex-end;
 108   align-content:flex-start;
 109   row-gap:1mm;
 110 }
 111 .writing-words-horiz {
 112   display:flex;
 113   flex-direction:row;
 114   flex-wrap:nowrap;
 115   margin:0 0 0 0;
 116 }
 117 .writing-words-word {
 118   margin:0 0 0 0;
 119   display:grid;
 120   gap:1px;
 121   background-color:#aaa;
 122   overflow: hidden; /* ExplanationNote: avoid rounded borders to be cropped by background-color: */
 123   border:1px solid #aaa;
 124   border-top-left-radius:3mm;
 125   border-top-right-radius:3mm;
 126 }
 127 .writing-words-word:last-child {
 128   margin-right:0;
 129 }
 130 .writing-words-cell {
 131   display:grid;
 132   background-color:white;
 133   font-family:monospace;
 134   font-variant:small-caps;
 135   justify-self:center;
 136   margin-left:0;
 137   margin-right:0;
 138   padding-left:0;
 139   padding-right:0;
 140   align-content:center;
 141   justify-content:center;
 142   position:relative;
 143   white-space:preserve-spaces;
 144   width:100%
 145 }
 146 .writing-words-cell.pronunciation {
 147   font-variant:normal;
 148   font-size:0.4cm;
 149   height:0.5cm;
 150   color:#888;
 151 }
 152 .writing-words-cell.input {
 153   color:#ccc;
 154 }
 155 .writing-words-cell.input.hidden {
 156   color:transparent;
 157 }