data/styles/Rosetta/Reading.css

   1 .sub-page {
   2   //margin:2mm !important;
   3 }
   4 .main-page {
   5   //background-color:white !important;
   6 }
   7 .rosetta-reading {
   8   margin:0mm;
   9   /* ExplanationNote: even when printing with the option "Shrink to Print Area"
  10    * pixels too close to the border can get cropped.
  11    */
  12   padding:1mm;
  13   display:grid;
  14   ////column-gap:1mm;
  15   //row-gap:1mm;
  16   justify-content:space-evenly;
  17   //align-items:space-between;
  18   align-content:space-around;
  19 }
  20 .cards {
  21   border:1px solid #aaa;
  22   display:grid;
  23   gap:1px;
  24   align-content:center;
  25   background-color:#aaa;
  26   justify-content:center;
  27 }
  28 .cards.cards-front {
  29   background-color:transparent;
  30   border:1px solid transparent;
  31 }
  32 .card {
  33   display:grid;
  34   background-color:white;
  35   //border:5px solid green;
  36   justify-items:center;
  37   align-items:center;
  38 }
  39 .card-front {
  40   display:flex;
  41   flex-direction:column;
  42   justify-content:space-between;
  43   /* ExplanationNote: enough to fit two lines of french,
  44    * two lines of english
  45    * and two lines of chinese (with a bigger font to manually write over it).
  46    */
  47   padding-top:3mm;
  48   padding-bottom:3mm;
  49   padding-left:1mm;
  50   padding-right:1mm;
  51 }
  52 .card-front-french-english-mandarin {
  53   display:grid;
  54   grid-template-rows:2cm 2cm 4.2cm;
  55   align-items:start;
  56   justify-items:center;
  57 }
  58 .card-front > .separator {
  59   border-top:1px solid #999;
  60   width:100%;
  61 }
  62 .card-matter {
  63   display:flex;
  64   flex-direction:row;
  65   flex-wrap:wrap;
  66   justify-content:center;
  67   align-content:space-around;
  68   column-gap:0.5cm;
  69 }
  70 .card-description {
  71   color:#999;
  72   font-family:monospace;
  73 }
  74 .card-picture {
  75   display:flex;
  76   flex-direction:column;
  77   flex-wrap:nowrap;
  78   justify-content:flex-start;
  79   width:100%;
  80   height:100%;
  81   overflow:hidden;
  82 }
  83 .card-picture img {
  84   display:block;
  85   border:0;
  86   width:100%;
  87   height:100%;
  88   object-fit:contain;
  89   object-position:center center;
  90   overflow:hidden;
  91 }
  92 .part {
  93   display:flex;
  94   flex-direction:row;
  95   flex-wrap:nowrap;
  96   margin:0 0 0 0;
  97   border:5px solid red;
  98 }
  99 .word {
 100   font-family:monospace;
 101   font-variant:small-caps;
 102   font-size:1.5cm;
 103   line-height:1.0;
 104 }
 105 .word .word-field {
 106   display:flex;
 107   flex-direction:row;
 108   justify-content:center;
 109 }
 110 .word .word-parts {
 111 }
 112 .word .word-parts .word-part {
 113 }
 114 .word .word-part.part-odd.word-part-2 {
 115   background:linear-gradient(to right,blue,green);
 116   background-clip:text;
 117   color:transparent;
 118 }
 119 .word .word-part.part-even.word-part-2 {
 120   background:linear-gradient(to right,green,blue);
 121   background-clip:text;
 122   color:transparent;
 123 }
 124
 125 .word .part-even {
 126   color:blue;
 127 }
 128 .word .part-odd {
 129   color:green;
 130 }
 131 .word .word-ipas {
 132   color:#999;
 133   font-size:0.5cm;
 134   font-family:Arial;
 135   font-variant:normal;
 136 }
 137 .word .word-ipas .word-ipa {
 138 }
 139 .word .word-pinyins {
 140   color:#999;
 141   font-size:0.5cm;
 142   font-family:Arial;
 143   font-variant:normal;
 144 }
 145 .word .word-pinyins .word-pinyin {
 146 }