raspisms/assets/css/style.css

678 lines
11 KiB
CSS

/*
* Feuille de style personnalisée pour le site
*/
/** GENERAL **/
.hidden
{
display: none;
}
.no-padding
{
padding: 0 !important;
}
.small-text
{
font-size: 0.7em;
}
.italic
{
font-style: italic;
}
.bold
{
font-weight: bold;
}
.float-right
{
float: right;
}
.inline-block
{
display: inline-block;
}
.auto-width
{
width: auto !important;
}
.no-wrap
{
white-space: nowrap;
}
.full-width
{
width: 100%;
}
/* Custom utility classes for padding */
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }
/* Custom utility classes for margin */
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
/* HTML: <div class="loader"></div> */
.loader {
display: inline-block;
width: 50px;
aspect-ratio: 1;
border-radius: 50%;
background:
radial-gradient(farthest-side,#999 94%,#0000) top/8px 8px no-repeat,
conic-gradient(#0000 30%,#999);
-webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
animation: l13 1s infinite linear;
}
@keyframes l13{
100%{transform: rotate(1turn)}
}
/** POPUPS ALERT **/
.popup-alerts-container
{
position: fixed;
left: 25%;
top: 0;
z-index: 9998;
width: 50%;
}
.popup-alert
{
margin-top: 25px;
margin-left: 0;
width: 100%;
position: relative;
}
/** FOOTER **/
footer
{
color: #aaaaaa;
font-size: 0.8em;
padding-top: 50px;
padding-bottom: 25px;
line-height: 2em;
}
footer img
{
width: 100px;
display: inline-block;
margin-bottom: 15px;
opacity: 0.7;
}
/** DASHBOARD **/
.dashboard-panel-chart .panel-title
{
margin-bottom: 10px;
}
/** GROUPES **/
.list-contacts
{
border: 1px solid #cccccc;
border-radius: 4px;
padding: 0.5em;
margin-bottom: 1em;
}
.delete-contact
{
color: #cccccc;
}
.delete-contact:hover
{
cursor: pointer;
color: #ffffff;
}
/** FORM CONNEXION **/
.connexion-form
{
background-color: #ffffff;
padding: 30px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
border-radius: 5px;
}
.connexion-form .forget-password-link
{
color: #333333;
}
.forget-password-link:hover
{
color: #2a6496;
text-decoration: none;
}
.connexion-form button
{
margin-top: 0.7em;
}
/** RESET EMAIL PAGES **/
.email-reset-container
{
background-color: #ffffff;
padding: 30px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
border-radius: 5px;
}
.email-reset-container img
{
margin-bottom: 50px;
}
/** MENU **/
.logo
{
height: 100%;
}
.navbar-brand
{
padding: 13px 15px;
}
.navbar
{
border: none;
}
.side-nav>li>ul>li.active>a {
color: #fff;
background-color: #000;
}
.goto:hover
{
cursor: pointer;
}
/** DISCUSSION **/
.table-discussions tbody tr:hover
{
cursor: pointer;
background-color: #999;
}
.discussion-container
{
overflow: auto;
}
.discussion-message
{
border-radius: 5px;
display: inline-block;
max-width: 90%;
padding: 10px;
position: relative;
}
.discussion-message-text
{
font-size: 1.3em;
}
.discussion-message-date
{
font-size: 0.9em;
}
.discussion-message-medias img
{
transition-duration: 0.1s;
max-width: 150px;
max-height: 150px;
line-height: 150px;
width: auto;
height: auto;
}
.discussion-message-medias img:hover
{
opacity: 0.6;
}
.discussion-message-media
{
display: inline-block;
line-height: 160px;
width: 160px;
height: 160px;
padding: 5px;
background-color: rgba(255, 255, 255, 0.3);
vertical-align: middle;
text-align: center;
margin: 5px;
}
.message-container
{
margin-bottom: 10px;
}
.message-received
{
background-color: #1abc9c;
float: left;
color: #fff;
}
.message-sended
{
background-color: #ddd;
float: right;
}
.message-received .discussion-message-date
{
color: #f0f0f0;
}
.message-sended .discussion-message-date
{
text-align: right;
color: #888;
}
.message-input
{
width: 100%;
max-width: 100%;
background-color: #ddd;
}
.message-input textarea
{
width: 100%;
resize: none;
height: 6em;
}
.message-input button
{
float: right;
margin-top: 8px;
}
.message-input input[type="file"]
{
margin-top: 8px;
display: inline-block;
}
.message-in-progress-hover
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 900;
opacity: 0.7;
background-color: #fff;
font-size: 20px;
text-align: center;
padding-top: 10px;
}
/* SCHEDULEDS */
.add-number-button,
.add-phone-limit-button
{
display: inline-block;
color: #DADFE1;
font-size: 35px;
vertical-align: top;
}
.add-number-button:hover,
.add-phone-limit-button:hover
{
color: #3498DB;
cursor: pointer;
}
.scheduleds-number-group
{
border-radius: 3px;
display: inline-block;
position: relative;
margin-right: 20px;
margin-bottom: 0;
}
.remove-scheduleds-number
{
display: inline-block;
color: #bbbbbb;
font-size: 15px;
z-index: 999;
}
.remove-scheduleds-number:hover
{
color: #aaaaaa;
cursor: pointer;
}
.scheduled-preview-container
{
margin-top: 10px;
margin-bottom: 20px;
text-align: right;
}
.scheduled-preview-container label,
.scheduled-preview-container select
{
display: inline-block;
width: auto;
}
.scheduled-preview-text-modal .modal-title
{
font-weight: bold;
}
.credit-estimation-container
{
margin-top: 10px;
text-align: right;
}
.scheduleds-number-groupe,
.phone-limits-group
{
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
border-radius: 4px;
margin-bottom: 15px;
position: relative;
}
.scheduleds-number-groupe-remove,
.phone-limits-group-remove
{
position: absolute;
top: 15px;
right: 15px;
color: #888;
}
.scheduleds-number-groupe-remove:hover,
.phone-limits-group-remove:hover
{
color: #555;
}
.scheduleds-number-data-container .form-group:last-of-type
{
margin-bottom: 0;
}
.scheduled-number-data-name
{
width: 30%;
display: inline-block;
}
.scheduled-number-data-value
{
width: 65%;
display: inline-block;
}
/* AUDIO RECEPTION MESSAGE */
#reception-sound
{
display: none;
}
/* Forms */
.checkbox label,
.radio label
{
line-height: 24px;
}
/* CONTACT */
#import-modal input:valid + label .valid-icon
{
color: #4cae4c;
display: inline-block !important;
}
#import-modal input:invalid + label .invalid-icon
{
display: inline-block !important;
}
.contact-data-container input
{
display: inline-block;
}
.contact-data-container .contact-data-name
{
width: 25%;
}
.contact-data-container .contact-data-value
{
width: 50%;
}
.contact-data-container .contact-data-remove,
.scheduled-number-data-remove
{
color: #c9302c;
}
.contact-data-container .contact-data-remove:hover,
.scheduled-number-data-remove:hover
{
color: #9b2420;
}
/* PREVIEW CONTACT */
.preview-contact-name
{
font-weight: bold;
}
.preview-contact-number
{
font-style: italic;
}
/* PHONE */
#adapter-data-container
{
margin-top: 35px;
}
#adapter-data-fields-container
{
margin-top: 20px;
}
#adapter-data-fields
{
padding-top: 15px;
padding-left: 15px;
}
#adapter-data-fields input[type="checkbox"]
{
display: block;
width: auto;
}
#adapter-data-fields input[type=checkbox]{
height: 0;
width: 0;
visibility: hidden;
}
#adapter-data-fields .switch {
cursor: pointer;
text-indent: -9999px;
width: 44px;
height: 24px;
background: #aaa;
display: block;
border-radius: 100px;
position: relative;
}
#adapter-data-fields .switch:after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 20px;
transition: 0.3s;
}
#adapter-data-fields input:checked + .switch {
background: #5cb85c;
}
#adapter-data-fields input:checked + .switch:after {
left: calc(100% - 2px);
transform: translateX(-100%);
}
#adapter-data-fields .switch:active:after {
width: 30px;
}
/* DATATABLES */
.dataTables_paginate
{
margin-bottom: 20px !important;
}
.checkcolumn
{
width: 20px;
}
/*
* FORMS
*/
.form-group
{
margin-bottom: 30px;
}
/**
* Contacts conditional deletion
*/
.conditional-deletion-preview-container
{
margin-top: 10px;
margin-bottom: 20px;
text-align: right;
}
.conditional-deletion-preview-container label,
.conditional-deletion-preview-container select
{
display: inline-block;
width: auto;
}