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       display: flex;
 107       flex-flow: row wrap;
 108
 109       .stats {
 110         font-size: 0.8em;
 111         margin: 8px 15px 5px;
 112
 113         li {
 114           display: inline-flex;
 115           vertical-align: middle;
 116           margin: 0 5px;
 117         }
 118
 119         a {
 120           color: #000;
 121           text-decoration: none;
 122         }
 123       }
 124
 125       .tags {
 126         float: right;
 127         margin: 5px 15px 10px;
 128       }
 129     }
 130
 131     .chip {
 132       background-color: $blueAccentColor;
 133       padding: 0 15px 0 10px;
 134       margin: auto 2px;
 135
 136       a,
 137       i {
 138         color: #fff;
 139       }
 140
 141       i.material-icons {
 142         float: right;
 143         font-size: 20px;
 144         line-height: 32px;
 145         padding-left: 8px;
 146       }
 147     }
 148   }
 149 }
 150
 151 .reader-mode {
 152   width: 70px !important;
 153   transition: width 0.2s ease;
 154
 155   .collapsible-body {
 156     height: 0;
 157     overflow: hidden;
 158   }
 159
 160   span {
 161     opacity: 0;
 162     transition: opacity 0.2s ease;
 163   }
 164
 165   &:hover {
 166     width: 260px !important;
 167
 168     .collapsible-body {
 169       height: auto;
 170
 171       li a i.material-icons {
 172         margin: auto 5px auto 0;
 173       }
 174     }
 175
 176     span {
 177       opacity: 1;
 178     }
 179   }
 180 }
 181
 182 .progress {
 183   position: fixed;
 184   top: 0;
 185   width: 100%;
 186   height: 3px;
 187   margin: 0;
 188   z-index: 9999;
 189 }