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
 102 /* .cell-even */
 103
 104 .sentence-cell.pronunciation.cell-even {
 105   border-bottom:3px solid #ff7f00a8;
 106   color:#ff7f00a8;
 107 }
 108 .sentence-cell.pronunciation.cell-even.cell-depends-on-before:before {
 109   position:absolute;
 110   display:block;
 111   content:'';
 112   border-left:3px solid #ff7f00a8;
 113   bottom:0;
 114   height:4px;
 115   width:3px;
 116   box-sizing:border-box;
 117 }
 118 .sentence-cell.pronunciation.cell-even.cell-depends-on-after:after {
 119   position:absolute;
 120   display:block;
 121   content:'';
 122   border-right:3px solid #ff7f00a8;
 123   height:4px;
 124   bottom:0;
 125   right:0;
 126   width:3px;
 127   box-sizing:border-box;
 128 }
 129 .sentence-cell.pronunciation.cell-even.cell-depends-on-meaning:before {
 130   width:100%;
 131   border-bottom:3px dotted #ff7f00a8;
 132 }
 133
 134 /* .cell-odd */
 135
 136 .sentence-cell.pronunciation.cell-odd {
 137   border-bottom:3px solid #0080ff7d;
 138   color:#0080ff7d;
 139 }
 140 .sentence-cell.pronunciation.cell-odd.cell-depends-on-before:before {
 141   position:absolute;
 142   display:block;
 143   content:'';
 144   border-left:3px solid #0080ff7d;
 145   bottom:0;
 146   height:4px;
 147   box-sizing:border-box;
 148 }
 149 .sentence-cell.pronunciation.cell-odd.cell-depends-on-after:after {
 150   position:absolute;
 151   display:block;
 152   content:'';
 153   right:0;
 154   bottom:0;
 155   border-right:3px solid #0080ff7d;
 156   height:4px;
 157   box-sizing:border-box;
 158 }
 159 .sentence-cell.pronunciation.cell-odd.cell-depends-on-meaning:after {
 160   width:100%;
 161   border-bottom:3px dotted #0080ff7d;
 162 }
 163
 164 /* .cell-silent */
 165
 166 .sentence-cell.pronunciation.cell-silent {
 167   border-bottom:3px solid #dddddd7d;
 168   color:#dddddd7d;
 169 }
 170 .sentence-cell.pronunciation.cell-silent.cell-depends-on-before:before {
 171   position:absolute;
 172   display:block;
 173   content:'';
 174   border-left:3px solid #dddddd7d;
 175   bottom:0;
 176   height:4px;
 177   box-sizing:border-box;
 178 }
 179 .sentence-cell.pronunciation.cell-silent.cell-depends-on-after:after {
 180   position:absolute;
 181   display:block;
 182   content:'';
 183   right:0;
 184   bottom:0;
 185   border-right:3px solid #dddddd7d;
 186   height:4px;
 187   box-sizing:border-box;
 188 }