853 lines
15 KiB
SCSS
853 lines
15 KiB
SCSS
@charset "UTF-8";
|
|
@import '../includes/fonts/roboto';
|
|
|
|
@font-face {
|
|
font-family: 'MarsIcons';
|
|
src: url('fonts/marsicons13.ttf') format('truetype'),
|
|
url('fonts/marsicons13.woff') format('woff'),
|
|
url('fonts/marsicons13.woff2') format('woff2');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
element-invisible {
|
|
position: absolute !important;
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
overflow: hidden;
|
|
height: 1px;
|
|
width: 1px;
|
|
word-wrap: normal;
|
|
}
|
|
|
|
%button {
|
|
box-shadow: none;
|
|
&:hover {
|
|
box-shadow: none;
|
|
}
|
|
&:focus-visible {
|
|
outline: 2px solid $red;
|
|
outline-offset: 1px;
|
|
}
|
|
}
|
|
|
|
h1, h2, h3, h4, div.textcell h3, div.textcell h4 {
|
|
font-weight: bold;
|
|
line-height: 1.3em;
|
|
margin-bottom: 0.6em;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
h1 {
|
|
color: $red;
|
|
font-size: 175%;
|
|
padding-left: 0.9rem;
|
|
}
|
|
|
|
h2 {
|
|
color: $red;
|
|
font-size: 150%;
|
|
}
|
|
|
|
li.required-authentication a::after {
|
|
content: "\e04d";
|
|
font-family: MarsIcons;
|
|
position: absolute;
|
|
right: 1rem;
|
|
color: #444;
|
|
font-size: 170%;
|
|
top: 0.35em;
|
|
}
|
|
|
|
#login-page h2 {
|
|
color: $red;
|
|
font-size: 237%;
|
|
padding-left: 0;
|
|
text-align: left;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
#login-page div.block h2 + div { padding: 0; }
|
|
|
|
h3 {
|
|
color: $link-color;
|
|
font-size: 162%;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 137%;
|
|
}
|
|
|
|
.authentic-page h1,
|
|
.gru-content div.a2-block h2, .gru-content div.block h2, div.links-list h2,
|
|
div#rub_service h2 {
|
|
color: $red;
|
|
font-size: 187%;
|
|
}
|
|
|
|
.authentic-page h1 {
|
|
padding-left: 0;
|
|
}
|
|
|
|
div#rub_service div.category h3, .gru-content div.a2-block h2,
|
|
.gru-content div.block h2, div.links-list h2,
|
|
.gru-content div.textcell h2:first-child,
|
|
.gru-content div.cell h2:first-child, div#tracking-code h3,
|
|
div#rub_service h2, #toplinks {
|
|
background-color: transparent;
|
|
}
|
|
|
|
div#header {
|
|
@media screen and ($max-mobile-viewport) {
|
|
padding: 0;
|
|
|
|
h1 {
|
|
padding-left: 0;
|
|
background-position: inherit;
|
|
}
|
|
}
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
#logo a {
|
|
background: url(img/logo.svg) no-repeat left bottom;
|
|
background-size: auto 1.3em;
|
|
background-position: 0.4em center;
|
|
display: block;
|
|
height: 2em;
|
|
text-indent: -9999px;
|
|
|
|
@media screen and ($max-mobile-viewport) {
|
|
background-size: auto 0.7em;
|
|
background-position: 0.4em 0.42em;
|
|
}
|
|
}
|
|
|
|
div#nav li {
|
|
border-right: 0.1em solid #FFF;
|
|
}
|
|
|
|
@media screen and (max-width: $custom-very-small-screen) {
|
|
div#footer {
|
|
margin: 0 1em;
|
|
}
|
|
}
|
|
|
|
div#footer > div > div > div {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
@media screen and (max-width: $custom-very-small-screen) {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
div#footer div#footer-logos {
|
|
flex: 1;
|
|
@media screen and (max-width: $custom-very-small-screen) {
|
|
flex-basis: auto;
|
|
}
|
|
background: $primary-color;
|
|
margin: 0 0.4em 0 0;
|
|
padding: 2em 0 2em 0;
|
|
@media screen and (max-width: $custom-very-small-screen) {
|
|
margin: 0;
|
|
}
|
|
ul.menu{
|
|
list-style: none;
|
|
margin-left: 0;
|
|
margin-top: 0;
|
|
li {
|
|
font-weight: bold;
|
|
float: left;
|
|
line-height: 1.3em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
li.rs-link a, li.logorouen span {
|
|
display: block;
|
|
height: 2.5em;
|
|
margin-right: 0.8em;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
li.rs-link a {
|
|
width: 2.5em;
|
|
}
|
|
li.logorouen span {
|
|
width: 9.110em;
|
|
&::after {
|
|
background-image: url(img/logo-h.svg);
|
|
}
|
|
}
|
|
li.rs-link a::after, li.logorouen span::after {
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
content: ' ';
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
li.rs-facebook a::after {
|
|
background-image: url(img/rs-facebook.svg);
|
|
}
|
|
li.rs-twitter a::after {
|
|
background-image: url(img/rs-twitter.svg);
|
|
}
|
|
li.rs-googleplus a::after {
|
|
background-image: url(img/rs-googleplus.svg);
|
|
}
|
|
li.rs-youtube a::after {
|
|
background-image: url(img/rs-youtube.svg);
|
|
}
|
|
li.rs-flickr a::after {
|
|
background-image: url(img/rs-flickr.svg);
|
|
}
|
|
}
|
|
}
|
|
|
|
div#footer div#footer-content {
|
|
flex: 3;
|
|
@media screen and (max-width: $custom-very-small-screen) {
|
|
flex-basis: auto;
|
|
}
|
|
background: $primary-color;
|
|
padding: 2em 2em 2em 2em;
|
|
border: 0;
|
|
font-size: 100%;
|
|
font: inherit;
|
|
vertical-align: baseline;
|
|
ul.menu {
|
|
border: 0;
|
|
font-size: 100%;
|
|
margin-top: 0;
|
|
margin-left: 0;
|
|
list-style: none;
|
|
padding: 0;
|
|
li {
|
|
display: inline;
|
|
font-weight: bold;
|
|
line-height: 1.6em;
|
|
a {
|
|
border-bottom: none;
|
|
color: $black;
|
|
}
|
|
}
|
|
li::after {
|
|
color: $black;
|
|
content: $icon-mars-bullet;
|
|
font-family: MarsIcons;
|
|
}
|
|
li:last-child::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
div#rub_service h2 {
|
|
color: $red;
|
|
font-size: 237%;
|
|
padding-left: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
%button { font-weight: bold; }
|
|
|
|
form.quixote div.widget { margin-bottom: 2em; }
|
|
form.quixote div.widget div.widget { margin-bottom: inherit; }
|
|
|
|
@media screen and ($min-desktop-viewport) {
|
|
div#rub_service,
|
|
body.authentic-page #content, #messages {
|
|
max-width: 50rem;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
%icon-common {
|
|
font-family: MarsIcons;
|
|
font-size: 200%;
|
|
margin-right: 0.2em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
div.RadiobuttonsWidget div.content label {
|
|
display: block;
|
|
& input[type="radio"] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
& + span {
|
|
display: block;
|
|
}
|
|
&:focus-visible + span {
|
|
outline: 2px solid $red;
|
|
outline-offset: 5px;
|
|
}
|
|
& + span::before {
|
|
@extend %icon-common;
|
|
content: $icon-mars-circle;
|
|
}
|
|
&:checked + span::before {
|
|
content: $icon-mars-circle-dotted;
|
|
}
|
|
}
|
|
}
|
|
|
|
div.CheckboxWidget div.content label,
|
|
div.CheckboxesWidget div.content label {
|
|
display: block;
|
|
& input[type="checkbox"] {
|
|
left: -99999999px;
|
|
position: absolute;
|
|
&:focus-visible + span {
|
|
outline: 2px solid $red;
|
|
outline-offset: 5px;
|
|
}
|
|
& + span::before {
|
|
@extend %icon-common;
|
|
content: $icon-mars-square;
|
|
}
|
|
&:checked + span::before {
|
|
content: $icon-mars-square-checked;
|
|
}
|
|
}
|
|
}
|
|
|
|
form .title label {
|
|
display: block;
|
|
font-weight: bold;
|
|
font-size: 122%;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
#registration-intro {
|
|
text-align: center;
|
|
margin-bottom: 3em;
|
|
}
|
|
|
|
#registration-blocks .a2-block:not(:first-child),
|
|
#login-page .block:not(:first-child) {
|
|
&::after {
|
|
background-image:
|
|
linear-gradient(#999999, #999999),
|
|
linear-gradient(#999999, #999999);
|
|
}
|
|
}
|
|
|
|
div#account-forms-section {
|
|
@extend .links-list;
|
|
}
|
|
|
|
div.a2-block form button {
|
|
min-width: inherit;
|
|
}
|
|
|
|
div#content div.buttons.submit {
|
|
display: flex;
|
|
& div.submit-button { order: 1; }
|
|
|
|
@media screen and ($max-mobile-viewport) {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
div#content div.SubmitWidget {
|
|
margin-bottom: 0;
|
|
margin-right: 1em;
|
|
|
|
button.form-next,
|
|
button.form-submit,
|
|
button.cancel,
|
|
button.form-previous {
|
|
@extend %button-with-icon;
|
|
}
|
|
button.form-next::after {
|
|
content: $icon-mars-next;
|
|
/* fix broken base line alignment */
|
|
/* padding sum must stay equal to other buttons */
|
|
padding-top: 0.4rem !important;
|
|
padding-bottom: 0.2rem !important;
|
|
}
|
|
button.form-submit::after { content: $icon-mars-submit; }
|
|
button.form-previous::after { content: $icon-mars-back; }
|
|
button.cancel::after { content: $icon-mars-cancel; }
|
|
}
|
|
|
|
div#nav #nav-button.toggled + ul li {
|
|
border-bottom: 0.1em solid $white;
|
|
text-align: center;
|
|
a {
|
|
padding-left: 0;
|
|
span {
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-content--sidebox {
|
|
clear: both;
|
|
width: auto;
|
|
float: none;
|
|
}
|
|
|
|
.form-content--sidebox + div#rub_service {
|
|
width: auto;
|
|
float: none;
|
|
}
|
|
|
|
#publik-portal-agent { display: none; }
|
|
|
|
#messages {
|
|
li.info {
|
|
background-color: transparent;
|
|
color: inherit;
|
|
margin: inherit;
|
|
padding-left: 1em;
|
|
|
|
&::before, &::after { display: none; }
|
|
}
|
|
}
|
|
|
|
/* Account management */
|
|
#profile span.label {
|
|
display: block;
|
|
color: $red;
|
|
font-size: inherit;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.a2-block p { margin-left: 0; }
|
|
div.a2-block form, div.a2-block > p { margin: 1em 1em; }
|
|
|
|
/* Home page */
|
|
body.page-template-homepage,
|
|
body.page-index {
|
|
.gru-content { display: block; }
|
|
|
|
.bonjour {
|
|
text-align: center;
|
|
font-size: 175%;
|
|
font-weight: bold;
|
|
color: $green;
|
|
margin-bottom: 1em;
|
|
}
|
|
}
|
|
|
|
.cell-summary { display: none; }
|
|
body.page-template-homepage #sidebar,
|
|
body.page-index #sidebar {
|
|
flex: inherit;
|
|
max-width: inherit;
|
|
|
|
@media screen and ($min-desktop-viewport) {
|
|
display: grid;
|
|
grid-gap: 1rem;
|
|
column-gap: 1rem;
|
|
row-gap: 1rem;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
grid-template-areas:
|
|
"a a a a"
|
|
"b b c d"
|
|
"e e f f"
|
|
"g g g g";
|
|
|
|
.introduction { grid-area: a; }
|
|
.suivi { grid-area: b; }
|
|
.creer-compte { grid-column: d-end / 3;}
|
|
.en-cours { grid-area: c; }
|
|
.brouillons { grid-area: d; }
|
|
.coffre-fort { grid-area: e; }
|
|
.historique { grid-area: f; }
|
|
.toutes-demarches { grid-area: g; }
|
|
}
|
|
|
|
.toutes-demarches h1 { margin-top: 1em; }
|
|
|
|
.btlnk {
|
|
background-color: #82cebb;
|
|
&::after { color: #82cebb; }
|
|
}
|
|
|
|
.creer-compte {
|
|
background-image: url(img/picto_create.svg);
|
|
background-size: 5em 5em;
|
|
background-repeat: no-repeat;
|
|
background-position: 1rem 1rem;
|
|
|
|
h2 {
|
|
margin: 1em 0 1.5em 4em;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
h1, h2, h3, p, form, .cell {
|
|
margin: 0;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
p { margin: 1em 0; }
|
|
|
|
button { background-color: #82cebb; }
|
|
|
|
h1 {
|
|
text-align: center;
|
|
font-size: 175%;
|
|
}
|
|
|
|
.introduction h1 { color: $green; }
|
|
|
|
h2 { font-size: 150%; }
|
|
|
|
.suivi h2 {
|
|
position: relative;
|
|
left: 1.55em;
|
|
background-color: #82cebb;
|
|
padding: 0.5em 0.5em;
|
|
display: inline-block;
|
|
width: 9em;
|
|
text-align: center;
|
|
|
|
&::before {
|
|
content: ' ';
|
|
background-image: url(img/ticket.svg);
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 1.55em;
|
|
left: -1.55em;
|
|
top: 0;
|
|
background-size: contain;
|
|
}
|
|
}
|
|
|
|
#tracking-code {
|
|
height: 2.5em;
|
|
position: relative;
|
|
top: 0.1em;
|
|
}
|
|
|
|
.introduction {
|
|
text-align: center;
|
|
|
|
p:nth-child(0) {
|
|
color: $green;
|
|
font-size: 150%;
|
|
}
|
|
}
|
|
|
|
.suivi, .en-cours, .creer-compte, .brouillons, .coffre-fort, .historique {
|
|
padding: 1rem;
|
|
background-color: #d8f0ea;
|
|
@media screen and ($max-mobile-viewport) { margin-bottom: 1em; }
|
|
}
|
|
|
|
.summary-count {
|
|
font-size: 700%;
|
|
font-weight: bold;
|
|
color: #3eb397;
|
|
}
|
|
|
|
.cell-summary { display: block; }
|
|
.cell-full { display: none; }
|
|
}
|
|
|
|
body.page-template-homepage #columns,
|
|
body.page-index #columns {
|
|
@media screen and ($min-desktop-viewport) {
|
|
display: grid;
|
|
grid-gap: 1rem 1rem;
|
|
column-gap: 1rem;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.column {
|
|
float: none;
|
|
width: inherit;
|
|
}
|
|
|
|
h1, h2, h3, p, form, .cell {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
h2 {
|
|
padding: 0.5em 1rem;
|
|
margin: 2em 0 0.7em;
|
|
}
|
|
|
|
.description, .intro { display: none; }
|
|
|
|
.column:first-child .cell:nth-child(2n), .column:last-child .cell:nth-child(2n+1) {
|
|
h2 { background-color: #F4A7AA; }
|
|
a {
|
|
background-color: #FCE4E5;
|
|
color: $red;
|
|
}
|
|
li.required-authentication a::after { color: $red; }
|
|
}
|
|
|
|
.column:first-child .cell:nth-child(2n+1), .column:last-child .cell:nth-child(2n) {
|
|
h2 { background-color: #82cebb; }
|
|
a {
|
|
background-color: #D8F0EA;
|
|
color: $green;
|
|
}
|
|
li.required-authentication a::after { color: $green; }
|
|
}
|
|
|
|
.cell {
|
|
margin-bottom: 2em;
|
|
|
|
li, h2 { border-radius: 0; }
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
border: none;
|
|
padding: 1em;
|
|
margin: 0.3em 0;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
a.registration.picto::after {
|
|
content: ' ';
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
background-image: url(img/picto_roue.svg);
|
|
background-size: contain;
|
|
position: relative;
|
|
top: 0.1em;
|
|
}
|
|
|
|
div#toplinks a.registration {
|
|
margin-top: 0.4em;
|
|
display: inline-block;
|
|
}
|
|
|
|
body.page-codesuivi {
|
|
#main-content-wrapper {
|
|
max-width: 50rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#columns h2 {
|
|
color: $red;
|
|
font-size: 175%;
|
|
padding-left: 0.9rem;
|
|
}
|
|
|
|
#tracking-code {
|
|
height: 2.5em;
|
|
position: relative;
|
|
top: 0.1em;
|
|
}
|
|
}
|
|
|
|
#messages li, div.infonotice, div.successnotice, div.warningnotice, div.errornotice, form ul.errorlist.nonfield li {
|
|
background: transparent;
|
|
}
|
|
|
|
div.list-of-forms span.form-number {
|
|
opacity: inherit;
|
|
color: #575757;
|
|
}
|
|
|
|
body.page-porte-doc {
|
|
td.thumbnail img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
#columns h2 {
|
|
color: $red;
|
|
font-size: 150%;
|
|
}
|
|
|
|
ul.pagination {
|
|
padding: 0 0 2rem 0;
|
|
li.previous { float: left; }
|
|
li.next { float: right; }
|
|
}
|
|
|
|
#user-files {
|
|
tr.odd { background: #d8f0ea; }
|
|
tr.even { background: transparent; }
|
|
|
|
@media screen and ($min-desktop-viewport) {
|
|
a.icon-remove::before { color: $red; }
|
|
a.icon-remove { border-bottom: none; }
|
|
|
|
tr::before, a.icon-remove::before { font-size: 200%; }
|
|
th.size, th.created, td.size, td.created { text-align: center; }
|
|
th.title { padding: 0.5ex 1em; }
|
|
}
|
|
|
|
@media screen and ($max-mobile-viewport) {
|
|
table, thead, tbody, th, td, tr { display: block; }
|
|
|
|
thead tr {
|
|
position: absolute;
|
|
top: -9999px;
|
|
left: -9999px;
|
|
}
|
|
|
|
tr {
|
|
margin: 0 0 1rem 0;
|
|
padding: 0.5em;
|
|
overflow: hidden;
|
|
position: relative;
|
|
&.even { background: #d8f0ea; }
|
|
}
|
|
|
|
tr::before {
|
|
width: inherit;
|
|
display: block;
|
|
position: absolute;
|
|
left: 1em;
|
|
top: 0.8em;
|
|
}
|
|
|
|
td {
|
|
border: none;
|
|
position: relative;
|
|
padding-left: 8em;
|
|
text-align: left;
|
|
}
|
|
|
|
td::before {
|
|
position: absolute;
|
|
top: 0.2em;
|
|
left: 0.5em;
|
|
width: 8em;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
td:nth-of-type(1) {
|
|
border-bottom: 0.3em solid white;
|
|
padding-left: 2em;
|
|
margin-bottom: 0.3em;
|
|
padding-bottom: 0.4em;
|
|
}
|
|
|
|
td:nth-of-type(2)::before { content: "Taille"; }
|
|
td:nth-of-type(3)::before { content: "Création"; }
|
|
|
|
a.icon-remove::before {
|
|
content: "Supprimer";
|
|
font-family: inherit;
|
|
color: $red;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.fileinfo a.remove::before {
|
|
font-size: 150%;
|
|
}
|
|
|
|
div.gru-content div#rub_service .drafts-recall-block {
|
|
max-width: 50rem;
|
|
margin: auto;
|
|
background: $very-pale-pink;
|
|
padding: 1rem 1rem;
|
|
.drafts-recall {
|
|
padding: 0;
|
|
}
|
|
h3 {
|
|
margin: 0;
|
|
font-size: 130%;
|
|
border: none;
|
|
color: $red;
|
|
}
|
|
a.pk-button {
|
|
border: none;
|
|
color: $button-color;
|
|
display: inline-flex;
|
|
padding: 0 0 0 1rem;
|
|
align-items: center;
|
|
height: auto;
|
|
&:hover {
|
|
border: none;
|
|
}
|
|
&::after {
|
|
content: $icon-mars-draft-recall;
|
|
background: black;
|
|
color: $button-background;
|
|
margin-left: 1em;
|
|
font-family: MarsIcons;
|
|
height: 100%;
|
|
padding: 0.6em 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
%button-with-icon {
|
|
margin: 0;
|
|
border: none;
|
|
color: $button-color;
|
|
display: inline-flex;
|
|
padding: 0 0 0 1rem;
|
|
align-items: center;
|
|
height: auto;
|
|
&:hover {
|
|
border: none;
|
|
}
|
|
&::after {
|
|
background: black;
|
|
color: $button-background;
|
|
margin-left: 1rem;
|
|
font-family: MarsIcons;
|
|
height: 100%;
|
|
padding: 0.3rem 0.4rem;
|
|
font-size: 150%;
|
|
}
|
|
}
|
|
|
|
form[action="removedraft"] button {
|
|
@extend %button-with-icon;
|
|
&::after {
|
|
content: $icon-mars-trash;
|
|
}
|
|
}
|
|
|
|
.authentic-page .submit-button {
|
|
@extend %button-with-icon;
|
|
margin-right: 1em;
|
|
&::after {
|
|
content: $icon-mars-checkmark;
|
|
}
|
|
}
|
|
|
|
.authentic-page #content button.cancel-button {
|
|
@extend %button-with-icon;
|
|
&::after {
|
|
content: $icon-mars-cancel;
|
|
}
|
|
}
|
|
|
|
.form-content--sidebox div#tracking-code {
|
|
display: block;
|
|
}
|
|
|
|
div.fileinfo a.remove {
|
|
border: none;
|
|
}
|
|
|
|
.anonymous-user.authentic-page #toplinks {
|
|
display: none;
|
|
}
|
|
|
|
ul#evolutions li span.item {
|
|
background: white !important;
|
|
}
|