Initial commit - Application CLEO de gestion de devis
- Architecture MVC avec framework maison d6 - Modules : devis, clients, marchés, SAP - Documentation initiale (README et TODO) - Configuration Composer avec dépendances 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
520
pub/res/css/sglobal.css
Normal file
520
pub/res/css/sglobal.css
Normal file
@@ -0,0 +1,520 @@
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('../fonts/Roboto/roboto-regular.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Roboto', 'sans-serif';
|
||||
font-size: 1.3em;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/*** Réglages suivant taille d'écran ************/
|
||||
/* Smartphones ----------- */
|
||||
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
|
||||
body {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
}
|
||||
|
||||
/* iPads (portrait and landscape) ----------- */
|
||||
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
|
||||
body {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktops and laptops ----------- */
|
||||
@media only screen and (min-width: 1224px) {
|
||||
body {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large screens ----------- */
|
||||
@media only screen and (min-width: 1624px) {
|
||||
body {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
/*** MARGINS & PADDINGS ***************************************/
|
||||
.m-0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.m-1 {
|
||||
margin: 10px !important;
|
||||
}
|
||||
|
||||
.mr-1 {
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
|
||||
.ml-1 {
|
||||
margin-left: 10px !important;
|
||||
}
|
||||
|
||||
.mt-1 {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 5px !important;
|
||||
}
|
||||
|
||||
/*** LARGEURS ***************************************/
|
||||
.w-50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/*** ALIGNEMENTS ***************************************/
|
||||
.left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/*** TITLES *********************************************************/
|
||||
h1 {
|
||||
font-size: 1.9em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.7em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#verticalBar {
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
height: 90%;
|
||||
width: 30px;
|
||||
background-color: #444; /* Couleur de la barre */
|
||||
overflow-x: hidden;
|
||||
transition: width 0.5s; /* Durée de l'animation */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/*** FOOTER **********************************************************/
|
||||
footer {
|
||||
position: fixed;
|
||||
height: 30px;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
border-top: 2px solid lightskyblue;
|
||||
margin-top: 10px;
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #eee;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #eee;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*** FORMS ***********************************************************/
|
||||
form {
|
||||
border: 2px solid #ccc;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
width: 100%;
|
||||
padding: 12px 30px;
|
||||
margin: 8px 0;
|
||||
color: #000000 !important;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #ccc;
|
||||
border-radius: 6px;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.numeric {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.inputReadOnly {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
input[required] {
|
||||
border: 3px solid lightblue;
|
||||
}
|
||||
|
||||
textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus {
|
||||
border-color: #4FD0FB;
|
||||
box-shadow: 0 2px 2px #4FD0FB inset, 0 0 8px #4FD0FB;
|
||||
outline: 0 none;
|
||||
}
|
||||
|
||||
/*** INPUT WITH ICONS *************************************************/
|
||||
.input-with-icons {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-with-icons input[type="text"] input[type="password"] {
|
||||
padding-left: 30px; /* Space for start icon */
|
||||
padding-right: 30px; /* Space for end icon */
|
||||
}
|
||||
|
||||
.input-with-icons svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: #000;
|
||||
}
|
||||
|
||||
.input-with-icons svg.start-icon {
|
||||
left: 10px; /* Position of start icon */
|
||||
}
|
||||
|
||||
.input-with-icons svg.end-icon {
|
||||
right: 10px; /* Position of end icon */
|
||||
}
|
||||
|
||||
/*** BUTTONS **********************************************************/
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 14px 20px;
|
||||
margin: 8px 0;
|
||||
border: 2px solid #ccc;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Add a hover effect for buttons */
|
||||
button:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.clickable-row,
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*** MAPS *************************************************************/
|
||||
#d6map {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
/*** TABLES ***********************************************************/
|
||||
.table-hover tbody tr:hover td,
|
||||
.table-hover tbody tr:hover th {
|
||||
background-color: #a6a6a6 !important;
|
||||
}
|
||||
|
||||
table tr.trCaption th {
|
||||
background-color: #0a6ebd;
|
||||
color: #ffffff;
|
||||
font-size: 1.1em;
|
||||
padding: 5px 10px !important;
|
||||
}
|
||||
|
||||
.transparent table, .transparent table tr, .transparent table td {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
/*** LOADING **********************************************************/
|
||||
#loadingDiv {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border: 20px solid #f3f3f3;
|
||||
border-top: 16px solid #9c41f2;
|
||||
border-radius: 100%;
|
||||
margin: auto;
|
||||
visibility: hidden;
|
||||
animation: spin 1s infinite linear;
|
||||
}
|
||||
|
||||
#loadingDiv.display {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*** COLORS ***********************************************************/
|
||||
.back-green {
|
||||
background-color: #339933;
|
||||
}
|
||||
|
||||
.back-success,
|
||||
.back-emerald {
|
||||
background-color: #2ecc71;
|
||||
}
|
||||
|
||||
.back-nephritis {
|
||||
background-color: #27ae60;
|
||||
}
|
||||
|
||||
.back-lime {
|
||||
background-color: #8cbf26;
|
||||
}
|
||||
|
||||
.back-green-light {
|
||||
background: #A0D468;
|
||||
}
|
||||
|
||||
.back-teal {
|
||||
background-color: #00aba9;
|
||||
}
|
||||
|
||||
.back-turquoise {
|
||||
background-color: #1abc9c;
|
||||
}
|
||||
|
||||
.back-green-sea {
|
||||
background-color: #16a085;
|
||||
}
|
||||
|
||||
.back-mint {
|
||||
background: #37bc9b;
|
||||
}
|
||||
|
||||
.back-mint-light {
|
||||
background: #48cfad;
|
||||
}
|
||||
|
||||
.back-mint-light label {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.back-blue {
|
||||
background-color: #2e8bcc;
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
background-color: #2e8bcc;
|
||||
border-color: #2e8bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.text-blue {
|
||||
color: #2e8bcc;
|
||||
}
|
||||
|
||||
.back-info,
|
||||
.back-peter-river {
|
||||
background-color: #3498db;
|
||||
}
|
||||
|
||||
.back-belize-hole {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
|
||||
.back-blue-jeans {
|
||||
background: #4A89DC;
|
||||
}
|
||||
|
||||
.back-blue-jeans-light {
|
||||
background: #5D9CEC;
|
||||
}
|
||||
|
||||
.back-blue-aqua-light {
|
||||
background: #4fc1e9;
|
||||
}
|
||||
|
||||
.back-blue-aqua {
|
||||
background: #3BAFDA;
|
||||
}
|
||||
|
||||
.back-wet-asphalt {
|
||||
background-color: #34495e;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.back-midnight-blue {
|
||||
background-color: #2c3e50;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.back-red {
|
||||
background-color: #e51400;
|
||||
}
|
||||
|
||||
.back-pomegranate {
|
||||
background-color: #c0392b;
|
||||
}
|
||||
|
||||
.back-danger,
|
||||
.back-alert,
|
||||
.back-alizarin {
|
||||
background-color: #e74c3c;
|
||||
}
|
||||
|
||||
.back-red-light {
|
||||
background: #ed5565;
|
||||
}
|
||||
|
||||
.back-pumpkin {
|
||||
background-color: #d35400;
|
||||
}
|
||||
|
||||
.back-magenta {
|
||||
background-color: #ff0097;
|
||||
}
|
||||
|
||||
.back-orange-light {
|
||||
background: #fc6e51;
|
||||
}
|
||||
|
||||
.back-carrot {
|
||||
background-color: #e67e22;
|
||||
}
|
||||
|
||||
.back-orange {
|
||||
background-color: #f39c12;
|
||||
}
|
||||
|
||||
.back-sun-flower,
|
||||
.back-warning {
|
||||
background-color: #f1c40f;
|
||||
}
|
||||
|
||||
.back-yellow {
|
||||
background-color: #ffc40d;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.back-yellow-light,
|
||||
.stabilo {
|
||||
background: #FFCE54;
|
||||
}
|
||||
|
||||
.post-it {
|
||||
background: #FAFAD2;
|
||||
}
|
||||
|
||||
.back-pink {
|
||||
background-color: #e671b8;
|
||||
}
|
||||
|
||||
.btn-purple,
|
||||
.back-purple {
|
||||
background-color: #7b4f9d;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.back-amethyst {
|
||||
background-color: #9b59b6;
|
||||
}
|
||||
|
||||
.back-wisteria {
|
||||
background-color: #8e44ad;
|
||||
}
|
||||
|
||||
.back-wisteria-light {
|
||||
background-color: #BE90D4;
|
||||
}
|
||||
|
||||
.back-wisteria-light label {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.back-white {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.back-clouds {
|
||||
background-color: #ecf0f1;
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
.back-clouds h1,
|
||||
.back-clouds h2,
|
||||
.back-clouds h3,
|
||||
.back-clouds h4,
|
||||
.back-clouds h5,
|
||||
.back-clouds h6 {
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
.back-clouds .tile-label {
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
.back-light {
|
||||
background-color: #ededed;
|
||||
}
|
||||
|
||||
.back-silver {
|
||||
background-color: #bdc3c7;
|
||||
}
|
||||
|
||||
.back-concrete {
|
||||
background-color: #95a5a6;
|
||||
}
|
||||
|
||||
.back-asbestos {
|
||||
background-color: #7f8c8d;
|
||||
}
|
||||
|
||||
.back-dark {
|
||||
background-color: #000000;
|
||||
}
|
||||
Reference in New Issue
Block a user