-312 Removals
+239 Additions
/* -------------------------------------- /* --------------------------------------
form.css form.css
Contient les elements : Contient les elements :
- button, - button,
- formulaire, - formulaire,
-----------------------------------------*/ ---------------------------------------- */
/* -- Boutons et class boutons -- */ /* -- Boutons et class boutons -- */
/* ------------------------------ */ /* ------------------------------ */
/* --- Normal --- */ /* --- Normal --- */
button, button,
.button { .button {
padding: 0.3em 1em; margin: 0.618em;
padding: 0.309em 1em;
height: auto; height: auto;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%, rgba(56, 56, 56, 0.10) 100%); border-width: 1px;
background-color: #F1F1F1;
border-style: solid; border-style: solid;
border-width: 1px; border-color: transparent;
border-color: #E1E1E1 #D1D1D1 #C9C9C9 #DDDDDD;
border-radius: 1px;
box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);
color: #777777;
text-align: center; text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);
white-space: nowrap; white-space: nowrap;
transition: all 0.2s linear; transition: all 0.2s linear;
} }
button:hover, button:hover,
.button-hover { .button-hover {
background-color: #F9F9F9;
transition: all 0.3s linear; transition: all 0.3s linear;
} }
button:active, button:active,
.button-active { .button-active {
background-color: #F5F5F5;
border-color: #DDDDDD;
box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);
transition: all 0.2s linear; transition: all 0.2s linear;
} }
/* --- Petit bouton --- */ /* --- Petit bouton --- */
button.small, button.small,
.button-small { .button-small {
padding: 0.2em 0.5em; padding: 0.228em 0.618em;
font-size: 1.1rem; font-size: 0.809em;
}
/* --- Bouton de formulaire --- */
button.submit {
background-color: #366493;
border-color: #1E5083;
color: #F1F1F1;
text-shadow: none;
}
button.submit:hover {
background-color: #517BA6;
border-color: #366493;
color: #FFFFFF;
} }
/* --- Bouton basic --- */ /* --- Bouton basic --- */
.basic-button { .basic-button {
display: inline-block; display: inline-block;
margin: 1px; margin: 0.1618em;
padding: 1px 6px; padding: 0.1618em 0.309em;
border: none; border: none;
font-weight: bold; font-weight: bold;
color: #FFFFFF;
} }
.basic-button:hover { .basic-button:hover {
color: #FAFAFA;
text-decoration: none; text-decoration: none;
} }
/* --- Bouton basic avec couleur de base --- */
.basic-button { background-color: #366493; }
.basic-button:hover { background-color: #517BA6; }
/* --- Bouton basic avec couleur alternative --- */
.basic-button.alt { background-color: #E2A447; }
.basic-button.alt:hover { background-color: #FFC672; }
/* --- field button --- */
.field-button {
display: inline-block;
font-size: 0;
white-space: nowrap;
}
.field-button button {
margin-left: -1px;
padding: 4px 8px;
font-size: 11px;
}
/* -- Formulaires -- */ /* -- Formulaires -- */
/* ----------------- */ /* ----------------- */
.fieldset-mini { .fieldset-mini {
margin: 20px auto auto auto; margin: 1.309em auto auto auto;
width: 540px; width: 540px;
} }
fieldset { fieldset {
margin: 1.5em 0; margin: 1.618em 0;
background: none; background: none;
border: none; border: none;
} }
fieldset img { fieldset img {
max-width: 250px; max-width: 250px;
} }
@media (min-width: 769px) { @media (min-width: 769px) {
fieldset img { fieldset img {
max-width: 450px; max-width: 320px;
}
}
@media (min-width: 1366px) {
fieldset img {
max-width: 420px;
} }
} }
fieldset.fieldset-submit { .fieldset-submit {
width: 100%;
background: none;
border: none;
text-align: center; text-align: center;
} }
fieldset.fieldset-submit legend { .fieldset-submit legend {
display: none; display: none;
} }
.horizontal-fieldset-desc, .horizontal-fieldset-desc,
.horizontal-fieldset-element { .horizontal-fieldset-element {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-right: 1em;
} }
.horizontal-fieldset-desc + .horizontal-fieldset-element { .horizontal-fieldset-desc + .horizontal-fieldset-element {
max-width: 100%; max-width: 100%;
} }
.horizontal-fieldset-element .form-field-select { .horizontal-fieldset-element .form-field-select {
max-width: none; max-width: none;
} }
optgroup { optgroup {
border: none; border: none;
border-bottom: 1px solid #5B5A5A; border-bottom-width: 1px;
border-bottom-style: solid;
border-color: transparent;
font-weight: bold; font-weight: bold;
} }
option { option {
padding: 0 3px; padding: 0 0.228em;
} }
legend { legend {
display: block; display: block;
margin: 0 0 0.6em 0; margin: 0 0 0.809em 0;
padding: 0 0.809em;
width: 100%; width: 100%;
border-bottom: 1px solid #DDDDDD; border-bottom-width: 1px;
border-bottom-style: solid;
border-color: transparent;
text-transform: none; text-transform: none;
color: #474747;
font-size: 1.5em; font-size: 1.5em;
} }
/* --- Previsualisation --- */ legend > h1 {
font-size: inherit;
}
/* --- Previsualisation AJAX --- */
.xmlhttprequest-preview { .xmlhttprequest-preview {
padding: 0 2px; overflow: auto;
background-color: #FFFFFF; height: 220px;
border: 1px solid #CCCCCC; margin: 0.228em auto .1618em auto;
color: #2E3B5F; padding: 0.1618em 0.228em;
border-width: 1px;
border-style: solid;
border-color: transparent;
} }
.xmlhttprequest-preview img { .xmlhttprequest-preview img {
max-width: 600px; max-width: 600px;
} }
/* --- Elements de saisie --- */ /* --- Elements de saisie --- */
input[type=text], [type=text],
input[type=email], [type=email],
input[type=url], [type=url],
input[type=number], [type=number],
input[type=color], [type=color],
input[type=tel], [type=tel],
input[type=search], [type=search],
input[type=password], [type=password],
input[type=file], [type=file],
textarea, textarea,
select { select {
padding: 4px 18px 4px 6px; padding: 0.309em 0.618em;
background-color: #FFFFFF; border-width: 1px;
border: 1px solid #CCCCCC; border-style: solid;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01); border-color: transparent;
color: #555555; margin-bottom: 0.1618em;
} max-width: 100%;
input[type=text]:hover,
input[type=email]:hover,
input[type=url]:hover,
input[type=number]:hover,
input[type=color]:hover,
input[type=tel]:hover,
input[type=search]:hover,
input[type=password]:hover,
input[type=file]:hover,
textarea:hover,
select:hover {
background-color: #FFFFFF;
border: 1px solid #BBBBBB;
color: #333333;
} }
input[type=text]:focus, [type=text]:focus,
input[type=email]:focus, [type=email]:focus,
input[type=url]:focus, [type=url]:focus,
input[type=number]:focus, [type=number]:focus,
input[type=color]:focus, [type=color]:focus,
input[type=tel]:focus, [type=tel]:focus,
input[type=search]:focus, [type=search]:focus,
input[type=password]:focus, [type=password]:focus,
input[type=file]:focus, [type=file]:focus,
textarea:focus, textarea:focus,
select:focus { select:focus {
border-color: #BBBBBB;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01), 0 0 6px rgba(0, 0, 0, 0.2);
outline: 0; outline: 0;
color: #222222;
} }
input[type=color] { [type=color] {
padding: 0 2px 0 2px; padding: 0 0.1618em;
width: 25px; width: 1.482em;
}
.field-smaller { width: 29px; }
.field-small { width: 77px; }
.field-large { width: 200px; }
.field-xlarge { width: 250px; }
.form-field-date,
.form-field-datetime {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
} }
form input:focus:invalid, .form-field-date .input-date {
form textarea:focus:invalid, width: 80%;
form .constraint-status-right input,
form .constraint-status-right textarea {
border-color: rgba(196, 60, 43, 0.3);
box-shadow: 0 0 3px rgba(196, 60, 43, 0.1);
} }
form input:focus:valid, .form-field-datetime .input-date {
form textarea:focus:valid, width: 40%;
form .constraint-status-right input,
form .constraint-status-right textarea {
border-color: rgba(71, 137, 72, 0.3);
box-shadow: 0 0 5px rgba(71, 137, 72, 0.1);
} }
input.field-smaller { width: 29px; } .form-field-datetime .label-time {
input.field-small { width: 77px; } width: 18%;
input.field-large { width: 200px; } position: relative;
input.field-xlarge { width: 250px; } display: inline-block;
}
input.input-date { width: 100px; } .form-field-datetime .label-time input {
input.input-hours { width: 50px; } padding: 0.309em;
input.input-minutes { width: 50px; } width: 100%;
}
input[name$="_hours"] { width: 50px; } .label-time:after {
input[name$="_minutes"] { width: 50px; } position: absolute;
bottom: 18%;
left: 103%;
content: attr(data-time);
}
/* --- Cache le generateur de mot de passe sur chrome --- */ /* --- Cache le generateur de mot de passe sur chrome --- */
.cip-icon-key-small { .cip-icon-key-small {
display: none !important; display: none !important;
} }
/* --- Element du formulaire (englobe le label et l'input d'un champ) --- */ /* --- Element du formulaire (englobe le label et l'input d'un champ) --- */
.form-element, .form-element,
.form-element-textarea { .form-element-textarea {
position: relative; position: relative;
margin: 0 1em 1em 1em; margin: 0 0.618em 0.618em 0.618em;
} }
@media (min-width: 769px) { @media (min-width: 769px) {
div#main.main-with-left.main-with-right section .form-element, #main.main-with-left.main-with-right section .form-element,
div#main.main-with-left.main-with-right section .form-element-textarea { #main.main-with-left.main-with-right section .form-element-textarea {
margin: 5px 0; margin: 0.309em 0;
} }
} }
.fieldset-description { .fieldset-description {
margin: 0 1em 1.5em 1em; margin: 0 1em 0.618em 1em;
}
@media (max-width: 768px) {
.form-element,
.form-element-textarea {
margin: 0 0.6em 1em 0.6em;
}
.fieldset-description {
margin: 0 0.6em 1.3em 0.6em;
}
} }
@media (max-width: 480px) { @media (min-width: 769px) {
.form-element, .form-element,
.form-element-textarea { .form-element-textarea {
margin: 0 0.6em 0.5em 0.6em; margin: 0 1.618em 1em 1.618em;
} }
.fieldset-description { .fieldset-description {
margin: 0 0.6em 0.9em 0.6em; margin: 0 1.618em 1.482em 1.618em;
}
}
@media (max-width: 768px) {
.form-element-textarea + div.center button,
.fieldset-content > div.center button {
margin-top: 5px;
} }
} }
.form-element [id$="user_avatar"] img { .form-element [id$="user_avatar"] img {
max-width: 200px; max-width: 200px;
} }
.form-field { .form-field {
position: relative; position: relative;
display: inline-block; display: inline-block;
max-width: 600px; width: 100%;
}
@media (max-width:360px) {
.form-field {
max-width: 270px;
}
} }
.form-field-free-large { .form-field-free-large {
width: 100%; width: 100%;
max-width: none; max-width: none;
} }
.form-field-action-link { .form-field-action-link {
text-align: center; text-align: center;
} }
/* --- Label pour les checkbox et radio --- */ /* --- Label pour les checkbox et radio --- */
.form-field label { .form-field label {
display: block; display: block;
margin: 0 10px 0 0; margin: 0 0.618em 0 0;
} }
/* --- Label pour les inputs [for] et pour les elements sans associations --- */ /* --- Label pour les inputs [for] et pour les elements sans associations --- */
.form-element > label { .form-element > label {
display: inline-block; display: inline-block;
padding-right: 10px; padding: 0 0.618em 0.618em 0;
width: 40%; width: 100%;
text-align: left; text-align: left;
vertical-align: top; vertical-align: top;
} }
.field-description { @media (min-width: 1025px) {
display: block; .form-field {
font-size: 0.8em; width: calc(60% - 0.309em);
line-height: 12px; }
}
@media (max-width: 768px) {
.form-element > label { .form-element > label {
width: 100%; width: 40%;
}
span.field-description {
display: inline-block;
font-size: 0.7em;
font-style: italic;
} }
} }
@media (min-width: 769px) { .field-description {
.form-field-select { display: inline-block;
max-width: 59%; font-size: 0.618em;
} font-style: italic;
} }
.form-field-select select { .form-field-select select,
.form-field-multi-select select {
max-width: 100%; max-width: 100%;
} }
@media (min-width: 769px) {
.field-description {
display: block;
font-size: 0.809em;
font-style: normal;
}
}
input[disabled=disabled], input[disabled=disabled],
input[disabled=disabled]:hover, input[disabled=disabled]:hover,
input[disabled=disabled]:focus, input[disabled=disabled]:focus,
textarea[disabled=disabled], textarea[disabled=disabled],
textarea[disabled=disabled]:hover, textarea[disabled=disabled]:hover,
textarea[disabled=disabled]:focus, textarea[disabled=disabled]:focus,
select[disabled=disabled], select[disabled=disabled],
select[disabled=disabled]:hover, select[disabled=disabled]:hover,
select[disabled=disabled]:focus { select[disabled=disabled]:focus,
background-color: #F1F1F1;
border: 1px solid #CCCCCC;
color: #AAAAAA;
cursor: not-allowed;
}
input[readonly=readonly], input[readonly=readonly],
input[readonly=readonly]:hover, input[readonly=readonly]:hover,
input[readonly=readonly]:focus, input[readonly=readonly]:focus,
textarea[readonly=readonly], textarea[readonly=readonly],
textarea[readonly=readonly]:hover, textarea[readonly=readonly]:hover,
textarea[readonly=readonly]:focus, textarea[readonly=readonly]:focus,
select[readonly=readonly], select[readonly=readonly],
select[readonly=readonly]:hover, select[readonly=readonly]:hover,
select[readonly=readonly]:focus { select[readonly=readonly]:focus {
background-color: #FAFAFA; border-width: 1px;
border: 1px solid #CCCCCC; border-style: solid;
color: #888888; border-color: transparent;
cursor: not-allowed;
} }
.form-field-checkbox { .form-field-checkbox {
display: inline-block; display: inline-block;
} }
/* --- Textarea --- */ /* --- Textarea --- */
.form-field-textarea { .form-field-textarea {
position: relative; position: relative;
display: inline; display: inline;
margin: 5px auto; margin: 0.309em auto;
width: 99%; width: 99%;
} }
textarea { textarea {
width: 100%; width: 100%;
overflow: auto; overflow: auto;
resize: vertical; resize: vertical;
} }
.form-element-textarea textarea { .form-element-textarea textarea {
width: 100%; width: 100%;
} }
.form-element-textarea .form-field-textarea { .form-element-textarea .form-field-textarea {
display: block; display: block;
} }
.form-element .form-field-textarea { .form-element .form-field-textarea {
display: inline-block; display: inline-block;
} }
.form-element-textarea .form-field-textarea div { .form-element-textarea .form-field-textarea div {
float: left; float: left;
} }
.form-element-preview, .form-element-reset { .form-element-preview, .form-element-reset {
margin: 5px auto 0 auto; margin: 0.309em auto 0 auto;
text-align: center; text-align: center;
display: inline; display: inline;
} }
/* --- choix des permissions --- */ /* --- choix des permissions --- */
.form-element-auth .form-field { .form-element-auth .form-field {
display: inline-block; display: inline-block;
margin: 2px 0 0 0; margin: 0.1618em 0 0 0;
} }
.form-element-auth .form-field div[class^="advanced-auth"] { .form-element-auth .form-field div[class^="advanced-auth"] {
float:left; float:left;
} }
.form-element-auth .field-description { .form-element-auth .field-description {
display: inline; display: inline;
font-style: italic; font-style: italic;
} }
.advanced-auth-group select { .advanced-auth-group select {
padding-right: 5px; padding-right: 0.309em;
max-width: 153px; margin-right: 0.618em;
overflow-x: auto; overflow-x: auto;
} }
.advanced-auth-select select { .advanced-auth-select select {
padding-right: 5px; padding-right: 0.309em;
max-width: 132px; max-width: 132px;
word-wrap: normal; word-wrap: normal;
overflow-x: auto; overflow-x: auto;
} }
.advanced-auth-select { .advanced-auth-select {
margin-left:5px; margin-left:0.309em;
} }
.advanced-auth-input { .advanced-auth-input {
margin-left: 5px; margin-left: 0.309em;
width: auto; width: auto;
} }
.advanced-auth-input input { .advanced-auth-input input {
padding: 4px 24px 4px 6px; padding: 0.228em 1.482em 0.228em 0.309em;
} }
.advanced-auth-input button { .advanced-auth-input button {
margin-left: -29px; margin: 0 0 0.1618em -0.456em;
padding: 5px 5px 6px 5px; padding: 0.456em 0.309em 0.456em;
border-width: 0 0 0 1px;
} }
.advanced-auth-input-result { .advanced-auth-input-result {
margin: 2px 0 0 0; margin: 0.1618em 0 0 0;
width: 138px; padding: 0.1618em;
height: 100px; height: 6.854em;
} }
.bbcode ~ .form-field-textarea textarea { .bbcode ~ .form-field-textarea textarea {
border-width: 0 1px 1px 1px; border-width: 0 1px 1px 1px;
} }
@media (min-width: 769px) { @media (min-width: 769px) {
.form-element-textarea-small { .form-element-textarea-small {
width: 49%; width: 49%;
} }
.form-element .form-field-textarea { .form-element .form-field-textarea {
width: 59%; width: 59%;
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.form-element-auth .form-field .advanced-auth-input { .form-element-auth .form-field .advanced-auth-input {
float: none; float: none;
margin: 5px 0 0 0;
} }
} }
/* --- Verification des contraintes de formulaire --- */ /* --- Verification des contraintes de formulaire --- */
.constraint-status-error input,
.constraint-status-error textarea {
border-color: rgba(196, 60, 43, 0.3);
box-shadow: inset 0 0 3px rgba(196, 60, 43, 0.1);
color: #C43C35;
}
.constraint-status-error input:hover,
.constraint-status-error input:focus,
.constraint-status-error textarea:hover,
.constraint-status-error textarea:focus {
border-color: rgba(196, 60, 43, 0.5);
box-shadow: inset 0 0 6px rgba(196, 60, 43, 0.3);
color: #C43C35;
}
.text-status-constraint { .text-status-constraint {
position:absolute; position:absolute;
display: block; display: block;
z-index: 1; z-index: 1;
padding: 6px 5px; padding: 0.309em;
left: 5px; top: 110%;
min-width: 20em; border-width: 1px;
background-color: #FEFEFE; border-style: solid;
border: 1px solid #EAEAEA; border-color: transparent;
box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.3); font-size: 0.809em;
font-size: 0.8em;
font-weight: bold; font-weight: bold;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
input + .text-status-constraint {
top: 25px;
} }
.text-status-constraint:after, .text-status-constraint:after,
.text-status-constraint:before { .text-status-constraint:before {
content: " "; content: " ";
position: absolute; position: absolute;
} }
.text-status-constraint:before { .text-status-constraint:before {
left: 8px; left: 8px;
top: -9px; top: -9px;
border-bottom: 9px solid rgba(230, 230, 230, 1); border-width: 0 9px 9px 9px;
border-left: 9px solid transparent; border-style: solid;
border-right: 9px solid transparent; border-color: transparent;
} }
.text-status-constraint:after { .text-status-constraint:after {
left: 9px; left: 9px;
top: -8px; top: -8px;
border-bottom: 8px solid rgba(250, 250, 250, 1); border-width: 0 8px 8px 8px;
border-left: 8px solid transparent; border-style: solid;
border-right: 8px solid transparent; border-color: transparent;
} }
div.field-required:after, .field-required:after,
div.picture-status-constraint:after { .picture-status-constraint:after {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
right: 4px; left: -16px;
font: normal normal normal 14px/1 FontAwesome; font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: inherit; font-size: inherit;
text-rendering: auto; text-rendering: auto;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
div.field-required:after { .field-required:after {
top: 10px; top: 14px;
opacity: 0.6; opacity: 0.6;
color: #C43C35; font-size: 0.809rem;
font-size: 0.8rem;
content: "\f069"; content: "\f069";
display: table;
} }
.form-field-date.field-required:after, .form-field-date.field-required:after,
.form-field-date.picture-status-constraint:after { .form-field-date.picture-status-constraint:after {
right: 24px; right: 24px;
} }
.form-field-select.field-required:after, .form-field-select.field-required:after,
.form-field-number.field-required:after, .form-field-number.field-required:after,
.form-field-decimal.field-required:after { .form-field-decimal.field-required:after {
right: -10px; right: -10px;
} }
.form-field-datetime.field-required:after { .form-field-datetime.field-required:after {
right: -15px; right: -15px;
} }
.form-field-checkbox.field-required:after { .form-field-checkbox.field-required:after {
right: -20px; right: -20px;
top: 0; top: 0;
} }
.form-field-upload-file.field-required:after { .form-field-upload-file.field-required:after {
right: 43px; right: 43px;
top: 12px; top: 12px;
} }
.constraint-status-right .form-field-upload-file.picture-status-constraint:after { .constraint-status-right .form-field-upload-file.picture-status-constraint:after {
right: 40px; right: 40px;
top: 8px; top: 8px;
} }
.constraint-status-right .form-field-color:after, .constraint-status-right .form-field-color:after,
.constraint-status-right .form-field-select:after, .constraint-status-right .form-field-select:after,
.constraint-status-right .form-field-number:after, .constraint-status-right .form-field-number:after,
.constraint-status-right .form-field-decimal:after { .constraint-status-right .form-field-decimal:after {
right: -20px; right: -20px;
} }
.constraint-statuts-right .form-field-checkbox:after { .constraint-statuts-right .form-field-checkbox:after {
top: 4px; top: 4px;
} }
.constraint-statuts-right .form-field-datetime:after { .constraint-statuts-right .form-field-datetime:after {
right: -22px; right: -22px;
} }
.form-field-number input, .form-field-number input,
.form-field-decimal input, .form-field-decimal input,
.form-field-datetime input { .form-field-datetime input {
padding-right: 2px; padding-right: 2px;
} }
.form-element-date .constraint-status-error div.field-required:after, .form-element-date .constraint-status-error .field-required:after,
.form-element-date .constraint-status-right div.field-required:after { .form-element-date .constraint-status-right .field-required:after {
right: 10px; right: 10px;
} }
.form-field-textarea.field-required:after, .form-field-textarea.field-required:after,
.constraint-status-right .form-field-textarea.field-required:after, .constraint-status-right .form-field-textarea.field-required:after,
.constraint-status-right .form-field-textarea.field-required:after { .constraint-status-right .form-field-textarea.field-required:after {
top: 45%; top: 45%;
} }
.constraint-status-right div.field-required:after { .constraint-status-right .field-required:after {
content: " "; content: " ";
} }
.constraint-status-right div.form-field-checkbox.picture-status-constraint:after { .constraint-status-right .form-field-checkbox.picture-status-constraint:after {
top: 0; top: 0;
} }
.constraint-status-right div.picture-status-constraint:after { .constraint-status-right .picture-status-constraint:after {
opacity: 1; opacity: 1;
font-size: 1.5rem; font-size: 1.5rem;
top: 6px; top: 10px;
} }
.constraint-status-error .form-field-textarea .picture-status-constraint:after, .constraint-status-error .form-field-textarea .picture-status-constraint:after,
.constraint-status-right .form-field-textarea .picture-status-constraint:after { .constraint-status-right .form-field-textarea .picture-status-constraint:after {
top: 40%; top: 40%;
} }
.constraint-status-right div.picture-status-constraint:after { .constraint-status-right .picture-status-constraint:after {
content: "\f00c"; content: "\f00c";
color: #57A957;
} }
.constraint-status-error i.picture-status-constraint { .constraint-status-error i.picture-status-constraint {
content: "\f056"; content: "\f056";
color: #C43C35;
} }
.form-field-multi-select.field-required:after { .form-field-multi-select.field-required:after {
display: none; display: none;
} }
.constraint-status-right .form-field-multi-select select {
border-color: rgba(71, 137, 72, 0.3);
box-shadow: 0 0 5px rgba(71, 137, 72, 0.1);
}
.form-field-radio-button.field-required:after, .form-field-radio-button.field-required:after,
.form-field-multiple-checkbox.field-required:after { .form-field-multiple-checkbox.field-required:after {
top: 4px; top: 8px;
right: -16px; right: -16px;
} }
.form-field-radio { .form-field-radio {
display: inline-block; display: inline-block;
} }
.required-fields-text {
text-align: center;
}
/* --- HTML Table--- */ /* --- HTML Table--- */
.html-table-header-sortable { .html-table-header-sortable {
float: right; display: none;
}
.html-table-header-sortable .fa {
margin-bottom: 0.228em;
} }
@media (max-width: 768px) { @media (min-width: 769px) {
.html-table-header-sortable { .html-table-header-sortable {
display: none; display: inline-block;
} }
} }
.html-table-header-sortable .fa-caret-up { margin-bottom: -4px; }
.html-table-header-sortable .fa-caret-down { margin-top: -12px; }
.html-table-header-sortable .sort-active {
color: #AAAAAA;
}
/* --- Auto-completion --- */ /* --- Auto-completion --- */
.autocomplete-suggestions { .autocomplete-suggestions {
background-color: #FFFFFF; border-width: 1px;
border: 1px solid #999999; border-style: solid;
border-color: transparent;
overflow: auto; overflow: auto;
} }
.autocomplete-suggestions strong { .autocomplete-suggestions strong {
font-weight: normal; font-weight: normal;
color: #3399FF;
} }
.autocomplete-suggestion { .autocomplete-suggestion {
padding: 2px 5px; padding: 0.1618em 0.309em;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
}
.autocomplete-selected {
background-color: #F0F0F0;
} }
.autocomplete-no-suggestion { .autocomplete-no-suggestion {
text-align: center; text-align: center;
} }
div[id*='keyword'] .form-autocompleter-container input { div[id*='keyword'] .form-autocompleter-container input {
max-width: calc(100% - 20px); max-width: calc(100% - 1.309em);
} }
/* --- Lined textarea --- */ /* --- Lined textarea --- */
.linedwrap { .linedwrap {
max-width: 100%; max-width: 100%;
} }
.linedtextarea { .linedtextarea {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: 0 0 0 10px; padding: 0 0 0 0.618em;
width: calc(100% - 60px); width: calc(100% - 60px);
height: 100%; height: 100%;
background-color: #FFFFFF;
} }
.linedtextarea textarea, .linedtextarea textarea,
.linedwrap .codelines .lineno { .linedwrap .codelines .lineno {
font-size: 10pt; font-size: 10pt;
font-family: monospace; font-family: monospace;
line-height: normal !important; line-height: normal !important;
} }
.linedtextarea textarea { .linedtextarea textarea {
margin: 0; margin: 0;
padding: 5px 0 0 0; padding: 0.309em 0 0 0;
width: 100% !important; width: 100% !important;
height: 100%; height: 100%;
border: 0; border: 0;
} }
.linedwrap .lines { .linedwrap .lines {
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
margin-top: 0; margin-top: 0;
padding: 5px 0 0 0; padding: 0.309em 0 0 0;
width: 50px; width: 50px;
height: 100%; height: 100%;
background-color: #FFFFFF; border-width: 0 1px 0 0;
border-right: 1px solid #C0C0C0; border-style: solid;
border-color: transparent;
} }
.linedwrap .codelines .lineno { .linedwrap .codelines .lineno {
padding: 0.0em 0.5em 0 0; padding: 0.0em 0.618em 0 0;
text-align: right; text-align: right;
color: #AAAAAA;
white-space: nowrap; white-space: nowrap;
} }
.linedwrap .codelines .lineselect { .auth-setter {
color: red; display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (min-width: 769px) {
.form-element-auth {
width: 50%;
margin: 0 0 2.618em;
}
.form-element-auth > label {
width: 100%;
display: block;
font-size: large;
}
} }
Editor
Original Text
Changed Text