792 lines
14 KiB
SCSS
792 lines
14 KiB
SCSS
// -----------------------------------------------------
|
|
// ENTETE DE PAGE
|
|
// -----------------------------------------------------
|
|
|
|
#nav-skip a[href="#nav"],
|
|
.site-nav {
|
|
display: none;
|
|
}
|
|
|
|
#header-wrapper {
|
|
height: 28px;
|
|
margin-bottom: 90px;
|
|
}
|
|
|
|
#header {
|
|
@media (max-width: $mobile-limit) {
|
|
margin-top: 5em !important;
|
|
}
|
|
}
|
|
|
|
#rub_service {
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
// Liens de connexion / vos démarches / déconnexion
|
|
#toplinks {
|
|
background: black;
|
|
padding: 0.8em;
|
|
border-radius: 0;
|
|
border: 0;
|
|
box-shadow: none;
|
|
.logged-in {
|
|
.toplinks--list-item:first-child a::after {
|
|
content: "|";
|
|
}
|
|
.logout {
|
|
margin-left: 0.7em;
|
|
}
|
|
}
|
|
a {
|
|
color: white !important;
|
|
}
|
|
|
|
@media (max-width: $mobile-limit) {
|
|
top: -5em;
|
|
}
|
|
}
|
|
|
|
// Bouton "Portail agent" décalé en bas à droite
|
|
a#publik-portal-agent {
|
|
color: black;
|
|
background: $ds44-LA;
|
|
border: 1px solid grey;
|
|
top: 33px;
|
|
}
|
|
|
|
#bandeau {
|
|
background-image: url('images/loire_atlantiquefr.png');
|
|
background-repeat: no-repeat;
|
|
background-position: 0 0;
|
|
width: 304px;
|
|
height: 35px;
|
|
}
|
|
|
|
div.to-the-right {
|
|
text-align: right;
|
|
padding-right: 0;
|
|
}
|
|
|
|
#logo-demarches {
|
|
margin-top: 20px !important;
|
|
img {
|
|
height: 3em;
|
|
}
|
|
@media (max-width: $mobile-limit) {
|
|
padding-left: 0 !important;
|
|
}
|
|
}
|
|
|
|
// Portail usager
|
|
|
|
html, body {
|
|
color: black;
|
|
background-color: white;
|
|
}
|
|
|
|
.central-content div.a2-block h2, .central-content .block h2 {
|
|
border-bottom: 1px solid #ccc !important;
|
|
}
|
|
|
|
#content {
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
div.cell a, a.button, a.form-title, div.back-home-button a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
div.cell a:hover, a.button:hover, a.form-title:hover, div.back-home-button a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#sidebar {
|
|
@media screen and (min-width: $mobile-limit) {
|
|
margin-right: 4ex;
|
|
margin-top: 4ex;
|
|
}
|
|
}
|
|
|
|
#panneau-code-suivi {
|
|
background-color: $ds44-lightgray !important;
|
|
}
|
|
|
|
#panneau-code-suivi, #tracking-code {
|
|
padding: 10px;
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
h2:first-child {
|
|
top: 0;
|
|
left: 0;
|
|
width: auto;
|
|
}
|
|
|
|
h3:first-child {
|
|
padding: 5px;
|
|
}
|
|
|
|
.wcs-tracking-code-input h2:first-of-type, h3:first-of-type {
|
|
background-color: $ds44-lightgray !important;
|
|
font-family: $title-ff;
|
|
font-weight: bold;
|
|
border-bottom: 1px solid #ccc !important;
|
|
font-size: 28px !important;
|
|
}
|
|
|
|
button {
|
|
margin-right: 0 !important;
|
|
height: 3em;
|
|
padding: 10px;
|
|
}
|
|
|
|
form {
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
p {
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#tracking-code {
|
|
margin-bottom: 3ex;
|
|
a:first-of-type {
|
|
display: block;
|
|
text-align: center;
|
|
margin: 10px;
|
|
padding: 0;
|
|
}
|
|
@media (max-width: $mobile-limit) {
|
|
width: 140px;
|
|
}
|
|
}
|
|
|
|
#a2-profile {
|
|
div.field {
|
|
margin-bottom: 20px;
|
|
}
|
|
span.label {
|
|
display: block;
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
h1.maintitle, h1.form-content--title {
|
|
font-family: $title-ff;
|
|
font-weight: bold;
|
|
font-size: 35px;
|
|
border-bottom: solid 1px #ccc !important;
|
|
}
|
|
|
|
.demarches-brouillon, .demarches-encours, .demarches-terminees {
|
|
border: solid 2px $ds44-LA !important;
|
|
div {
|
|
h2 {
|
|
background-color: $ds44-lightgray !important;
|
|
background-position: bottom 11px left 10px !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.demarches-brouillon {
|
|
h2 {
|
|
background-image: url('images/picto_brouillon.png') !important;
|
|
}
|
|
}
|
|
|
|
.demarches-encours {
|
|
h2 {
|
|
background-image: url('images/picto_encours.png') !important;
|
|
}
|
|
}
|
|
|
|
.demarches-terminees {
|
|
h2 {
|
|
background-image: url('images/picto_terminee.png') !important;
|
|
}
|
|
}
|
|
|
|
.demarches-brouillon, .demarches-encours, .demarches-terminees {
|
|
border: solid 2px $ds44-LA !important;
|
|
h2 {
|
|
font-family: $title-ff;
|
|
font-weight: bold;
|
|
font-size: 28px !important;
|
|
border-bottom: 0 !important;
|
|
border-bottom: 2px solid $ds44-LA !important;
|
|
background-size: 30px !important;
|
|
background-repeat: no-repeat !important;
|
|
background-position: bottom 19px left 10px !important;;
|
|
padding-left: 50px !important;
|
|
display: block !important;
|
|
}
|
|
p.zero-form {
|
|
padding: 1rem;
|
|
}
|
|
.list-of-forms {
|
|
a {
|
|
.form-number {
|
|
position: absolute;
|
|
right: 1ex;
|
|
opacity: 1;
|
|
}
|
|
.form-status {
|
|
margin-top: 2em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
button.cell-items-pagination-prev:disabled, button.cell-items-pagination-next:disabled {
|
|
background-color: #BBBBBB !important;
|
|
}
|
|
|
|
div.buttons.submit {
|
|
div.submit-button {
|
|
float: right;
|
|
}
|
|
div.cancel-button {
|
|
display: none;
|
|
}
|
|
button {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
|
|
// -----------------------------------------------------
|
|
// INTRODUCTION SI NON CONNECTE
|
|
// -----------------------------------------------------
|
|
#intro-text-non-connecte {
|
|
p {
|
|
text-align: center;
|
|
margin-top: 30px;
|
|
}
|
|
}
|
|
|
|
// -----------------------------------------------------
|
|
// PAGE DE CONNEXION
|
|
// -----------------------------------------------------
|
|
|
|
#login-page {
|
|
|
|
background-color: $ds44-LA;
|
|
@media ($min-desktop-viewport) {
|
|
padding: 10px;
|
|
}
|
|
|
|
.connexion-title {
|
|
padding: 10px;
|
|
img { height: 30px; }
|
|
h1 {
|
|
display: block;
|
|
font-family: $title-ff;
|
|
font-weight: bold;
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
margin: 7px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
}
|
|
|
|
.block {
|
|
background-color: $ds44-LA;
|
|
|
|
h2 {
|
|
background-color: transparent;
|
|
font-weight: bold;
|
|
border-bottom: none !important;
|
|
}
|
|
}
|
|
|
|
@media ($min-desktop-viewport) {
|
|
&.methods1 > .block {
|
|
width: 50%;
|
|
width: calc(50% - 2em);
|
|
margin: 0;
|
|
margin-right: 2em;
|
|
float: left;
|
|
}
|
|
&.methods2 > .block {
|
|
width: calc(33% - 2em);
|
|
}
|
|
}
|
|
|
|
// hack to remove duplicate title
|
|
.block-password > h2 + h2 {
|
|
display: none;
|
|
}
|
|
|
|
// Separator
|
|
& > .block + .block {
|
|
@media ($min-desktop-viewport) {
|
|
border-left: dotted 1px black;
|
|
padding-left: 2rem;
|
|
}
|
|
}
|
|
|
|
button.submit-button:hover {
|
|
text-decoration: underline !important;
|
|
}
|
|
|
|
button.cancel-button {
|
|
display: none;
|
|
}
|
|
|
|
#register-account {
|
|
p {
|
|
display: block;
|
|
margin: 10px auto;
|
|
}
|
|
}
|
|
|
|
// Bouton connexion agent
|
|
#oidc-a-keycloak-agents {
|
|
display: block;
|
|
height: 35px;
|
|
background-color: white;
|
|
color: black;
|
|
border: solid 1px black;
|
|
}
|
|
}
|
|
|
|
#login-page-encart {
|
|
padding: 10px;
|
|
margin-top: 30px;
|
|
margin-bottom: 30px;
|
|
border: solid 1px $ds44-LA !important;
|
|
}
|
|
|
|
// Création d'un compte
|
|
// Suppression des puces devant les listes (ex. sur civilité)
|
|
|
|
ul#id_title {
|
|
list-style: none;
|
|
}
|
|
|
|
#registration-blocks h2 {
|
|
font-size: 1.4rem;
|
|
font-family: $title-ff;
|
|
font-weight: bold;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
// -----------------------------------------------------
|
|
// CORPS DE LA PAGE
|
|
// -----------------------------------------------------
|
|
|
|
@media (max-width: $mobile-limit) {
|
|
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], textarea, select {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
// Champs input
|
|
// Style CSS désactivé, car imppossible de recoder les styles des cases à cocher et boutons radio
|
|
// dans le socle Publik, car les champs n'ont pas de balise 'label', or le design system en a besoin :
|
|
// "Pour des questions de design, les cases à cocher et boutons radios ont été refaits via CSS.
|
|
// Ce qui impose une façon de coder : les inputs checkbox ou radio doivent obligatoirement être
|
|
// codés à gauche du label dans le HTML, sans aucune balise entre les deux."
|
|
// cf https://design.loire-atlantique.fr/components/form.html
|
|
// input, textarea, {
|
|
// border: 1px solid $gray-dark;
|
|
// border-radius: 3px;
|
|
// }
|
|
|
|
#rub_service {
|
|
p, label, input {
|
|
font-size: 15px;
|
|
}
|
|
div.hint p, div.hint ul, div.hint li, div.hint span {
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
div.rouge label.field--label {
|
|
color: red;
|
|
}
|
|
|
|
div.file-upload-widget div.file-button div.widget-message.upload-done::after {
|
|
color: green;
|
|
}
|
|
|
|
}
|
|
|
|
#tracking-code.has-discard-button {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
#content p {
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
.text-check-before-submit p {
|
|
font: normal 18px Arial !important;
|
|
}
|
|
|
|
#evolutions:after {
|
|
background: black;
|
|
top: -1em;
|
|
height: 100%;
|
|
}
|
|
|
|
ul#evolutions li span.item {
|
|
border-color: black;
|
|
background: white !important;
|
|
color: black !important;
|
|
line-height: 36px;
|
|
}
|
|
|
|
ul#evolutions li:after {
|
|
background: $primary-color;
|
|
}
|
|
|
|
ul#evolutions div.evolution-metadata {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
#evolutions .msg-system {
|
|
padding-top: 0;
|
|
}
|
|
|
|
ul#evolutions span.time {
|
|
color: black;
|
|
line-height: 2.0em;
|
|
}
|
|
|
|
ul#evolutions span.user {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
|
|
// Etapes
|
|
|
|
.wcs-step {
|
|
margin-bottom: 0;
|
|
border-bottom: 1px solid $gray-dark;
|
|
}
|
|
|
|
.wcs-step.current {
|
|
background-color: $ds44-LA;
|
|
}
|
|
|
|
.wcs-step.current .wcs-step--marker, .wcs-step.current .wcs-step--label {
|
|
color: black
|
|
}
|
|
|
|
.wcs-step.step-before, .wcs-step.step-after, .wcs-step--marker {
|
|
color: black;
|
|
}
|
|
|
|
// Boutons
|
|
|
|
div#content {
|
|
.submit-button button, .previous-button button, .cancel-button button, .savedraft-button button {
|
|
font-weight: bold;
|
|
}
|
|
|
|
}
|
|
|
|
a.button {
|
|
display: block;
|
|
background: black;
|
|
color: white;
|
|
font-weight: bold;
|
|
width: 14rem;
|
|
height: 2.2rem;
|
|
padding-top: 0.5rem;
|
|
text-align: center;
|
|
margin: 1rem auto
|
|
}
|
|
|
|
// CHAMPS DE FORMULAIRE
|
|
|
|
div#gauche {
|
|
width: 17%;
|
|
}
|
|
|
|
#steps-mobile {
|
|
display: none;
|
|
}
|
|
|
|
div#steps {
|
|
background-color: #ececec;
|
|
padding: 5px;
|
|
border: solid 2px $primary-color;
|
|
ol {
|
|
color: #4e4e4e;
|
|
li span.marker {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
@media (max-width: $mobile-limit) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
div.back-home-button {
|
|
text-align: center;
|
|
}
|
|
|
|
div.back-home-button a, a#disclose-dataview {
|
|
background: black;
|
|
color: white;
|
|
padding: 5px 15px;
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
transition: all 0.2s ease;
|
|
margin-right: 2ex;
|
|
height: 1.8em;
|
|
vertical-align: middle;
|
|
box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.21);
|
|
}
|
|
|
|
a#disclose-dataview {
|
|
padding-top: 8px !important;
|
|
width: 230px;
|
|
text-align: center;
|
|
}
|
|
|
|
div#rub_service {
|
|
|
|
h2:first-of-type {
|
|
text-align: left;
|
|
font-family: $title-ff;
|
|
font-weight: bold;
|
|
font-size: 32px !important;
|
|
font-weight: 400;
|
|
padding: 0 0 0.5ex 0;
|
|
margin-bottom: 20px;
|
|
background: none;
|
|
border-bottom: 1px solid #ccc;
|
|
border-top: 0;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 3px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
input[type="radio"] {
|
|
margin: .5em;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
margin: .5em;
|
|
}
|
|
|
|
.title label {
|
|
display: block;
|
|
margin-bottom: 3px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
#rub_service form h3 {
|
|
font-family: Arial;
|
|
font-size: 20px;
|
|
padding-top: 1.5rem;
|
|
margin-top: 1.5rem;
|
|
border-top: 1px solid #ccc !important;
|
|
}
|
|
|
|
#rub_service form h3:first-of-type {
|
|
border: 0 !important;
|
|
margin-top: 0;
|
|
}
|
|
|
|
#rub_service form h4 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
span.helptext, div.hint {
|
|
font-size: 100%;
|
|
font-style: italic;
|
|
}
|
|
|
|
#colums wcscurrentdraftscell, #colums .wcscurrentformscell, #colums wcscurrentformscell {
|
|
border: solid 2px $primary-color;
|
|
}
|
|
|
|
span.required {
|
|
top: 0 !important;
|
|
color: red !important;
|
|
font-weight: bold !important;
|
|
font-size: 1.5em !important;
|
|
line-height: .5em !important;
|
|
}
|
|
|
|
div.grandlibelle div.title label {
|
|
font-size: 18px !important;
|
|
margin-bottom: 1ex !important;
|
|
}
|
|
|
|
// PAGE RECAPITULATIF DE LA SAISIE
|
|
|
|
div.form-validation form div.page input {
|
|
color: rgb(40, 40, 40);
|
|
}
|
|
|
|
// PAGE SUIVI DE LA DEMANDE
|
|
div.dataview {
|
|
margin-left: 2.5ex;
|
|
margin-bottom: 3ex;
|
|
}
|
|
|
|
div.section.foldable span.disclose-message {
|
|
font-size: 1.5rem !important;
|
|
}
|
|
|
|
#cd44-contact {
|
|
border: 2px solid lightgrey;
|
|
text-align: center;
|
|
width: 400px;
|
|
margin: 30px auto 30px auto;
|
|
@media screen and (max-width: $mobile-limit) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.infonotice, .pk-information, .pk-information.cell, #messages {
|
|
background-color: $ds44-LA;
|
|
}
|
|
|
|
// POUR CACHER DES ELEMENTS
|
|
.cd44-hidden {
|
|
display: none;
|
|
}
|
|
|
|
// -----------------------------------------------------
|
|
// MODALES
|
|
// -----------------------------------------------------
|
|
#cd44-modal-container {
|
|
width:90%;
|
|
height: 90%;
|
|
margin-top: 5%;
|
|
margin-left: 5%;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
border: 1px solid #111111;
|
|
box-shadow: 2px 2px 40px #222;
|
|
z-index: 1;
|
|
}
|
|
#cd44-modal-block {
|
|
background-color: rgba(100, 100, 100, 0.6);
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
top:0;
|
|
left:0;
|
|
display:none;
|
|
}
|
|
#cd44-modal-container h3 {
|
|
font-size: 26px;
|
|
padding:18px;
|
|
border-bottom: 1px solid #CCC;
|
|
}
|
|
|
|
// Modales pour zoom images
|
|
.dp44-modal {
|
|
display: none;
|
|
}
|
|
|
|
div.ui-dialog .ui-dialog-titlebar {
|
|
background-color: $primary-color !important;
|
|
color: $title-color !important;
|
|
}
|
|
|
|
.ui-icon, .ui-widget-content .ui-icon {
|
|
background-image: url("/static/xstatic/images/ui-icons_222222_256x240.png") !important;
|
|
}
|
|
|
|
// -----------------------------------------------------
|
|
// PIED DE PAGE
|
|
// -----------------------------------------------------
|
|
|
|
footer {
|
|
|
|
// fond du pied de page
|
|
font-family: $font-family;
|
|
font-size: 12px;
|
|
background: #e6e6e6;
|
|
margin-top: 2ex;
|
|
|
|
// par défaut le wrapper une couleur de fond gris sombre
|
|
#footer-wrapper {
|
|
background: none;
|
|
//padding: 0;
|
|
}
|
|
|
|
// Liens
|
|
// -----------------------------------------------------
|
|
|
|
#logo-loire-atlantique {
|
|
text-align: right;
|
|
padding-right: 0;
|
|
@media (max-width: $mobile-limit) {
|
|
padding: 3ex 3ex 0 0 !important;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
padding-left: 1em;
|
|
}
|
|
|
|
li {
|
|
float: left;
|
|
a {
|
|
margin-right: 10px;
|
|
color:black;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
// séparateur vertical entre les liens
|
|
li {
|
|
&:before {
|
|
color: #808080;
|
|
content: "|";
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
// pas séparateur avant le premier lien
|
|
li:first-child {
|
|
&:before {
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
//version mobile du pied de page
|
|
// -----------------------------------------------------
|
|
@media screen and (max-width: $mobile-limit) {
|
|
#footer-links {
|
|
background: none;
|
|
border: none;
|
|
}
|
|
#logo-loire-atlantique {
|
|
padding-right: 1ex;
|
|
}
|
|
}
|
|
@media screen and (max-width: $very-small-limit) {
|
|
#logo-loire-atlantique {
|
|
padding-right: 1ex;
|
|
}
|
|
}
|
|
|
|
}
|