Diff
checker
Testo
Testo
Immagini
Documenti
Excel
Cartelle
Legal
Enterprise
Applicazione per desktop
Prezzi
Accedi
Scarica Diffchecker Desktop
Confronta il testo
Trova la differenza tra due file di testo
Strumenti
Cronologia
Editor live
Comprimi invariate
Senza a capo
Layout
Diviso
Unificato
Livello di dettaglio
Intelligente
Parola
Carattere
Evidenziazione sintassi
Scegli sintassi
Ignora
Trasforma testo
Vai alla prima modifica
Modifica input
Diffchecker Desktop
Il modo più sicuro per usare Diffchecker. Ottieni l'app Diffchecker Desktop: i tuoi diff non lasciano mai il tuo computer!
Ottieni Desktop
Untitled diff
Creato
7 anni fa
Il diff non scade mai
Eliminare
Esporta
Condividere
Spiegare
329 rimozioni
Linee
Totale
Rimosso
Caratteri
Totale
Rimosso
Per continuare a utilizzare questa funzione, aggiorna a
Diff
checker
Pro
Visualizza prezzi
818 linee
Copia tutti
230 aggiunte
Linee
Totale
Aggiunto
Caratteri
Totale
Aggiunto
Per continuare a utilizzare questa funzione, aggiorna a
Diff
checker
Pro
Visualizza prezzi
742 linee
Copia tutti
/* --------------------------------------
/* --------------------------------------
form.css
form.css
Copia
Copiato
Copia
Copiato
Contient les elements :
Contient les elements :
- button,
- button,
- formulaire,
- formulaire,
Copia
Copiato
Copia
Copiato
-
----------------------------------------
*/
----------------------------------------
*/
/* -- Boutons et class boutons -- */
/* -- Boutons et class boutons -- */
/* ------------------------------ */
/* ------------------------------ */
/* --- Normal --- */
/* --- Normal --- */
button,
button,
.button {
.button {
Copia
Copiato
Copia
Copiato
padding: 0.3
em 1em;
margin: 0.618em;
padding: 0.3
09
em 1em;
height: auto;
height: auto;
Copia
Copiato
Copia
Copiato
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;
Copia
Copiato
Copia
Copiato
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;
Copia
Copiato
Copia
Copiato
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 {
Copia
Copiato
Copia
Copiato
background-color: #F9F9F9;
transition: all 0.3s linear;
transition: all 0.3s linear;
}
}
button:active,
button:active,
.button-active {
.button-active {
Copia
Copiato
Copia
Copiato
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 {
Copia
Copiato
Copia
Copiato
padding: 0.2
em 0.
5em
;
padding: 0.2
28
em 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;
Copia
Copiato
Copia
Copiato
margin:
1px
;
margin:
0.1618em
;
padding:
1px 6px
;
padding:
0.1618em 0.309em
;
border: none;
border: none;
font-weight: bold;
font-weight: bold;
Copia
Copiato
Copia
Copiato
color: #FFFFFF;
}
}
.basic-button:hover {
.basic-button:hover {
Copia
Copiato
Copia
Copiato
color: #FAFAFA;
text-decoration: none;
text-decoration: none;
}
}
Copia
Copiato
Copia
Copiato
/* --- 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 {
Copia
Copiato
Copia
Copiato
margin:
20px
auto auto auto;
margin:
1.309em
auto auto auto;
width: 540px;
width: 540px;
}
}
fieldset {
fieldset {
Copia
Copiato
Copia
Copiato
margin: 1.
5em
0;
margin: 1.
618em
0;
background: none;
background: none;
Copia
Copiato
Copia
Copiato
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 {
Copia
Copiato
Copia
Copiato
max-width:
450px
;
max-width:
320px
;
}
}
}
}
Copia
Copiato
Copia
Copiato
fieldset
.fieldset-submit {
@media (min-width: 1366px) {
width: 100%;
fieldset
img {
Text moved with changes from lines 309-312 (90.7% similarity)
background: none;
max-width: 420px;
border: none;
}
}
.fieldset-submit {
text-align: center;
text-align: center;
}
}
Copia
Copiato
Copia
Copiato
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;
Copia
Copiato
Copia
Copiato
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;
Copia
Copiato
Copia
Copiato
border-bottom
: 1px
solid
#5B5A5A
;
border-bottom
-width
: 1px
;
border-bottom-style:
solid
;
border-color: transparent
;
font-weight: bold;
font-weight: bold;
}
}
option {
option {
Copia
Copiato
Copia
Copiato
padding: 0
3px
;
padding: 0
0.228em
;
}
}
legend {
legend {
display: block;
display: block;
Copia
Copiato
Copia
Copiato
margin: 0 0 0.
6em
0;
margin: 0 0 0.
809em
0;
padding: 0 0.809em;
width: 100%;
width: 100%;
Copia
Copiato
Copia
Copiato
border-bottom
: 1px
solid
#DDDDDD
;
border-bottom
-width
: 1px
;
border-bottom-style:
solid
;
border-color: transparent
;
text-transform: none;
text-transform: none;
Copia
Copiato
Copia
Copiato
color: #474747;
font-size: 1.5em;
font-size: 1.5em;
}
}
Copia
Copiato
Copia
Copiato
/* --- Previsualisation
--- */
legend > h1 {
font-size: inherit;
}
/* --- Previsualisation
AJAX
--- */
.xmlhttprequest-preview {
.xmlhttprequest-preview {
Copia
Copiato
Copia
Copiato
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 --- */
Copia
Copiato
Copia
Copiato
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 {
Copia
Copiato
Copia
Copiato
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
;
}
}
Copia
Copiato
Copia
Copiato
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 {
Copia
Copiato
Copia
Copiato
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;
Copia
Copiato
Copia
Copiato
color: #222222;
}
}
Copia
Copiato
Copia
Copiato
input
[type=color] {
[type=color] {
padding: 0
2px 0 2px
;
padding: 0
0.1618em
;
width:
25px
;
width:
1.482em
;
}
}
Copia
Copiato
Copia
Copiato
form input:focus:invalid,
.field-smaller { width: 29px; }
form textarea:focus:invalid,
.field-small { width: 77px; }
form .constraint-status-right input,
.field-large { width: 200px; }
form .constraint-status-right textarea {
.field-xlarge { width: 250px; }
border-color: rgba(196, 60, 43, 0.3);
box-shadow: 0 0 3px rgba(196, 60, 43, 0.1);
.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;
}
}
Copia
Copiato
Copia
Copiato
form input:focus:valid,
.form-field-date .input-date {
form textarea:focus:valid,
width: 80%;
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);
}
}
Copia
Copiato
Copia
Copiato
input.field-smaller { width: 29px; }
.form-field-datetime .
input
-date {
input.field-small { width: 77px; }
width:
40%;
input.field-large { width: 200px; }
}
input
.field-xlarge {
width:
250px;
}
Copia
Copiato
Copia
Copiato
input.input-date { width: 100px; }
.form-field-datetime .label-time {
input.input-hours { width: 50px; }
width: 18%;
input.input-minutes { width: 50px; }
position: relative;
display: inline-block;
}
Copia
Copiato
Copia
Copiato
input[name$="_hours"] { width: 50px; }
.form-field-datetime .label-time input {
input[name$="_minutes"] { width: 50px; }
padding: 0.309em;
width: 100%;
}
.label-time:after {
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;
Copia
Copiato
Copia
Copiato
margin: 0
1
em
1
em
1
em;
margin: 0
0.618
em
0.618
em
0.618
em;
}
}
@media (min-width: 769px) {
@media (min-width: 769px) {
Copia
Copiato
Copia
Copiato
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 {
Copia
Copiato
Copia
Copiato
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;
}
}
}
Copia
Copiato
Copia
Copiato
@media (
max
-width:
480px
) {
@media (
min
-width:
769px
) {
.form-element,
.form-element,
.form-element-textarea {
.form-element-textarea {
Copia
Copiato
Copia
Copiato
margin: 0
0.6
em
0.5
em
0.6
em;
margin: 0
1.618
em
1
em
1.618
em;
}
}
.fieldset-description {
.fieldset-description {
Copia
Copiato
Copia
Copiato
Text moved with changes to lines 82-85 (90.7% similarity)
margin: 0
0.6
em
0.9em 0.6em;
margin: 0
1.618
em
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;
Copia
Copiato
Copia
Copiato
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;
Copia
Copiato
Copia
Copiato
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;
Copia
Copiato
Copia
Copiato
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;
}
}
Copia
Copiato
Copia
Copiato
@media (min-width: 1025px) {
.form-field {
width: calc(60% - 0.309em);
}
.form-element > label {
width: 40%;
}
}
.field-description {
.field-description {
Copia
Copiato
Copia
Copiato
display:
block;
display:
inline-
block;
font-size: 0.
8em;
font-size: 0.
61
8em;
line-height: 12px
;
font-style: italic
;
}
}
Copia
Copiato
Copia
Copiato
@media (max-width: 768px) {
.form-field-select select,
.form-
element > label
{
.form-
field-multi-select select
{
width: 100%;
max-
width: 100%;
}
span.field-description {
display: inline-block;
font-size: 0.7em;
font-style: italic;
}
}
}
@media (min-width: 769px) {
@media (min-width: 769px) {
Copia
Copiato
Copia
Copiato
.
form-
field-
select
{
.
field-
description
{
max-width: 59%
;
display: block;
font-size: 0.809em;
font-style: normal
;
}
}
}
}
Copia
Copiato
Copia
Copiato
.form-field-select select {
max-width: 100%;
}
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,
Copia
Copiato
Copia
Copiato
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 {
Copia
Copiato
Copia
Copiato
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;
Copia
Copiato
Copia
Copiato
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 {
Copia
Copiato
Copia
Copiato
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;
Copia
Copiato
Copia
Copiato
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 {
Copia
Copiato
Copia
Copiato
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 {
Copia
Copiato
Copia
Copiato
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 {
Copia
Copiato
Copia
Copiato
margin-left:
5px
;
margin-left:
0.309em
;
}
}
.advanced-auth-input {
.advanced-auth-input {
Copia
Copiato
Copia
Copiato
margin-left:
5px
;
margin-left:
0.309em
;
width: auto;
width: auto;
}
}
.advanced-auth-input input {
.advanced-auth-input input {
Copia
Copiato
Copia
Copiato
padding:
4px 24px 4px 6px
;
padding:
0.228em 1.482em 0.228em 0.309em
;
}
}
.advanced-auth-input button {
.advanced-auth-input button {
Copia
Copiato
Copia
Copiato
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 {
Copia
Copiato
Copia
Copiato
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;
Copia
Copiato
Copia
Copiato
margin: 5px 0 0 0;
}
}
}
}
/* --- Verification des contraintes de formulaire --- */
/* --- Verification des contraintes de formulaire --- */
Copia
Copiato
Copia
Copiato
.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;
Copia
Copiato
Copia
Copiato
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.8
09
em;
font-size: 0.8
em;
font-weight: bold;
font-weight: bold;
Copia
Copiato
Copia
Copiato
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;
Copia
Copiato
Copia
Copiato
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;
Copia
Copiato
Copia
Copiato
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;
}
}
Copia
Copiato
Copia
Copiato
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;
Copia
Copiato
Copia
Copiato
right: 4px
;
left: -16px
;
font
: normal normal normal 14px/1
Font
Awesome
;
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;
}
}
Copia
Copiato
Copia
Copiato
div
.field-required:after {
.field-required:after {
top: 1
0
px;
top: 1
4
px;
opacity: 0.6;
opacity: 0.6;
Copia
Copiato
Copia
Copiato
color: #C43C35;
font-size: 0.8
09
rem;
font-size: 0.8
rem;
content: "\f069";
content: "\f069";
Copia
Copiato
Copia
Copiato
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;
}
}
Copia
Copiato
Copia
Copiato
.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%;
}
}
Copia
Copiato
Copia
Copiato
.constraint-status-right
div
.field-required:after {
.constraint-status-right
.field-required:after {
content: " ";
content: " ";
}
}
Copia
Copiato
Copia
Copiato
.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;
}
}
Copia
Copiato
Copia
Copiato
.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;
Copia
Copiato
Copia
Copiato
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%;
}
}
Copia
Copiato
Copia
Copiato
.constraint-status-right
div
.picture-status-constraint:after {
.constraint-status-right
.picture-status-constraint:after {
content: "\f00c";
content: "\f00c";
Copia
Copiato
Copia
Copiato
color: #57A957;
}
}
.constraint-status-error i.picture-status-constraint {
.constraint-status-error i.picture-status-constraint {
content: "\f056";
content: "\f056";
Copia
Copiato
Copia
Copiato
color: #C43C35;
}
}
.form-field-multi-select.field-required:after {
.form-field-multi-select.field-required:after {
display: none;
display: none;
}
}
Copia
Copiato
Copia
Copiato
.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 {
Copia
Copiato
Copia
Copiato
top:
4
px;
top:
8
px;
right: -16px;
right: -16px;
}
}
.form-field-radio {
.form-field-radio {
display: inline-block;
display: inline-block;
}
}
Copia
Copiato
Copia
Copiato
.required-fields-text {
text-align: center;
}
/* --- HTML Table--- */
/* --- HTML Table--- */
.html-table-header-sortable {
.html-table-header-sortable {
Copia
Copiato
Copia
Copiato
float: right
;
display: none
;
}
}
Copia
Copiato
Copia
Copiato
@media (
max
-width: 76
8
px) {
.html-table-header-sortable .fa {
margin-bottom: 0.228em;
}
@media (
min
-width: 76
9
px) {
.html-table-header-sortable {
.html-table-header-sortable {
Copia
Copiato
Copia
Copiato
display:
none
;
display:
inline-block
;
}
}
}
}
Copia
Copiato
Copia
Copiato
.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 {
Copia
Copiato
Copia
Copiato
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;
Copia
Copiato
Copia
Copiato
color: #3399FF;
}
}
.autocomplete-suggestion {
.autocomplete-suggestion {
Copia
Copiato
Copia
Copiato
padding:
2px 5px
;
padding:
0.1618em 0.309em
;
white-space: nowrap;
white-space: nowrap;
overflow: hidden;
overflow: hidden;
cursor: pointer;
cursor: pointer;
}
}
Copia
Copiato
Copia
Copiato
.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 {
Copia
Copiato
Copia
Copiato
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;
Copia
Copiato
Copia
Copiato
padding: 0 0 0
10px
;
padding: 0 0 0
0.618em
;
width: calc(100% - 60px);
width: calc(100% - 60px);
height: 100%;
height: 100%;
Copia
Copiato
Copia
Copiato
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;
Copia
Copiato
Copia
Copiato
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;
Copia
Copiato
Copia
Copiato
padding:
5px
0 0 0;
padding:
0.309em
0 0 0;
width: 50px;
width: 50px;
height: 100%;
height: 100%;
Copia
Copiato
Copia
Copiato
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 {
Copia
Copiato
Copia
Copiato
padding: 0.0em 0.
5em
0 0;
padding: 0.0em 0.
618em
0 0;
text-align: right;
text-align: right;
Copia
Copiato
Copia
Copiato
color: #AAAAAA;
white-space: nowrap;
white-space: nowrap;
}
}
Copia
Copiato
Copia
Copiato
.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;
}
}
}
Diff salvati
Testo originale
Apri file
/* -------------------------------------- form.css Contient les elements : - button, - formulaire, -----------------------------------------*/ /* -- Boutons et class boutons -- */ /* ------------------------------ */ /* --- Normal --- */ button, .button { padding: 0.3em 1em; height: auto; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%, rgba(56, 56, 56, 0.10) 100%); background-color: #F1F1F1; border-style: solid; border-width: 1px; 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-shadow: 0 1px 1px rgba(255, 255, 255, 0.1); white-space: nowrap; transition: all 0.2s linear; } button:hover, .button-hover { background-color: #F9F9F9; transition: all 0.3s linear; } 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; } /* --- Petit bouton --- */ button.small, .button-small { padding: 0.2em 0.5em; font-size: 1.1rem; } /* --- 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 --- */ .basic-button { display: inline-block; margin: 1px; padding: 1px 6px; border: none; font-weight: bold; color: #FFFFFF; } .basic-button:hover { color: #FAFAFA; 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 -- */ /* ----------------- */ .fieldset-mini { margin: 20px auto auto auto; width: 540px; } fieldset { margin: 1.5em 0; background: none; border: none; } fieldset img { max-width: 250px; } @media (min-width: 769px) { fieldset img { max-width: 450px; } } fieldset.fieldset-submit { width: 100%; background: none; border: none; text-align: center; } fieldset.fieldset-submit legend { display: none; } .horizontal-fieldset-desc, .horizontal-fieldset-element { display: inline-block; vertical-align: middle; } .horizontal-fieldset-desc + .horizontal-fieldset-element { max-width: 100%; } .horizontal-fieldset-element .form-field-select { max-width: none; } optgroup { border: none; border-bottom: 1px solid #5B5A5A; font-weight: bold; } option { padding: 0 3px; } legend { display: block; margin: 0 0 0.6em 0; width: 100%; border-bottom: 1px solid #DDDDDD; text-transform: none; color: #474747; font-size: 1.5em; } /* --- Previsualisation --- */ .xmlhttprequest-preview { padding: 0 2px; background-color: #FFFFFF; border: 1px solid #CCCCCC; color: #2E3B5F; } .xmlhttprequest-preview img { max-width: 600px; } /* --- Elements de saisie --- */ input[type=text], input[type=email], input[type=url], input[type=number], input[type=color], input[type=tel], input[type=search], input[type=password], input[type=file], textarea, select { padding: 4px 18px 4px 6px; background-color: #FFFFFF; border: 1px solid #CCCCCC; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01); color: #555555; } 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, input[type=email]:focus, input[type=url]:focus, input[type=number]:focus, input[type=color]:focus, input[type=tel]:focus, input[type=search]:focus, input[type=password]:focus, input[type=file]:focus, textarea: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; color: #222222; } input[type=color] { padding: 0 2px 0 2px; width: 25px; } form input:focus:invalid, form textarea:focus:invalid, 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 textarea:focus:valid, 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; } input.field-small { width: 77px; } input.field-large { width: 200px; } input.field-xlarge { width: 250px; } input.input-date { width: 100px; } input.input-hours { width: 50px; } input.input-minutes { width: 50px; } input[name$="_hours"] { width: 50px; } input[name$="_minutes"] { width: 50px; } /* --- Cache le generateur de mot de passe sur chrome --- */ .cip-icon-key-small { display: none !important; } /* --- Element du formulaire (englobe le label et l'input d'un champ) --- */ .form-element, .form-element-textarea { position: relative; margin: 0 1em 1em 1em; } @media (min-width: 769px) { div#main.main-with-left.main-with-right section .form-element, div#main.main-with-left.main-with-right section .form-element-textarea { margin: 5px 0; } } .fieldset-description { margin: 0 1em 1.5em 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) { .form-element, .form-element-textarea { margin: 0 0.6em 0.5em 0.6em; } .fieldset-description { margin: 0 0.6em 0.9em 0.6em; } } @media (max-width: 768px) { .form-element-textarea + div.center button, .fieldset-content > div.center button { margin-top: 5px; } } .form-element [id$="user_avatar"] img { max-width: 200px; } .form-field { position: relative; display: inline-block; max-width: 600px; } @media (max-width:360px) { .form-field { max-width: 270px; } } .form-field-free-large { width: 100%; max-width: none; } .form-field-action-link { text-align: center; } /* --- Label pour les checkbox et radio --- */ .form-field label { display: block; margin: 0 10px 0 0; } /* --- Label pour les inputs [for] et pour les elements sans associations --- */ .form-element > label { display: inline-block; padding-right: 10px; width: 40%; text-align: left; vertical-align: top; } .field-description { display: block; font-size: 0.8em; line-height: 12px; } @media (max-width: 768px) { .form-element > label { width: 100%; } span.field-description { display: inline-block; font-size: 0.7em; font-style: italic; } } @media (min-width: 769px) { .form-field-select { max-width: 59%; } } .form-field-select select { max-width: 100%; } input[disabled=disabled], input[disabled=disabled]:hover, input[disabled=disabled]:focus, textarea[disabled=disabled], textarea[disabled=disabled]:hover, textarea[disabled=disabled]:focus, select[disabled=disabled], select[disabled=disabled]:hover, select[disabled=disabled]:focus { background-color: #F1F1F1; border: 1px solid #CCCCCC; color: #AAAAAA; cursor: not-allowed; } input[readonly=readonly], input[readonly=readonly]:hover, input[readonly=readonly]:focus, textarea[readonly=readonly], textarea[readonly=readonly]:hover, textarea[readonly=readonly]:focus, select[readonly=readonly], select[readonly=readonly]:hover, select[readonly=readonly]:focus { background-color: #FAFAFA; border: 1px solid #CCCCCC; color: #888888; } .form-field-checkbox { display: inline-block; } /* --- Textarea --- */ .form-field-textarea { position: relative; display: inline; margin: 5px auto; width: 99%; } textarea { width: 100%; overflow: auto; resize: vertical; } .form-element-textarea textarea { width: 100%; } .form-element-textarea .form-field-textarea { display: block; } .form-element .form-field-textarea { display: inline-block; } .form-element-textarea .form-field-textarea div { float: left; } .form-element-preview, .form-element-reset { margin: 5px auto 0 auto; text-align: center; display: inline; } /* --- choix des permissions --- */ .form-element-auth .form-field { display: inline-block; margin: 2px 0 0 0; } .form-element-auth .form-field div[class^="advanced-auth"] { float:left; } .form-element-auth .field-description { display: inline; font-style: italic; } .advanced-auth-group select { padding-right: 5px; max-width: 153px; overflow-x: auto; } .advanced-auth-select select { padding-right: 5px; max-width: 132px; word-wrap: normal; overflow-x: auto; } .advanced-auth-select { margin-left:5px; } .advanced-auth-input { margin-left: 5px; width: auto; } .advanced-auth-input input { padding: 4px 24px 4px 6px; } .advanced-auth-input button { margin-left: -29px; padding: 5px 5px 6px 5px; border-width: 0 0 0 1px; } .advanced-auth-input-result { margin: 2px 0 0 0; width: 138px; height: 100px; } .bbcode ~ .form-field-textarea textarea { border-width: 0 1px 1px 1px; } @media (min-width: 769px) { .form-element-textarea-small { width: 49%; } .form-element .form-field-textarea { width: 59%; } } @media (max-width: 480px) { .form-element-auth .form-field .advanced-auth-input { float: none; margin: 5px 0 0 0; } } /* --- 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 { position:absolute; display: block; z-index: 1; padding: 6px 5px; left: 5px; min-width: 20em; background-color: #FEFEFE; border: 1px solid #EAEAEA; box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.3); font-size: 0.8em; 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:before { content: " "; position: absolute; } .text-status-constraint:before { left: 8px; top: -9px; border-bottom: 9px solid rgba(230, 230, 230, 1); border-left: 9px solid transparent; border-right: 9px solid transparent; } .text-status-constraint:after { left: 9px; top: -8px; border-bottom: 8px solid rgba(250, 250, 250, 1); border-left: 8px solid transparent; border-right: 8px solid transparent; } div.field-required:after, div.picture-status-constraint:after { display: inline-block; position: absolute; right: 4px; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } div.field-required:after { top: 10px; opacity: 0.6; color: #C43C35; font-size: 0.8rem; content: "\f069"; } .form-field-date.field-required:after, .form-field-date.picture-status-constraint:after { right: 24px; } .form-field-select.field-required:after, .form-field-number.field-required:after, .form-field-decimal.field-required:after { right: -10px; } .form-field-datetime.field-required:after { right: -15px; } .form-field-checkbox.field-required:after { right: -20px; top: 0; } .form-field-upload-file.field-required:after { right: 43px; top: 12px; } .constraint-status-right .form-field-upload-file.picture-status-constraint:after { right: 40px; top: 8px; } .constraint-status-right .form-field-color:after, .constraint-status-right .form-field-select:after, .constraint-status-right .form-field-number:after, .constraint-status-right .form-field-decimal:after { right: -20px; } .constraint-statuts-right .form-field-checkbox:after { top: 4px; } .constraint-statuts-right .form-field-datetime:after { right: -22px; } .form-field-number input, .form-field-decimal input, .form-field-datetime input { padding-right: 2px; } .form-element-date .constraint-status-error div.field-required:after, .form-element-date .constraint-status-right div.field-required:after { right: 10px; } .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%; } .constraint-status-right div.field-required:after { content: " "; } .constraint-status-right div.form-field-checkbox.picture-status-constraint:after { top: 0; } .constraint-status-right div.picture-status-constraint:after { opacity: 1; font-size: 1.5rem; top: 6px; } .constraint-status-error .form-field-textarea .picture-status-constraint:after, .constraint-status-right .form-field-textarea .picture-status-constraint:after { top: 40%; } .constraint-status-right div.picture-status-constraint:after { content: "\f00c"; color: #57A957; } .constraint-status-error i.picture-status-constraint { content: "\f056"; color: #C43C35; } .form-field-multi-select.field-required:after { 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-multiple-checkbox.field-required:after { top: 4px; right: -16px; } .form-field-radio { display: inline-block; } /* --- HTML Table--- */ .html-table-header-sortable { float: right; } @media (max-width: 768px) { .html-table-header-sortable { display: none; } } .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 --- */ .autocomplete-suggestions { background-color: #FFFFFF; border: 1px solid #999999; overflow: auto; } .autocomplete-suggestions strong { font-weight: normal; color: #3399FF; } .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; cursor: pointer; } .autocomplete-selected { background-color: #F0F0F0; } .autocomplete-no-suggestion { text-align: center; } div[id*='keyword'] .form-autocompleter-container input { max-width: calc(100% - 20px); } /* --- Lined textarea --- */ .linedwrap { max-width: 100%; } .linedtextarea { display: inline-block; margin: 0; padding: 0 0 0 10px; width: calc(100% - 60px); height: 100%; background-color: #FFFFFF; } .linedtextarea textarea, .linedwrap .codelines .lineno { font-size: 10pt; font-family: monospace; line-height: normal !important; } .linedtextarea textarea { margin: 0; padding: 5px 0 0 0; width: 100% !important; height: 100%; border: 0; } .linedwrap .lines { display: inline-block; overflow: hidden; margin-top: 0; padding: 5px 0 0 0; width: 50px; height: 100%; background-color: #FFFFFF; border-right: 1px solid #C0C0C0; } .linedwrap .codelines .lineno { padding: 0.0em 0.5em 0 0; text-align: right; color: #AAAAAA; white-space: nowrap; } .linedwrap .codelines .lineselect { color: red; }
Testo modificato
Apri file
/* -------------------------------------- form.css Contient les elements : - button, - formulaire, ---------------------------------------- */ /* -- Boutons et class boutons -- */ /* ------------------------------ */ /* --- Normal --- */ button, .button { margin: 0.618em; padding: 0.309em 1em; height: auto; border-width: 1px; border-style: solid; border-color: transparent; text-align: center; white-space: nowrap; transition: all 0.2s linear; } button:hover, .button-hover { transition: all 0.3s linear; } button:active, .button-active { transition: all 0.2s linear; } /* --- Petit bouton --- */ button.small, .button-small { padding: 0.228em 0.618em; font-size: 0.809em; } /* --- Bouton basic --- */ .basic-button { display: inline-block; margin: 0.1618em; padding: 0.1618em 0.309em; border: none; font-weight: bold; } .basic-button:hover { text-decoration: none; } /* -- Formulaires -- */ /* ----------------- */ .fieldset-mini { margin: 1.309em auto auto auto; width: 540px; } fieldset { margin: 1.618em 0; background: none; border: none; } fieldset img { max-width: 250px; } @media (min-width: 769px) { fieldset img { max-width: 320px; } } @media (min-width: 1366px) { fieldset img { max-width: 420px; } } .fieldset-submit { text-align: center; } .fieldset-submit legend { display: none; } .horizontal-fieldset-desc, .horizontal-fieldset-element { display: inline-block; vertical-align: middle; margin-right: 1em; } .horizontal-fieldset-desc + .horizontal-fieldset-element { max-width: 100%; } .horizontal-fieldset-element .form-field-select { max-width: none; } optgroup { border: none; border-bottom-width: 1px; border-bottom-style: solid; border-color: transparent; font-weight: bold; } option { padding: 0 0.228em; } legend { display: block; margin: 0 0 0.809em 0; padding: 0 0.809em; width: 100%; border-bottom-width: 1px; border-bottom-style: solid; border-color: transparent; text-transform: none; font-size: 1.5em; } legend > h1 { font-size: inherit; } /* --- Previsualisation AJAX --- */ .xmlhttprequest-preview { overflow: auto; height: 220px; margin: 0.228em auto .1618em auto; padding: 0.1618em 0.228em; border-width: 1px; border-style: solid; border-color: transparent; } .xmlhttprequest-preview img { max-width: 600px; } /* --- Elements de saisie --- */ [type=text], [type=email], [type=url], [type=number], [type=color], [type=tel], [type=search], [type=password], [type=file], textarea, select { padding: 0.309em 0.618em; border-width: 1px; border-style: solid; border-color: transparent; margin-bottom: 0.1618em; max-width: 100%; } [type=text]:focus, [type=email]:focus, [type=url]:focus, [type=number]:focus, [type=color]:focus, [type=tel]:focus, [type=search]:focus, [type=password]:focus, [type=file]:focus, textarea:focus, select:focus { outline: 0; } [type=color] { padding: 0 0.1618em; 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-field-date .input-date { width: 80%; } .form-field-datetime .input-date { width: 40%; } .form-field-datetime .label-time { width: 18%; position: relative; display: inline-block; } .form-field-datetime .label-time input { padding: 0.309em; width: 100%; } .label-time:after { position: absolute; bottom: 18%; left: 103%; content: attr(data-time); } /* --- Cache le generateur de mot de passe sur chrome --- */ .cip-icon-key-small { display: none !important; } /* --- Element du formulaire (englobe le label et l'input d'un champ) --- */ .form-element, .form-element-textarea { position: relative; margin: 0 0.618em 0.618em 0.618em; } @media (min-width: 769px) { #main.main-with-left.main-with-right section .form-element, #main.main-with-left.main-with-right section .form-element-textarea { margin: 0.309em 0; } } .fieldset-description { margin: 0 1em 0.618em 1em; } @media (min-width: 769px) { .form-element, .form-element-textarea { margin: 0 1.618em 1em 1.618em; } .fieldset-description { margin: 0 1.618em 1.482em 1.618em; } } .form-element [id$="user_avatar"] img { max-width: 200px; } .form-field { position: relative; display: inline-block; width: 100%; } .form-field-free-large { width: 100%; max-width: none; } .form-field-action-link { text-align: center; } /* --- Label pour les checkbox et radio --- */ .form-field label { display: block; margin: 0 0.618em 0 0; } /* --- Label pour les inputs [for] et pour les elements sans associations --- */ .form-element > label { display: inline-block; padding: 0 0.618em 0.618em 0; width: 100%; text-align: left; vertical-align: top; } @media (min-width: 1025px) { .form-field { width: calc(60% - 0.309em); } .form-element > label { width: 40%; } } .field-description { display: inline-block; font-size: 0.618em; font-style: italic; } .form-field-select select, .form-field-multi-select select { max-width: 100%; } @media (min-width: 769px) { .field-description { display: block; font-size: 0.809em; font-style: normal; } } input[disabled=disabled], input[disabled=disabled]:hover, input[disabled=disabled]:focus, textarea[disabled=disabled], textarea[disabled=disabled]:hover, textarea[disabled=disabled]:focus, select[disabled=disabled], select[disabled=disabled]:hover, select[disabled=disabled]:focus, input[readonly=readonly], input[readonly=readonly]:hover, input[readonly=readonly]:focus, textarea[readonly=readonly], textarea[readonly=readonly]:hover, textarea[readonly=readonly]:focus, select[readonly=readonly], select[readonly=readonly]:hover, select[readonly=readonly]:focus { border-width: 1px; border-style: solid; border-color: transparent; cursor: not-allowed; } .form-field-checkbox { display: inline-block; } /* --- Textarea --- */ .form-field-textarea { position: relative; display: inline; margin: 0.309em auto; width: 99%; } textarea { width: 100%; overflow: auto; resize: vertical; } .form-element-textarea textarea { width: 100%; } .form-element-textarea .form-field-textarea { display: block; } .form-element .form-field-textarea { display: inline-block; } .form-element-textarea .form-field-textarea div { float: left; } .form-element-preview, .form-element-reset { margin: 0.309em auto 0 auto; text-align: center; display: inline; } /* --- choix des permissions --- */ .form-element-auth .form-field { display: inline-block; margin: 0.1618em 0 0 0; } .form-element-auth .form-field div[class^="advanced-auth"] { float:left; } .form-element-auth .field-description { display: inline; font-style: italic; } .advanced-auth-group select { padding-right: 0.309em; margin-right: 0.618em; overflow-x: auto; } .advanced-auth-select select { padding-right: 0.309em; max-width: 132px; word-wrap: normal; overflow-x: auto; } .advanced-auth-select { margin-left:0.309em; } .advanced-auth-input { margin-left: 0.309em; width: auto; } .advanced-auth-input input { padding: 0.228em 1.482em 0.228em 0.309em; } .advanced-auth-input button { margin: 0 0 0.1618em -0.456em; padding: 0.456em 0.309em 0.456em; } .advanced-auth-input-result { margin: 0.1618em 0 0 0; padding: 0.1618em; height: 6.854em; } .bbcode ~ .form-field-textarea textarea { border-width: 0 1px 1px 1px; } @media (min-width: 769px) { .form-element-textarea-small { width: 49%; } .form-element .form-field-textarea { width: 59%; } } @media (max-width: 480px) { .form-element-auth .form-field .advanced-auth-input { float: none; } } /* --- Verification des contraintes de formulaire --- */ .text-status-constraint { position:absolute; display: block; z-index: 1; padding: 0.309em; top: 110%; border-width: 1px; border-style: solid; border-color: transparent; font-size: 0.809em; font-weight: bold; } .text-status-constraint:after, .text-status-constraint:before { content: " "; position: absolute; } .text-status-constraint:before { left: 8px; top: -9px; border-width: 0 9px 9px 9px; border-style: solid; border-color: transparent; } .text-status-constraint:after { left: 9px; top: -8px; border-width: 0 8px 8px 8px; border-style: solid; border-color: transparent; } .field-required:after, .picture-status-constraint:after { display: inline-block; position: absolute; left: -16px; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .field-required:after { top: 14px; opacity: 0.6; font-size: 0.809rem; content: "\f069"; display: table; } .form-field-date.field-required:after, .form-field-date.picture-status-constraint:after { right: 24px; } .form-field-select.field-required:after, .form-field-number.field-required:after, .form-field-decimal.field-required:after { right: -10px; } .form-field-datetime.field-required:after { right: -15px; } .form-field-checkbox.field-required:after { right: -20px; top: 0; } .form-field-upload-file.field-required:after { right: 43px; top: 12px; } .constraint-status-right .form-field-upload-file.picture-status-constraint:after { right: 40px; top: 8px; } .constraint-status-right .form-field-color:after, .constraint-status-right .form-field-select:after, .constraint-status-right .form-field-number:after, .constraint-status-right .form-field-decimal:after { right: -20px; } .constraint-statuts-right .form-field-checkbox:after { top: 4px; } .constraint-statuts-right .form-field-datetime:after { right: -22px; } .form-field-number input, .form-field-decimal input, .form-field-datetime input { padding-right: 2px; } .form-element-date .constraint-status-error .field-required:after, .form-element-date .constraint-status-right .field-required:after { right: 10px; } .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%; } .constraint-status-right .field-required:after { content: " "; } .constraint-status-right .form-field-checkbox.picture-status-constraint:after { top: 0; } .constraint-status-right .picture-status-constraint:after { opacity: 1; font-size: 1.5rem; top: 10px; } .constraint-status-error .form-field-textarea .picture-status-constraint:after, .constraint-status-right .form-field-textarea .picture-status-constraint:after { top: 40%; } .constraint-status-right .picture-status-constraint:after { content: "\f00c"; } .constraint-status-error i.picture-status-constraint { content: "\f056"; } .form-field-multi-select.field-required:after { display: none; } .form-field-radio-button.field-required:after, .form-field-multiple-checkbox.field-required:after { top: 8px; right: -16px; } .form-field-radio { display: inline-block; } .required-fields-text { text-align: center; } /* --- HTML Table--- */ .html-table-header-sortable { display: none; } .html-table-header-sortable .fa { margin-bottom: 0.228em; } @media (min-width: 769px) { .html-table-header-sortable { display: inline-block; } } /* --- Auto-completion --- */ .autocomplete-suggestions { border-width: 1px; border-style: solid; border-color: transparent; overflow: auto; } .autocomplete-suggestions strong { font-weight: normal; } .autocomplete-suggestion { padding: 0.1618em 0.309em; white-space: nowrap; overflow: hidden; cursor: pointer; } .autocomplete-no-suggestion { text-align: center; } div[id*='keyword'] .form-autocompleter-container input { max-width: calc(100% - 1.309em); } /* --- Lined textarea --- */ .linedwrap { max-width: 100%; } .linedtextarea { display: inline-block; margin: 0; padding: 0 0 0 0.618em; width: calc(100% - 60px); height: 100%; } .linedtextarea textarea, .linedwrap .codelines .lineno { font-size: 10pt; font-family: monospace; line-height: normal !important; } .linedtextarea textarea { margin: 0; padding: 0.309em 0 0 0; width: 100% !important; height: 100%; border: 0; } .linedwrap .lines { display: inline-block; overflow: hidden; margin-top: 0; padding: 0.309em 0 0 0; width: 50px; height: 100%; border-width: 0 1px 0 0; border-style: solid; border-color: transparent; } .linedwrap .codelines .lineno { padding: 0.0em 0.618em 0 0; text-align: right; white-space: nowrap; } .auth-setter { 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; } }
Trovare la differenza