wysiwyg.less 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. /* LISIBILITY */
  2. @import "../components/gui/gui.less";
  3. *{font-size:14px;}
  4. div{border: 1px dashed #D4D4D4;}
  5. p:after, ul:after{content:"¬"; color:red;}
  6. h1:before, h2:before, h3:before, h4:before, h5:before, h6:before{
  7. color:blue; font-weight: normal; font-size:10px; vertical-align: super;
  8. }
  9. h1:before{content:"h1 ";}
  10. h2:before{content:"h2 ";}
  11. h3:before{content:"h3 ";}
  12. h4:before{content:"h4 ";}
  13. h5:before{content:"h5 ";}
  14. h6:before{content:"h6 ";}
  15. h2{font-size:24px;}
  16. h3{font-size:18px;}
  17. h4{font-size:16px;}
  18. h5{font-size:14px;}
  19. h6{font-size:12px;}
  20. br:after{content:"·"; color:red; border: 1px solid #999;}
  21. /* LAYOUT AND GRAPHICS */
  22. #full{ width:99%; }
  23. #demi{ width:47%; }
  24. #tiers{ width:29%; }
  25. #quart{ width:23%; }
  26. #right{ float:right; margin-left:2%; }
  27. #left{ float:left; margin-right:2%; }
  28. #center{ display:block; margin:0 auto; }
  29. img{height:auto; margin:0.5em 0;}
  30. p{ border: 1px dashed #848484; }
  31. div{border: 1px solid #1A1A1A;}
  32. img,p,div{ position:relative;
  33. &:before{font-size:10px; color:red; background-color: #1A1A1A; position:absolute; top:0; z-index:3000;}
  34. &.full{#full; &:before{content:" full ";}}
  35. &.demi{ #demi; margin-right:2%; &:before{content:" demi "; right:0;}}
  36. &.tiers{ #tiers; margin-right:2%; &:before{content:" tiers "; right:0;}}
  37. &.quart{ #quart; margin-right:2%; &:before{content:" quart "; right:0;}}
  38. &.demi-left{ #demi; #left; &:before{content:" demi-left "; left:0;}}
  39. &.demi-right{ #demi; #right; &:before{content:" demi-right "; right:0;}}
  40. &.demi-center{ #demi; #center; &:before{content:" demi-denter "; right:0;}}
  41. &.tiers-left{ #tiers; #left; &:before{content:" tiers-left "; left:0;}}
  42. &.tiers-right{ #tiers; #right; &:before{content:" tiers-right "; right:0;}}
  43. &.tiers-center{ #tiers; #center; &:before{content:" tiers-center "; right:0;}}
  44. &.quart-left{ #quart; #left; &:before{content:" quart-left "; left:0;}}
  45. &.quart-right{ #quart; #right; &:before{content:" quart-right "; right:0;}}
  46. &.quart-center{ #quart; #center; &:before{content:" quart-center "; right:0;}}
  47. }
  48. table, tr,td{
  49. position:relative;
  50. padding:1em 0.3em 0.3em;
  51. width:100%;
  52. &:before{
  53. font-size:10px; color:white; background-color: blue;
  54. position:absolute; top:0; left:0; z-index:3000;
  55. padding:1px 3px;
  56. }
  57. }
  58. table{
  59. border:2px solid blue!important;
  60. &:before{content:"table";}
  61. }
  62. tr{
  63. display:block;
  64. border:1px dashed blue!important;
  65. &:before{content:"tr";}
  66. }
  67. td{
  68. border:1px dotted blue!important;
  69. &:before{content:"td";}
  70. p{
  71. padding:0 15px;
  72. }
  73. }