mirror of
https://git.v0id.ovh/n3wt-innov/n3wt-school.git
synced 2026-01-28 15:33:22 +00:00
af0cd1c840
feat: Gestion des inscriptions [#1] feat(frontend): Création des vues pour le paramétrage de l'école [#2] feat: Gestion du login [#6] fix: Correction lors de la migration des modèle [#8] feat: Révision du menu principal [#9] feat: Ajout d'un footer [#10] feat: Création des dockers compose pour les environnements de développement et de production [#12] doc(ci): Mise en place de Husky et d'un suivi de version automatique [#14]
506 lines
9.5 KiB
CSS
506 lines
9.5 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
|
|
@import url('./icons.css');
|
|
@import url('./headings.css');
|
|
:root{
|
|
/*Colors*/
|
|
--deep-blue:#3C87F4;
|
|
--artic-blue:#DFE9F5;
|
|
--light_grey:#8F8F8F;
|
|
--darker-blue:#3572CA;
|
|
--dark-teal:#011922;
|
|
--darker-teal:#000E14;
|
|
--clear-blue:#63A5BF;
|
|
--lighter-grey:#F5F5F5;
|
|
|
|
/*component settings*/
|
|
--primary-color:var(--dark-teal);
|
|
--background-color:var(#FFF);
|
|
--font-color:var(--light_grey);
|
|
--font-text:"Roboto", sans-serif;
|
|
--topbar-bg-color:#FFF;
|
|
--sidebar-item-bg:var(--darker-teal);
|
|
--sidebar-item-font-color:#FFF;
|
|
--topbar-item-font-color:#000;
|
|
--topbar-item-bg-color:#FFF;
|
|
|
|
}
|
|
|
|
|
|
body{
|
|
color:var(--font-color);
|
|
background:var(--background-color);
|
|
font-family: var(--font-text);
|
|
font-size: 16px;
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
|
|
a{
|
|
text-decoration: none;
|
|
color:var(--dark-teal)
|
|
}
|
|
a.negative{
|
|
color: var(--clear-blue);
|
|
}
|
|
.right{
|
|
text-align: right;
|
|
float: right;
|
|
}
|
|
|
|
.sidebar{
|
|
display: block;
|
|
width: 300px;
|
|
background-color: var(--primary-color);
|
|
border-radius: 0px 1em 1em 0px ;
|
|
position: absolute;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
}
|
|
.sidebar>.itemlogo{
|
|
height: 300px;
|
|
width: 300px;
|
|
}
|
|
.sidebar>.item{
|
|
display: block;
|
|
height: 75px;
|
|
line-height: 75px;
|
|
background-color: var(--sidebar-item-bg);
|
|
color: var(--sidebar-item-font-color);
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
}
|
|
|
|
.sidebar>.item:hover{
|
|
background-color: var(--clear-blue);
|
|
color: var(--dark-teal);
|
|
}
|
|
.sidebar>.item.active{
|
|
background-color: #FFF;
|
|
color: var(--dark-teal);
|
|
}
|
|
.sidebar>.item>.icon{
|
|
background-color: var(--sidebar-item-font-color);
|
|
line-height: 75px;
|
|
display: block;
|
|
float: left;
|
|
height: 32px;
|
|
margin-top: 20px;
|
|
margin-left: 40px;
|
|
|
|
}
|
|
.sidebar>.item:hover>.icon{
|
|
background-color: var(--dark-teal);
|
|
}
|
|
.sidebar>.item.active>.icon{
|
|
background-color: var(--dark-teal);
|
|
}
|
|
|
|
|
|
.circle{
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: #FFF;
|
|
border-radius: 100px;
|
|
margin: auto;
|
|
margin-top: 75px;
|
|
}
|
|
|
|
.container{
|
|
display: block;
|
|
padding: 20px;
|
|
position: absolute;
|
|
width: calc(100% - 340px);
|
|
top: 0px;
|
|
bottom:0px;
|
|
right: 0px;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.negative{
|
|
background-color: var(--dark-teal);
|
|
color:#FFF
|
|
}
|
|
|
|
.container.full-size{
|
|
left: 0px;
|
|
}
|
|
|
|
|
|
.input-wrapper{
|
|
width: 300px;
|
|
height: 35px;
|
|
border-radius: 5px;
|
|
background-color: #FFF;
|
|
border-color: #C3C3C3;
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
}
|
|
.input-group>label{
|
|
font-size: 0.6em;
|
|
display: block;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
color: #011922;
|
|
text-transform: uppercase;
|
|
}
|
|
.negative>.input-group>label{
|
|
color: #FFF;
|
|
}
|
|
.input-wrapper>span.icon-ctn{
|
|
height: 35px;
|
|
width: 35px;
|
|
float: left;
|
|
background-color: #f3f3f3;
|
|
vertical-align: middle;
|
|
border-radius: 8px 35px 35px 8px;
|
|
}
|
|
.input-wrapper>span.icon-ctn>.icon{
|
|
height: 35px;
|
|
width: 35px;
|
|
background-size: 20px;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
display: block;
|
|
margin: auto;
|
|
background-color: #8F8F8F;
|
|
}
|
|
.input-wrapper>input{
|
|
line-height: 35px;
|
|
width: calc(100% - 50px);
|
|
height: 35px;
|
|
border: none;
|
|
font-size: 14px;
|
|
margin-left: 5px;
|
|
outline: none;
|
|
background-color: transparent;
|
|
}
|
|
.max{
|
|
width: 100%;
|
|
}
|
|
.max-90{
|
|
width: 90%;
|
|
}
|
|
.max-80{
|
|
width: 80%;
|
|
}
|
|
/*
|
|
* Bouton
|
|
*/
|
|
.btn{
|
|
display: flex;
|
|
font-family: var(--font-text);
|
|
background-color: #8F8F8F;
|
|
color: #FFF;
|
|
height: 35px;
|
|
min-width: 75px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
font-size: 1em;
|
|
outline: none;
|
|
border: none;
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
line-height: 35px;
|
|
font-size: 0.6em;
|
|
font-weight: bold;
|
|
letter-spacing: 15%;
|
|
vertical-align: middle;
|
|
justify-content: space-between;
|
|
}
|
|
.btn>*{
|
|
display: flexbox;
|
|
}
|
|
.negative>.btn{
|
|
background-color: #FFF;
|
|
color: var(--dark-teal);
|
|
}
|
|
.btn>.icon{
|
|
display: inline-block;
|
|
background-color: #FFF;
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
vertical-align: middle;
|
|
}
|
|
.btn:hover{
|
|
background-color:#606060;
|
|
}
|
|
.btn.primary{
|
|
background-color: var(--dark-teal);
|
|
}
|
|
.negative>.btn.primary{
|
|
background-color: var(--clear-blue);
|
|
}
|
|
.btn.primary:hover{
|
|
background-color: var(--darker-teal);
|
|
}
|
|
|
|
.negative>.btn.primary:hover{
|
|
background-color: #3b687a;
|
|
}
|
|
|
|
.logo-circular{
|
|
margin-top: 50px;
|
|
text-align: center;
|
|
width: 125px;
|
|
height: 125px;
|
|
border-radius: 125px;
|
|
background-color: #FFF;
|
|
}
|
|
.login-heading{
|
|
margin-top: 50px;
|
|
text-align: center;
|
|
}
|
|
.login-heading.negative{
|
|
color: #FFF;;
|
|
}
|
|
.login-form{
|
|
margin-top: 50px;
|
|
width: 300px;
|
|
}
|
|
.form-group-submit{
|
|
margin-top: 50px;
|
|
}
|
|
.centered{
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.centered>*{
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.table-action{
|
|
width: 100%;
|
|
}
|
|
|
|
.splited-row-table{
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 90%;
|
|
border-collapse: collapse;
|
|
}
|
|
.splited-row-table>thead>tr>th{
|
|
|
|
padding: 10px;
|
|
text-align: left;
|
|
color: #000;
|
|
}
|
|
.splited-row-table>tbody>tr{
|
|
background-color: #f4f4f4;
|
|
color:#8F8F8F;
|
|
line-height:50px;
|
|
}
|
|
.table-actions .icon{
|
|
background-color: #8F8F8F;
|
|
}
|
|
|
|
|
|
.table{
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 90%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
}
|
|
.table>thead>tr>th{
|
|
padding: 15px;
|
|
text-align: left;
|
|
color: #48586B;
|
|
font-weight: bold;
|
|
text-transform: Capitalise;
|
|
background-color: #F5F6F8;
|
|
border-bottom: 1px solid #EBECF0;
|
|
border-top: 1px solid #EBECF0;
|
|
}
|
|
.table>thead>tr>th:first-child{
|
|
border-radius: 15px 0 0 0;
|
|
border-left: 1px solid #EBECF0;
|
|
}
|
|
.table>thead>tr>th:last-child{
|
|
border-radius: 0 15px 0 0 ;
|
|
border-right: 1px solid #EBECF0;
|
|
}
|
|
.table>tbody>tr>td>.avatar{
|
|
height: 42px;
|
|
width: 42px;
|
|
border-radius: 42px;
|
|
background-color: #8F8F8F;
|
|
display: block;
|
|
margin: auto;
|
|
float: left;
|
|
margin-right: 20px;
|
|
}
|
|
.table>tbody>tr>td{
|
|
padding: 15px;
|
|
color: #48586B;
|
|
border-bottom: 1px solid #EBECF0;
|
|
vertical-align: middle;
|
|
}
|
|
.table>tbody>tr:nth-child(even)>td{
|
|
padding: 15px;
|
|
background-color: #F5F6F8;
|
|
border-bottom: 1px solid #EBECF0;
|
|
vertical-align: middle;
|
|
}
|
|
.table>tbody>tr>td:first-child{
|
|
border-left: 1px solid #EBECF0;
|
|
}
|
|
.table>tbody>tr>td:last-child{
|
|
border-right: 1px solid #EBECF0;
|
|
}
|
|
.table>tfoot>tr>td{
|
|
padding: 35px;
|
|
color: #48586B;
|
|
border-bottom: 1px solid #EBECF0;
|
|
}
|
|
.table>tfoot>tr>td:first-child{
|
|
border-radius: 0 0 0 15px;
|
|
border-left: 1px solid #EBECF0;
|
|
}
|
|
.table>tfoot>tr>td:last-child{
|
|
border-radius: 0 0 15px 0 ;
|
|
border-right: 1px solid #EBECF0;
|
|
}
|
|
|
|
.pagination{
|
|
text-align: center;
|
|
|
|
}
|
|
.pagination>a.item{
|
|
display: inline-block;
|
|
width: 35px;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
background-color: #F5F6F8;
|
|
color: #48586B;
|
|
margin: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.pagination>a.item.active{
|
|
background-color: var(--dark-teal);
|
|
color: #FFF;
|
|
}
|
|
.alphabet-filter{
|
|
text-align: center;
|
|
}
|
|
.alphabet-filter>a.item{
|
|
display: inline-block;
|
|
width: 35px;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
background-color: #F5F6F8;
|
|
color: #48586B;
|
|
margin: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
.alphabet-filter>a.item.active{
|
|
background-color: var(--dark-teal);
|
|
color: #FFF;
|
|
}
|
|
.tag{
|
|
padding: 5px;
|
|
display: block;
|
|
background-color: #F5F6F8;
|
|
text-align: center;
|
|
border-radius: 2px;
|
|
color: #48586B;
|
|
border: 1px solid #48586B;
|
|
font-weight: bold
|
|
}
|
|
|
|
.tag.green{
|
|
background-color: #E0F5EE;
|
|
border: 1px solid #4BC097;
|
|
color: #4BC097;
|
|
}
|
|
.tag.red{
|
|
background-color: #ffe4e4;
|
|
border: 1px solid #ff6a6a;
|
|
color: #ff6a6a;
|
|
}
|
|
.tag.orange{
|
|
background-color: #FFF0E4;
|
|
border: 1px solid #FFB06A;
|
|
color: #FFB06A;
|
|
}
|
|
.tag.purple{
|
|
background-color: #fae4ff;
|
|
border: 1px solid #e66aff;
|
|
color: #e66aff;
|
|
}
|
|
.tag.blue{
|
|
background-color: #E7E9FD;
|
|
border: 1px solid #7E89F1;
|
|
color: #7E89F1;
|
|
}
|
|
.tag.teal{
|
|
background-color: #b3f5f9;
|
|
border: 1px solid #359ab3;
|
|
color: #359ab3;
|
|
}
|
|
|
|
.icon-btn {
|
|
display: block;
|
|
width: 35px;
|
|
height: 35px;
|
|
text-align: center;
|
|
line-height: 35px;
|
|
background-color: #F5F6F8;
|
|
color: #48586B;
|
|
border: none;
|
|
border-radius: 0.5rem;
|
|
outline: none;
|
|
}
|
|
.icon-btn:hover{
|
|
background-color: #dfe0e1;
|
|
color: #FFF;
|
|
}
|
|
.icon-btn>.icon{
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-size: 20px;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
margin: auto;
|
|
background-color: #8F8F8F;
|
|
}
|
|
.icon-btn.primary{
|
|
background-color: var(--dark-teal);
|
|
}
|
|
.icon-btn.primary>.icon{
|
|
background-color: #FFF;
|
|
}
|
|
.icon-btn.primary:hover{
|
|
background-color: var(--darker-teal);
|
|
}
|
|
.icon-btn.red{
|
|
background-color: rgb(202, 34, 34);
|
|
}
|
|
.icon-btn.red>.icon{
|
|
background-color: #FFF;
|
|
}
|
|
.icon-btn.red:hover{
|
|
background-color: rgb(148, 25, 25);
|
|
}
|
|
|
|
.actions > .icon-btn{
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.heading-section{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width:90%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: center;
|
|
margin-bottom: 15px;
|
|
} |