File: examples/MSO-Theme/FormGenerator.css

@charset "ISO-8859-1";

/* some custom-props to make it easier to adjust the styles */
:root
{
    --theme-font: Verdana, Arial, Helvetica, sans-serif;

    --theme-size-h1: 14px;
    --theme-size-h2: 13px;
    --theme-size-h3: 11px;
    --theme-size-h4: 10px;
    --theme-size-std: 11px;
    --theme-size-legend: 12px;
    --theme-size-hint: 9px;

    --theme-border-light: transparent;
    --theme-border-medium: #BBBBBB;
    --theme-border-dark: #333333;
    --theme-border-disabled: #666666;
    --theme-border-error: red;

    --radius-small: 0px;
    --radius-medium: 0px;
    --radius-big: 0px;

    --theme-bkg-light: #FFFFFF;
    --theme-bkg-medium: #CCCCCC;
    --theme-bkg-dark: #333333;
    --theme-bkg-selected: #444444;
    --theme-bkg-hover: #444444;
    --theme-bkg-disabled: #EEEEEE;
    --theme-bkg-mandatory: #FFFFFF;
    --theme-bkg-error: lightyellow;
    --theme-bkg-info: #FFFFD2;

    --theme-txt-light: #FFFFFF;
    --theme-txt-medium: #222222;
    --theme-txt-dark: #000000;
    --theme-txt-selected: #EEEEEE;
    --theme-txt-hover: #EEEEEE;
    --theme-txt-disabled: #444444;
    --theme-txt-error: darkred;
    --theme-txt-info: #333333;

    --gradient-start-h1: #AAAAAA;
    --gradient-stop-h1: #AAAAAA;
    --gradient-start-btn: #EEEEEE;
    --gradient-stop-btn: #EEEEEE;
    --gradient-start-btn-disabled: #999999;
    --gradient-stop-btn-disabled: #999999;
    --gradient-start-btn-hover: #BBBBBB;
    --gradient-stop-btn-hover: #BBBBBB;

    --theme-txt-tip: darkblue;
}

form
{
    width: 100%;
    position: relative;
    box-sizing: border-box;
    font-family: var(--theme-font);
    font-size: var(--theme-size-std);
    border-radius: var(--radius-big);
    padding: 0px;
    background-color: var(--theme-bkg-light);
}

form h1
{
    font-size: var(--theme-size-h1);
    font-weight: bold;
    color: var(--theme-txt-dark);
    padding: 10px 5px;
    border-radius: inherit;
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
    background-image: linear-gradient(var(--gradient-start-h1), var(--gradient-stop-h1));
    margin: 0;
}

form h2
{
    font-size: var(--theme-size-h2);
    font-weight: bold;
}

form h3
{
    font-size: var(--theme-size-h3);
    font-weight: bold;
}

form h4
{
    font-size: var(--theme-size-h4);
    font-weight: bold;
}

form fieldset
{
    color: var(--theme-txt-dark);
    border: 1px solid var(--theme-border-light);
    border-radius: var(--radius-medium);
    line-height: 190%;
    margin: 8px 5px 5px 5px;
    padding: 4px 0px 4px 10px;
    box-sizing: border-box;
}

form legend
{
    font-size: var(--theme-size-legend);
    font-weight: bold;
    color: var(--theme-txt-medium);
    padding: 0px 5px;
    margin: 0px 0px 0px -10px;
    background-color: var(--theme-bkg-medium);
    width: 100%;
}

form legend img
{
    height: 12px;
}

form hr
{
    border: none;
    border-top: 1px solid var(--theme-border-medium);
}

form label
{
    color: var(--theme-txt-dark);
    display: block;
}

form label.radio
{
    padding-right: 8px;
}

form input, form textarea, form select
{
    font-size: var(--theme-size-std);
    font-weight: normal;
    font-family: var(--theme-font);
    border: 1px solid var(--theme-border-medium);
    margin: 2px 0;
}

form input[disabled],
form select[disabled],
form textarea[disabled]
{
    color: var(--theme-txt-disabled);
    background-color: var(--theme-bkg-disabled);
}

form input[readonly],
form select[readonly]
{
    color: var(--theme-txt-disabled);
    background-color:transparent;
}

form ::placeholder
{
    color: var(--theme-border-light);
    opacity: 1;
}

form ::-ms-input-placeholder
{
    color: var(--theme-border-light);
}

form textarea
{
    font-size: var(--theme-size-std);
    font-weight: normal;
    font-family: var(--theme-font);
    border: 1px solid var(--theme-border-medium);
}

