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   padding-top:0.5cm;
  44   padding-bottom:0.5cm;
  45   padding-left:0.5cm;
  46   padding-right:0.5cm;
  47 }
  48 .card-front > .separator {
  49   border-top:1px solid #999;
  50   width:100%;
  51 }
  52 .card-matter {
  53   display:flex;
  54   flex-direction:row;
  55   flex-wrap:wrap;
  56   justify-content:center;
  57   align-content:space-around;
  58   column-gap:0.5cm;
  59 }
  60 .card-description {
  61   color:#999;
  62   font-family:monospace;
  63 }
  64 .card-picture {
  65   display:flex;
  66   flex-direction:column;
  67   flex-wrap:nowrap;
  68   justify-content:flex-start;
  69   width:100%;
  70   height:100%;
  71   overflow:hidden;
  72 }
  73 .card-picture img {
  74   display:block;
  75   border:0;
  76   width:100%;
  77   height:100%;
  78   object-fit:contain;
  79   object-position:center center;
  80   overflow:hidden;
  81 }
  82 .part {
  83   display:flex;
  84   flex-direction:row;
  85   flex-wrap:nowrap;
  86   margin:0 0 0 0;
  87   border:5px solid red;
  88 }
  89 .word {
  90   font-family:monospace;
  91   font-variant:small-caps;
  92   font-size:1.5cm;
  93   line-height:1.0;
  94 }
  95 .word .word-field {
  96   display:flex;
  97   flex-direction:row;
  98   justify-content:center;
  99 }
 100 .word .word-parts {
 101 }
 102 .word .word-parts .word-part {
 103 }
 104 .word .word-part.part-odd.word-part-2 {
 105   background:linear-gradient(to right,blue,green);
 106   background-clip:text;
 107   color:transparent;
 108 }
 109 .word .word-part.part-even.word-part-2 {
 110   background:linear-gradient(to right,green,blue);
 111   background-clip:text;
 112   color:transparent;
 113 }
 114
 115 .word .part-even {
 116   color:blue;
 117 }
 118 .word .part-odd {
 119   color:green;
 120 }
 121 .word .word-ipas {
 122   color:#999;
 123   font-size:0.5cm;
 124   font-family:Arial;
 125   font-variant:normal;
 126 }
 127 .word .word-ipas .word-ipa {
 128 }
 129 .word .word-pinyins {
 130   color:#999;
 131   font-size:0.5cm;
 132   font-family:Arial;
 133   font-variant:normal;
 134 }
 135 .word .word-pinyins .word-pinyin {
 136 }