custom-classes.less 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. .el-article-content {
  2. font: 1.2em/1.6em @font-family-serif;
  3. max-width: 50em;
  4. text-align: justify;
  5. blockquote {
  6. border-left: 0; // override bootstrap
  7. font-family: @font-family-sans-serif;
  8. font-size: inherit;
  9. font-weight: 300;
  10. margin-left: 2em;
  11. quotes: "\201C""\201D""\2018""\2019";
  12. &:before {
  13. color: @gray;
  14. content: open-quote;
  15. font-size: 4em;
  16. line-height: 0.1em;
  17. margin-right: 0.25em;
  18. vertical-align: -0.4em;
  19. }
  20. }
  21. img {
  22. &:extend(.img-responsive);
  23. border: 2px solid #EEE;
  24. padding: 5px;
  25. }
  26. // Syntax Highlight
  27. table.highlighttable {
  28. table-layout: fixed;
  29. width: 100%;
  30. td.linenos {
  31. @media (max-width:@screen-md) {
  32. display:none;
  33. }
  34. padding-right: 1px; // On Chrome any value higher than 1 breaks
  35. width: @el-syntax-highlight-line-no-width;
  36. div.linenodiv {
  37. pre {
  38. background-color: @el-syntax-highlight-line-no-background-color;
  39. border-radius: @border-radius-base 0 0 @border-radius-base;
  40. color: @el-syntax-highlight-line-no-color;
  41. overflow: scroll;
  42. text-align: center;
  43. }
  44. }
  45. }
  46. td.code {
  47. width: 100 - @el-syntax-highlight-line-no-width;
  48. div.highlight {
  49. // on small screen, no point in displaying custom rounded corner box because
  50. // line number column is hidden
  51. @media (min-width:@screen-md) {
  52. // pygments.css has a rule for div.highlight color. Give it the same border that
  53. // descendent pre has.
  54. border-radius: 0 @border-radius-base @border-radius-base 0;
  55. pre {
  56. border-radius: 0 @border-radius-base @border-radius-base 0;
  57. // from http://stackoverflow.com/a/10374189/177116
  58. overflow: auto;
  59. white-space: pre;
  60. word-wrap: normal;
  61. }
  62. }
  63. @media (max-width:@screen-md) {
  64. pre {
  65. // from http://stackoverflow.com/a/248013/177116
  66. white-space: pre-wrap; /* CSS 3 */
  67. white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  68. white-space: -o-pre-wrap; /* Opera 7 */
  69. white-space: -pre-wrap; /* Opera 4-6 */
  70. word-wrap: break-word; /* Internet Explorer 5.5+ */
  71. }
  72. }
  73. }
  74. }
  75. }
  76. }