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.8em;
 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           }
 126         }
 127
 128         a {
 129           color: #000;
 130           text-decoration: none;
 131         }
 132       }
 133
 134       .tags {
 135         float: right;
 136         margin: 5px 15px 10px;
 137       }
 138     }
 139
 140     .chip {
 141       background-color: $blueAccentColor;
 142       padding: 0 15px 0 10px;
 143       margin: auto 2px;
 144       border-radius: 6px;
 145
 146       a,
 147       i {
 148         color: #fff;
 149       }
 150
 151       i.material-icons {
 152         float: right;
 153         font-size: 20px;
 154         line-height: 32px;
 155         padding-left: 8px;
 156       }
 157     }
 158   }
 159 }
 160
 161 .reader-mode {
 162   width: 70px !important;
 163   transition: width 0.2s ease;
 164
 165   .collapsible-body {
 166     height: 0;
 167     overflow: hidden;
 168   }
 169
 170   span {
 171     opacity: 0;
 172     transition: opacity 0.2s ease;
 173   }
 174
 175   &:hover {
 176     width: 260px !important;
 177
 178     span {
 179       opacity: 1;
 180     }
 181   }
 182
 183   .collapsible-body {
 184     height: auto;
 185
 186     li a i.material-icons {
 187       margin: auto 5px auto -8px;
 188     }
 189   }
 190 }
 191
 192 .progress {
 193   position: fixed;
 194   top: 0;
 195   width: 100%;
 196   height: 3px;
 197   margin: 0;
 198   z-index: 9999;
 199 }