infusion/dist/assets/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: 'PrefsFramework-Icons';
  src: url("../fonts/PrefsFramework-Icons.woff");
}
.fl-prefsEditor {
  font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
/* height and width specified in ems instead of rems
       to respond to emphasize links preferences */
}
.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 {
  margin: 0 auto;
  display: block;
  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#textFont option *.open-dyslexic {
  font-family: OpenDyslexic;
}
.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 {
  font-size: 1em;
}
.fl-prefsEditor .fl-prefsEditor-layout div,
.fl-prefsEditor .fl-prefsEditor-links div {
  margin-left: 25px;
}
.fl-prefsEditor .fl-inputs div[class*='fl-icon-'] {
  font-size: 1.5em;
  margin-top: -0.15em;
}
.fl-prefsEditor .fl-choices {
  display: flex;
  justify-content: center;
}
.fl-prefsEditor .fl-choices .fl-choice input.fl-hidden-accessible {
  position: relative;
  z-index: -2;
  top: 1rem;
  left: 1rem;
}
.fl-prefsEditor .fl-choices .fl-choice label {
  margin-right: 5px;
  border: 1px solid #000;
  border-radius: 5px;
  height: 2.5em;
  width: 2.5em;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  line-height: 2.2em !important;
  padding: 2px;
  overflow: hidden;
}
.fl-prefsEditor .fl-choices .fl-choice:last-child label {
  margin-right: 0;
}
.fl-prefsEditor .fl-choices .fl-choice .fl-preview-A {
  font-size: 1.7em;
  letter-spacing: normal;
}
.fl-prefsEditor .fl-choices .fl-choice .fl-preview-A:before {
  content: "a";
}
.fl-prefsEditor .fl-choices .fl-choice input:focus ~ label {
  outline: 2px solid #000;
}
.fl-prefsEditor .fl-textfieldStepper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.fl-prefsEditor .fl-textfieldStepper-focusContainer {
  padding: 0.2em;
}
.fl-prefsEditor .fl-textfieldStepper *:focus {
  outline: none;
}
.fl-prefsEditor .fl-textfieldStepper-focus {
  outline: solid 0.2em #000;
}
.fl-prefsEditor .fl-textfieldStepper .fl-textfieldStepper-textField {
  margin: 0 0.5em;
  width: 4em;
  height: 2em;
  text-align: center;
}
.fl-prefsEditor .fl-textfieldStepper .fl-textfieldStepper-button {
  border: 2px solid #000;
  border-radius: 0.4rem;
  background-color: #fff;
  height: 2.4375em;
  width: 2.4375em;
}
.fl-prefsEditor .fl-textfieldStepper .fl-textfieldStepper-button:disabled {
  opacity: 0.3;
}
.fl-prefsEditor .fl-prefsEditor-onoff .fl-switchUI {
  display: flex;
  justify-content: center;
  align-items: center;
}
.fl-prefsEditor .fl-prefsEditor-onoff .fl-switchUI-control {
  width: 5.4em;
  border: 0.15em solid currentColor;
  border-radius: 2em;
  margin: 0 1em;
  display: flex;
  align-items: center;
  background-color: #fff;
}
.fl-prefsEditor .fl-prefsEditor-onoff .fl-switchUI-control:focus {
  outline: none;
  box-shadow: 0 0 0 0.2em #fff, 0 0 0 0.35em #000;
}
.fl-prefsEditor .fl-prefsEditor-onoff .fl-switchUI-control[aria-checked=true] {
  justify-content: flex-end;
}
.fl-prefsEditor .fl-prefsEditor-onoff .fl-switchUI-controlKnob {
  height: 1.8em;
  width: 1.8em;
  background-color: currentColor;
  border-radius: 1.8em;
  display: inline-block;
  margin: 0.2em;
}
.fl-prefsEditor .fl-prefsEditor-onoff .fl-switchUI-text {
  text-transform: uppercase;
  font-weight: 600;
}
.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-inputs,
.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,
.fl-prefsEditor .fl-icon-letter-space,
.fl-prefsEditor .fl-icon-letter-space-expanded,
.fl-prefsEditor .fl-icon-letter-space-condensed,
.fl-prefsEditor .fl-icon-captions,
.fl-prefsEditor .fl-icon-word-space,
.fl-prefsEditor .fl-icon-word-space-condensed,
.fl-prefsEditor .fl-icon-word-space-expanded,
.fl-prefsEditor .fl-icon-syllabification,
.fl-prefsEditor .fl-icon-language {
  font-family: 'PrefsFramework-Icons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  margin-right: 0.3em;
  font-size: 1.5em;
}
.fl-prefsEditor .fl-icon-crossout:before,
.fl-prefsEditor .fl-choice .fl-prefsEditor-themePicker-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-letter-space-expanded:before {
  content: "\e000";
}
.fl-prefsEditor .fl-icon-letter-space-condensed:before {
  content: "\e001";
}
.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: 'PrefsFramework-Icons' !important;
  margin-top: -1.5em;
  height: 1em;
  width: calc(100% - 5px);
  text-align: center;
  font-size: 1.25em;
}
.fl-prefsEditor .fl-choice:last-child .fl-indicator {
  width: 100%;
}
.fl-prefsEditor .fl-choice .fl-prefsEditor-themePicker-defaultThemeLabel .fl-crossout {
  font-family: 'PrefsFramework-Icons' !important;
  background-color: transparent !important;
  margin-top: -1.05em;
  font-size: 2.2em;
}
.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-themePicker-defaultThemeLabel .fl-crossout {
  background-color: #fff !important;
  border-color: #433f3d !important;
  color: #433f3d !important;
}
.fl-prefsEditor .fl-icon-letter-space:before {
  content: "\e002";
}
.fl-prefsEditor .fl-icon-contrast:before {
  content: "\e005";
}
.fl-prefsEditor .fl-icon-line-space:before {
  content: "\e00b";
}
.fl-prefsEditor .fl-icon-inputs:before {
  content: "\e00c";
}
.fl-prefsEditor .fl-icon-simplify:before {
  content: "\e00d";
}
.fl-prefsEditor .fl-icon-settings: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-prefsEditor .fl-icon-captions:before {
  content: "\e013";
}
.fl-prefsEditor .fl-icon-word-space:before {
  content: "\e014";
}
.fl-prefsEditor .fl-icon-word-space-condensed:before {
  content: "\e015";
}
.fl-prefsEditor .fl-icon-word-space-expanded:before {
  content: "\e016";
}
.fl-prefsEditor .fl-icon-syllabification:before {
  content: "\e017";
}
.fl-prefsEditor .fl-icon-language:before {
  content: "\e018";
}
.fl-theme-bw .fl-prefsEditor .fl-switchUI-control:focus {
  box-shadow: 0 0 0 0.2em #fff, 0 0 0 0.35em #000;
}
.fl-theme-bw .fl-prefsEditor .fl-switchUI-controlKnob {
  background-color: #000 !important;
}
.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-switchUI-control:focus {
  box-shadow: 0 0 0 0.2em #000, 0 0 0 0.35em #fff;
}
.fl-theme-wb .fl-prefsEditor .fl-switchUI-controlKnob {
  background-color: #fff !important;
}
.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-switchUI-control:focus {
  box-shadow: 0 0 0 0.2em #000, 0 0 0 0.35em #ff0;
}
.fl-theme-yb .fl-prefsEditor .fl-switchUI-controlKnob {
  background-color: #ff0 !important;
}
.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-switchUI-control:focus {
  box-shadow: 0 0 0 0.2em #ff0, 0 0 0 0.35em #000;
}
.fl-theme-by .fl-prefsEditor .fl-switchUI-controlKnob {
  background-color: #000 !important;
}
.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-switchUI-control:focus {
  box-shadow: 0 0 0 0.2em #555, 0 0 0 0.35em #bdbdbb;
}
.fl-theme-lgdg .fl-prefsEditor .fl-switchUI-controlKnob {
  background-color: #bdbdbb !important;
}
.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;
}
.fl-theme-gd .fl-prefsEditor .fl-switchUI-control:focus {
  box-shadow: 0 0 0 0.2em #222, 0 0 0 0.35em #888;
}
.fl-theme-gd .fl-prefsEditor .fl-switchUI-controlKnob {
  background-color: #888 !important;
}
.fl-prefsEditor .fl-choice label.fl-theme-gd,
.fl-prefsEditor .fl-choice label.fl-theme-gd span,
.fl-prefsEditor .fl-choice label.fl-theme-gd .fl-crossout {
  background-color: #222 !important;
  border-color: #888 !important;
  color: #888 !important;
}
.fl-theme-gw .fl-prefsEditor .fl-switchUI-control:focus {
  box-shadow: 0 0 0 0.2em #fff, 0 0 0 0.35em #6c6c6c;
}
.fl-theme-gw .fl-prefsEditor .fl-switchUI-controlKnob {
  background-color: #6c6c6c !important;
}
.fl-prefsEditor .fl-choice label.fl-theme-gw,
.fl-prefsEditor .fl-choice label.fl-theme-gw span,
.fl-prefsEditor .fl-choice label.fl-theme-gw .fl-crossout {
  background-color: #fff !important;
  border-color: #6c6c6c !important;
  color: #6c6c6c !important;
}
.fl-theme-bbr .fl-prefsEditor .fl-switchUI-control:focus {
  box-shadow: 0 0 0 0.2em #b96, 0 0 0 0.35em #000;
}
.fl-theme-bbr .fl-prefsEditor .fl-switchUI-controlKnob {
  background-color: #000 !important;
}
.fl-prefsEditor .fl-choice label.fl-theme-bbr,
.fl-prefsEditor .fl-choice label.fl-theme-bbr span,
.fl-prefsEditor .fl-choice label.fl-theme-bbr .fl-crossout {
  background-color: #b96 !important;
  border-color: #000 !important;
  color: #000 !important;
}