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