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; } }
尋找差異