glkote.debug.css 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. /*
  2. GlkOte
  3. ======
  4. Built: 2014-10-05
  5. GlkOte -- a Javascript display library for IF interfaces
  6. Dialog -- a Javascript load/save library for IF interfaces
  7. GlkAPI -- a Javascript Glk API for IF interfaces
  8. Designed by Andrew Plotkin <erkyrath@eblong.com>
  9. Copyright (c) 2008-2014 Andrew Plotkin
  10. <http://eblong.com/zarf/glk/glkote.html>
  11. */
  12. /* GlkOte stylesheet for Quixe/I7 Template
  13. * Designed by Andrew Plotkin <erkyrath@eblong.com>
  14. * <http://eblong.com/zarf/glk/glkote.html>
  15. * <http://eblong.com/zarf/glulx/quixe/>
  16. *
  17. * This CSS stylesheet is in the public domain. Do whatever you want
  18. * with it.
  19. */
  20. #windowport {
  21. width: 100%;
  22. height: 100%;
  23. }
  24. #errorpane {
  25. position: absolute;
  26. top: 0px;
  27. width: 100%;
  28. background: #FF4040;
  29. padding-bottom: 3px;
  30. }
  31. #errorcontent {
  32. padding: 8px;
  33. text-align: center;
  34. background: #FFA0A0;
  35. }
  36. #loadingpane {
  37. position: absolute;
  38. width: 100%;
  39. text-align: center;
  40. top: 20%;
  41. }
  42. #layouttestpane {
  43. position: absolute;
  44. visibility: hidden;
  45. top: 0px;
  46. /* Move this way off the screen. Even though it's hidden, Firefox has
  47. a nasty habit of showing the inactive scroll bar. */
  48. left: -1000px;
  49. }
  50. .WindowFrame {
  51. /* This class provides the default background color of windows. You
  52. can change that, but don't touch the position or margin. */
  53. position: absolute;
  54. margin: 0px;
  55. background: white;
  56. }
  57. .BufferWindow {
  58. overflow: scroll; /* vertical scrollbar is mandatory */
  59. overflow-x: hidden; /* but horizontal scrollbar is forbidden */
  60. font-family: Georgia, "Times New Roman", Times, serif;
  61. font-size: 13px;
  62. line-height: 1.4;
  63. padding: 6px 10px 6px 10px;
  64. }
  65. .BufferLine {
  66. }
  67. .GridWindow {
  68. background: #D0D0C0;
  69. overflow: hidden;
  70. font-family: monaco, andale mono, lucidatypewriter, courier, courier new, monospace; /* necessary! */
  71. font-size: 12px;
  72. padding: 6px 10px 6px 10px;
  73. }
  74. .GridLine {
  75. white-space: pre; /* required for spaces to work right */
  76. }
  77. .InvisibleCursor {
  78. /* This provides the padding below the last line of text (and the input
  79. prompt). Without this, they'd be flush against the bottom of the
  80. window, which would be ugly. Do not modify this CSS class. */
  81. position: relative;
  82. padding-bottom: 14px;
  83. }
  84. .MorePrompt {
  85. /* This describes the "More" prompt that flashes in the bottom right corner
  86. of a window when it needs paging. */
  87. font-weight: bold;
  88. position: absolute;
  89. background: #603010;
  90. color: #FFFFCC;
  91. opacity: 0.5;
  92. padding: 2px 6px;
  93. -webkit-border-radius: 4px;
  94. -moz-border-radius: 4px;
  95. }
  96. .Input {
  97. /* This class mimicks the Style_input class. It also eliminates the
  98. usual decoration of an <input> field, as much as possible. */
  99. border: none;
  100. margin: 0px;
  101. padding: 0px;
  102. outline-width: 0px;
  103. outline-style: none;
  104. background: none;
  105. font-weight: bold;
  106. }
  107. .BufferWindow .Input {
  108. font-family: Georgia, "Times New Roman", Times, serif;
  109. font-size: 13px;
  110. }
  111. .GridWindow .Input {
  112. font-family: monaco, andale mono, lucidatypewriter, courier, courier new, monospace; /* necessary! */
  113. font-size: 12px;
  114. }
  115. /* The following are the standard Glk styles. */
  116. .Style_normal {
  117. }
  118. .Style_emphasized {
  119. font-style: italic;
  120. }
  121. .Style_preformatted {
  122. font-family: monaco, andale mono, lucidatypewriter, courier, courier new, monospace;
  123. }
  124. .Style_header {
  125. font-weight: bold;
  126. }
  127. .BufferWindow .Style_header {
  128. font-size: 15px;
  129. }
  130. .Style_subheader {
  131. font-weight: bold;
  132. }
  133. .Style_alert {
  134. font-weight: bold;
  135. }
  136. .Style_note {
  137. font-style: italic;
  138. }
  139. .Style_blockquote {
  140. background: #FFF0C0;
  141. }
  142. .Style_input {
  143. font-weight: bold;
  144. color: #300000;
  145. }
  146. .Style_user1 {
  147. }
  148. .Style_user2 {
  149. }
  150. /* End of GlkOte default stylesheet. */
  151. /* Dialog toolkit default stylesheet
  152. * Designed by Andrew Plotkin <erkyrath@eblong.com>
  153. * <http://eblong.com/zarf/glk/glkote.html>
  154. *
  155. * This CSS stylesheet is in the public domain. Do whatever you want
  156. * with it.
  157. */
  158. /* dialog_screen is a translucent rectangle that greys out the entire root
  159. element (the game beneath the dialog box).
  160. */
  161. #dialog_screen {
  162. position: absolute;
  163. width: 100%;
  164. height: 100%;
  165. background: #808080;
  166. opacity: 0.5;
  167. }
  168. /* dialog_frame is an invisible pane that fills the root element. It exists
  169. so that the dialog can easily be centered in it.
  170. */
  171. #dialog_frame {
  172. position: absolute;
  173. width: 100%;
  174. height: 100%;
  175. }
  176. /* dialog is the dialog div itself. It is displayed near the top of
  177. dialog_frame. The auto margins keep it horizontally centered.
  178. */
  179. #dialog {
  180. position: relative;
  181. width: 360px;
  182. margin-left: auto;
  183. margin-right: auto;
  184. margin-top: 100px;
  185. background: white;
  186. border: 4px solid #AAA;
  187. -webkit-box-shadow: 1px 1px 15px #222;
  188. -moz-box-shadow: 1px 1px 15px #222;
  189. -webkit-border-radius: 10px;
  190. -moz-border-radius: 10px;
  191. }
  192. #dialog .DiaCaption {
  193. margin: 16px;
  194. }
  195. #dialog .DiaInput {
  196. margin: 16px;
  197. }
  198. #dialog input {
  199. width: 100%;
  200. }
  201. #dialog .DiaBody {
  202. margin: 16px;
  203. }
  204. #dialog select {
  205. width: 100%;
  206. }
  207. #dialog button {
  208. margin-left: 8px;
  209. }
  210. #dialog .DiaButtons {
  211. margin: 16px;
  212. text-align: right;
  213. }
  214. /* End of Dialog default stylesheet. */