relaxngui.css 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. /*
  2. This file is part of RelaxNGui.
  3. RelaxNGui is free software: you can redistribute it and/or modify it under
  4. the terms of the GNU General Public License as published by the Free Software
  5. Foundation, either version 3 of the License, or (at your option) any later
  6. version.
  7. RelaxNGui is distributed in the hope that it will be useful, but WITHOUT ANY
  8. WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
  9. A PARTICULAR PURPOSE. See the GNU General Public License for more details.
  10. You should have received a copy of the GNU General Public License along with
  11. RelaxNGui (file COPYING in the main directory). If not, see
  12. <http://www.gnu.org/licenses/>.
  13. */
  14. .relaxngui_table { }
  15. .relaxngui_table .relaxngui_table { }
  16. .relaxngui_table.closed > .relaxngui_table,
  17. .relaxngui_table.closed > .relaxngui_dyn,
  18. .relaxngui_table.closed > .relaxngui_row,
  19. .relaxngui_table.closed > .relaxngui_control {
  20. display: none;
  21. }
  22. .relaxngui_header.fold {
  23. cursor: pointer;
  24. }
  25. .relaxngui_table.closed .relaxngui_fold:after {
  26. content: "▶";
  27. font-weight: bold;
  28. vertical-align:top;
  29. margin-right: 0.5em;
  30. position: relative;
  31. top: -0.13em;
  32. }
  33. .relaxngui_table .relaxngui_fold:after {
  34. content: "▽";
  35. font-weight: bold;
  36. vertical-align:top;
  37. margin-right: 0.5em;
  38. position: relative;
  39. top: -0.13em;
  40. }
  41. .relaxngui_table > .relaxngui_table > .relaxngui_table {
  42. padding: 0;
  43. padding-top: 0.2em;
  44. padding-bottom: 0.5em;
  45. padding-left: 1em;
  46. }
  47. .relaxngui_dyn {
  48. margin: 0;
  49. padding: 0;
  50. display: flex;
  51. flex-direction: row;
  52. align-items: center;
  53. padding-bottom: 0.25em;
  54. padding-top: 0.25em;
  55. margin-left: 0.5em;
  56. }
  57. .relaxngui_dyn > *:nth-child(1) {
  58. margin: 0;
  59. padding: 0;
  60. font-size: 1em;
  61. margin-right: 0.2em;
  62. margin-left: 0.2em;
  63. vertical-align: baseline;
  64. cursor: pointer;
  65. display: inline-block;
  66. }
  67. .relaxngui_dyn > *:nth-child(2) {
  68. flex: 1 1 auto;
  69. }
  70. .relaxngui_dyn > .relaxngui_table { padding: 0; margin: 0; }
  71. .relaxngui_dyn:nth-child(even) { background-color: #fff; }
  72. .relaxngui_dyn:nth-child(odd) { background-color: #e9e9e9; }
  73. .relaxngui_table.even > .relaxngui_row:nth-child(even) { background-color: #fff; }
  74. .relaxngui_table.even > .relaxngui_row:nth-child(odd) { background-color: #e9e9e9; }
  75. .relaxngui_table.odd > .relaxngui_row:nth-child(even) { background-color: #e9e9e9; }
  76. .relaxngui_table.odd > .relaxngui_row:nth-child(odd) { background-color: #fff; }
  77. .relaxngui_table.even > .relaxngui_hint:nth-child(odd) { background-color: #fff; }
  78. .relaxngui_table.even > .relaxngui_hint:nth-child(even) { background-color: #e9e9e9; }
  79. .relaxngui_table.odd > .relaxngui_hint:nth-child(odd) { background-color: #e9e9e9; }
  80. .relaxngui_table.odd > .relaxngui_hint:nth-child(even) { background-color: #fff; }
  81. .relaxngui_dyn:nth-child(even) > .relaxngui_table > .relaxngui_row:nth-child(1):nth-last-child(1) {
  82. background-color: #fff;
  83. }
  84. .relaxngui_dyn:nth-child(odd) > .relaxngui_table > .relaxngui_row:nth-child(1):nth-last-child(1) {
  85. background-color: #e9e9e9;
  86. }
  87. .relaxngui_table.even { background-color: #e9e9e9; }
  88. .relaxngui_table.odd { background-color: #fff; }
  89. .relaxngui_row {
  90. width: 100%;
  91. display: flex;
  92. flex-direction: row;
  93. }
  94. .relaxngui_hint {
  95. padding-left: 0.2em;
  96. }
  97. .relaxngui_hint::before {
  98. content: "↳ ";
  99. }
  100. .relaxngui_header {
  101. margin: 0;
  102. padding: 0;
  103. padding-top: 0.7em;
  104. padding-bottom: 0.2em;
  105. padding-left: 0.1em;
  106. display: block;
  107. font-weight: bold;
  108. }
  109. .relaxngui_header[data-relaxngui-level="1"] {
  110. font-size: 1.2em;
  111. }
  112. .relaxngui_dyn .relaxngui_header {
  113. font-size: 1em;
  114. }
  115. button.relaxngui_control {
  116. margin: 0.5em 0;
  117. align-self: flex-start;
  118. }
  119. .relaxngui_cell { }
  120. .relaxngui_cell.optional { text-decoration: line-through; }
  121. .relaxngui_cell:nth-child(1), .relaxngui_cell:nth-child(2) {
  122. margin: 0;
  123. padding: 0.1em 0.2em;
  124. font-size: 1em;
  125. font-family: sans-serif;
  126. }
  127. input.relaxngui_cell:nth-child(1) {
  128. border: 0 none;
  129. background: none;
  130. }
  131. .relaxngui_cell:nth-child(3) {
  132. margin: 0;
  133. padding: 0.1em 0.2em;
  134. flex: 1 1 auto;
  135. font-size: 1em;
  136. font-family: sans-serif;
  137. }
  138. select.relaxngui_cell:nth-child(3) {
  139. -webkit-appearance: none; /*Removes default chrome and safari style*/
  140. -moz-appearance: none; /* Removes Default Firefox style*/
  141. padding: 0;
  142. }
  143. select.relaxngui_cell:nth-child(3), button.relaxngui_cell:nth-child(3), textarea.relaxngui_cell:nth-child(3), input.relaxngui_cell:nth-child(3), [contenteditable].relaxngui_cell:nth-child(3) {
  144. border: 0 none;
  145. background: none;
  146. }
  147. [contenteditable].relaxngui_cell:nth-child(3) {
  148. overflow-x: auto;
  149. overflow-wrap: normal;
  150. white-space: pre;
  151. font-family: monospace,monospace;
  152. }
  153. [contenteditable][data-relaxngui-wrap='true'].relaxngui_cell:nth-child(3) {
  154. white-space: normal;
  155. }
  156. [contenteditable].relaxngui_cell:focus {
  157. outline: 0px solid transparent;
  158. }
  159. [contenteditable].relaxngui_cell:empty:before {
  160. font-family: sans-serif;
  161. color: #a1a1a1;
  162. white-space: normal;
  163. content: attr(placeholder);
  164. display: block;
  165. }
  166. .relaxngui_template {
  167. display: none;
  168. }