styles.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. .style-settings-heading {
  2. cursor: pointer;
  3. margin-bottom: 18px;
  4. padding-bottom: 6px;
  5. border-bottom: 1px solid var(--background-modifier-border);
  6. }
  7. .style-settings-heading[data-level="0"] {
  8. margin-bottom: 26px;
  9. }
  10. .style-settings-container {
  11. padding-bottom: 16px;
  12. }
  13. .style-settings-heading[data-level="0"] + .style-settings-container {
  14. padding-left: 34px;
  15. }
  16. .style-settings-heading.is-collapsed {
  17. margin-bottom: 0;
  18. }
  19. .style-settings-heading.is-collapsed + .style-settings-container {
  20. display: none;
  21. }
  22. .style-settings-collapse-indicator {
  23. color: var(--text-faint);
  24. display: inline-block;
  25. margin-right: 8px;
  26. position: relative;
  27. top: -1px;
  28. }
  29. .style-settings-heading[data-level="0"]
  30. + .style-settings-container
  31. .style-settings-collapse-indicator {
  32. margin-left: -17px;
  33. }
  34. .style-settings-collapse-indicator > svg {
  35. height: 9px;
  36. width: 9px;
  37. }
  38. .style-settings-heading.is-collapsed .style-settings-collapse-indicator > svg {
  39. transform: rotate(-90deg);
  40. }
  41. .style-settings-filter-result-count {
  42. color: var(--text-faint);
  43. line-height: var(--line-height-tight);
  44. margin-inline: var(--size-4-2);
  45. }
  46. .style-settings-error {
  47. font-size: 14px;
  48. border-radius: 6px;
  49. background: rgba(var(--background-modifier-error-rgb), 0.2);
  50. color: var(--text-error);
  51. padding: 10px;
  52. margin-bottom: 1rem;
  53. }
  54. .style-settings-error-name {
  55. font-weight: bold;
  56. margin-bottom: 5px;
  57. }
  58. .style-settings-error-desc {
  59. white-space: pre;
  60. }
  61. .style-settings-empty {
  62. font-size: 14px;
  63. background: var(--background-secondary);
  64. padding: 10px;
  65. }
  66. .style-settings-empty-name {
  67. font-weight: bold;
  68. margin-bottom: 5px;
  69. }
  70. .style-settings-import-input {
  71. width: 0.1px;
  72. height: 0.1px;
  73. opacity: 0;
  74. overflow: hidden;
  75. position: absolute;
  76. z-index: -1;
  77. }
  78. .style-settings-import-label {
  79. cursor: pointer;
  80. color: var(--text-accent);
  81. text-decoration: underline;
  82. }
  83. .style-settings-import-label:hover {
  84. color: var(--text-accent-hover);
  85. }
  86. .style-settings-export,
  87. .style-settings-import {
  88. display: inline-block;
  89. margin-right: 10px;
  90. }
  91. .style-settings-copy,
  92. .style-settings-download {
  93. position: relative;
  94. display: inline-block;
  95. margin-left: 10px;
  96. }
  97. .style-settings-copy:before {
  98. color: var(--interactive-success);
  99. content: "✓";
  100. position: absolute;
  101. left: -18px;
  102. font-weight: bold;
  103. opacity: 0;
  104. transition: 150ms opacity ease-in-out;
  105. }
  106. .style-settings-copy.success:before {
  107. opacity: 1;
  108. }
  109. .modal-style-settings {
  110. height: 70vh;
  111. display: flex;
  112. flex-direction: column;
  113. }
  114. .modal-style-settings .modal-content {
  115. flex-grow: 1;
  116. margin: 0;
  117. display: flex;
  118. flex-direction: column;
  119. }
  120. .modal-style-settings textarea {
  121. display: block;
  122. width: 100%;
  123. height: 100%;
  124. font-family: var(--font-monospace) !important;
  125. font-size: 12px;
  126. white-space: pre;
  127. overflow-wrap: normal;
  128. overflow-x: scroll;
  129. margin-bottom: 5px;
  130. }
  131. .modal-style-settings .setting-item {
  132. align-items: flex-start;
  133. }
  134. .modal-style-settings button {
  135. margin: 10px 0 0;
  136. }
  137. .style-settings-import-error {
  138. display: none;
  139. color: var(--text-error);
  140. }
  141. .style-settings-import-error.active {
  142. display: block;
  143. }
  144. .view-content .style-settings-container .setting-item:not(.setting-item-heading) {
  145. flex-direction: column;
  146. align-items: flex-start;
  147. }
  148. .view-content .style-settings-container .setting-item:not(.setting-item-heading) .setting-item-control {
  149. padding-top: 0.5em;
  150. }
  151. .view-content .style-settings-container .setting-item:not(.setting-item-heading) .themed-color-wrapper {
  152. display: flex;
  153. }
  154. .style-settings-ref {
  155. position: absolute;
  156. width: 0 !important;
  157. height: 0 !important;
  158. pointer-events: none;
  159. }
  160. .style-settings-info-text .style-settings-markdown :first-child {
  161. margin-top: 0;
  162. }
  163. .style-settings-info-text .style-settings-markdown :last-child {
  164. margin-bottom: 0;
  165. }.style-settings-container .pcr-app {
  166. display: none;
  167. }
  168. .style-settings-container .pcr-app.visible {
  169. display: flex;
  170. }
  171. .pcr-app .pcr-swatches > button {
  172. padding: 0;
  173. }
  174. .pickr .pcr-button {
  175. margin-right: 0;
  176. }
  177. .themed-color-wrapper > div {
  178. background: var(--background-primary);
  179. padding: 10px;
  180. display: flex;
  181. align-items: center;
  182. border-radius: 4px;
  183. }
  184. .themed-color-wrapper > div + div {
  185. margin-top: 6px;
  186. }
  187. .themed-color-wrapper button {
  188. display: block;
  189. }
  190. .themed-color-wrapper .pickr-reset > button {
  191. margin: 0 0 0 10px;
  192. padding: 9px;
  193. line-height: 1;
  194. }
  195. .themed-color-wrapper .pickr-reset > button > svg {
  196. display: block;
  197. }
  198. /*! Pickr 1.8.4 MIT | https://github.com/Simonwep/pickr */
  199. .pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr .pcr-button{position:relative;height:2em;width:2em;padding:0.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat center;background-size:0;transition:all 0.3s}.pickr .pcr-button::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pickr .pcr-button::before{z-index:initial}.pickr .pcr-button::after{position:absolute;content:'';top:0;left:0;height:100%;width:100%;transition:background 0.3s;background:var(--pcr-color);border-radius:.15em}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear::before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px var(--pcr-color)}.pickr .pcr-button.disabled{cursor:not-allowed}.pickr *,.pcr-app *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr input:focus,.pickr input.pcr-active,.pickr button:focus,.pickr button.pcr-active,.pcr-app input:focus,.pcr-app input.pcr-active,.pcr-app button:focus,.pcr-app button.pcr-active{box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px var(--pcr-color)}.pickr .pcr-palette,.pickr .pcr-slider,.pcr-app .pcr-palette,.pcr-app .pcr-slider{transition:box-shadow 0.3s}.pickr .pcr-palette:focus,.pickr .pcr-slider:focus,.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus{box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px rgba(0,0,0,0.25)}.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:0.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity 0.3s, visibility 0s 0.3s;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;box-shadow:0 0.15em 1.5em 0 rgba(0,0,0,0.1),0 0 1em 0 rgba(0,0,0,0.03);left:0;top:0}.pcr-app.visible{transition:opacity 0.3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:0.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports (display: grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit, 1.75em)}}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:0.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all 0.15s;overflow:hidden;background:transparent;z-index:1}.pcr-app .pcr-swatches>button::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:var(--pcr-color);border:1px solid rgba(0,0,0,0.05);border-radius:0.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{filter:brightness(1.05)}.pcr-app .pcr-swatches>button:not(.pcr-active){box-shadow:none}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -0.2em 0 -0.2em}.pcr-app .pcr-interaction>*{margin:0 0.2em}.pcr-app .pcr-interaction input{letter-spacing:0.07em;font-size:0.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all 0.15s;padding:0.45em 0.5em;margin-top:0.75em}.pcr-app .pcr-interaction input:hover{filter:brightness(0.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px rgba(66,133,244,0.75)}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all 0.2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff;width:auto}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff}.pcr-app .pcr-interaction .pcr-save:hover,.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover{filter:brightness(0.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-cancel{background:#f44250}.pcr-app .pcr-interaction .pcr-clear:focus,.pcr-app .pcr-interaction .pcr-cancel:focus{box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px rgba(244,66,80,0.75)}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pcr-app .pcr-selection .pcr-color-palette,.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-webkit-grab}.pcr-app .pcr-selection .pcr-color-palette:active,.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme='nano']{width:14.25em;max-width:95vw}.pcr-app[data-theme='nano'] .pcr-swatches{margin-top:.6em;padding:0 .6em}.pcr-app[data-theme='nano'] .pcr-interaction{padding:0 .6em .6em .6em}.pcr-app[data-theme='nano'] .pcr-selection{display:grid;grid-gap:.6em;grid-template-columns:1fr 4fr;grid-template-rows:5fr auto auto;align-items:center;height:10.5em;width:100%;align-self:flex-start}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview{grid-area:2 / 1 / 4 / 1;height:100%;width:100%;display:flex;flex-direction:row;justify-content:center;margin-left:.6em}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview .pcr-last-color{display:none}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview .pcr-current-color{position:relative;background:var(--pcr-color);width:2em;height:2em;border-radius:50em;overflow:hidden}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview .pcr-current-color::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-palette{grid-area:1 / 1 / 2 / 3;width:100%;height:100%;z-index:1}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-palette .pcr-palette{border-radius:.15em;width:100%;height:100%}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-palette .pcr-palette::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser{grid-area:2 / 2 / 2 / 2}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity{grid-area:3 / 2 / 3 / 2}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity{height:0.5em;margin:0 .6em}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity .pcr-picker{top:50%;transform:translateY(-50%)}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity .pcr-slider{flex-grow:1;border-radius:50em}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(to right, red, #ff0, lime, cyan, blue, #f0f, red)}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(to right, transparent, black),url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:100%, 0.25em}