color.admin.css

/**
 * @file
 * Stylesheet for the administration pages of the Color module.
 */

.form-item-scheme label,
.form-type-color label {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}

.color-form select,
input[type=color] {
  float: right; /* LTR */
  max-width: 9em;
}

[dir="rtl"] .color-form select,
[dir="rtl"] input[type=color] {
  float: left;
}

.form-type-color {
  height: 35px;
  width: 100%;
  margin-top: .5em;
  margin-bottom: .5em;
  clear: both;
}

/**
 * Prevent color input labels from being crumbed up together, when there are
 * some that wrap into multiple lines.
 */
#system-theme-settings .form-type-color {
  display: table;
}

/* Properly align color labels with the color input, when they are long. */
#system-theme-settings .form-type-color label {
  display: table-cell;
  vertical-align: middle;
}

/* Color inputs */
#system-theme-settings input[type=color] {
  border-radius: 100%;
  height: 35px;
  width: 35px;
  padding: 0px;
  cursor: pointer;
  display: table-cell;
  vertical-align: middle;
}

/* Styles to control the color inputs in Firefox. */
#system-theme-settings input[type=color]::-moz-color-swatch {
  border: none;
  border-radius: 100%;
}

/* Styles to control the color inputs in Chrome. */
#system-theme-settings input[type=color]::-webkit-color-swatch {
  border: none;
  border-radius: 100%;
}

#system-theme-settings input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0;
}

/* Preview */
.color-preview {
  display: block;
  width: 100%;
}

#preview {
  width: 100%;
  height: 100vh;
  border: 1px black solid;
}

@media all and (min-width: 48em) {
  .has-preview {
    margin-right: 1em;
    width: 20em;
    float: left;
  }

  .color-preview {
    width: calc(100% - 21em);
    float: left;
  }
}