Diff
checker
Texte
Texte
Images
Documents
Excel
Dossiers
Legal
Enterprise
Application de bureau
Prix
Se connecter
Télécharger Diffchecker Desktop
Comparer le texte
Trouver la différence entre deux fichiers texte
Outils
Historique
Éditeur live
Cacher identiques
Sans retour à la ligne
Vue
Divisé
Unifié
Niveau de précision
Intelligent
Mot
Caractère
Coloration syntaxique
Choisir la syntaxe
Ignorer
Transformer le texte
Aller au premier écart
Modifier l'entrée
Diffchecker Desktop
La façon la plus sécurisée d'utiliser Diffchecker. Obtenez l'application Diffchecker Desktop : vos diffs ne quittent jamais votre ordinateur !
Obtenir Desktop
Untitled diff
Créé
il y a 7 ans
Le diff n'expire jamais
Effacer
Exporter
Partager
Expliquer
329 suppressions
Lignes
Total
Supprimé
Caractères
Total
Supprimé
Pour continuer à utiliser cette fonctionnalité, passez à
Diff
checker
Pro
Voir les prix
818 lignes
Copier tout
230 ajouts
Lignes
Total
Ajouté
Caractères
Total
Ajouté
Pour continuer à utiliser cette fonctionnalité, passez à
Diff
checker
Pro
Voir les prix
742 lignes
Copier tout
/* --------------------------------------
/* --------------------------------------
form.css
form.css
Copier
Copié
Copier
Copié
Contient les elements :
Contient les elements :
- button,
- button,
- formulaire,
- formulaire,
Copier
Copié
Copier
Copié
-
----------------------------------------
*/
----------------------------------------
*/
/* -- Boutons et class boutons -- */
/* -- Boutons et class boutons -- */
/* ------------------------------ */
/* ------------------------------ */
/* --- Normal --- */
/* --- Normal --- */
button,
button,
.button {
.button {
Copier
Copié
Copier
Copié
padding: 0.3
em 1em;
margin: 0.618em;
padding: 0.3
09
em 1em;
height: auto;
height: auto;
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
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 {
Copier
Copié
Copier
Copié
background-color: #F9F9F9;
transition: all 0.3s linear;
transition: all 0.3s linear;
}
}
button:active,
button:active,
.button-active {
.button-active {
Copier
Copié
Copier
Copié
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 {
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
margin:
1px
;
margin:
0.1618em
;
padding:
1px 6px
;
padding:
0.1618em 0.309em
;
border: none;
border: none;
font-weight: bold;
font-weight: bold;
Copier
Copié
Copier
Copié
color: #FFFFFF;
}
}
.basic-button:hover {
.basic-button:hover {
Copier
Copié
Copier
Copié
color: #FAFAFA;
text-decoration: none;
text-decoration: none;
}
}
Copier
Copié
Copier
Copié
/* --- 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 {
Copier
Copié
Copier
Copié
margin:
20px
auto auto auto;
margin:
1.309em
auto auto auto;
width: 540px;
width: 540px;
}
}
fieldset {
fieldset {
Copier
Copié
Copier
Copié
margin: 1.
5em
0;
margin: 1.
618em
0;
background: none;
background: none;
Copier
Copié
Copier
Copié
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 {
Copier
Copié
Copier
Copié
max-width:
450px
;
max-width:
320px
;
}
}
}
}
Copier
Copié
Copier
Copié
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;
}
}
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
border-bottom
: 1px
solid
#5B5A5A
;
border-bottom
-width
: 1px
;
border-bottom-style:
solid
;
border-color: transparent
;
font-weight: bold;
font-weight: bold;
}
}
option {
option {
Copier
Copié
Copier
Copié
padding: 0
3px
;
padding: 0
0.228em
;
}
}
legend {
legend {
display: block;
display: block;
Copier
Copié
Copier
Copié
margin: 0 0 0.
6em
0;
margin: 0 0 0.
809em
0;
padding: 0 0.809em;
width: 100%;
width: 100%;
Copier
Copié
Copier
Copié
border-bottom
: 1px
solid
#DDDDDD
;
border-bottom
-width
: 1px
;
border-bottom-style:
solid
;
border-color: transparent
;
text-transform: none;
text-transform: none;
Copier
Copié
Copier
Copié
color: #474747;
font-size: 1.5em;
font-size: 1.5em;
}
}
Copier
Copié
Copier
Copié
/* --- Previsualisation
--- */
legend > h1 {
font-size: inherit;
}
/* --- Previsualisation
AJAX
--- */
.xmlhttprequest-preview {
.xmlhttprequest-preview {
Copier
Copié
Copier
Copié
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 --- */
Copier
Copié
Copier
Copié
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 {
Copier
Copié
Copier
Copié
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
;
}
}
Copier
Copié
Copier
Copié
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 {
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
color: #222222;
}
}
Copier
Copié
Copier
Copié
input
[type=color] {
[type=color] {
padding: 0
2px 0 2px
;
padding: 0
0.1618em
;
width:
25px
;
width:
1.482em
;
}
}
Copier
Copié
Copier
Copié
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;
}
}
Copier
Copié
Copier
Copié
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);
}
}
Copier
Copié
Copier
Copié
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;
}
Copier
Copié
Copier
Copié
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;
}
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
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) {
Copier
Copié
Copier
Copié
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 {
Copier
Copié
Copier
Copié
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;
}
}
}
Copier
Copié
Copier
Copié
@media (
max
-width:
480px
) {
@media (
min
-width:
769px
) {
.form-element,
.form-element,
.form-element-textarea {
.form-element-textarea {
Copier
Copié
Copier
Copié
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 {
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
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;
}
}
Copier
Copié
Copier
Copié
@media (min-width: 1025px) {
.form-field {
width: calc(60% - 0.309em);
}
.form-element > label {
width: 40%;
}
}
.field-description {
.field-description {
Copier
Copié
Copier
Copié
display:
block;
display:
inline-
block;
font-size: 0.
8em;
font-size: 0.
61
8em;
line-height: 12px
;
font-style: italic
;
}
}
Copier
Copié
Copier
Copié
@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) {
Copier
Copié
Copier
Copié
.
form-
field-
select
{
.
field-
description
{
max-width: 59%
;
display: block;
font-size: 0.809em;
font-style: normal
;
}
}
}
}
Copier
Copié
Copier
Copié
.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,
Copier
Copié
Copier
Copié
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 {
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
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 {
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
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 {
Copier
Copié
Copier
Copié
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 {
Copier
Copié
Copier
Copié
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 {
Copier
Copié
Copier
Copié
margin-left:
5px
;
margin-left:
0.309em
;
}
}
.advanced-auth-input {
.advanced-auth-input {
Copier
Copié
Copier
Copié
margin-left:
5px
;
margin-left:
0.309em
;
width: auto;
width: auto;
}
}
.advanced-auth-input input {
.advanced-auth-input input {
Copier
Copié
Copier
Copié
padding:
4px 24px 4px 6px
;
padding:
0.228em 1.482em 0.228em 0.309em
;
}
}
.advanced-auth-input button {
.advanced-auth-input button {
Copier
Copié
Copier
Copié
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 {
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
margin: 5px 0 0 0;
}
}
}
}
/* --- Verification des contraintes de formulaire --- */
/* --- Verification des contraintes de formulaire --- */
Copier
Copié
Copier
Copié
.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;
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
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;
}
}
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
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;
}
}
Copier
Copié
Copier
Copié
div
.field-required:after {
.field-required:after {
top: 1
0
px;
top: 1
4
px;
opacity: 0.6;
opacity: 0.6;
Copier
Copié
Copier
Copié
color: #C43C35;
font-size: 0.8
09
rem;
font-size: 0.8
rem;
content: "\f069";
content: "\f069";
Copier
Copié
Copier
Copié
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;
}
}
Copier
Copié
Copier
Copié
.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%;
}
}
Copier
Copié
Copier
Copié
.constraint-status-right
div
.field-required:after {
.constraint-status-right
.field-required:after {
content: " ";
content: " ";
}
}
Copier
Copié
Copier
Copié
.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;
}
}
Copier
Copié
Copier
Copié
.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;
Copier
Copié
Copier
Copié
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%;
}
}
Copier
Copié
Copier
Copié
.constraint-status-right
div
.picture-status-constraint:after {
.constraint-status-right
.picture-status-constraint:after {
content: "\f00c";
content: "\f00c";
Copier
Copié
Copier
Copié
color: #57A957;
}
}
.constraint-status-error i.picture-status-constraint {
.constraint-status-error i.picture-status-constraint {
content: "\f056";
content: "\f056";
Copier
Copié
Copier
Copié
color: #C43C35;
}
}
.form-field-multi-select.field-required:after {
.form-field-multi-select.field-required:after {
display: none;
display: none;
}
}
Copier
Copié
Copier
Copié
.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 {
Copier
Copié
Copier
Copié
top:
4
px;
top:
8
px;
right: -16px;
right: -16px;
}
}
.form-field-radio {
.form-field-radio {
display: inline-block;
display: inline-block;
}
}
Copier
Copié
Copier
Copié
.required-fields-text {
text-align: center;
}
/* --- HTML Table--- */
/* --- HTML Table--- */
.html-table-header-sortable {
.html-table-header-sortable {
Copier
Copié
Copier
Copié
float: right
;
display: none
;
}
}
Copier
Copié
Copier
Copié
@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 {
Copier
Copié
Copier
Copié
display:
none
;
display:
inline-block
;
}
}
}
}
Copier
Copié
Copier
Copié
.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 {
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
color: #3399FF;
}
}
.autocomplete-suggestion {
.autocomplete-suggestion {
Copier
Copié
Copier
Copié
padding:
2px 5px
;
padding:
0.1618em 0.309em
;
white-space: nowrap;
white-space: nowrap;
overflow: hidden;
overflow: hidden;
cursor: pointer;
cursor: pointer;
}
}
Copier
Copié
Copier
Copié
.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 {
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
padding: 0 0 0
10px
;
padding: 0 0 0
0.618em
;
width: calc(100% - 60px);
width: calc(100% - 60px);
height: 100%;
height: 100%;
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
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;
Copier
Copié
Copier
Copié
padding:
5px
0 0 0;
padding:
0.309em
0 0 0;
width: 50px;
width: 50px;
height: 100%;
height: 100%;
Copier
Copié
Copier
Copié
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 {
Copier
Copié
Copier
Copié
padding: 0.0em 0.
5em
0 0;
padding: 0.0em 0.
618em
0 0;
text-align: right;
text-align: right;
Copier
Copié
Copier
Copié
color: #AAAAAA;
white-space: nowrap;
white-space: nowrap;
}
}
Copier
Copié
Copier
Copié
.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érences enregistrées
Texte d'origine
Ouvrir un fichier
/* -------------------------------------- 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; }
Texte modifié
Ouvrir un fichier
/* -------------------------------------- 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; } }
Trouver la différence