app.scss 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524
  1. /* THEME SPECIFIC STYLES */
  2. .contents {
  3. color: mc('grey', '800');
  4. padding-bottom: 50px;
  5. position: relative;
  6. @at-root .theme--dark & {
  7. color: mc('grey', '300');
  8. a {
  9. color: mc('blue', '300');
  10. }
  11. }
  12. // ---------------------------------
  13. // HEADERS
  14. // ---------------------------------
  15. h1, h2, h3, h4, h5, h6 {
  16. position: relative;
  17. &:hover {
  18. .toc-anchor {
  19. display: block;
  20. }
  21. }
  22. .toc-anchor {
  23. display: none;
  24. position: absolute;
  25. right: 1rem;
  26. bottom: .5rem;
  27. font-size: 1.25rem;
  28. text-decoration: none;
  29. color: mc('grey', '500');
  30. }
  31. }
  32. h1 {
  33. padding-left: 24px;
  34. color: mc('blue', '800');
  35. margin-top: 2rem;
  36. position: relative;
  37. @at-root .theme--dark & {
  38. color: mc('grey', '400');
  39. }
  40. &::after {
  41. content: '';
  42. position: absolute;
  43. bottom: 0;
  44. left: 0;
  45. width: 100%;
  46. height: 2px;
  47. background: linear-gradient(to right, mc('theme', 'primary'), rgba(mc('theme', 'primary'), 0));
  48. @at-root .theme--dark & {
  49. background: linear-gradient(to right, mc('grey', '600'), rgba(mc('grey', '600'), 0));
  50. }
  51. }
  52. & + h2, & + h3 {
  53. margin-top: 8px;
  54. }
  55. }
  56. h2 {
  57. margin-left: 24px;
  58. padding: 8px 0 0 0;
  59. color: mc('grey', '800');
  60. position: relative;
  61. margin-top: 1rem;
  62. @at-root .theme--dark & {
  63. color: mc('grey', '500');
  64. }
  65. &::after {
  66. content: '';
  67. position: absolute;
  68. bottom: 0;
  69. left: 0;
  70. width: 100%;
  71. height: 1px;
  72. background: linear-gradient(to right, mc('grey', '700'), rgba(mc('grey', '700'), 0));
  73. @at-root .theme--dark & {
  74. background: linear-gradient(to right, mc('grey', '300'), rgba(mc('grey', '700'), 0));
  75. }
  76. }
  77. & + h3 {
  78. margin-top: 8px;
  79. }
  80. }
  81. h3 {
  82. margin-left: 24px;
  83. padding: 8px 0 0 0;
  84. color: mc('grey', '700');
  85. position: relative;
  86. @at-root .theme--dark & {
  87. color: mc('grey', '600');
  88. }
  89. &::after {
  90. content: '';
  91. position: absolute;
  92. bottom: 0;
  93. left: 0;
  94. width: 100%;
  95. height: 1px;
  96. background: linear-gradient(to right, mc('grey', '500'), rgba(mc('grey', '500'), 0));
  97. }
  98. }
  99. // ---------------------------------
  100. // PARAGRAPHS
  101. // ---------------------------------
  102. p {
  103. padding: 1rem 24px 0 24px;
  104. margin: 0;
  105. text-align: justify;
  106. }
  107. hr {
  108. margin: 1rem;
  109. height: 1px;
  110. border: none;
  111. background-color: mc('grey', '400');
  112. @at-root .theme--dark & {
  113. background-color: mc('grey', '700');
  114. }
  115. }
  116. .emoji {
  117. height: 1.25em;
  118. margin: 0 1px -4px;
  119. }
  120. blockquote {
  121. padding: 0 0 1rem 0;
  122. border: 1px solid mc('blue', '500');
  123. border-radius: .5rem;
  124. margin: 1rem;
  125. > p:first-child .emoji {
  126. margin-right: .5rem;
  127. }
  128. &.valign-center > p {
  129. display: flex;
  130. align-items: center;
  131. }
  132. &.is-info {
  133. background-color: mc('blue', '50');
  134. background-image: radial-gradient(ellipse at top, mc('blue', '50'), lighten(mc('blue', '50'), 5%));
  135. border-color: mc('blue', '100');
  136. box-shadow: 0 0 2px 0 mc('blue', '100');
  137. code {
  138. background-color: mc('blue', '50');
  139. color: mc('blue', '800');
  140. }
  141. @at-root .theme--dark & {
  142. background-color: mc('blue', '900');
  143. background-image: radial-gradient(ellipse at top, mc('blue', '900'), darken(mc('blue', '900'), 5%));
  144. border-color: mc('blue', '500');
  145. box-shadow: 0 0 2px 0 mc('grey', '900');
  146. }
  147. }
  148. &.is-warning {
  149. background-color: mc('orange', '50');
  150. background-image: radial-gradient(ellipse at top, mc('orange', '50'), lighten(mc('orange', '50'), 5%));
  151. border-color: mc('orange', '100');
  152. box-shadow: 0 0 2px 0 mc('orange', '100');
  153. code {
  154. background-color: mc('orange', '50');
  155. color: mc('orange', '800');
  156. }
  157. @at-root .theme--dark & {
  158. background-color: mc('orange', '900');
  159. background-image: radial-gradient(ellipse at top, mc('orange', '900'), darken(mc('orange', '900'), 5%));
  160. border-color: mc('orange', '500');
  161. box-shadow: 0 0 2px 0 mc('grey', '900');
  162. }
  163. }
  164. &.is-danger {
  165. background-color: mc('red', '50');
  166. background-image: radial-gradient(ellipse at top, mc('red', '50'), lighten(mc('red', '50'), 5%));
  167. border-color: mc('red', '100');
  168. box-shadow: 0 0 2px 0 mc('red', '100');
  169. code {
  170. background-color: mc('red', '50');
  171. color: mc('red', '800');
  172. }
  173. @at-root .theme--dark & {
  174. background-color: mc('red', '900');
  175. background-image: radial-gradient(ellipse at top, mc('red', '900'), darken(mc('red', '900'), 5%));
  176. border-color: mc('red', '500');
  177. box-shadow: 0 0 2px 0 mc('grey', '900');
  178. }
  179. }
  180. &.is-success {
  181. background-color: mc('green', '50');
  182. background-image: radial-gradient(ellipse at top, mc('green', '50'), lighten(mc('green', '50'), 5%));
  183. border-color: mc('green', '100');
  184. box-shadow: 0 0 2px 0 mc('green', '100');
  185. code {
  186. background-color: mc('green', '50');
  187. color: mc('green', '800');
  188. }
  189. @at-root .theme--dark & {
  190. background-color: mc('green', '900');
  191. background-image: radial-gradient(ellipse at top, mc('green', '900'), darken(mc('green', '900'), 5%));
  192. border-color: mc('green', '500');
  193. box-shadow: 0 0 2px 0 mc('grey', '900');
  194. }
  195. }
  196. }
  197. // ---------------------------------
  198. // LISTS
  199. // ---------------------------------
  200. ol, ul {
  201. padding: 1rem 24px 0 24px;
  202. list-style-position: inside;
  203. li + li {
  204. margin-top: .5rem;
  205. }
  206. &.links-list {
  207. li {
  208. background-color: mc('grey', '50');
  209. background-image: linear-gradient(to bottom, #FFF, mc('grey', '50'));
  210. border-right: 1px solid mc('grey', '200');
  211. border-bottom: 1px solid mc('grey', '200');
  212. border-left: 5px solid mc('grey', '300');
  213. box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
  214. padding: 1rem;
  215. border-radius: 5px;
  216. font-weight: 500;
  217. &:hover {
  218. background-image: linear-gradient(to bottom, #FFF, lighten(mc('blue', '50'), 4%));
  219. border-left-color: mc('blue', '500');
  220. cursor: pointer;
  221. }
  222. &::before {
  223. content: '';
  224. display: none;
  225. }
  226. > a {
  227. display: block;
  228. text-decoration: none;
  229. margin: -1rem;
  230. padding: 1rem;
  231. > em {
  232. font-weight: 400;
  233. font-style: normal;
  234. color: mc('grey', '700');
  235. display: inline-block;
  236. padding-left: .5rem;
  237. border-left: 1px solid mc('grey', '300');
  238. margin-left: .5rem;
  239. &.is-block {
  240. display: block;
  241. padding-left: 0;
  242. margin-left: 0;
  243. border-left: none;
  244. }
  245. }
  246. }
  247. > em {
  248. font-weight: 400;
  249. font-style: normal;
  250. }
  251. @at-root .theme--dark & {
  252. background-color: mc('grey', '50');
  253. background-image: linear-gradient(to bottom, lighten(mc('grey', '900'), 5%), mc('grey', '900'));
  254. border-right: 1px solid mc('grey', '900');
  255. border-bottom: 1px solid mc('grey', '900');
  256. border-left: 5px solid mc('grey', '700');
  257. box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
  258. &:hover {
  259. background-image: linear-gradient(to bottom, lighten(mc('grey', '900'), 2%), darken(mc('grey', '900'), 3%));
  260. border-left-color: mc('blue', '500');
  261. cursor: pointer;
  262. }
  263. }
  264. }
  265. }
  266. &.grid-list {
  267. margin: 1rem 24px 0 24px;
  268. background-color: #FFF;
  269. border: 1px solid mc('grey', '200');
  270. padding: 1px;
  271. display: inline-block;
  272. @at-root .theme--dark & {
  273. background-color: #000;
  274. border: 1px solid mc('grey', '800');
  275. }
  276. li {
  277. background-color: mc('grey', '50');
  278. padding: .6rem 1rem;
  279. display: block;
  280. &:nth-child(odd) {
  281. background-color: mc('grey', '100');
  282. }
  283. & + li {
  284. margin-top: 0;
  285. }
  286. &::before {
  287. content: '';
  288. display: none;
  289. }
  290. @at-root .theme--dark & {
  291. background-color: mc('grey', '900');
  292. &:nth-child(odd) {
  293. background-color: darken(mc('grey', '900'), 5%);
  294. }
  295. }
  296. }
  297. }
  298. }
  299. ul {
  300. list-style: none;
  301. > li::before {
  302. content: '\25b8';
  303. color: mc('grey', '600');
  304. display: inline-block;
  305. width: 1.35rem;
  306. }
  307. }
  308. // ---------------------------------
  309. // CODE
  310. // ---------------------------------
  311. code {
  312. background-color: mc('indigo', '50');
  313. padding: 0 5px;
  314. color: mc('indigo', '800');
  315. font-family: 'Roboto Mono', monospace;
  316. font-weight: normal;
  317. font-size: 1rem;
  318. box-shadow: none;
  319. &::before, &::after {
  320. display: none;
  321. }
  322. @at-root .theme--dark & {
  323. background-color: darken(mc('grey', '900'), 5%);
  324. color: mc('indigo', '100');
  325. }
  326. }
  327. .prismjs{
  328. border: none;
  329. border-radius: 5px;
  330. box-shadow: initial;
  331. background-color: mc('grey', '900');
  332. padding: 1rem 1rem 1rem 3rem;
  333. margin: 1rem 24px;
  334. @at-root .theme--dark & {
  335. background-color: darken(mc('grey', '900'), 5%);
  336. }
  337. > code {
  338. background-color: transparent;
  339. padding: 0;
  340. color: #FFF;
  341. box-shadow: initial;
  342. display: block;
  343. font-size: .85rem;
  344. font-family: 'Roboto Mono', monospace;
  345. &:after, &:before {
  346. content: initial;
  347. letter-spacing: initial;
  348. }
  349. }
  350. }
  351. // ---------------------------------
  352. // TASK LISTS
  353. // ---------------------------------
  354. .task-list-item {
  355. position: relative;
  356. list-style-type: none;
  357. &-checkbox[disabled] {
  358. display: none;
  359. & + label {
  360. padding-left: 1.5rem;
  361. }
  362. & + label::before {
  363. position: absolute;
  364. left: 0;
  365. top: 2px;
  366. content: ' ';
  367. display: block;
  368. width: 1.1rem;
  369. height: 1.1rem;
  370. background-color: #FFF;
  371. border: 1px solid mc('grey', '400');
  372. border-radius: 2px;
  373. font-weight: bold;
  374. font-size: .8rem;
  375. line-height: 1rem;
  376. text-align: center;
  377. @at-root .theme--dark & {
  378. background-color: mc('grey', '900');
  379. border-color: mc('grey', '700');
  380. }
  381. }
  382. &[checked] + label::before {
  383. content: '✓';
  384. }
  385. }
  386. .contains-task-list {
  387. padding: .5rem 0 0 1.5rem;
  388. }
  389. }
  390. // ---------------------------------
  391. // TABLES
  392. // ---------------------------------
  393. table {
  394. margin: .5rem 1.75rem;
  395. border-spacing: 0;
  396. th {
  397. padding: .75rem;
  398. border-bottom: 2px solid mc('grey', '500');
  399. color: mc('grey', '600');
  400. }
  401. td {
  402. padding: .75rem;
  403. }
  404. tr {
  405. td {
  406. border-bottom: 1px solid mc('grey', '200');
  407. }
  408. }
  409. }
  410. // ---------------------------------
  411. // IMAGES
  412. // ---------------------------------
  413. img {
  414. max-width: 100%;
  415. &.align-left {
  416. float: left;
  417. margin: 0 1rem 1rem 0;
  418. }
  419. &.align-right {
  420. float: right;
  421. margin: 0 0 1rem 1rem;
  422. }
  423. &.align-center {
  424. display: block;
  425. max-width: 100%;
  426. margin: auto;
  427. }
  428. &.align-abstopright {
  429. position: absolute;
  430. top: -90px;
  431. right: 1rem;
  432. height: calc(90px - 2rem);
  433. width: auto;
  434. }
  435. &.decor-shadow {
  436. box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
  437. }
  438. &.decor-outline {
  439. border: 1px solid mc('grey', '400');
  440. }
  441. }
  442. }