MicroCommunityWeb/public/formjs/css/form-js.css

/**
 * Theming
 */
 .fjs-container {
    --color-blue-base-65: #4d90ff;
    --color-blue-base-65-opacity-10: rgba(77, 144, 255, 0.1);
    --color-blue-darken-48: #005df7;
    --color-blue-darken-55: #1a70ff;
    --color-blue-darken-62: #3c85ff;
    --color-blue-lighten-75: #80b0ff;
    --color-blue-lighten-82: #a2c5ff;
    --color-blue-lighten-93: #dbe9ff;
  
    --color-silver-base-97: #f8f8f8;
    --color-silver-lighten-99: #fcfcfc;
    --color-silver-darken-80: #cdcdcd;
    --color-silver-darken-87: #dedede;
    --color-silver-darken-94: #efefef;
  
    --color-grey-base-40: #666666;
    --color-grey-lighten-56: #909090;
    --color-grey-darken-23: #3b3b3b;
    --color-grey-darken-30: #4c4c4c;
    --color-grey-darken-33: #535353;
  
    --color-red-base-62: #ff3d3d;
    --color-red-darken-38: #C20000;
    --color-red-lighten-85: #ffb3b3;
  
    --color-black: #000000;
    --color-white: #ffffff;
  
    --color-background: var(--color-white);
    --color-background-disabled: var(--color-silver-darken-94);
    --color-text: var(--color-grey-darken-23);
    --color-text-light: var(--color-grey-lighten-56);
    --color-text-lighter: var(--color-grey-base-40);
    --color-text-inverted: var(--color-white);
    --color-borders: var(--color-grey-lighten-56);
    --color-borders-disabled: var(--color-silver-darken-80);
    --color-warning: var(--color-red-darken-38);
    --color-accent: var(--color-blue-darken-62);
    --color-accent-dark: var(--color-blue-darken-48);
  
    --font-family: 'IBM Plex Sans', sans-serif;
  
    height: 100%;
  }
  
  /**
   * Layout styles
   */
  .fjs-container .fjs-vertical-layout {
    display: flex;
    flex-direction: column;
  }
  
  .fjs-container .fjs-columns {
    display: flex;
    flex-direction: row;
  }
  
  .fjs-container .fjs-column {
    flex-grow: 1;
  }
  
  .fjs-container img {
    max-width: 100%;
  }
  
  /**
   * Visual styles
   */
  .fjs-container .fjs-form {
    font-family: var(--font-family);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 400;
  
    color: var(--color-text);
    background-color: var(--color-background);
  
    position: relative;
  }
  
  .fjs-container .fjs-form * {
    box-sizing: border-box;
  }
  
  .fjs-container .fjs-form-field {
    margin: 16px;
  }
  
  .fjs-container .fjs-form-field-placeholder {
    color: var(--color-text-light);
  }
  
  .fjs-container .fjs-input,
  .fjs-container .fjs-textarea,
  .fjs-container .fjs-select {
    border-color: var(--color-borders);
    background-color: var(--color-background);
  }
  .fjs-container .fjs-input::placeholder,
  .fjs-container .fjs-textarea::placeholder,
  .fjs-container .fjs-select > option:disabled,
  .fjs-container .fjs-select [disabled] {
    font-style: italic;
    letter-spacing: .25px;
  
    color: var(--color-text-light);
  }
  
  .fjs-container .fjs-form-field-label {
    display: flex;
    align-items: center;
  }
  
  .fjs-container .fjs-form-field-description {
    display: block;
    color: var(--color-text-lighter);
  }
  
  .fjs-container .fjs-form-field-label,
  .fjs-container .fjs-form-field-description {
    margin: 4px 0;
  }
  
  .fjs-container .fjs-form-field.required label::after,
  .fjs-container .fjs-form-field.required .group-title::after {
    content: "*";
  }
  
  .fjs-container .fjs-checkbox.group.required label::after,
  .fjs-container .fjs-radio.required label::after {
    display: none;
  }
  
  .fjs-container .fjs-input[type=text],
  .fjs-container .fjs-input[type=number],
  .fjs-container .fjs-button[type=submit],
  .fjs-container .fjs-button[type=reset],
  .fjs-container .fjs-textarea,
  .fjs-container .fjs-select {
    display: block;
    width: 100%;
    padding: 8px;
    margin: 4px 0;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
  }
  
  .fjs-container .fjs-textarea {
    height: 90px;
  }
  
  .fjs-container .fjs-radio {
    display: flex;
    flex-direction: column;
  }
  
  .fjs-container .fjs-input[type=checkbox],
  .fjs-container .fjs-input[type=radio] {
    margin: 6px 10px 6px 4px;
  }
  
  .fjs-container .fjs-button[type=submit] {
    color: var(--color-text-inverted);
    background-color: var(--color-accent);
    border-color: var(--color-accent);
  }
  
  .fjs-container .fjs-button[type=reset] {
    color: var(--color-text);
    background-color: transparent;
    border-color: var(--color-borders);
  }
  
  .fjs-container .fjs-button[type=submit],
  .fjs-container .fjs-button[type=reset] {
    min-width: 100px;
    width: auto;
  }
  
  .fjs-container .fjs-button[type=submit] {
    font-weight: 600;
  }
  
  .fjs-container .fjs-input[type=text]:focus,
  .fjs-container .fjs-input[type=number]:focus,
  .fjs-container .fjs-button[type=submit]:focus,
  .fjs-container .fjs-button[type=reset]:focus,
  .fjs-container .fjs-textarea:focus,
  .fjs-container .fjs-select:focus {
    outline: none;
    padding: 7px;
    border-width: 2px;
  }
  
  .fjs-container .fjs-button[type=submit]:focus {
    border-color: var(--color-accent-dark);
  }
  
  .fjs-container .fjs-input:disabled,
  .fjs-container .fjs-textarea:disabled,
  .fjs-container .fjs-select:disabled {
    background-color: var(--color-background-disabled);
    border-color: var(--color-borders-disabled);
  }
  
  .fjs-container .fjs-button[type=submit]:disabled,
  .fjs-container .fjs-button[type=reset]:disabled {
    color: var(--text-light);
    background-color: var(--color-background-disabled);
    border-color: var(--color-borders-disabled);
  }
  
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-input,
  .fjs-container .fjs-form-field.fjs-has-errors .fjs-textarea {
    border-color: var(--color-warning);
  }
  
  .fjs-container .fjs-form-field-error {
    color: var(--color-warning);
  }
  
  .fjs-container .fjs-form-field-error > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  .fjs-container .fjs-form-field-error > ul > li {
    list-style-type: none;
  }
  
  .fjs-container .fjs-form-field-text a {
    color: var(--color-blue-darken-48);
  }