infusion/dist/assets/src/framework/preferences/css/PrefsEditor.css

Infusion is an application framework for developing flexible stuff with JavaScript

/* General Preferences Editor styles, used for all layouts */
@font-face {
  font-family: 'InfusionIcons';
  src: url("../fonts/InfusionIcons-PrefsEditor.ttf"), url("../fonts/InfusionIcons-PrefsEditor.eot");
}
.fl-prefsEditor {
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
}
.fl-prefsEditor .fl-prefsEditor-panels {
  margin-left: 0;
  padding: 0;
}
.fl-prefsEditor .fl-prefsEditor-panels li {
  list-style: none;
}
.fl-prefsEditor label {
  font-size: 1.2em;
}
.fl-prefsEditor input[type="text"] {
  width: 2em;
  font-size: 1em;
}
.fl-prefsEditor input[type="checkbox"] {
  margin-right: 10px;
  border: 1px solid #000;
}
.fl-prefsEditor fieldset {
  border: 0 transparent;
  margin: 0;
  padding: 0;
}
.fl-prefsEditor legend {
  padding: 0;
  margin: 0 0 1em 0;
  display: block;
}
.fl-prefsEditor select {
  border: 2px solid #ebebeb;
}
.fl-prefsEditor select#textFont {
  font-weight: bold;
}
.fl-prefsEditor select#textFont option.times {
  font-family: "Times New Roman";
}
.fl-prefsEditor select#textFont option.comic {
  font-family: "Comic Sans MS";
}
.fl-prefsEditor select#textFont option.arial {
  font-family: Arial;
}
.fl-prefsEditor select#textFont option.verdana {
  font-family: Verdana;
}
.fl-prefsEditor select#theme {
  font-weight: bold;
  text-transform: uppercase;
}
.fl-prefsEditor select#theme option.fl-prefsEditor-default-theme {
  color: #000 !important;
  background-color: #efefef !important;
}
.fl-prefsEditor .fl-prefsEditor-text label {
  display: block;
}
.fl-prefsEditor .fl-prefsEditor-text .fl-inputs {
  float: left;
  font-size: 1em;
}
.fl-prefsEditor .fl-prefsEditor-layout div,
.fl-prefsEditor .fl-prefsEditor-links div {
  margin-left: 25px;
}
.fl-prefsEditor .fl-slider {
  float: left;
  border: 1px solid #b3b3b3;
  border-radius: 0.3em;
  background-color: #dad6d3;
  padding: 0;
  position: relative;
  height: 1em;
  margin-top: 0;
  margin-left: 0.8em;
  margin-right: 1.8em;
}
.fl-prefsEditor .fl-slider a,
.fl-prefsEditor .fl-slider .fl-slider-handle {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  margin-top: -0.4em;
  margin-left: -0.4em;
  background-image: -webkit-linear-gradient(right top, #fff 46%, #e9eaea 73%);
  background-image: -moz-linear-gradient(right top, #fff 46%, #e9eaea 73%);
  background-image: -o-linear-gradient(right top, #fff 46%, #e9eaea 73%);
  background-image: -ms-linear-gradient(right top, #fff 46%, #e9eaea 73%);
  height: 1.5em;
  width: 1.5em;
  background-color: #fff;
  border: 1px solid #b3b3b3;
  border-radius: 2em;
  box-shadow: 4px 2px 3px rgba(0,0,0,0.3);
  background-image: linear-gradient(right top, #fff 46%, #e9eaea 73%);
}
.fl-prefsEditor .fl-slider a:active,
.fl-prefsEditor .fl-slider .fl-slider-handle:active {
  outline: none;
}
.fl-prefsEditor input[type=range].fl-slider {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
}
.fl-prefsEditor input[type=range].fl-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-image: -webkit-linear-gradient(right top, #fff 46%, #e9eaea 73%);
  background-image: -moz-linear-gradient(right top, #fff 46%, #e9eaea 73%);
  background-image: -o-linear-gradient(right top, #fff 46%, #e9eaea 73%);
  background-image: -ms-linear-gradient(right top, #fff 46%, #e9eaea 73%);
  height: 1.5em;
  width: 1.5em;
  background-color: #fff;
  border: 1px solid #b3b3b3;
  border-radius: 2em;
  box-shadow: 4px 2px 3px rgba(0,0,0,0.3);
  background-image: linear-gradient(right top, #fff 46%, #e9eaea 73%);
}
.fl-prefsEditor input[type=range].fl-slider::-moz-range-thumb {
  background-image: -webkit-linear-gradient(right top, #fff 46%, #e9eaea 73%);
  background-image: -moz-linear-gradient(right top, #fff 46%, #e9eaea 73%);
  background-image: -o-linear-gradient(right top, #fff 46%, #e9eaea 73%);
  background-image: -ms-linear-gradient(right top, #fff 46%, #e9eaea 73%);
  height: 1.5em;
  width: 1.5em;
  background-color: #fff;
  border: 1px solid #b3b3b3;
  border-radius: 2em;
  box-shadow: 4px 2px 3px rgba(0,0,0,0.3);
  background-image: linear-gradient(right top, #fff 46%, #e9eaea 73%);
}
.fl-prefsEditor input[type=range].fl-slider::-ms-thumb {
  background-image: -webkit-linear-gradient(right top, #fff 46%, #e9eaea 73%);
  background-image: -moz-linear-gradient(right top, #fff 46%, #e9eaea 73%);
  background-image: -o-linear-gradient(right top, #fff 46%, #e9eaea 73%);
  background-image: -ms-linear-gradient(right top, #fff 46%, #e9eaea 73%);
  height: 1.5em;
  width: 1.5em;
  background-color: #fff;
  border: 1px solid #b3b3b3;
  border-radius: 2em;
  box-shadow: 4px 2px 3px rgba(0,0,0,0.3);
  background-image: linear-gradient(right top, #fff 46%, #e9eaea 73%);
}
.fl-prefsEditor input[type=range].fl-slider::-webkit-slider-runnable-track {
  background: transparent;
  border: 0px;
}
.fl-prefsEditor input[type=range].fl-slider::-moz-range-track {
  background: transparent;
  border: 0px;
}
.fl-prefsEditor input[type=range].fl-slider::-ms-track {
  background: transparent;
  border: 0px;
  color: transparent;
}
.fl-prefsEditor input[type=range].fl-slider::-ms-fill-lower {
  background: none;
  background-color: transparent;
  border: 0;
}
.fl-prefsEditor input[type=range].fl-slider::-ms-fill-upper {
  background: none;
  background-color: transparent;
  border: 0;
}
.fl-prefsEditor .fl-slider-horz {
  width: 8.8em;
}
.fl-prefsEditor .fl-slider-input {
  margin-left: 1em;
  float: left;
}
.fl-prefsEditor .fl-slider-range {
  background-color: #62bb3d;
  height: 100%;
}
.fl-prefsEditor .fl-inputs div[class*='fl-icon-'] {
  font-size: 1.5em;
  margin-top: -0.15em;
}
.fl-prefsEditor .fl-choice {
  display: inline;
  float: left;
}
.fl-prefsEditor .fl-choice label {
  margin-right: 5px;
  border: 1px solid #000;
  border-radius: 5px;
  height: 3em;
  width: 3em;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  line-height: 3em !important;
  padding: 2px;
}
.fl-prefsEditor .fl-choice .fl-preview-A {
  font-size: 2em;
}
.fl-prefsEditor .fl-choice .fl-preview-A:before {
  content: "a";
}
.fl-prefsEditor .fl-choice input:focus ~ label {
  outline: 2px solid #000;
}
.fl-prefsEditor .fl-prefsEditor-onoff .fl-prefsEditor-switch {
  border-radius: 50px;
  border: 1px solid #776d67;
  width: 5em;
  height: 2em;
  background-color: #e6e6e6;
  box-shadow: 1em 1.1em 0 0 rgba(250,250,250,0.53) inset;
  overflow: hidden;
  vertical-align: middle;
  display: block;
  margin-top: 1em;
  transition-duration: 0.2s;
  transition-property: padding-left, width, background-color, margin-left;
  font-size: 1.2em;
  font-weight: 600;
  text-transform: lowercase;
}
.fl-prefsEditor .fl-prefsEditor-onoff input {
  border: 0 none;
  clip: rect(0px, 0px, 0px, 0px);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.fl-prefsEditor .fl-prefsEditor-onoff input:focus + label {
  outline: 2px solid #000;
}
.fl-prefsEditor .fl-prefsEditor-onoff input:checked + label .fl-prefsEditor-switch {
  padding-left: 3em;
  width: 2em;
  background-color: #2da750;
  box-shadow: -1em 1.1em 0.1em 0 rgba(172,216,92,0.63) inset;
}
.fl-prefsEditor .fl-prefsEditor-onoff input:checked + label .fl-prefsEditor-switch .fl-prefsEditor-switch-inner {
  top: -1.6em;
  left: 0.46em;
}
.fl-prefsEditor .fl-prefsEditor-onoff input + label [data-checkboxStateOn]:before {
  content: attr(data-checkboxStateOn);
}
.fl-prefsEditor .fl-prefsEditor-onoff input + label [data-checkboxStateOff]:after {
  content: attr(data-checkboxStateOff);
}
.fl-prefsEditor .fl-prefsEditor-onoff input + label .fl-prefsEditor-switch:before {
  color: #fff;
  border: 1px solid #776d67;
  border-radius: 50px;
  float: left;
  width: 1.9em;
  height: 1.9em;
  text-indent: -1.6em;
  line-height: 1.7em;
  text-shadow: 1px 1px 1px #000;
  background-color: #fff;
  box-shadow: 0.2em 0.2em 0.5em #888;
  background-image: -webkit-linear-gradient(bottom, #cdccca 0%, #f4f4f4 100%);
  background-image: -moz-linear-gradient(bottom, #cdccca 0%, #f4f4f4 100%);
  background-image: -o-linear-gradient(bottom, #cdccca 0%, #f4f4f4 100%);
  background-image: -ms-linear-gradient(bottom, #cdccca 0%, #f4f4f4 100%);
  background-image: linear-gradient(bottom, #cdccca 0%, #f4f4f4 100%);
}
.fl-prefsEditor .fl-prefsEditor-onoff input + label .fl-prefsEditor-switch:after {
  float: left;
  position: relative;
  top: 0.36em;
  left: 0.5em;
}
.fl-prefsEditor .fl-prefsEditor-onoff .fl-prefsEditor-switch-inner {
  border: 1px solid #493a30;
  border-radius: 50px;
  width: 1em;
  height: 1em;
  position: relative;
  left: -2.85em;
  top: 0.46em;
  background-color: #675243;
  box-shadow: 0 -0.2em 0.3em 0.05em rgba(250,250,250,0.3) inset;
  display: inline-block;
}
.fl-prefsEditor .fl-icon-indicator,
.fl-prefsEditor .fl-icon-crossout,
.fl-prefsEditor .fl-icon-big-a,
.fl-prefsEditor .fl-icon-small-a,
.fl-prefsEditor .fl-icon-line-space-expanded,
.fl-prefsEditor .fl-icon-line-space-condensed,
.fl-prefsEditor .fl-icon-contrast,
.fl-prefsEditor .fl-icon-undo,
.fl-prefsEditor .fl-icon-line-space,
.fl-prefsEditor .fl-icon-links,
.fl-prefsEditor .fl-icon-simplify,
.fl-prefsEditor .fl-icon-font,
.fl-prefsEditor .fl-icon-size,
.fl-prefsEditor .fl-icon-text-to-speech,
.fl-prefsEditor .fl-icon-toc {
  font-family: 'InfusionIcons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  float: left;
  margin: 0.2em 0.3em 0 0;
  font-size: 1.5em;
}
.fl-prefsEditor .fl-icon-crossout:before,
.fl-prefsEditor .fl-choice .fl-prefsEditor-contrast-defaultThemeLabel .fl-crossout:before {
  content: "\e004";
}
.fl-prefsEditor .fl-icon-big-a:before {
  content: "\e006";
}
.fl-prefsEditor .fl-icon-small-a:before {
  content: "\e007";
}
.fl-prefsEditor .fl-icon-line-space-expanded:before {
  content: "\e009";
}
.fl-prefsEditor .fl-icon-line-space-condensed:before {
  content: "\e00a";
}
.fl-prefsEditor .fl-icon-indicator:before,
.fl-prefsEditor .fl-choice input:checked + div:before {
  content: "\e003";
}
.fl-prefsEditor .fl-choice .fl-indicator {
  font-family: 'InfusionIcons' !important;
  font-size: 1.3em;
  margin: -0.75em 0 0 0.75em;
  height: 1em;
}
.fl-prefsEditor .fl-choice .fl-prefsEditor-contrast-defaultThemeLabel .fl-crossout {
  font-family: 'InfusionIcons' !important;
  margin-top: -1.75em;
  font-size: 1.85em;
}
.fl-prefsEditor .fl-choice label.fl-theme-prefsEditor-default,
.fl-prefsEditor .fl-choice label.fl-theme-prefsEditor-default span,
.fl-prefsEditor .fl-choice label.fl-prefsEditor-contrast-defaultThemeLabel .fl-crossout {
  background-color: #fff !important;
  border-color: #433f3d !important;
  color: #433f3d !important;
}
.fl-prefsEditor .fl-icon-contrast:before {
  content: "\e005";
}
.fl-prefsEditor .fl-icon-line-space:before {
  content: "\e00b";
}
.fl-prefsEditor .fl-icon-links:before {
  content: "\e00c";
}
.fl-prefsEditor .fl-icon-simplify:before {
  content: "\e00e";
}
.fl-prefsEditor .fl-icon-font:before {
  content: "\e00f";
}
.fl-prefsEditor .fl-icon-size:before {
  content: "\e010";
}
.fl-prefsEditor .fl-icon-text-to-speech:before {
  content: "\e011";
}
.fl-prefsEditor .fl-icon-toc:before {
  content: "\e012";
}
.fl-theme-bw .fl-prefsEditor .fl-slider {
  background: none;
  background-color: #000;
}
.fl-theme-bw .fl-prefsEditor .fl-slider a,
.fl-theme-bw .fl-prefsEditor .fl-slider a:hover,
.fl-theme-bw .fl-prefsEditor .fl-slider .fl-slider-handle,
.fl-theme-bw .fl-prefsEditor .fl-slider .fl-slider-handle:hover {
  background: none;
  background-color: #000;
  box-shadow: none !important;
}
.fl-theme-bw .fl-prefsEditor input[type=range].fl-slider {
  background: none;
  background-color: #000;
}
.fl-theme-bw .fl-prefsEditor input[type=range].fl-slider::-webkit-slider-thumb {
  background: none;
  background-color: #000;
  box-shadow: none !important;
}
.fl-theme-bw .fl-prefsEditor input[type=range].fl-slider::-moz-range-thumb {
  background: none;
  background-color: #000;
  box-shadow: none !important;
}
.fl-theme-bw .fl-prefsEditor input[type=range].fl-slider::-ms-thumb {
  background: none;
  background-color: #000;
  box-shadow: none !important;
}
.fl-theme-bw .fl-prefsEditor .fl-prefsEditor-switch,
.fl-theme-bw .fl-prefsEditor .fl-prefsEditor-switch-inner,
.fl-theme-bw .fl-prefsEditor input + label .fl-prefsEditor-switch:before {
  box-shadow: none !important;
  text-shadow: none;
  color: inherit;
  background-image: none;
  background-color: inherit;
}
.fl-theme-bw .fl-prefsEditor input:focus + label,
.fl-theme-bw .fl-prefsEditor .fl-choice input:focus ~ label {
  outline: 0.2em solid #000;
}
.fl-prefsEditor .fl-choice label.fl-theme-bw,
.fl-prefsEditor .fl-choice label.fl-theme-bw span,
.fl-prefsEditor .fl-choice label.fl-theme-bw .fl-crossout {
  background-color: #fff !important;
  border-color: #000 !important;
  color: #000 !important;
}
.fl-theme-wb .fl-prefsEditor .fl-slider {
  background: none;
  background-color: #fff;
}
.fl-theme-wb .fl-prefsEditor .fl-slider a,
.fl-theme-wb .fl-prefsEditor .fl-slider a:hover,
.fl-theme-wb .fl-prefsEditor .fl-slider .fl-slider-handle,
.fl-theme-wb .fl-prefsEditor .fl-slider .fl-slider-handle:hover {
  background: none;
  background-color: #fff;
  box-shadow: none !important;
}
.fl-theme-wb .fl-prefsEditor input[type=range].fl-slider {
  background: none;
  background-color: #fff;
}
.fl-theme-wb .fl-prefsEditor input[type=range].fl-slider::-webkit-slider-thumb {
  background: none;
  background-color: #fff;
  box-shadow: none !important;
}
.fl-theme-wb .fl-prefsEditor input[type=range].fl-slider::-moz-range-thumb {
  background: none;
  background-color: #fff;
  box-shadow: none !important;
}
.fl-theme-wb .fl-prefsEditor input[type=range].fl-slider::-ms-thumb {
  background: none;
  background-color: #fff;
  box-shadow: none !important;
}
.fl-theme-wb .fl-prefsEditor .fl-prefsEditor-switch,
.fl-theme-wb .fl-prefsEditor .fl-prefsEditor-switch-inner,
.fl-theme-wb .fl-prefsEditor input + label .fl-prefsEditor-switch:before {
  box-shadow: none !important;
  text-shadow: none;
  color: inherit;
  background-image: none;
  background-color: inherit;
}
.fl-theme-wb .fl-prefsEditor input:focus + label,
.fl-theme-wb .fl-prefsEditor .fl-choice input:focus ~ label {
  outline: 0.2em solid #fff;
}
.fl-prefsEditor .fl-choice label.fl-theme-wb,
.fl-prefsEditor .fl-choice label.fl-theme-wb span,
.fl-prefsEditor .fl-choice label.fl-theme-wb .fl-crossout {
  background-color: #000 !important;
  border-color: #fff !important;
  color: #fff !important;
}
.fl-theme-yb .fl-prefsEditor .fl-slider {
  background: none;
  background-color: #ff0;
}
.fl-theme-yb .fl-prefsEditor .fl-slider a,
.fl-theme-yb .fl-prefsEditor .fl-slider a:hover,
.fl-theme-yb .fl-prefsEditor .fl-slider .fl-slider-handle,
.fl-theme-yb .fl-prefsEditor .fl-slider .fl-slider-handle:hover {
  background: none;
  background-color: #ff0;
  box-shadow: none !important;
}
.fl-theme-yb .fl-prefsEditor input[type=range].fl-slider {
  background: none;
  background-color: #ff0;
}
.fl-theme-yb .fl-prefsEditor input[type=range].fl-slider::-webkit-slider-thumb {
  background: none;
  background-color: #ff0;
  box-shadow: none !important;
}
.fl-theme-yb .fl-prefsEditor input[type=range].fl-slider::-moz-range-thumb {
  background: none;
  background-color: #ff0;
  box-shadow: none !important;
}
.fl-theme-yb .fl-prefsEditor input[type=range].fl-slider::-ms-thumb {
  background: none;
  background-color: #ff0;
  box-shadow: none !important;
}
.fl-theme-yb .fl-prefsEditor .fl-prefsEditor-switch,
.fl-theme-yb .fl-prefsEditor .fl-prefsEditor-switch-inner,
.fl-theme-yb .fl-prefsEditor input + label .fl-prefsEditor-switch:before {
  box-shadow: none !important;
  text-shadow: none;
  color: inherit;
  background-image: none;
  background-color: inherit;
}
.fl-theme-yb .fl-prefsEditor input:focus + label,
.fl-theme-yb .fl-prefsEditor .fl-choice input:focus ~ label {
  outline: 0.2em solid #ff0;
}
.fl-prefsEditor .fl-choice label.fl-theme-yb,
.fl-prefsEditor .fl-choice label.fl-theme-yb span,
.fl-prefsEditor .fl-choice label.fl-theme-yb .fl-crossout {
  background-color: #000 !important;
  border-color: #ff0 !important;
  color: #ff0 !important;
}
.fl-theme-by .fl-prefsEditor .fl-slider {
  background: none;
  background-color: #000;
}
.fl-theme-by .fl-prefsEditor .fl-slider a,
.fl-theme-by .fl-prefsEditor .fl-slider a:hover,
.fl-theme-by .fl-prefsEditor .fl-slider .fl-slider-handle,
.fl-theme-by .fl-prefsEditor .fl-slider .fl-slider-handle:hover {
  background: none;
  background-color: #000;
  box-shadow: none !important;
}
.fl-theme-by .fl-prefsEditor input[type=range].fl-slider {
  background: none;
  background-color: #000;
}
.fl-theme-by .fl-prefsEditor input[type=range].fl-slider::-webkit-slider-thumb {
  background: none;
  background-color: #000;
  box-shadow: none !important;
}
.fl-theme-by .fl-prefsEditor input[type=range].fl-slider::-moz-range-thumb {
  background: none;
  background-color: #000;
  box-shadow: none !important;
}
.fl-theme-by .fl-prefsEditor input[type=range].fl-slider::-ms-thumb {
  background: none;
  background-color: #000;
  box-shadow: none !important;
}
.fl-theme-by .fl-prefsEditor .fl-prefsEditor-switch,
.fl-theme-by .fl-prefsEditor .fl-prefsEditor-switch-inner,
.fl-theme-by .fl-prefsEditor input + label .fl-prefsEditor-switch:before {
  box-shadow: none !important;
  text-shadow: none;
  color: inherit;
  background-image: none;
  background-color: inherit;
}
.fl-theme-by .fl-prefsEditor input:focus + label,
.fl-theme-by .fl-prefsEditor .fl-choice input:focus ~ label {
  outline: 0.2em solid #000;
}
.fl-prefsEditor .fl-choice label.fl-theme-by,
.fl-prefsEditor .fl-choice label.fl-theme-by span,
.fl-prefsEditor .fl-choice label.fl-theme-by .fl-crossout {
  background-color: #ff0 !important;
  border-color: #000 !important;
  color: #000 !important;
}
.fl-theme-lgdg .fl-prefsEditor .fl-slider {
  background: none;
  background-color: #bdbdbb;
}
.fl-theme-lgdg .fl-prefsEditor .fl-slider a,
.fl-theme-lgdg .fl-prefsEditor .fl-slider a:hover,
.fl-theme-lgdg .fl-prefsEditor .fl-slider .fl-slider-handle,
.fl-theme-lgdg .fl-prefsEditor .fl-slider .fl-slider-handle:hover {
  background: none;
  background-color: #bdbdbb;
  box-shadow: none !important;
}
.fl-theme-lgdg .fl-prefsEditor input[type=range].fl-slider {
  background: none;
  background-color: #bdbdbb;
}
.fl-theme-lgdg .fl-prefsEditor input[type=range].fl-slider::-webkit-slider-thumb {
  background: none;
  background-color: #bdbdbb;
  box-shadow: none !important;
}
.fl-theme-lgdg .fl-prefsEditor input[type=range].fl-slider::-moz-range-thumb {
  background: none;
  background-color: #bdbdbb;
  box-shadow: none !important;
}
.fl-theme-lgdg .fl-prefsEditor input[type=range].fl-slider::-ms-thumb {
  background: none;
  background-color: #bdbdbb;
  box-shadow: none !important;
}
.fl-theme-lgdg .fl-prefsEditor .fl-prefsEditor-switch,
.fl-theme-lgdg .fl-prefsEditor .fl-prefsEditor-switch-inner,
.fl-theme-lgdg .fl-prefsEditor input + label .fl-prefsEditor-switch:before {
  box-shadow: none !important;
  text-shadow: none;
  color: inherit;
  background-image: none;
  background-color: inherit;
}
.fl-theme-lgdg .fl-prefsEditor input:focus + label,
.fl-theme-lgdg .fl-prefsEditor .fl-choice input:focus ~ label {
  outline: 0.2em solid #bdbdbb;
}
.fl-prefsEditor .fl-choice label.fl-theme-lgdg,
.fl-prefsEditor .fl-choice label.fl-theme-lgdg span,
.fl-prefsEditor .fl-choice label.fl-theme-lgdg .fl-crossout {
  background-color: #555 !important;
  border-color: #bdbdbb !important;
  color: #bdbdbb !important;
}