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

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