settings.css

Same filename and directory in other branches
  1. 11.x core/themes/admin/migration/css/components/settings.css
[data-drupal-selector="edit-preset-accent-color"] .form-radios {
  display: flex;
  flex-wrap: wrap;
  margin-block-start: var(--gin-spacing-xs);
}

[data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color {
  position: relative;
}

[data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input {
  width: 32px;
  height: 32px;
  margin-inline-end: var(--gin-spacing-xs);
  cursor: pointer;
  border-color: transparent;
  inset-block-start: var(--gin-spacing-m);
}

[data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input,
.gin--dark-mode [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input {
  background-color: var(--gin-color-primary);
}

[data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input:hover {
  box-shadow: none;
}

[data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input:hover,
[data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input:focus,
[data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input:focus:hover,
[data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input:checked {
  border-color: var(--gin-color-primary);
}

[data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input:focus:checked,
[data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input:focus,
[data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input:checked {
  background-color: var(--gin-color-primary);
  box-shadow:
    inset 0 0 0 2px var(--gin-bg-layer),
    inset 0 0 0 4px var(--gin-color-primary);
}

[data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input[data-gin-accent="custom"] {
  border-color: var(--gin-border-color);
  background-color: #fff;
  background-image: url(../../../images/settings/custom-color.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
}

[data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input[data-gin-accent="custom"]:checked {
  border-width: 1px;
  border-color: var(--gin-border-color);
  background-color: #fff;
}

[data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color .form-item__label {
  position: absolute;
  z-index: 1;
  display: none;
  visibility: hidden;
  padding: var(--gin-spacing-xs);
  color: var(--gin-color-contextual-text);
  border-radius: var(--gin-border-xs);
  background: var(--gin-color-contextual);
  inset-block-start: 100%;
  inset-inline-start: -10px;
}

[dir="ltr"] [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color .form-item__label {
  transform: translateX(-50%);
}

[dir="rtl"] [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color .form-item__label {
  transform: translateX(50%);
}

[data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color:hover .form-item__label,
[data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input:active ~ .form-item__label,
[data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input:focus ~ .form-item__label {
  display: block;
  visibility: visible;
}

[data-drupal-selector="edit-accent-group"] .form-type--color,
[data-drupal-selector="edit-accent-group"] .form-type--textfield,
[data-drupal-selector="edit-focus-group"] .form-type--color,
[data-drupal-selector="edit-focus-group"] .form-type--textfield {
  float: inline-start;
  margin: 0;
  margin-block-end: var(--gin-spacing-xs);
}

[data-drupal-selector="edit-accent-group"] .form-type--color,
[data-drupal-selector="edit-focus-group"] .form-type--color {
  margin-inline-end: var(--gin-spacing-xs);
}

[data-drupal-selector="edit-accent-group"] .fieldset__description,
[data-drupal-selector="edit-focus-group"] .fieldset__description {
  clear: both;
}

[data-drupal-selector="edit-enable-dark-mode"] .form-radios {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 0 var(--gin-spacing-xxs);
  border: 1px solid var(--gin-border-color-form-element);
  border-radius: var(--gin-spacing-xl);
}

.gin--dark-mode [data-drupal-selector="edit-enable-dark-mode"] .form-radios {
  background: var(--gin-bg-layer2);
}

[data-drupal-selector="edit-enable-dark-mode"] .form-radios .form-type--radio {
  margin-block: 0;
  margin-inline-start: 0;
}

[data-drupal-selector="edit-enable-dark-mode"] .form-radios .form-item__label {
  display: inline-block;
  box-sizing: border-box;
  margin: var(--gin-spacing-xxs) 0;
  padding: 0.375rem var(--gin-spacing-m);
  border: 2px solid transparent;
  border-radius: var(--gin-border-xl);
}

[data-drupal-selector="edit-enable-dark-mode"] .form-radios .form-item__label:hover {
  color: var(--gin-color-primary);
  background: var(--gin-color-primary-light-hover);
}

[data-drupal-selector="edit-enable-dark-mode"] .form-radios input {
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  border: 0;
}

[data-drupal-selector="edit-enable-dark-mode"] .form-radios input:active + .form-item__label,
[data-drupal-selector="edit-enable-dark-mode"] .form-radios input:focus + .form-item__label {
  box-shadow:
    0 0 0 1px var(--gin-color-focus-border),
    0 0 0 4px var(--gin-color-focus);
}

[data-drupal-selector="edit-enable-dark-mode"] .form-radios input:checked + .form-item__label {
  color: var(--gin-color-button-text);
  background: var(--gin-color-primary);
}

[data-drupal-selector="edit-layout-density"] .form-radios {
  display: flex;
  flex-wrap: wrap;
  margin-block-start: var(--gin-spacing-xs);
}

[data-drupal-selector="edit-layout-density"] .form-radios .form-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 140px;
  margin: 0;
  margin-inline-end: var(--gin-spacing-s);
}

[data-drupal-selector="edit-layout-density"] .form-radios .form-item input {
  position: static;
  width: 140px;
  height: 100px;
  margin-inline-start: 0;
  cursor: pointer;
  transform: none;
  border-radius: var(--gin-border-l);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

[data-drupal-selector="edit-layout-density"] .form-radios .form-item input [data-drupal-selector="edit-layout-density"] .form-radios .form-item input:focus {
  border-color: var(--gin-color-text);
  box-shadow: none;
}

[data-drupal-selector="edit-layout-density"] .form-radios .form-item input:checked {
  border-color: var(--gin-color-primary);
  box-shadow: inset 0 0 0 1px var(--gin-color-primary);
}

[data-drupal-selector="edit-layout-density"] .form-radios .form-item input:focus {
  box-shadow: 0 0 0 3px var(--gin-color-focus);
}

[data-drupal-selector="edit-layout-density"] .form-radios .form-item input:checked:focus {
  box-shadow:
    inset 0 0 0 1px var(--gin-color-primary),
    0 0 0 3px var(--gin-color-focus);
}

[data-drupal-selector="edit-layout-density"] .form-radios .form-item .form-item__label {
  display: block;
  margin-block-start: var(--gin-spacing-xs);
  margin-block-end: var(--gin-spacing-m);
  font-size: var(--gin-font-size-xxs);
}

[data-drupal-selector="edit-layout-density"] .form-radios .form-item input[data-drupal-selector="edit-layout-density-default"] {
  background-image: url(../../../images/settings/layout_density_default.png);
}

.gin--dark-mode [data-drupal-selector="edit-layout-density"] .form-radios .form-item input[data-drupal-selector="edit-layout-density-default"] {
  background-image: url(../../../images/settings/layout_density_default_dark_mode.png);
}

[data-drupal-selector="edit-layout-density"] .form-radios .form-item input[data-drupal-selector="edit-layout-density-medium"] {
  background-image: url(../../../images/settings/layout_density_medium.png);
}

.gin--dark-mode [data-drupal-selector="edit-layout-density"] .form-radios .form-item input[data-drupal-selector="edit-layout-density-medium"] {
  background-image: url(../../../images/settings/layout_density_medium_dark_mode.png);
}

[data-drupal-selector="edit-layout-density"] .form-radios .form-item input[data-drupal-selector="edit-layout-density-small"] {
  background-image: url(../../../images/settings/layout_density_small.png);
}

.gin--dark-mode [data-drupal-selector="edit-layout-density"] .form-radios .form-item input[data-drupal-selector="edit-layout-density-small"] {
  background-image: url(../../../images/settings/layout_density_small_dark_mode.png);
}

File

View on git.drupalcode.org

core/themes/admin/migration/css/components/settings.css

View source 
  1. [data-drupal-selector="edit-preset-accent-color"] .form-radios {

  2.   display: flex;

  3.   flex-wrap: wrap;

  4.   margin-block-start: var(--gin-spacing-xs);

  5. }

  6. 

  7. [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color {

  8.   position: relative;

  9. }

  10. 

  11. [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input {

  12.   width: 32px;

  13.   height: 32px;

  14.   margin-inline-end: var(--gin-spacing-xs);

  15.   cursor: pointer;

  16.   border-color: transparent;

  17.   inset-block-start: var(--gin-spacing-m);

  18. }

  19. 

  20. [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input,

  21. .gin--dark-mode [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input {

  22.   background-color: var(--gin-color-primary);

  23. }

  24. 

  25. [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input:hover {

  26.   box-shadow: none;

  27. }

  28. 

  29. [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input:hover,

  30. [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input:focus,

  31. [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input:focus:hover,

  32. [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input:checked {

  33.   border-color: var(--gin-color-primary);

  34. }

  35. 

  36. [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input:focus:checked,

  37. [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input:focus,

  38. [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input:checked {

  39.   background-color: var(--gin-color-primary);

  40.   box-shadow:

  41.     inset 0 0 0 2px var(--gin-bg-layer),

  42.     inset 0 0 0 4px var(--gin-color-primary);

  43. }

  44. 

  45. [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input[data-gin-accent="custom"] {

  46.   border-color: var(--gin-border-color);

  47.   background-color: #fff;

  48.   background-image: url(../../../images/settings/custom-color.jpg);

  49.   background-repeat: no-repeat;

  50.   background-size: 100%;

  51. }

  52. 

  53. [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input[data-gin-accent="custom"]:checked {

  54.   border-width: 1px;

  55.   border-color: var(--gin-border-color);

  56.   background-color: #fff;

  57. }

  58. 

  59. [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color .form-item__label {

  60.   position: absolute;

  61.   z-index: 1;

  62.   display: none;

  63.   visibility: hidden;

  64.   padding: var(--gin-spacing-xs);

  65.   color: var(--gin-color-contextual-text);

  66.   border-radius: var(--gin-border-xs);

  67.   background: var(--gin-color-contextual);

  68.   inset-block-start: 100%;

  69.   inset-inline-start: -10px;

  70. }

  71. 

  72. [dir="ltr"] [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color .form-item__label {

  73.   transform: translateX(-50%);

  74. }

  75. 

  76. [dir="rtl"] [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color .form-item__label {

  77.   transform: translateX(50%);

  78. }

  79. 

  80. [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color:hover .form-item__label,

  81. [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input:active ~ .form-item__label,

  82. [data-drupal-selector="edit-preset-accent-color"] .form-radios .form-item--preset-accent-color input:focus ~ .form-item__label {

  83.   display: block;

  84.   visibility: visible;

  85. }

  86. 

  87. [data-drupal-selector="edit-accent-group"] .form-type--color,

  88. [data-drupal-selector="edit-accent-group"] .form-type--textfield,

  89. [data-drupal-selector="edit-focus-group"] .form-type--color,

  90. [data-drupal-selector="edit-focus-group"] .form-type--textfield {

  91.   float: inline-start;

  92.   margin: 0;

  93.   margin-block-end: var(--gin-spacing-xs);

  94. }

  95. 

  96. [data-drupal-selector="edit-accent-group"] .form-type--color,

  97. [data-drupal-selector="edit-focus-group"] .form-type--color {

  98.   margin-inline-end: var(--gin-spacing-xs);

  99. }

  100. 

  101. [data-drupal-selector="edit-accent-group"] .fieldset__description,

  102. [data-drupal-selector="edit-focus-group"] .fieldset__description {

  103.   clear: both;

  104. }

  105. 

  106. [data-drupal-selector="edit-enable-dark-mode"] .form-radios {

  107.   display: inline-flex;

  108.   flex-wrap: wrap;

  109.   padding: 0 var(--gin-spacing-xxs);

  110.   border: 1px solid var(--gin-border-color-form-element);

  111.   border-radius: var(--gin-spacing-xl);

  112. }

  113. 

  114. .gin--dark-mode [data-drupal-selector="edit-enable-dark-mode"] .form-radios {

  115.   background: var(--gin-bg-layer2);

  116. }

  117. 

  118. [data-drupal-selector="edit-enable-dark-mode"] .form-radios .form-type--radio {

  119.   margin-block: 0;

  120.   margin-inline-start: 0;

  121. }

  122. 

  123. [data-drupal-selector="edit-enable-dark-mode"] .form-radios .form-item__label {

  124.   display: inline-block;

  125.   box-sizing: border-box;

  126.   margin: var(--gin-spacing-xxs) 0;

  127.   padding: 0.375rem var(--gin-spacing-m);

  128.   border: 2px solid transparent;

  129.   border-radius: var(--gin-border-xl);

  130. }

  131. 

  132. [data-drupal-selector="edit-enable-dark-mode"] .form-radios .form-item__label:hover {

  133.   color: var(--gin-color-primary);

  134.   background: var(--gin-color-primary-light-hover);

  135. }

  136. 

  137. [data-drupal-selector="edit-enable-dark-mode"] .form-radios input {

  138.   width: 1px;

  139.   height: 1px;

  140.   margin: 0;

  141.   padding: 0;

  142.   opacity: 0;

  143.   border: 0;

  144. }

  145. 

  146. [data-drupal-selector="edit-enable-dark-mode"] .form-radios input:active + .form-item__label,

  147. [data-drupal-selector="edit-enable-dark-mode"] .form-radios input:focus + .form-item__label {

  148.   box-shadow:

  149.     0 0 0 1px var(--gin-color-focus-border),

  150.     0 0 0 4px var(--gin-color-focus);

  151. }

  152. 

  153. [data-drupal-selector="edit-enable-dark-mode"] .form-radios input:checked + .form-item__label {

  154.   color: var(--gin-color-button-text);

  155.   background: var(--gin-color-primary);

  156. }

  157. 

  158. [data-drupal-selector="edit-layout-density"] .form-radios {

  159.   display: flex;

  160.   flex-wrap: wrap;

  161.   margin-block-start: var(--gin-spacing-xs);

  162. }

  163. 

  164. [data-drupal-selector="edit-layout-density"] .form-radios .form-item {

  165.   position: relative;

  166.   display: flex;

  167.   flex-wrap: wrap;

  168.   width: 140px;

  169.   margin: 0;

  170.   margin-inline-end: var(--gin-spacing-s);

  171. }

  172. 

  173. [data-drupal-selector="edit-layout-density"] .form-radios .form-item input {

  174.   position: static;

  175.   width: 140px;

  176.   height: 100px;

  177.   margin-inline-start: 0;

  178.   cursor: pointer;

  179.   transform: none;

  180.   border-radius: var(--gin-border-l);

  181.   background-repeat: no-repeat;

  182.   background-size: 100% 100%;

  183. }

  184. 

  185. [data-drupal-selector="edit-layout-density"] .form-radios .form-item input [data-drupal-selector="edit-layout-density"] .form-radios .form-item input:focus {

  186.   border-color: var(--gin-color-text);

  187.   box-shadow: none;

  188. }

  189. 

  190. [data-drupal-selector="edit-layout-density"] .form-radios .form-item input:checked {

  191.   border-color: var(--gin-color-primary);

  192.   box-shadow: inset 0 0 0 1px var(--gin-color-primary);

  193. }

  194. 

  195. [data-drupal-selector="edit-layout-density"] .form-radios .form-item input:focus {

  196.   box-shadow: 0 0 0 3px var(--gin-color-focus);

  197. }

  198. 

  199. [data-drupal-selector="edit-layout-density"] .form-radios .form-item input:checked:focus {

  200.   box-shadow:

  201.     inset 0 0 0 1px var(--gin-color-primary),

  202.     0 0 0 3px var(--gin-color-focus);

  203. }

  204. 

  205. [data-drupal-selector="edit-layout-density"] .form-radios .form-item .form-item__label {

  206.   display: block;

  207.   margin-block-start: var(--gin-spacing-xs);

  208.   margin-block-end: var(--gin-spacing-m);

  209.   font-size: var(--gin-font-size-xxs);

  210. }

  211. 

  212. [data-drupal-selector="edit-layout-density"] .form-radios .form-item input[data-drupal-selector="edit-layout-density-default"] {

  213.   background-image: url(../../../images/settings/layout_density_default.png);

  214. }

  215. 

  216. .gin--dark-mode [data-drupal-selector="edit-layout-density"] .form-radios .form-item input[data-drupal-selector="edit-layout-density-default"] {

  217.   background-image: url(../../../images/settings/layout_density_default_dark_mode.png);

  218. }

  219. 

  220. [data-drupal-selector="edit-layout-density"] .form-radios .form-item input[data-drupal-selector="edit-layout-density-medium"] {

  221.   background-image: url(../../../images/settings/layout_density_medium.png);

  222. }

  223. 

  224. .gin--dark-mode [data-drupal-selector="edit-layout-density"] .form-radios .form-item input[data-drupal-selector="edit-layout-density-medium"] {

  225.   background-image: url(../../../images/settings/layout_density_medium_dark_mode.png);

  226. }

  227. 

  228. [data-drupal-selector="edit-layout-density"] .form-radios .form-item input[data-drupal-selector="edit-layout-density-small"] {

  229.   background-image: url(../../../images/settings/layout_density_small.png);

  230. }

  231. 

  232. .gin--dark-mode [data-drupal-selector="edit-layout-density"] .form-radios .form-item input[data-drupal-selector="edit-layout-density-small"] {

  233.   background-image: url(../../../images/settings/layout_density_small_dark_mode.png);

  234. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.