data/styles/Rosetta/Common.css

   1 .lang-LangueMandarin.sentence {
   2   /* FIXME: should derive from Difficulties */
   3   column-gap:0 !important;
   4 }
   5 .sentence {
   6 }
   7 .sentence-horiz {
   8   display:flex;
   9   flex-direction:row;
  10   flex-wrap:nowrap;
  11   margin:0 0 0 0;
  12   align-self:flex-start;
  13 }
  14 .sentence-word {
  15   margin:0 0 0 0;
  16   display:grid;
  17   //gap:1px;
  18   /* ExplanationNote: avoid rounded borders to be cropped by background-color: */
  19   overflow: hidden;
  20   /*
  21   border-top-left-radius:3mm;
  22   border-top-right-radius:3mm;
  23   */
  24 }
  25 .sentence-word:last-child {
  26   margin-right:0;
  27 }
  28 .sentence-cell {
  29   display:grid;
  30   background-color:white;
  31   font-family:monospace;
  32   font-variant:small-caps;
  33   justify-self:center;
  34   margin-left:0;
  35   margin-right:0;
  36   padding-left:0;
  37   padding-right:0;
  38   align-content:center;
  39   justify-content:center;
  40   position:relative;
  41   white-space:preserve-spaces;
  42   width:100%
  43 }
  44 .sentence-cell.pronunciation {
  45   font-variant:normal;
  46   font-weight:bold;
  47   font-family:Arial;
  48   font-size:0.35cm;
  49   height:0.45cm;
  50 }
  51 .sentence-cell.input {
  52   color:#ddd;
  53   //border:1px solid #aaa;
  54 }
  55 .sentence-cell.input.break .cell {
  56   border-left:0 !important;
  57   border-top:0 !important;
  58   border-bottom:0 !important;
  59   border-right:0 !important;
  60 }
  61 .sentence-word.word-index-0 .sentence-cell.input.input-index-1 .cell {
  62   border-left:1px solid #aaa;
  63 }
  64 .sentence-word .sentence-cell.input .cell
  65 {
  66   border-top:1px solid #aaa;
  67   border-bottom:1px solid #aaa;
  68   border-right:1px solid #aaa;
  69   //border-left:1px solid #aaa;
  70   position:absolute;
  71   left:0;
  72   right:0;
  73   bottom:0;
  74   top:0;
  75 }
  76 .sentence-cell.input.script-UnicodeBlockCJK-UnicodeBlockCJK-Unified-Ideographs .cell {
  77   border:0 !important;
  78   position:relative !important;
  79 }
  80 /* Compress a bit the height
  81  */
  82 .sentence-cell.model.script-UnicodeBlockLatin-UnicodeBlockLatin-Basic,
  83 .sentence-cell.model.script-UnicodeBlockLatin-UnicodeBlockLatin-ExtendedA,
  84 .sentence-cell.model.script-UnicodeBlockLatin-UnicodeBlockLatin1-Supplement,
  85 .sentence-cell.model.script-UnicodeBlockMiscellaneous-Technical {
  86   //height:6mm;
  87 }
  88 .sentence-cell.input.script-UnicodeBlockLatin-UnicodeBlockLatin-Basic {
  89   //border-bottom:1px solid #aaa;
  90   //border-top:1px solid #aaa;
  91 }
  92 .sentence-cell.input.hidden {
  93   color:transparent;
  94 }
  95 .sentence-cell.break {
  96   width:3mm;
  97 }
  98 .sentence-cell.model.break {
  99   color:#ddd;
 100 }
 101 .sentence-cell {
 102   --pronunciation-even:#ffaa5770;
 103   --pronunciation-odd:#82c1ff70;
 104   --pronunciation-border-size:3px;
 105   --pronunciation-silent:transparent;
 106 }
 107 .lang-LangueFrançais .sentence-cell {
 108   --pronunciation-odd:darkblue;
 109   --pronunciation-even:lightblue;
 110   //--pronunciation-odd:#82c1ff70;
 111   //--pronunciation-even:#0055A470;
 112   //--pronunciation-odd:#c8e4ff;
 113   //--pronunciation-even:#8fb4d7;
 114 }
 115 .lang-LangueAnglais .sentence-cell {
 116   --pronunciation-odd:darkgreen;
 117   --pronunciation-even:lightgreen;
 118   //--pronunciation-odd:#a9ed8f;
 119   //--pronunciation-even:#76c69e;
 120   //--pronunciation-odd:#3dd70070;
 121   //--pronunciation-even:#40846270;
 122 }
 123 .lang-LangueMandarin .sentence-cell {
 124   --pronunciation-odd:darkred;
 125   --pronunciation-even:#FF7276;
 126   //--pronunciation-odd:#ff8f8f;
 127   //--pronunciation-even:#e3b68f;
 128   //--pronunciation-odd:#ff000070;
 129   //--pronunciation-even:#bf5a0070;
 130 }
 131
 132 /* .cell-even */
 133
 134 .sentence-cell.pronunciation.cell-even {
 135   border-bottom:var(--pronunciation-border-size) solid var(--pronunciation-even);
 136   color:var(--pronunciation-even);
 137 }
 138 .sentence-cell.pronunciation.cell-even.cell-split {
 139   background:linear-gradient(to right,var(--pronunciation-even),var(--pronunciation-odd));
 140   background-clip:text;
 141   color:transparent;
 142   border-image-source:linear-gradient(to right,var(--pronunciation-even),var(--pronunciation-odd));
 143   border-image-slice:1;
 144 }
 145 .sentence-cell.pronunciation.cell-even.cell-depends-on-before:before {
 146   position:absolute;
 147   display:block;
 148   content:'';
 149   border-left:var(--pronunciation-border-size) solid var(--pronunciation-even);
 150   bottom:0;
 151   height:4px;
 152   width:var(--pronunciation-border-size);
 153   box-sizing:border-box;
 154 }
 155 .sentence-cell.pronunciation.cell-even.cell-depends-on-after:after {
 156   position:absolute;
 157   display:block;
 158   content:'';
 159   border-right:var(--pronunciation-border-size) solid var(--pronunciation-even);
 160   height:4px;
 161   bottom:0;
 162   right:0;
 163   width:var(--pronunciation-border-size);
 164   box-sizing:border-box;
 165 }
 166 .sentence-cell.pronunciation.cell-even.cell-depends-on-meaning:before {
 167   position:absolute;
 168   display:block;
 169   content:'';
 170   bottom:0;
 171   height:4px;
 172   width:var(--pronunciation-border-size);
 173   box-sizing:border-box;
 174   width:100%;
 175   border-bottom:var(--pronunciation-border-size) dotted var(--pronunciation-even);
 176 }
 177
 178 /* .cell-odd */
 179
 180 .sentence-cell.pronunciation.cell-odd {
 181   border-bottom:var(--pronunciation-border-size) solid var(--pronunciation-odd);
 182   color:var(--pronunciation-odd);
 183 }
 184 .sentence-cell.pronunciation.cell-odd.cell-split {
 185   background:linear-gradient(to right,var(--pronunciation-odd),var(--pronunciation-even));
 186   background-clip:text;
 187   color:transparent;
 188   border-image-source:linear-gradient(to right,var(--pronunciation-odd),var(--pronunciation-even));
 189   border-image-slice:1;
 190 }
 191 .sentence-cell.pronunciation.cell-odd.cell-depends-on-before:before {
 192   position:absolute;
 193   display:block;
 194   content:'';
 195   border-left:var(--pronunciation-border-size) solid var(--pronunciation-odd);
 196   bottom:0;
 197   height:4px;
 198   box-sizing:border-box;
 199 }
 200 .sentence-cell.pronunciation.cell-odd.cell-depends-on-after:after {
 201   position:absolute;
 202   display:block;
 203   content:'';
 204   right:0;
 205   bottom:0;
 206   border-right:var(--pronunciation-border-size) solid var(--pronunciation-odd);
 207   height:4px;
 208   box-sizing:border-box;
 209 }
 210 .sentence-cell.pronunciation.cell-odd.cell-depends-on-meaning:after {
 211   position:absolute;
 212   display:block;
 213   content:'';
 214   right:0;
 215   bottom:0;
 216   height:4px;
 217   box-sizing:border-box;
 218   width:100%;
 219   border-bottom:var(--pronunciation-border-size) dotted var(--pronunciation-odd);
 220 }
 221
 222 /* .cell-silent */
 223
 224 .sentence-cell.pronunciation.cell-silent {
 225   border-bottom:var(--pronunciation-border-size) solid var(--pronunciation-silent);
 226   color:var(--pronunciation-silent);
 227 }
 228 .sentence-cell.pronunciation.cell-silent.cell-depends-on-before:before {
 229   position:absolute;
 230   display:block;
 231   content:'';
 232   border-left:var(--pronunciation-border-size) solid var(--pronunciation-silent);
 233   bottom:0;
 234   height:4px;
 235   box-sizing:border-box;
 236 }
 237 .sentence-cell.pronunciation.cell-silent.cell-depends-on-after:after {
 238   position:absolute;
 239   display:block;
 240   content:'';
 241   right:0;
 242   bottom:0;
 243   border-right:var(--pronunciation-border-size) solid var(--pronunciation-silent);
 244   height:4px;
 245   box-sizing:border-box;
 246 }