Diff
checker
文本
文本
图像
文档
Excel
文件夹
Legal
Enterprise
桌面版
定价
登录
下载 Diffchecker 桌面版
比较文本
查找两个文本文件之间的差异
工具
历史
实时编辑器
折叠未更改行
关闭换行
视图
拆分
统一
比对精度
智能
单词
字符
语法高亮
选择语法
忽略
文本转换
转到第一个差异
编辑输入
Diffchecker Desktop
运行Diffchecker最安全的方式。获取Diffchecker桌面应用:您的差异永远不会离开您的电脑!
获取桌面版
Untitled diff
创建于
7年前
差异永不过期
清除
导出
分享
解释
329 删除
行
总计
删除
字符
总计
删除
要继续使用此功能,请升级到
Diff
checker
Pro
查看价格
818 行
全部复制
230 添加
行
总计
添加
字符
总计
添加
要继续使用此功能,请升级到
Diff
checker
Pro
查看价格
742 行
全部复制
/* --------------------------------------
/* --------------------------------------
form.css
form.css
复制
已复制
复制
已复制
Contient les elements :
Contient les elements :
- button,
- button,
- formulaire,
- formulaire,
复制
已复制
复制
已复制
-
----------------------------------------
*/
----------------------------------------
*/
/* -- Boutons et class boutons -- */
/* -- Boutons et class boutons -- */
/* ------------------------------ */
/* ------------------------------ */
/* --- Normal --- */
/* --- Normal --- */
button,
button,
.button {
.button {
复制
已复制
复制
已复制
padding: 0.3
em 1em;
margin: 0.618em;
padding: 0.3
09
em 1em;
height: auto;
height: auto;
复制
已复制
复制
已复制
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%, rgba(56, 56, 56, 0.10) 100%);
border-width: 1px;
background-color: #F1F1F1;
border-style: solid;
border-style: solid;
复制
已复制
复制
已复制
border-width: 1px;
border-color:
transparent;
border-color:
#E1E1E1 #D1D1D1 #C9C9C9 #DDDDDD;
border-radius: 1px;
box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);
color: #777777;
text-align: center;
text-align: center;
复制
已复制
复制
已复制
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);
white-space: nowrap;
white-space: nowrap;
transition: all 0.2s linear;
transition: all 0.2s linear;
}
}
button:hover,
button:hover,
.button-hover {
.button-hover {
复制
已复制
复制
已复制
background-color: #F9F9F9;
transition: all 0.3s linear;
transition: all 0.3s linear;
}
}
button:active,
button:active,
.button-active {
.button-active {
复制
已复制
复制
已复制
background-color: #F5F5F5;
border-color: #DDDDDD;
box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);
transition: all 0.2s linear;
transition: all 0.2s linear;
}
}
/* --- Petit bouton --- */
/* --- Petit bouton --- */
button.small,
button.small,
.button-small {
.button-small {
复制
已复制
复制
已复制
padding: 0.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;
复制
已复制
复制
已复制
margin:
1px
;
margin:
0.1618em
;
padding:
1px 6px
;
padding:
0.1618em 0.309em
;
border: none;
border: none;
font-weight: bold;
font-weight: bold;
复制
已复制
复制
已复制
color: #FFFFFF;
}
}
.basic-button:hover {
.basic-button:hover {
复制
已复制
复制
已复制
color: #FAFAFA;
text-decoration: none;
text-decoration: none;
}
}
复制
已复制
复制
已复制
/* --- Bouton basic avec couleur de base --- */
.basic-button { background-color: #366493; }
.basic-button:hover { background-color: #517BA6; }
/* --- Bouton basic avec couleur alternative --- */
.basic-button.alt { background-color: #E2A447; }
.basic-button.alt:hover { background-color: #FFC672; }
/* --- field button --- */
.field-button {
display: inline-block;
font-size: 0;
white-space: nowrap;
}
.field-button button {
margin-left: -1px;
padding: 4px 8px;
font-size: 11px;
}
/* -- Formulaires -- */
/* -- Formulaires -- */
/* ----------------- */
/* ----------------- */
.fieldset-mini {
.fieldset-mini {
复制
已复制
复制
已复制
margin:
20px
auto auto auto;
margin:
1.309em
auto auto auto;
width: 540px;
width: 540px;
}
}
fieldset {
fieldset {
复制
已复制
复制
已复制
margin: 1.
5em
0;
margin: 1.
618em
0;
background: none;
background: none;
复制
已复制
复制
已复制
border: none;
border: none;
}
}
fieldset img {
fieldset img {
max-width: 250px;
max-width: 250px;
}
}
@media (min-width: 769px) {
@media (min-width: 769px) {
fieldset img {
fieldset img {
复制
已复制
复制
已复制
max-width:
450px
;
max-width:
320px
;
}
}
}
}
复制
已复制
复制
已复制
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;
}
}
复制
已复制
复制
已复制
fieldset
.fieldset-submit legend {
.fieldset-submit legend {
display: none;
display: none;
}
}
.horizontal-fieldset-desc,
.horizontal-fieldset-desc,
.horizontal-fieldset-element {
.horizontal-fieldset-element {
display: inline-block;
display: inline-block;
vertical-align: middle;
vertical-align: middle;
复制
已复制
复制
已复制
margin-right: 1em;
}
}
.horizontal-fieldset-desc + .horizontal-fieldset-element {
.horizontal-fieldset-desc + .horizontal-fieldset-element {
max-width: 100%;
max-width: 100%;
}
}
.horizontal-fieldset-element .form-field-select {
.horizontal-fieldset-element .form-field-select {
max-width: none;
max-width: none;
}
}
optgroup {
optgroup {
border: none;
border: none;
复制
已复制
复制
已复制
border-bottom
: 1px
solid
#5B5A5A
;
border-bottom
-width
: 1px
;
border-bottom-style:
solid
;
border-color: transparent
;
font-weight: bold;
font-weight: bold;
}
}
option {
option {
复制
已复制
复制
已复制
padding: 0
3px
;
padding: 0
0.228em
;
}
}
legend {
legend {
display: block;
display: block;
复制
已复制
复制
已复制
margin: 0 0 0.
6em
0;
margin: 0 0 0.
809em
0;
padding: 0 0.809em;
width: 100%;
width: 100%;
复制
已复制
复制
已复制
border-bottom
: 1px
solid
#DDDDDD
;
border-bottom
-width
: 1px
;
border-bottom-style:
solid
;
border-color: transparent
;
text-transform: none;
text-transform: none;
复制
已复制
复制
已复制
color: #474747;
font-size: 1.5em;
font-size: 1.5em;
}
}
复制
已复制
复制
已复制
/* --- Previsualisation
--- */
legend > h1 {
font-size: inherit;
}
/* --- Previsualisation
AJAX
--- */
.xmlhttprequest-preview {
.xmlhttprequest-preview {
复制
已复制
复制
已复制
padding: 0
2px
;
overflow: auto;
background-color: #FFFFFF
;
height: 220px;
border
: 1px
solid
#CCCCCC
;
margin: 0.228em auto .1618em auto;
color:
#2E3B5F
;
padding: 0
.1618em 0.228em
;
border-width: 1px
;
border
-style:
solid
;
border-
color:
transparent
;
}
}
.xmlhttprequest-preview img {
.xmlhttprequest-preview img {
max-width: 600px;
max-width: 600px;
}
}
/* --- Elements de saisie --- */
/* --- Elements de saisie --- */
复制
已复制
复制
已复制
input
[type=text],
[type=text],
input
[type=email],
[type=email],
input
[type=url],
[type=url],
input
[type=number],
[type=number],
input
[type=color],
[type=color],
input
[type=tel],
[type=tel],
input
[type=search],
[type=search],
input
[type=password],
[type=password],
input
[type=file],
[type=file],
textarea,
textarea,
select {
select {
复制
已复制
复制
已复制
padding:
4px 18px 4px 6px;
padding:
0.309em 0.618em
;
background-color: #FFFFFF
;
border
-width
: 1px
;
border
: 1px
solid #CCCCCC
;
border-style: solid;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01);
border
-
color:
transparent;
color: #555555;
margin-bottom: 0.1618em;
}
max-width: 100%
;
input[type=text]:hover,
input[type=email]:hover,
input[type=url]:hover,
input[type=number]:hover,
input[type=color]:hover,
input[type=tel]:hover,
input[type=search]:hover,
input[type=password]:hover,
input[type=file]:hover,
textarea:hover,
select:hover {
background-color: #FFFFFF;
border
: 1px solid #BBBBBB;
color:
#333333
;
}
}
复制
已复制
复制
已复制
input
[type=text]:focus,
[type=text]:focus,
input
[type=email]:focus,
[type=email]:focus,
input
[type=url]:focus,
[type=url]:focus,
input
[type=number]:focus,
[type=number]:focus,
input
[type=color]:focus,
[type=color]:focus,
input
[type=tel]:focus,
[type=tel]:focus,
input
[type=search]:focus,
[type=search]:focus,
input
[type=password]:focus,
[type=password]:focus,
input
[type=file]:focus,
[type=file]:focus,
textarea:focus,
textarea:focus,
select:focus {
select:focus {
复制
已复制
复制
已复制
border-color: #BBBBBB;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.01), 0 0 6px rgba(0, 0, 0, 0.2);
outline: 0;
outline: 0;
复制
已复制
复制
已复制
color: #222222;
}
}
复制
已复制
复制
已复制
input
[type=color] {
[type=color] {
padding: 0
2px 0 2px
;
padding: 0
0.1618em
;
width:
25px
;
width:
1.482em
;
}
}
复制
已复制
复制
已复制
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;
}
}
复制
已复制
复制
已复制
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);
}
}
复制
已复制
复制
已复制
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;
}
复制
已复制
复制
已复制
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;
}
复制
已复制
复制
已复制
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;
复制
已复制
复制
已复制
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) {
复制
已复制
复制
已复制
div
#main.main-with-left.main-with-right section .form-element,
#main.main-with-left.main-with-right section .form-element,
div
#main.main-with-left.main-with-right section .form-element-textarea {
#main.main-with-left.main-with-right section .form-element-textarea {
margin:
5px
0;
margin:
0.309em
0;
}
}
}
}
.fieldset-description {
.fieldset-description {
复制
已复制
复制
已复制
margin: 0 1em
1.5em
1em;
margin: 0 1em
0.618em
1em;
}
@media (max-width: 768px) {
.form-element,
.form-element-textarea {
margin: 0 0.6em 1em 0.6em;
}
.fieldset-description {
margin: 0 0.6em 1.3em 0.6em;
}
}
}
复制
已复制
复制
已复制
@media (
max
-width:
480px
) {
@media (
min
-width:
769px
) {
.form-element,
.form-element,
.form-element-textarea {
.form-element-textarea {
复制
已复制
复制
已复制
margin: 0
0.6
em
0.5
em
0.6
em;
margin: 0
1.618
em
1
em
1.618
em;
}
}
.fieldset-description {
.fieldset-description {
复制
已复制
复制
已复制
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;
复制
已复制
复制
已复制
max-
width:
600px;
width:
100%;
}
@media (max-width:360px) {
.form-field {
max-width: 270px;
}
}
}
.form-field-free-large {
.form-field-free-large {
width: 100%;
width: 100%;
max-width: none;
max-width: none;
}
}
.form-field-action-link {
.form-field-action-link {
text-align: center;
text-align: center;
}
}
/* --- Label pour les checkbox et radio --- */
/* --- Label pour les checkbox et radio --- */
.form-field label {
.form-field label {
display: block;
display: block;
复制
已复制
复制
已复制
margin: 0
10px
0 0;
margin: 0
0.618em
0 0;
}
}
/* --- Label pour les inputs [for] et pour les elements sans associations --- */
/* --- Label pour les inputs [for] et pour les elements sans associations --- */
.form-element > label {
.form-element > label {
display: inline-block;
display: inline-block;
复制
已复制
复制
已复制
padding
-right: 10px
;
padding
: 0 0.618em 0.618em 0
;
width:
40
%;
width:
100
%;
text-align: left;
text-align: left;
vertical-align: top;
vertical-align: top;
}
}
复制
已复制
复制
已复制
@media (min-width: 1025px) {
.form-field {
width: calc(60% - 0.309em);
}
.form-element > label {
width: 40%;
}
}
.field-description {
.field-description {
复制
已复制
复制
已复制
display:
block;
display:
inline-
block;
font-size: 0.
8em;
font-size: 0.
61
8em;
line-height: 12px
;
font-style: italic
;
}
}
复制
已复制
复制
已复制
@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) {
复制
已复制
复制
已复制
.
form-
field-
select
{
.
field-
description
{
max-width: 59%
;
display: block;
font-size: 0.809em;
font-style: normal
;
}
}
}
}
复制
已复制
复制
已复制
.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,
复制
已复制
复制
已复制
select[disabled=disabled]:focus
{
select[disabled=disabled]:focus
,
background-color: #F1F1F1;
border: 1px solid #CCCCCC;
color: #AAAAAA;
cursor: not-allowed;
}
input[readonly=readonly],
input[readonly=readonly],
input[readonly=readonly]:hover,
input[readonly=readonly]:hover,
input[readonly=readonly]:focus,
input[readonly=readonly]:focus,
textarea[readonly=readonly],
textarea[readonly=readonly],
textarea[readonly=readonly]:hover,
textarea[readonly=readonly]:hover,
textarea[readonly=readonly]:focus,
textarea[readonly=readonly]:focus,
select[readonly=readonly],
select[readonly=readonly],
select[readonly=readonly]:hover,
select[readonly=readonly]:hover,
select[readonly=readonly]:focus {
select[readonly=readonly]:focus {
复制
已复制
复制
已复制
background-color: #FAFAFA
;
border-width: 1px
;
border
: 1px
solid
#CCCCCC
;
border
-style:
solid
;
color:
#888888
;
border-
color:
transparent;
cursor: not-allowed
;
}
}
.form-field-checkbox {
.form-field-checkbox {
display: inline-block;
display: inline-block;
}
}
/* --- Textarea --- */
/* --- Textarea --- */
.form-field-textarea {
.form-field-textarea {
position: relative;
position: relative;
display: inline;
display: inline;
复制
已复制
复制
已复制
margin:
5px
auto;
margin:
0.309em
auto;
width: 99%;
width: 99%;
}
}
textarea {
textarea {
width: 100%;
width: 100%;
overflow: auto;
overflow: auto;
resize: vertical;
resize: vertical;
}
}
.form-element-textarea textarea {
.form-element-textarea textarea {
width: 100%;
width: 100%;
}
}
.form-element-textarea .form-field-textarea {
.form-element-textarea .form-field-textarea {
display: block;
display: block;
}
}
.form-element .form-field-textarea {
.form-element .form-field-textarea {
display: inline-block;
display: inline-block;
}
}
.form-element-textarea .form-field-textarea div {
.form-element-textarea .form-field-textarea div {
float: left;
float: left;
}
}
.form-element-preview, .form-element-reset {
.form-element-preview, .form-element-reset {
复制
已复制
复制
已复制
margin:
5px
auto 0 auto;
margin:
0.309em
auto 0 auto;
text-align: center;
text-align: center;
display: inline;
display: inline;
}
}
/* --- choix des permissions --- */
/* --- choix des permissions --- */
.form-element-auth .form-field {
.form-element-auth .form-field {
display: inline-block;
display: inline-block;
复制
已复制
复制
已复制
margin:
2px
0 0 0;
margin:
0.1618em
0 0 0;
}
}
.form-element-auth .form-field div[class^="advanced-auth"] {
.form-element-auth .form-field div[class^="advanced-auth"] {
float:left;
float:left;
}
}
.form-element-auth .field-description {
.form-element-auth .field-description {
display: inline;
display: inline;
font-style: italic;
font-style: italic;
}
}
.advanced-auth-group select {
.advanced-auth-group select {
复制
已复制
复制
已复制
padding-right:
5px
;
padding-right:
0.309em
;
max-width: 153px
;
margin-right: 0.618em
;
overflow-x: auto;
overflow-x: auto;
}
}
.advanced-auth-select select {
.advanced-auth-select select {
复制
已复制
复制
已复制
padding-right:
5px
;
padding-right:
0.309em
;
max-width: 132px;
max-width: 132px;
word-wrap: normal;
word-wrap: normal;
overflow-x: auto;
overflow-x: auto;
}
}
.advanced-auth-select {
.advanced-auth-select {
复制
已复制
复制
已复制
margin-left:
5px
;
margin-left:
0.309em
;
}
}
.advanced-auth-input {
.advanced-auth-input {
复制
已复制
复制
已复制
margin-left:
5px
;
margin-left:
0.309em
;
width: auto;
width: auto;
}
}
.advanced-auth-input input {
.advanced-auth-input input {
复制
已复制
复制
已复制
padding:
4px 24px 4px 6px
;
padding:
0.228em 1.482em 0.228em 0.309em
;
}
}
.advanced-auth-input button {
.advanced-auth-input button {
复制
已复制
复制
已复制
margin
-left: -29px
;
margin
: 0 0 0.1618em -0.456em
;
padding:
5px 5px 6px 5px;
padding:
0.456em 0.309em 0.456em
;
border-width: 0 0 0 1px
;
}
}
.advanced-auth-input-result {
.advanced-auth-input-result {
复制
已复制
复制
已复制
margin:
2px
0 0 0;
margin:
0.1618em
0 0 0;
width: 138px
;
padding: 0.1618em
;
height:
100px
;
height:
6.854em
;
}
}
.bbcode ~ .form-field-textarea textarea {
.bbcode ~ .form-field-textarea textarea {
border-width: 0 1px 1px 1px;
border-width: 0 1px 1px 1px;
}
}
@media (min-width: 769px) {
@media (min-width: 769px) {
.form-element-textarea-small {
.form-element-textarea-small {
width: 49%;
width: 49%;
}
}
.form-element .form-field-textarea {
.form-element .form-field-textarea {
width: 59%;
width: 59%;
}
}
}
}
@media (max-width: 480px) {
@media (max-width: 480px) {
.form-element-auth .form-field .advanced-auth-input {
.form-element-auth .form-field .advanced-auth-input {
float: none;
float: none;
复制
已复制
复制
已复制
margin: 5px 0 0 0;
}
}
}
}
/* --- Verification des contraintes de formulaire --- */
/* --- Verification des contraintes de formulaire --- */
复制
已复制
复制
已复制
.constraint-status-error input,
.constraint-status-error textarea {
border-color: rgba(196, 60, 43, 0.3);
box-shadow: inset 0 0 3px rgba(196, 60, 43, 0.1);
color: #C43C35;
}
.constraint-status-error input:hover,
.constraint-status-error input:focus,
.constraint-status-error textarea:hover,
.constraint-status-error textarea:focus {
border-color: rgba(196, 60, 43, 0.5);
box-shadow: inset 0 0 6px rgba(196, 60, 43, 0.3);
color: #C43C35;
}
.text-status-constraint {
.text-status-constraint {
position:absolute;
position:absolute;
display: block;
display: block;
z-index: 1;
z-index: 1;
复制
已复制
复制
已复制
padding:
6px 5px
;
padding:
0.309em
;
left: 5px
;
top: 110%
;
min
-width:
20em;
border
-width:
1px
;
background-color: #FEFEFE
;
border
-style:
solid
;
border
: 1px
solid
#EAEAEA
;
border-color: transparent
;
box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.3)
;
font-size: 0.8
09
em;
font-size: 0.8
em;
font-weight: bold;
font-weight: bold;
复制
已复制
复制
已复制
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
input + .text-status-constraint {
top: 25px;
}
}
.text-status-constraint:after,
.text-status-constraint:after,
.text-status-constraint:before {
.text-status-constraint:before {
content: " ";
content: " ";
position: absolute;
position: absolute;
}
}
.text-status-constraint:before {
.text-status-constraint:before {
left: 8px;
left: 8px;
top: -9px;
top: -9px;
复制
已复制
复制
已复制
border-
bottom:
9px
solid rgba(230, 230, 230, 1)
;
border-
width: 0
9px
9px 9px
;
border-
left: 9px
solid
transparent
;
border-
style:
solid
;
border-
right: 9px solid
transparent;
border-
color:
transparent;
}
}
.text-status-constraint:after {
.text-status-constraint:after {
left: 9px;
left: 9px;
top: -8px;
top: -8px;
复制
已复制
复制
已复制
border-
bottom:
8px
solid rgba(250, 250, 250, 1)
;
border-
width: 0
8px
8px 8px
;
border-
left: 8px
solid
transparent
;
border-
style:
solid
;
border-
right: 8px solid
transparent;
border-
color:
transparent;
}
}
复制
已复制
复制
已复制
div
.field-required:after,
.field-required:after,
div
.picture-status-constraint:after {
.picture-status-constraint:after {
display: inline-block;
display: inline-block;
position: absolute;
position: absolute;
复制
已复制
复制
已复制
right: 4px
;
left: -16px
;
font
: normal normal normal 14px/1
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;
}
}
复制
已复制
复制
已复制
div
.field-required:after {
.field-required:after {
top: 1
0
px;
top: 1
4
px;
opacity: 0.6;
opacity: 0.6;
复制
已复制
复制
已复制
color: #C43C35;
font-size: 0.8
09
rem;
font-size: 0.8
rem;
content: "\f069";
content: "\f069";
复制
已复制
复制
已复制
display: table;
}
}
.form-field-date.field-required:after,
.form-field-date.field-required:after,
.form-field-date.picture-status-constraint:after {
.form-field-date.picture-status-constraint:after {
right: 24px;
right: 24px;
}
}
.form-field-select.field-required:after,
.form-field-select.field-required:after,
.form-field-number.field-required:after,
.form-field-number.field-required:after,
.form-field-decimal.field-required:after {
.form-field-decimal.field-required:after {
right: -10px;
right: -10px;
}
}
.form-field-datetime.field-required:after {
.form-field-datetime.field-required:after {
right: -15px;
right: -15px;
}
}
.form-field-checkbox.field-required:after {
.form-field-checkbox.field-required:after {
right: -20px;
right: -20px;
top: 0;
top: 0;
}
}
.form-field-upload-file.field-required:after {
.form-field-upload-file.field-required:after {
right: 43px;
right: 43px;
top: 12px;
top: 12px;
}
}
.constraint-status-right .form-field-upload-file.picture-status-constraint:after {
.constraint-status-right .form-field-upload-file.picture-status-constraint:after {
right: 40px;
right: 40px;
top: 8px;
top: 8px;
}
}
.constraint-status-right .form-field-color:after,
.constraint-status-right .form-field-color:after,
.constraint-status-right .form-field-select:after,
.constraint-status-right .form-field-select:after,
.constraint-status-right .form-field-number:after,
.constraint-status-right .form-field-number:after,
.constraint-status-right .form-field-decimal:after {
.constraint-status-right .form-field-decimal:after {
right: -20px;
right: -20px;
}
}
.constraint-statuts-right .form-field-checkbox:after {
.constraint-statuts-right .form-field-checkbox:after {
top: 4px;
top: 4px;
}
}
.constraint-statuts-right .form-field-datetime:after {
.constraint-statuts-right .form-field-datetime:after {
right: -22px;
right: -22px;
}
}
.form-field-number input,
.form-field-number input,
.form-field-decimal input,
.form-field-decimal input,
.form-field-datetime input {
.form-field-datetime input {
padding-right: 2px;
padding-right: 2px;
}
}
复制
已复制
复制
已复制
.form-element-date .constraint-status-error
div
.field-required:after,
.form-element-date .constraint-status-error
.field-required:after,
.form-element-date .constraint-status-right
div
.field-required:after {
.form-element-date .constraint-status-right
.field-required:after {
right: 10px;
right: 10px;
}
}
.form-field-textarea.field-required:after,
.form-field-textarea.field-required:after,
.constraint-status-right .form-field-textarea.field-required:after,
.constraint-status-right .form-field-textarea.field-required:after,
.constraint-status-right .form-field-textarea.field-required:after {
.constraint-status-right .form-field-textarea.field-required:after {
top: 45%;
top: 45%;
}
}
复制
已复制
复制
已复制
.constraint-status-right
div
.field-required:after {
.constraint-status-right
.field-required:after {
content: " ";
content: " ";
}
}
复制
已复制
复制
已复制
.constraint-status-right
div
.form-field-checkbox.picture-status-constraint:after {
.constraint-status-right
.form-field-checkbox.picture-status-constraint:after {
top: 0;
top: 0;
}
}
复制
已复制
复制
已复制
.constraint-status-right
div
.picture-status-constraint:after {
.constraint-status-right
.picture-status-constraint:after {
opacity: 1;
opacity: 1;
font-size: 1.5rem;
font-size: 1.5rem;
复制
已复制
复制
已复制
top:
6px
;
top:
10px
;
}
}
.constraint-status-error .form-field-textarea .picture-status-constraint:after,
.constraint-status-error .form-field-textarea .picture-status-constraint:after,
.constraint-status-right .form-field-textarea .picture-status-constraint:after {
.constraint-status-right .form-field-textarea .picture-status-constraint:after {
top: 40%;
top: 40%;
}
}
复制
已复制
复制
已复制
.constraint-status-right
div
.picture-status-constraint:after {
.constraint-status-right
.picture-status-constraint:after {
content: "\f00c";
content: "\f00c";
复制
已复制
复制
已复制
color: #57A957;
}
}
.constraint-status-error i.picture-status-constraint {
.constraint-status-error i.picture-status-constraint {
content: "\f056";
content: "\f056";
复制
已复制
复制
已复制
color: #C43C35;
}
}
.form-field-multi-select.field-required:after {
.form-field-multi-select.field-required:after {
display: none;
display: none;
}
}
复制
已复制
复制
已复制
.constraint-status-right .form-field-multi-select select {
border-color: rgba(71, 137, 72, 0.3);
box-shadow: 0 0 5px rgba(71, 137, 72, 0.1);
}
.form-field-radio-button.field-required:after,
.form-field-radio-button.field-required:after,
.form-field-multiple-checkbox.field-required:after {
.form-field-multiple-checkbox.field-required:after {
复制
已复制
复制
已复制
top:
4
px;
top:
8
px;
right: -16px;
right: -16px;
}
}
.form-field-radio {
.form-field-radio {
display: inline-block;
display: inline-block;
}
}
复制
已复制
复制
已复制
.required-fields-text {
text-align: center;
}
/* --- HTML Table--- */
/* --- HTML Table--- */
.html-table-header-sortable {
.html-table-header-sortable {
复制
已复制
复制
已复制
float: right
;
display: none
;
}
}
复制
已复制
复制
已复制
@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 {
复制
已复制
复制
已复制
display:
none
;
display:
inline-block
;
}
}
}
}
复制
已复制
复制
已复制
.html-table-header-sortable .fa-caret-up { margin-bottom: -4px; }
.html-table-header-sortable .fa-caret-down { margin-top: -12px; }
.html-table-header-sortable .sort-active {
color: #AAAAAA;
}
/* --- Auto-completion --- */
/* --- Auto-completion --- */
.autocomplete-suggestions {
.autocomplete-suggestions {
复制
已复制
复制
已复制
background-color: #FFFFFF
;
border-width: 1px
;
border
: 1px
solid
#999999
;
border
-style:
solid
;
border-color: transparent
;
overflow: auto;
overflow: auto;
}
}
.autocomplete-suggestions strong {
.autocomplete-suggestions strong {
font-weight: normal;
font-weight: normal;
复制
已复制
复制
已复制
color: #3399FF;
}
}
.autocomplete-suggestion {
.autocomplete-suggestion {
复制
已复制
复制
已复制
padding:
2px 5px
;
padding:
0.1618em 0.309em
;
white-space: nowrap;
white-space: nowrap;
overflow: hidden;
overflow: hidden;
cursor: pointer;
cursor: pointer;
}
}
复制
已复制
复制
已复制
.autocomplete-selected {
background-color: #F0F0F0;
}
.autocomplete-no-suggestion {
.autocomplete-no-suggestion {
text-align: center;
text-align: center;
}
}
div[id*='keyword'] .form-autocompleter-container input {
div[id*='keyword'] .form-autocompleter-container input {
复制
已复制
复制
已复制
max-width: calc(100% -
20px
);
max-width: calc(100% -
1.309em
);
}
}
/* --- Lined textarea --- */
/* --- Lined textarea --- */
.linedwrap {
.linedwrap {
max-width: 100%;
max-width: 100%;
}
}
.linedtextarea {
.linedtextarea {
display: inline-block;
display: inline-block;
margin: 0;
margin: 0;
复制
已复制
复制
已复制
padding: 0 0 0
10px
;
padding: 0 0 0
0.618em
;
width: calc(100% - 60px);
width: calc(100% - 60px);
height: 100%;
height: 100%;
复制
已复制
复制
已复制
background-color: #FFFFFF;
}
}
.linedtextarea textarea,
.linedtextarea textarea,
.linedwrap .codelines .lineno {
.linedwrap .codelines .lineno {
font-size: 10pt;
font-size: 10pt;
font-family: monospace;
font-family: monospace;
line-height: normal !important;
line-height: normal !important;
}
}
.linedtextarea textarea {
.linedtextarea textarea {
margin: 0;
margin: 0;
复制
已复制
复制
已复制
padding:
5px
0 0 0;
padding:
0.309em
0 0 0;
width: 100% !important;
width: 100% !important;
height: 100%;
height: 100%;
border: 0;
border: 0;
}
}
.linedwrap .lines {
.linedwrap .lines {
display: inline-block;
display: inline-block;
overflow: hidden;
overflow: hidden;
margin-top: 0;
margin-top: 0;
复制
已复制
复制
已复制
padding:
5px
0 0 0;
padding:
0.309em
0 0 0;
width: 50px;
width: 50px;
height: 100%;
height: 100%;
复制
已复制
复制
已复制
background-color: #FFFFFF
;
border-width: 0 1px 0 0
;
border-
right: 1px
solid
#C0C0C0
;
border-
style:
solid
;
border-color: transparent
;
}
}
.linedwrap .codelines .lineno {
.linedwrap .codelines .lineno {
复制
已复制
复制
已复制
padding: 0.0em 0.
5em
0 0;
padding: 0.0em 0.
618em
0 0;
text-align: right;
text-align: right;
复制
已复制
复制
已复制
color: #AAAAAA;
white-space: nowrap;
white-space: nowrap;
}
}
复制
已复制
复制
已复制
.linedwrap .codelines .lineselect {
.auth-setter {
color: red;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (min-width: 769px) {
.form-element-auth {
width: 50%;
margin: 0 0 2.618em;
}
.form-element-auth > label {
width: 100%;
display: block;
font-size: large;
}
}
}
已保存差异
原始文本
打开文件
/* -------------------------------------- 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; }
更改后文本
打开文件
/* -------------------------------------- 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; } }
查找差异