You are here

editor.css in Editor 5

Same filename and directory in other branches
  1. 6 editor.css
/*  
  Editor
  Author: Tj Holowaychuk (350designs.com)
  Filename: editor.css

  Stylesheet Structure:
  - Tags
  - Classes
  - IDs
  - Primary Navigation
  - Secondary Navigation
  - Footer
  - Page Specific
    - Front Page
    - Banner Images
  - Role Specific
*/
            
/**
 * Toolbars
 */
.editor-toolbar {
  padding: 0 5px;
  height: 25px;
  border-left: 1px solid #99bbe8;
  border-right: 1px solid #abc7ec;
  background: #d2e1f4 url(images/tile-blue.gif) top left repeat-x;
}

/**
 * Options
 */
.editor-options {
  margin: 2px 0;
  padding: 5px 15px;
  border-left: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
  background: #fff url(images/tile-white.gif) top left repeat-x;
}

/**
 * Preview
 */
.editor-preview {
  margin: 2px 0;
  padding: 5px;
  height: 200px;
  overflow: auto;
  border: 1px solid #ccc;
  border-right-color: #eee;
  border-bottom-color: #eee;
  background: #fff;    
}
.editor-preview a {
  outline: none;
}

/**
 * Types
 */         
.editor-plugin,
.editor-spacer {
  display: block;
  float: left;
  margin: 2px;
}
.editor-spacer { 
  margin: 5px; 
  width: 0;
  height: 15px;
  border-left: 1px solid #aaccf6;
  border-right: 1px solid #eee;
}
.editor-plugin.hover,
.editor-plugin:hover {
  background-color: #d4e2f4;
}
.editor-plugin.active,
.editor-plugin:active {
  background-color: #d4e2f4;
}
.editor-button {
  width: 20px;
  height: 20px;
  cursor: pointer;
  background: 50% 50% no-repeat;
}

/**
 * Plugins
 */
#editor-undo {
  background-image: url(images/undo.png); 
}
#editor-redo {
  background-image: url(images/redo.png); 
}
#editor-align_left {
  background-image: url(images/text_align_left.png);
}
#editor-align_center {
  background-image: url(images/text_align_center.png); 
}
#editor-align_right {
  background-image: url(images/text_align_right.png); 
}
#editor-align_justify {
  background-image: url(images/text_align_justify.png); 
}
#editor-link {
  background-image: url(images/link.png); 
}
#editor-mailto {
  background-image: url(images/email_link.png); 
}
#editor-bold {
  background-image: url(images/text_bold.png); 
}
#editor-italic {
  background-image: url(images/text_italic.png); 
}
#editor-code {
  background-image: url(images/page_code.png); 
}
#editor-image {
  background-image: url(images/camera.png); 
}
#editor-html {
  background-image: url(images/html.png); 
}
#editor-list_numeric {
  background-image: url(images/text_list_numbers.png); 
}
#editor-list_bullet {
  background-image: url(images/text_list_bullets.png); 
}
#editor-remove_format {
  background-image: url(images/remove_format.png); 
}

File

editor.css
View source
  1. /*
  2. Editor
  3. Author: Tj Holowaychuk (350designs.com)
  4. Filename: editor.css
  5. Stylesheet Structure:
  6. - Tags
  7. - Classes
  8. - IDs
  9. - Primary Navigation
  10. - Secondary Navigation
  11. - Footer
  12. - Page Specific
  13. - Front Page
  14. - Banner Images
  15. - Role Specific
  16. */
  17. /**
  18. * Toolbars
  19. */
  20. .editor-toolbar {
  21. padding: 0 5px;
  22. height: 25px;
  23. border-left: 1px solid #99bbe8;
  24. border-right: 1px solid #abc7ec;
  25. background: #d2e1f4 url(images/tile-blue.gif) top left repeat-x;
  26. }
  27. /**
  28. * Options
  29. */
  30. .editor-options {
  31. margin: 2px 0;
  32. padding: 5px 15px;
  33. border-left: 1px solid #e9e9e9;
  34. border-right: 1px solid #e9e9e9;
  35. background: #fff url(images/tile-white.gif) top left repeat-x;
  36. }
  37. /**
  38. * Preview
  39. */
  40. .editor-preview {
  41. margin: 2px 0;
  42. padding: 5px;
  43. height: 200px;
  44. overflow: auto;
  45. border: 1px solid #ccc;
  46. border-right-color: #eee;
  47. border-bottom-color: #eee;
  48. background: #fff;
  49. }
  50. .editor-preview a {
  51. outline: none;
  52. }
  53. /**
  54. * Types
  55. */
  56. .editor-plugin,
  57. .editor-spacer {
  58. display: block;
  59. float: left;
  60. margin: 2px;
  61. }
  62. .editor-spacer {
  63. margin: 5px;
  64. width: 0;
  65. height: 15px;
  66. border-left: 1px solid #aaccf6;
  67. border-right: 1px solid #eee;
  68. }
  69. .editor-plugin.hover,
  70. .editor-plugin:hover {
  71. background-color: #d4e2f4;
  72. }
  73. .editor-plugin.active,
  74. .editor-plugin:active {
  75. background-color: #d4e2f4;
  76. }
  77. .editor-button {
  78. width: 20px;
  79. height: 20px;
  80. cursor: pointer;
  81. background: 50% 50% no-repeat;
  82. }
  83. /**
  84. * Plugins
  85. */
  86. #editor-undo {
  87. background-image: url(images/undo.png);
  88. }
  89. #editor-redo {
  90. background-image: url(images/redo.png);
  91. }
  92. #editor-align_left {
  93. background-image: url(images/text_align_left.png);
  94. }
  95. #editor-align_center {
  96. background-image: url(images/text_align_center.png);
  97. }
  98. #editor-align_right {
  99. background-image: url(images/text_align_right.png);
  100. }
  101. #editor-align_justify {
  102. background-image: url(images/text_align_justify.png);
  103. }
  104. #editor-link {
  105. background-image: url(images/link.png);
  106. }
  107. #editor-mailto {
  108. background-image: url(images/email_link.png);
  109. }
  110. #editor-bold {
  111. background-image: url(images/text_bold.png);
  112. }
  113. #editor-italic {
  114. background-image: url(images/text_italic.png);
  115. }
  116. #editor-code {
  117. background-image: url(images/page_code.png);
  118. }
  119. #editor-image {
  120. background-image: url(images/camera.png);
  121. }
  122. #editor-html {
  123. background-image: url(images/html.png);
  124. }
  125. #editor-list_numeric {
  126. background-image: url(images/text_list_numbers.png);
  127. }
  128. #editor-list_bullet {
  129. background-image: url(images/text_list_bullets.png);
  130. }
  131. #editor-remove_format {
  132. background-image: url(images/remove_format.png);
  133. }