You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

216 lines
5.3 KiB

  1. /********************************************************************
  2. Screen Styles for the Wrap Plugin (additional to all.css)
  3. ********************************************************************/
  4. .dokuwiki {
  5. /* box
  6. ********************************************************************/
  7. .wrap_box {
  8. background: @ini_background_alt;
  9. color: @ini_text;
  10. }
  11. div.wrap_box,
  12. div.wrap_danger,
  13. div.wrap_warning,
  14. div.wrap_caution,
  15. div.wrap_notice,
  16. div.wrap_safety {
  17. padding: 1em 1em .5em;
  18. margin-bottom: 1.5em;
  19. overflow: hidden;
  20. }
  21. span.wrap_box,
  22. span.wrap_danger,
  23. span.wrap_warning,
  24. span.wrap_caution,
  25. span.wrap_notice,
  26. span.wrap_safety {
  27. padding: 0 .3em;
  28. }
  29. /*____________ notes with icons ____________*/
  30. /* general styles for all note divs */
  31. div.wrap_info,
  32. div.wrap_important,
  33. div.wrap_alert,
  34. div.wrap_tip,
  35. div.wrap_help,
  36. div.wrap_todo,
  37. div.wrap_download {
  38. padding: 1em 1em .5em 70px;
  39. margin-bottom: 1.5em;
  40. min-height: 68px;
  41. background-position: 10px 50%;
  42. background-repeat: no-repeat;
  43. color: inherit;
  44. overflow: hidden;
  45. }
  46. /* general styles for all note spans */
  47. span.wrap_info,
  48. span.wrap_important,
  49. span.wrap_alert,
  50. span.wrap_tip,
  51. span.wrap_help,
  52. span.wrap_todo,
  53. span.wrap_download {
  54. padding: 0 2px 0 20px;
  55. min-height: 20px;
  56. background-position: 2px 50%;
  57. background-repeat: no-repeat;
  58. color: inherit;
  59. }
  60. /* sorry for icons glued to the right side, but there is currently no way
  61. to make this look good without adjusting the images themselves */
  62. [dir=rtl] div.wrap_info,
  63. [dir=rtl] div.wrap_important,
  64. [dir=rtl] div.wrap_alert,
  65. [dir=rtl] div.wrap_tip,
  66. [dir=rtl] div.wrap_help,
  67. [dir=rtl] div.wrap_todo,
  68. [dir=rtl] div.wrap_download {
  69. padding: 1em 60px .5em 1em;
  70. background-position: right 50%;
  71. }
  72. [dir=rtl] span.wrap_info,
  73. [dir=rtl] span.wrap_important,
  74. [dir=rtl] span.wrap_alert,
  75. [dir=rtl] span.wrap_tip,
  76. [dir=rtl] span.wrap_help,
  77. [dir=rtl] span.wrap_todo,
  78. [dir=rtl] span.wrap_download {
  79. padding: 0 18px 0 2px;
  80. background-position: right 50%;
  81. }
  82. /*____________ info ____________*/
  83. .wrap_info { background-color: #d1d7df; }
  84. .wrap__dark.wrap_info { background-color: #343e4a; }
  85. div.wrap_info { background-image: url(images/note/48/info.png); }
  86. span.wrap_info { background-image: url(images/note/16/info.png); }
  87. /*____________ important ____________*/
  88. .wrap_important { background-color: #ffd39f; }
  89. .wrap__dark.wrap_important { background-color: #6c3b00; }
  90. div.wrap_important { background-image: url(images/note/48/important.png); }
  91. span.wrap_important { background-image: url(images/note/16/important.png); }
  92. /*____________ alert ____________*/
  93. .wrap_alert { background-color: #ffbcaf; }
  94. .wrap__dark.wrap_alert { background-color: #6b1100; }
  95. div.wrap_alert { background-image: url(images/note/48/alert.png); }
  96. span.wrap_alert { background-image: url(images/note/16/alert.png); }
  97. /*____________ tip ____________*/
  98. .wrap_tip { background-color: #fff79f; }
  99. .wrap__dark.wrap_tip { background-color: #4a4400; }
  100. div.wrap_tip { background-image: url(images/note/48/tip.png); }
  101. span.wrap_tip { background-image: url(images/note/16/tip.png); }
  102. /*____________ help ____________*/
  103. .wrap_help { background-color: #dcc2ef; }
  104. .wrap__dark.wrap_help { background-color: #3c1757; }
  105. div.wrap_help { background-image: url(images/note/48/help.png); }
  106. span.wrap_help { background-image: url(images/note/16/help.png); }
  107. /*____________ todo ____________*/
  108. .wrap_todo { background-color: #c2efdd; }
  109. .wrap__dark.wrap_todo { background-color: #17573e; }
  110. div.wrap_todo { background-image: url(images/note/48/todo.png); }
  111. span.wrap_todo { background-image: url(images/note/16/todo.png); }
  112. /*____________ download ____________*/
  113. .wrap_download { background-color: #d6efc2; }
  114. .wrap__dark.wrap_download { background-color: #345717; }
  115. div.wrap_download { background-image: url(images/note/48/download.png); }
  116. span.wrap_download { background-image: url(images/note/16/download.png); }
  117. /*____________ safety notes ____________*/
  118. .wrap_danger {
  119. background-color: #c00;
  120. color: #fff;
  121. }
  122. .wrap_warning {
  123. background-color: #f60;
  124. color: #000;
  125. }
  126. .wrap_caution {
  127. background-color: #ff0;
  128. color: #000;
  129. }
  130. .wrap_notice {
  131. background-color: #06f;
  132. color: #fff;
  133. }
  134. .wrap_safety {
  135. background-color: #090;
  136. color: #fff;
  137. }
  138. .wrap_danger *,
  139. .wrap_warning *,
  140. .wrap_caution *,
  141. .wrap_notice *,
  142. .wrap_safety * {
  143. color: inherit !important;
  144. }
  145. /* mark
  146. ********************************************************************/
  147. .wrap_hi {
  148. background-color: #ff9;
  149. overflow: hidden;
  150. }
  151. .wrap__dark.wrap_hi {
  152. background-color: #4e4e0d;
  153. }
  154. /* miscellaneous
  155. ********************************************************************/
  156. /*____________ spoiler ____________*/
  157. .wrap_spoiler {
  158. background-color: @ini_background !important;
  159. color: @ini_background !important;
  160. border: 1px dotted red;
  161. }
  162. /*____________ only print ____________*/
  163. .wrap_onlyprint {
  164. display: none;
  165. }
  166. /*____________ tabs ____________*/
  167. /* in addition to template styles */
  168. .plugin_wrap.tabs {
  169. margin-bottom: 1.4em;
  170. }
  171. /*____________ button-style link ____________*/
  172. .wrap_button a:link,
  173. .wrap_button a:visited {
  174. background-color: @ini_background_alt;
  175. }
  176. .wrap_button a:link:hover,
  177. .wrap_button a:visited:hover,
  178. .wrap_button a:link:focus,
  179. .wrap_button a:visited:focus,
  180. .wrap_button a:link:active,
  181. .wrap_button a:visited:active {
  182. background-color: @ini_background_neu;
  183. }
  184. } /* /.dokuwiki */