form .error
{
    color: var(--theme-border-error);
}

form .numeric
{
    font-family: 'Inconsolata', sans-serif !important;
    font-size: 14px !important; /* Inconsolata appears smaller than 'normal' sans-serif */
}

form .inputOK, form .inputOK_R
{
    border: 1px solid var(--theme-border-medium);
}

form .inputMand, form .inputMand_R
{
    border: 1px solid var(--theme-border-dark);
    background-color: var(--theme-bkg-mandatory);
}

form .inputError, form .inputMError, form .inputError_R, form .inputMError_R
{
    color: var(--theme-txt-error);
    background-color: var(--theme-bkg-error);
    border: 2px solid var(--theme-border-error);
}

form .inputError:focus, form .inputMError:focus,
form .inputError_R:focus, form .inputMError_R:focus
{
    border: 2px solid var(--theme-border-error) !important;
    outline: none;
 }

form .inputOK_R, form .inputMand_R, form .inputError_R, form .inputMError_R
{
    text-align:right;
}

form input[type=checkbox]
{
    vertical-align: bottom;
    margin: 2px 4px 4px 0px;
}

form input[type=radio]
{
    margin-right: 8px;
    margin-top: 4px;
}

form input[type=submit],
form input[type=button],
forminput[type=file],
form button
{
    border: 1px solid var(--theme-border-dark);
    border-radius: var(--radius-small);
    padding: 2px 10px;
    background: linear-gradient(var(--gradient-start-btn), var(--gradient-stop-btn));
    margin: 5px 0 1px 0;
}

form input[type=submit]:disabled,
form input[type=button]:disabled,
form input[type=file]:disabled,
form button:disabled
{
    border: 1px solid var(--theme-border-disabled);
    color: var(--theme-txt-disabled);
    background: linear-gradient(var(--gradient-start-btn-disabled), var(--gradient-stop-btn-disabled));
}

form input[type=submit]:hover:enabled,
form input[type=button]:hover:enabled,
form input[type=file]:hover:enabled,
form button:hover:enabled
{
    background: linear-gradient(var(--gradient-start-btn-hover), var(--gradient-stop-btn-hover));
}

form .forminfo
{
    box-sizing: border-box;
    color: var(--theme-txt-info);
    border: 1px solid var(--theme-border-medium);
    border-radius: var(--radius-medium);
    padding-left: 5px;
    margin: 4px 0px;
    background: var(--theme-bkg-info) url(info.png) no-repeat right  4px top 3px;
}

form .sbSelect
{
    opacity: 0;
    width: 100%;
    position: relative;
}

form .sbBtn
{
    position: absolute;
    width: 100%;
    right: 0px;
    top: 0px;
    padding-top: 0px;
    height: 20px;
    margin: 0;
}

#buttonbox
{
    clear: both;
    margin: 10px 10px 0 10px;
    padding:  10px 0px 10px 0px;    /* t, r, b, l */
    border-top: 1px solid var(--theme-border-medium);
}

#buttonbox input[type=submit], #buttonbox input[type=button], #buttonbox input[type=file]
{
    margin-left:  3px;
    margin-right: 3px;
}

form img.picker
{
    margin-left: 5px;
    vertical-align: text-bottom;
}

form img.picker_top
{
    margin-left: 5px;
    vertical-align: top;
    padding-top: 5px;
}

form .readonly
{
    color: var(--theme-txt-disabled);
}

form .hint
{
    color: var(--theme-txt-disabled);
    font-size: var(--theme-size-hint);
    line-height: 150%;
    padding-top: 5px;
}

form .slider
{
	display: inline-flex;
	height: calc(var(--theme-size-std) + 8px);
    background-image: linear-gradient(to right, var(--theme-border-medium), var(--theme-border-medium));
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-position: left 55%;
    vertical-align: top;
    padding-top: 2px;
}

form .slider_label
{
    display: block;
    vertical-align: text-bottom;
    font-weight: bold;
}

form input[type=range]
{
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    border: unset;
    cursor: pointer;
    outline: 0;
    user-select: auto;
    margin: 0;
}

form input[type=range]:focus
{
    outline: none;
    border: 1px dotted var(--theme-border-medium);
}

