347 lines
10 KiB
CSS
347 lines
10 KiB
CSS
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
|
|
* {margin:0; padding:0; font-size:inherit; font-family:inherit;}
|
|
a {color:#4f97ea; text-decoration:none;}
|
|
select {-webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; outline: 0; box-shadow: none; border: 0 !important;}
|
|
|
|
body,html
|
|
{
|
|
font-family: "Roboto", sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
font-size: 14px;
|
|
margin:0;
|
|
color: #666;
|
|
width:100%;
|
|
background:#ecf0f1;
|
|
height: 100%;
|
|
}
|
|
|
|
#General {height:100%;}
|
|
#Left {float:left; width:280px; height:100%; background:#3E424D; position:fixed;}
|
|
#Left #Logo {height:60px; text-align:center; background:#33363F;}
|
|
#Left #Logo img {left: 0; margin: 4px 0 0 105px;position: absolute; width:50px;}
|
|
#Left #Identification {background:#3E424D; height:45px; border-bottom:1px solid #33363F; padding:25px;}
|
|
#Left #Identification .Option1 {font-weight:bold; padding-top:5px; color:#FFFFFF;}
|
|
#Left #Identification .Option2 {color:#FFFFFF;}
|
|
#Left #Identification img {border-radius:50%; height:50px; width:50px; float:left; margin:-5px 10px 0px 0;}
|
|
|
|
#Left ul.Menu li {list-style-type:none; padding:16px 0 20px 10px; border-left:5px solid #3E424D; color:#C0C0C0;}
|
|
#Left ul.Menu li i.fas {margin-right:15px; min-width:15px;}
|
|
#Left ul.Menu li:hover {background:#33363F; border-left:5px solid #B33434; color:#FFFFFF;}
|
|
#Left ul.Menu li.selected {background:#33363F; border-left:5px solid #3478B3; color:#FFFFFF;}
|
|
|
|
#Left ul.Menu a li.middleMenu {background:#54565d; border-left:5px solid #54565d; height: 25px; padding: 10px 0 0 14px;}
|
|
#Left ul.Menu a li.middleMenuSelected {color: white; border-left: 5px solid #909090;}
|
|
|
|
#Right {margin-left:280px;}
|
|
#Right h3 {margin: 25px 0 25px 0; font-size: 20px;}
|
|
#Right #SideMenu {height:31px; background:#FFFFFF; box-shadow:0px 0px 10px #c0c0c0; padding:19px 40px 10px 40px; }
|
|
#Right #SideMenu li {color:#33363F; font-weight:bold; list-style-type:none; font-size:20px; font-weight:normal;}
|
|
#Right #SideMenu ul li.headerMenu a {color:#33363F;}
|
|
#Right #Content {padding:0 40px 40px 40px; margin-top:40px;}
|
|
#Right #Content .notification {color:#FFFFFF; padding:20px 40px 20px 40px; margin-bottom:40px; position:relative; box-shadow:0px 0px 10px #c0c0c0; -webkit-animation: fadeOut 3s forwards; animation: fadeOut 3s forwards;}
|
|
#Right #Content .notification p {width:80%; }
|
|
|
|
|
|
@keyframes fadeOut {
|
|
0% {}
|
|
90% {}
|
|
100% {color:#666B85; background:#FFFFFF;}
|
|
}
|
|
@-webkit-keyframes fadeOut {
|
|
0% {}
|
|
90% {}
|
|
100% {color:#666B85;background:#FFFFFF;}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#Right #Content .ZoneTexte h4 {font-size:20px; font-weight:normal; margin-bottom:25px;}
|
|
#Right #Content .ZoneTexte p {margin:10px 0 0 0;}
|
|
#Right #Footer {text-align: center; font-size: 12px; margin:0 0 25px 0;}
|
|
|
|
#Right #Content img.avatar {max-width:200px; margin-bottom:10px;}
|
|
#Right #Content td.fixedRow h4 {margin:0 0 10px 0;}
|
|
#Right #Content td.fixedRow {width:230px; height:270px; margin:0 auto 0; text-align:center}
|
|
|
|
#Module {width:69%;float:left; min-height:400px; margin-bottom:10px;}
|
|
|
|
|
|
#html-output {
|
|
white-space: pre-wrap;
|
|
display:none;
|
|
}
|
|
|
|
.pell {
|
|
border: 1px solid rgba(10, 10, 10, 0.1);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.pell-content {
|
|
box-sizing: border-box;
|
|
height: 300px;
|
|
outline: 0;
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.pell-actionbar {
|
|
background-color: #FFF;
|
|
border-bottom: 1px solid rgba(10, 10, 10, 0.1);
|
|
}
|
|
|
|
.pell-button {
|
|
background-color: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
height: 30px;
|
|
outline: 0;
|
|
width: 30px;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.pell-button-selected {
|
|
background-color: #F0F0F0;
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
.owEditor {margin-bottom:10px; box-sizing: border-box; width:100%; height:300px; text-align:left; }
|
|
.owEdit-panelContain {background: #FFFFFF; border: 1px solid #ccc;} {width:100%;}
|
|
.owEdit-button-undefined {background-color: #FFFFFF;}
|
|
*/
|
|
#Options {background:#ffffff; width:29%; float:right; min-height:400px;}
|
|
|
|
|
|
/* === Global === */
|
|
.button_erreur, .button_valide,
|
|
.button_basic, .input_basic, .select_basic, .field_basic {border:none; padding:10px; border-radius:5px; color:#FFFFFF;}
|
|
|
|
.button_erreur {background:#B57577; position: absolute; right: 8px; bottom: 10px;}
|
|
.button_erreur:hover {background:#482627;}
|
|
|
|
.button_valide {background:#B57577; position: absolute; right: 8px; bottom: 10px;}
|
|
.button_valide:hover {background:#482627;}
|
|
|
|
.button_basic {background:#3478B3; position: absolute; right: 8px; top: 10px;}
|
|
.button_basic:hover {background:#205A8C;}
|
|
|
|
.input_basic {background:#3478B3;}
|
|
.input_basic:hover {background:#205A8C;}
|
|
|
|
.input_normal {background: #c6c6c6; color: #000000; cursor:pointer;}
|
|
.input_normal:hover {background:#989898;}
|
|
|
|
.field_basic {background: #ffffff; color: #666B85; border: 1px solid #ccc; border-radius:0; width: calc((100%) - (22px)); margin: 0 0 10px 0;}
|
|
|
|
div.error {background:#9A5456;}
|
|
div.valide {background:#3C874A;}
|
|
.valide {color:#3C874A;}
|
|
.error {color:#B57577;}
|
|
.standby {}
|
|
|
|
/* === Administration === */
|
|
#Administration {width: 360px; padding: 8% 0 0; margin: auto;}
|
|
#Administration h1 {font-size: 14px; text-align: center; background: #437ec6; height: 100px; font-family: "Roboto", sans-serif; text-transform: uppercase; color: #FFFFFF;}
|
|
#Administration h1 img {position:absolute; width:76px; left:50%; margin:10px 0 0 -38px;}
|
|
#Administration hr {height: 2px; border: 0; border-top: 1px solid #cbcbcb;}
|
|
|
|
#Administration .form {position: relative; z-index: 1; background: #FFFFFF; max-width: 360px; margin: 0 auto 100px; padding: 45px; text-align: center;
|
|
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);}
|
|
#Administration .form input, #Administration .form button {font-family: inherit; font-size:inherit; border: 0; padding: 15px; outline:0; width:100%;}
|
|
#Administration .form input { background: #f2f2f2; margin: 0 0 15px; box-sizing: border-box;}
|
|
#Administration .form button { text-transform: uppercase; background: #437ec6; color: #FFFFFF; -webkit-transition: all 0.3 ease; transition: all 0.3 ease;}
|
|
#Administration .form button:hover,#Administration .form button:active,#Administration .form button:focus {background: #3568a1;}
|
|
#Administration .form .message {margin: 15px 0 0; color: #b3b3b3; font-size: 12px;}
|
|
#Administration .form .message a {color: #437ec6; text-decoration: none;}
|
|
|
|
#Administration .notification {position:absolute; top:15px; width:340px; color:#ffffff; padding:10px;}
|
|
|
|
#Administration #Footer {text-align:center; margin:0 auto 0;}
|
|
#Administration #Footer .copyright {text-align:center; margin: 10px 0 10px 0;}
|
|
|
|
#Update img {text-align:center; width:220px;}
|
|
#Update hr {border-top:1px solid #FFFFFF; margin:2px;}
|
|
#Update {width:220px; text-align:center; margin:0 auto 0; color:#c0c0c0; position:absolute; bottom:15px; left:20px;}
|
|
|
|
/* === Basics === */
|
|
.ZoneTexte, .Bloc {background:#FFFFFF; padding:40px; box-shadow:0px 0px 10px #c0c0c0; margin-bottom:40px;}
|
|
.Bloc {padding:0; border-top:4px solid #9ea7af; border-bottom:4px solid #9ea7af; }
|
|
.Bloc p {padding:20px;}
|
|
.clear {clear: both;}
|
|
.small {font-size:12px;}
|
|
.flex {display:flex;}
|
|
.hidden {display:none;}
|
|
.italic {font-style: italic;}
|
|
|
|
button, input[type=submit] {cursor:pointer;}
|
|
|
|
table {
|
|
background: #FFF;
|
|
border-collapse: collapse;
|
|
margin: 0 auto 20px;
|
|
padding:5px;
|
|
width: 100%;
|
|
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
th {
|
|
color:#C0C0C0;
|
|
background:#3e424d;
|
|
border-bottom:4px solid #9ea7af;
|
|
border-right: 1px solid #343a45;
|
|
font-size:17px;
|
|
font-weight: 100;
|
|
padding:10px 10px 10px 15px;
|
|
text-align:left;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
tr {
|
|
border-top: 1px solid #C1C3D1;
|
|
border-bottom: 1px solid #C1C3D1;
|
|
color:#666B85;
|
|
font-size:16px;
|
|
font-weight:normal;
|
|
}
|
|
|
|
tr:hover td {
|
|
background:#F5F5F5;
|
|
color:#666666;
|
|
}
|
|
|
|
tr a {color:#666B85;}
|
|
|
|
|
|
|
|
td {
|
|
background:#FFFFFF;
|
|
padding:10px 10px 10px 15px;
|
|
text-align:left;
|
|
vertical-align:middle;
|
|
font-weight:300;
|
|
font-size:15px;
|
|
/*border-right: 1px solid #C1C3D1;*/
|
|
border-right:none;
|
|
}
|
|
|
|
tr:first-child {border-top:4px solid #9ea7af;}
|
|
tr:last-child {border-bottom:4px solid #9ea7af;}
|
|
td:last-child {border-right: 0px;}
|
|
th:last-child {border-right:none;}
|
|
|
|
/*
|
|
tr:nth-child(odd) td {background:#EBEBEB;}
|
|
tr:nth-child(odd):hover td {background:#D4D6D8;}
|
|
*/
|
|
|
|
th.text-left, td.text-left {text-align: left;}
|
|
th.text-center, td.text-center {text-align: center;}
|
|
th.text-right, td.text-right {text-align: right;}
|
|
|
|
|
|
/* Custom Select */
|
|
.select_basic, .owEdit-select_basic {
|
|
position: relative;
|
|
display: block;
|
|
width: 20em;
|
|
height: 3em;
|
|
line-height: 3;
|
|
background: #ffffff;
|
|
overflow: hidden;
|
|
border-radius: .25em;
|
|
color:#666B85;
|
|
padding:0;
|
|
margin:0 25px 0 0;
|
|
}
|
|
|
|
.owEdit-select_basic {margin:2px 0 0 0; border:1px solid #ccc; border-radius: 0; width:99%;}
|
|
|
|
select {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0 0 0 .5em;
|
|
background: #ffffff;
|
|
cursor: pointer;
|
|
}
|
|
select::-ms-expand {
|
|
display: none;
|
|
}
|
|
/* Arrow */
|
|
.select_basic::after, .owEdit-select_basic::after {
|
|
content: '\25BC';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 0 1em;
|
|
|
|
pointer-events: none;
|
|
}
|
|
/* Transition */
|
|
.select_basic:hover::after, .owEdit-select_basic:hover::after {
|
|
color: #3478B3;
|
|
}
|
|
.select_basic::after, .owEdit-select_basic::after {
|
|
-webkit-transition: .25s all ease;
|
|
-o-transition: .25s all ease;
|
|
transition: .25s all ease;
|
|
}
|
|
|
|
/* Cusotm checkbox */
|
|
input[type=checkbox]{
|
|
height: 0;
|
|
width: 0;
|
|
visibility: hidden;
|
|
display:none;
|
|
}
|
|
|
|
label.checkbox {
|
|
cursor: pointer;
|
|
text-indent: -9999px;
|
|
width: 25px;
|
|
height: 15px;
|
|
background: grey;
|
|
display: block;
|
|
border-radius: 100px;
|
|
position: relative;
|
|
}
|
|
|
|
label.checkbox:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 1px;
|
|
width: 13px;
|
|
height: 13px;
|
|
background: #fff;
|
|
border-radius: 90px;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
input:checked + label.checkbox {
|
|
background: #bada55;
|
|
}
|
|
|
|
input:checked + label.checkbox:after {
|
|
left: calc(100% - 1px);
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
label.checkbox:active:after {
|
|
width: 8px;
|
|
}
|
|
|
|
/* Install.css */
|
|
|
|
|
|
|
|
|
|
.language, h3, h4 {margin-bottom:20px;}
|
|
h6 {font-size:20px;}
|