config-dialog.css 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. #stylus-manage .config-dialog #message-box-contents {
  2. padding: 2em 16px;
  3. }
  4. #stylus-popup .config-dialog #message-box-contents {
  5. padding: 8px 16px;
  6. }
  7. #stylus-popup .config-body label {
  8. padding: .5em 0;
  9. }
  10. .config-heading {
  11. float: right;
  12. margin: -1.25rem 0 0 0;
  13. font-size: 0.9em;
  14. }
  15. .config-body label {
  16. display: flex;
  17. padding: .75em 0;
  18. align-items: center;
  19. margin-right: -16px; /* for .config-reset-icon */
  20. }
  21. .config-body .select-resizer {
  22. position: static;
  23. }
  24. .config-body label:first-child {
  25. padding-top: 0;
  26. }
  27. .config-body label:last-child {
  28. padding-bottom: 0;
  29. }
  30. .config-body label:not(:first-child) {
  31. border-top: 1px dotted #ccc;
  32. }
  33. .config-body .dirty {
  34. font-style: italic;
  35. }
  36. .config-body .dirty:after {
  37. content: "*";
  38. position: absolute;
  39. left: 6px;
  40. }
  41. .config-body input,
  42. .config-body select,
  43. .config-body .onoffswitch {
  44. width: var(--onoffswitch-width);
  45. margin: 0;
  46. height: 22px;
  47. box-sizing: border-box;
  48. vertical-align: middle;
  49. }
  50. .config-body input[type="text"],
  51. .config-body .select-resizer,
  52. .config-body select {
  53. width: auto;
  54. min-width: var(--onoffswitch-width);
  55. max-width: 124px;
  56. left: auto;
  57. position: relative;
  58. }
  59. .config-body .onoffswitch {
  60. height: auto;
  61. margin: calc((2em - 12px) / 2) 0;
  62. flex-grow: 0;
  63. }
  64. .config-body input[type="text"] {
  65. padding-left: 0.25em;
  66. }
  67. .config-name {
  68. flex-grow: 1;
  69. margin-right: 1em;
  70. }
  71. .config-value {
  72. box-sizing: border-box;
  73. flex-shrink: 0;
  74. }
  75. .config-value:not(.onoffswitch):not(.select-resizer) > :not(:last-child) {
  76. margin-right: 4px;
  77. }
  78. .config-body label:not(.nondefault) .config-reset-icon {
  79. visibility: hidden;
  80. }
  81. .svg-icon.config-reset-icon {
  82. /*position: absolute;*/
  83. pointer-events: all !important;
  84. cursor: pointer;
  85. /*right: -7px;*/
  86. fill: #aaa;
  87. width: 16px;
  88. height: 16px;
  89. padding: 0 1px;
  90. box-sizing: border-box;
  91. flex-shrink: 0;
  92. }
  93. .svg-icon.config-reset-icon:hover {
  94. fill: #666;
  95. }
  96. #config-autosave-wrapper {
  97. position: relative;
  98. padding: 0 0 0 16px;
  99. display: inline-flex;
  100. }
  101. #message-box-buttons {
  102. position: relative;
  103. }
  104. .config-error {
  105. position: absolute;
  106. z-index: 99;
  107. left: 0;
  108. right: 0;
  109. bottom: -1rem;
  110. padding: 0 .75rem;
  111. line-height: 24px;
  112. height: 24px;
  113. overflow: hidden;
  114. white-space: nowrap;
  115. text-overflow: ellipsis;
  116. background-color: red;
  117. color: white;
  118. font-weight: bold;
  119. text-shadow: 0.5px 0.5px 6px #400;
  120. animation: fadein .5s;
  121. }
  122. .cm-colorview::before,
  123. .color-swatch {
  124. width: var(--onoffswitch-width) !important;
  125. height: 20px !important;
  126. }
  127. .cm-colorview::before {
  128. margin: 1px !important;
  129. }
  130. .color-swatch {
  131. position: absolute;
  132. border: 1px solid gray;
  133. margin-top: -22px;
  134. cursor: pointer;
  135. }
  136. .colorpicker-popup {
  137. z-index: 2147483647 !important;
  138. border: none !important;
  139. box-shadow: 3px 3px 50px rgba(0,0,0,.5) !important;
  140. }
  141. @keyframes fadein {
  142. from {
  143. opacity: 0;
  144. }
  145. to {
  146. opacity: 1;
  147. }
  148. }