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