form input[type=range]::-ms-track
{
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

form input[type=range]::-webkit-slider-thumb
{
    -webkit-appearance: none;
    box-shadow: 1px 1px 1px var(--theme-border-dark), 0px 0px 1px var(--theme-border-medium);
    border: 1px solid var(--theme-border-dark);
    height: var(--theme-size-legend);
    width: var(--theme-size-legend);
    border-radius: 50%;
    background: var(--theme-bkg-medium);
    cursor: pointer;
}

form input[type=range]::-moz-range-thumb
{
    box-shadow: 1px 1px 1px var(--theme-border-dark), 0px 0px 1px var(--theme-border-medium);
    border: 1px solid var(--theme-border-dark);
    height: var(--theme-size-legend);
    width: var(--theme-size-legend);
    border-radius: 7px;
    background: var(--theme-bkg-medium);
    cursor: pointer;
}

form input[type=range]::-ms-thumb
{
    box-shadow: 1px 1px 1px var(--theme-border-dark), 0px 0px 1px var(--theme-border-medium);
    border: 1px solid var(--theme-border-dark);
    height: var(--theme-size-legend);
    width: var(--theme-size-legend);
    border-radius: 7px;
    background: var(--theme-bkg-medium);
    cursor: pointer;
}

#errorPopup
{
    display: none;
    position: absolute;
    width: calc(100% - 14px);
    border: 1px solid var(--theme-border-dark);
    color: var(--theme-txt-error);
    background: var(--theme-bkg-error) url(window_close.png) no-repeat right 5px top 5px;
    margin: 10px 7px;
    padding: 5px 25px 5px 5px;
    box-sizing: border-box;
    border-radius: var(--radius-small);
    font-weight: bold;
}

#JSError
{
    width: 80%;
    color: black;
    background-color: orange;
    border: 1px solid black;
    font-size: 1em;
}

#JSError h1
{
    background-color: #f57900;
    padding: 2px 4px;
    margin: 0px;
    border-bottom: 1px solid;
    color: black;
    font-size: 1em;
}

#JSError p
{
    margin: 5;
}

/**
 * styles for the wraper of the 'modal' rich filemanager running in an iframe
 * Note: the styles of the filemanager itself have to be defined in the
 * rich filemanager - theme! 
 */

#fm-container
{
    z-index: 10100; /** Because CKEditor image dialog was at 10010 */
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    border: 1px solid black;;
    position: fixed;
    background-color: var(--theme-bkg-light);
}

#fm-container h1
{
    width: calc(100% - 10px);
    background-color: var(--theme-bkg-medium);
    margin: 5px 5px 0px 5px;
    padding: 4px 5px;
    height: 24px;
    font-family: arial;
    font-size: var(--theme-size-h1);
    font-weight: bold;
    box-sizing: border-box;
    background-image: url(window_close.png);
    background-repeat: no-repeat;
    background-position: top 4px right 4px;
}

#fm-container h1 img
{
    float: right;
}

#fm-iframe
{
    width: 100%;
    height: calc(100% - 29px);
    border: none;
}

/**
 * styles for the date and time picker generated by dtsel.js
 *
 * hint: to 'style' the picker in the devtools, set breakpoint at line 266 in dtsel.js
 */

.date-selector-wrapper {
    font-family: var(--theme-font);
    border: 1px solid var(--theme-border-dark);
    border-radius: var(--radius-big);
    width: 160px;
    padding: 0px;
    background-color: var(--theme-bkg-dark);
    box-shadow: 1px 1px 10px 1px #5c5c5c;
    position: absolute;
    font-size: var(--theme-size-hint);
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    /* user-select: none; */
}

.date-selector-wrapper .cal-header
{
    display: flex;
    width: 100%;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.date-selector-wrapper .cal-header .cal-nav
{
    cursor: pointer;
    font-weight: bold;
    background-color: var(--theme-bkg-dark);
    color: var(--theme-txt-light);
}

.date-selector-wrapper .cal-header .cal-nav-prev
{
    flex: 0.15;
    border-right: 1px solid var(--theme-txt-light);
    border-radius: unset;
    border-top-left-radius: inherit;
}

.date-selector-wrapper .cal-header .cal-nav-next
{
    flex: 0.15;
    border-left: 1px solid var(--theme-txt-light);
    border-radius: unset;
    border-top-right-radius: inherit;
}

.date-selector-wrapper .cal-header .cal-nav-current
{
    flex: 0.70;
}

.date-selector-wrapper .cal-header .cal-nav-prev:hover,
.date-selector-wrapper .cal-header .cal-nav-next:hover,
.date-selector-wrapper .cal-header .cal-nav-current:hover
{
    color: var(--theme-txt-dark);
    background-color: var(--theme-bkg-medium);
}

.date-selector-wrapper .cal-body
{
    padding-bottom: var(--radius-big);
}

.date-selector-wrapper .cal-row
{
    display: flex;
    width: 100%;
    height: 25px;
    line-height: 25px;
    text-align: center;
}

.date-selector-wrapper .cal-cell
{
    cursor: pointer;
    background-color: var(--theme-bkg-light);
    border: 1px solid var(--theme-border-light);
}

.date-selector-wrapper .cal-cell:hover
{
    color: var(--theme-txt-dark);
    background-color: var(--theme-bkg-medium);
    border: 1px solid var(--theme-border-error);
}

.date-selector-wrapper .cal-value
{
    color: var(--theme-txt-selected);
    background-color: var(--theme-bkg-selected);
}

.date-selector-wrapper .cal-days .cal-cell
{
    flex: 0.143;
}

.date-selector-wrapper .cal-days .cal-day-names
{
    height: 20px;
    line-height: 20px;
}

.date-selector-wrapper .cal-days .cal-day-names .cal-cell
{
    cursor: default;
    height: 20px;
    line-height: 20px;
    font-weight: bold;
    background-color: var(--theme-bkg-medium);
    border: 1px solid var(--theme-border-medium);
}

.date-selector-wrapper .cal-days .cal-day-names .cal-cell:hover
{
    border: 1px solid var(--theme-border-medium);
}

.date-selector-wrapper .cal-days .cal-cell-prev,
.date-selector-wrapper .cal-days .cal-cell-next
{
    color: var(--theme-txt-disabled);
    background-color: var(--theme-bkg-disabled);
}

.date-selector-wrapper .cal-months .cal-row,
.date-selector-wrapper .cal-years .cal-row
{
    height: 45px;
    line-height: 45px;
}

.date-selector-wrapper .cal-months .cal-cell,
.date-selector-wrapper .cal-years .cal-cell
{
    flex: 0.25;
}

.date-selector-wrapper .cal-footer
{
    border-radius: inherit;
    background-color: var(--theme-bkg-light);
}

.date-selector-wrapper .cal-time
{
    display: flex;
    justify-content: flex-start;
    height: 27px;
    line-height: 27px;
    border-radius: inherit;
    background-color: var(--theme-bkg-light);
}

.date-selector-wrapper .cal-time-label
{
    flex: 0.22;
    text-align: left;
    padding-left: 5px
}

.date-selector-wrapper .cal-time-value
{
    flex: 0.18;
    text-align: center;
    font-weight: bold;
}

.date-selector-wrapper .cal-time-slider
{
    flex: 0.6;
    background-image: linear-gradient(to right, var(--theme-border-medium), var(--theme-border-medium));
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-position: left 55%;
    height: 100%;
    margin-right: 5px;
}

.date-selector-wrapper .cal-time-slider input[type=range]
{
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}

.date-selector-wrapper .cal-time-slider input[type=range]:focus
{
    outline: none;
}

.date-selector-wrapper .cal-time-slider input[type=range]::-ms-track
{
    width: 100%;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

.date-selector-wrapper .cal-time-slider input[type=range]
{
    width: 100%;
    -webkit-appearance: none;
    background: 0 0;
    cursor: pointer;
    height: 100%;
    outline: 0;
    user-select: auto;
}

.date-selector-wrapper .cal-time-slider input[type=range]::-webkit-slider-thumb
{
    -webkit-appearance: none;
    margin-top: -2px;
    box-shadow: 1px 1px 1px var(--theme-border-dark), 0px 0px 1px var(--theme-border-medium);
    border: 1px solid var(--theme-border-dark);
    height: 14px;
    width: 14px;
    border-radius: 7px;
    background: var(--theme-bkg-medium);
    cursor: pointer;
}

.date-selector-wrapper .cal-time-slider input[type=range]::-moz-range-thumb
{
    box-shadow: 1px 1px 1px var(--theme-border-dark), 0px 0px 1px var(--theme-border-medium);
    border: 1px solid var(--theme-border-dark);
    height: 14px;
    width: 14px;
    border-radius: 7px;
    background: var(--theme-bkg-medium);
    cursor: pointer;
}

.date-selector-wrapper .cal-time-slider input[type=range]::-ms-thumb
{
    box-shadow: 1px 1px 1px var(--theme-border-dark), 0px 0px 1px var(--theme-border-medium);
    border: 1px solid var(--theme-border-dark);
    height: 14px;
    width: 14px;
    border-radius: 7px;
    background: var(--theme-bkg-medium);
    cursor: pointer;
}