app/Resources/static/themes/material/css/article.scss

   1 /* ==========================================================================
   2    Article
   3    ========================================================================== */
   4
   5 #article {
   6   font-size: 20px;
   7   margin: 0 auto;
   8   max-width: 45em;
   9
  10   article {
  11     color: #424242;
  12     font-size: 18px;
  13     line-height: 1.7em;
  14
  15     h1,
  16     h2,
  17     h3,
  18     h4,
  19     h5,
  20     h6 {
  21       color: #212121;
  22
  23       strong {
  24         font-weight: 500;
  25       }
  26     }
  27
  28     h6 {
  29       font-size: 1.2rem;
  30     }
  31
  32     h5 {
  33       font-size: 1.6rem;
  34     }
  35
  36     h4 {
  37       font-size: 1.9rem;
  38     }
  39
  40     h3 {
  41       font-size: 2.2rem;
  42     }
  43
  44     h2 {
  45       font-size: 2.5rem;
  46     }
  47
  48     h1 {
  49       font-size: 2.7rem;
  50     }
  51
  52     a {
  53       border-bottom: 1px dotted #03a9f4;
  54       text-decoration: none;
  55     }
  56
  57     a:hover {
  58       border-bottom-style: solid;
  59     }
  60
  61     ul {
  62       padding-left: 30px;
  63     }
  64
  65     ul,
  66     ul li {
  67       list-style-type: disc;
  68     }
  69
  70     blockquote {
  71       font-style: italic;
  72     }
  73
  74     strong {
  75       font-weight: bold;
  76     }
  77   }
  78
  79   img,
  80   figure {
  81     max-width: 100%;
  82     height: auto;
  83   }
  84
  85   pre {
  86     box-sizing: border-box;
  87     margin: 0 0 1.75em;
  88     border: #e3f2fd 1px solid;
  89     width: 100%;
  90     padding: 10px;
  91     font-family: monospace;
  92     font-size: 0.8em;
  93     white-space: pre;
  94     overflow: auto;
  95     background: #f5f5f5;
  96     border-radius: 3px;
  97   }
  98
  99   > header > h1 {
 100     font-size: 2em;
 101     margin: 2.1rem 0 0.68rem;
 102   }
 103
 104   aside {
 105     .tools {
 106       font-size: 0.8em;
 107       display: flex;
 108       flex-flow: row wrap;
 109       margin: 0 auto;
 110
 111       li {
 112         display: inline-flex;
 113         vertical-align: middle;
 114       }
 115
 116       a {
 117         color: #000;
 118         text-decoration: none;
 119       }
 120     }
 121
 122     #list {
 123       float: right;
 124       margin: 0 15px 10px;
 125     }
 126
 127     .chip {
 128       background-color: $blueAccentColor;
 129       padding: 0 15px 0 10px;
 130       margin: auto 2px;
 131
 132       a,
 133       i {
 134         color: #fff;
 135       }
 136     }
 137   }
 138 }
 139
 140 .reader-mode {
 141   width: 95px !important;
 142   transition: width 0.2s ease;
 143
 144   .collapsible-body {
 145     height: 0;
 146     overflow: hidden;
 147   }
 148
 149   span {
 150     opacity: 0;
 151     transition: opacity 0.2s ease;
 152   }
 153 }
 154
 155 .reader-mode:hover {
 156   width: 240px !important;
 157
 158   .collapsible-body {
 159     height: auto;
 160   }
 161
 162   span {
 163     opacity: 1;
 164   }
 165 }
 166
 167 .progress {
 168   position: fixed;
 169   top: 0;
 170   width: 100%;
 171   height: 3px;
 172   margin: 0;
 173   z-index: 9999;
 174 }