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