add atReal IDE'AU theme (#59681)

This commit is contained in:
Thomas NOËL 2021-12-14 15:16:00 +01:00 committed by Thomas NOEL
parent 14f2f7fea9
commit 3f27a6ef7d
7 changed files with 566 additions and 0 deletions

View File

@ -0,0 +1,342 @@
// header
div#header {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
@media (max-width: $very-small-limit) {
padding-left: 0.7em;
}
@media (max-width: $nav-mobile-limit) {
h1 {
padding-left: calc(#{$nav-menu-side} + 8px);
}
}
}
div#top {
display: flex;
align-items: center;
}
h1#logo {
flex-grow: 1;
font-size: $fz-h4;
&.has-logo a {
text-indent: 0;
color: #555;
display: flex;
align-items: center;
padding-left: calc(75px + 1em);
height: $logo-wrapper-height;
background: url(img/logo_IDEAU_166x234.svg) no-repeat left center;
background-size: $logo-height;
}
&.has-logo:hover a, &.has-logo a:hover {
text-decoration: none;
}
@media (max-width: $very-small-limit) {
font-size: 1rem;
&.has-logo a {
height: $very-small-logo;
background-size: $very-small-logo-bg;
}
}
@media ($min-desktop-viewport) {
font-size: $fz-h2;
}
}
// toplinks
#toplinks {
// reset
border: none;
padding: 0;
border-radius: none;
box-shadow: none;
position: static;
span.connected-user {
padding-right: 0.3em;
}
line-height: 1.7;
@media ($max-mobile-viewport) {
font-size: $fz-small;
span.connected-user {
padding-right: 0.3em;
}
}
.account-link {
border-right: 2px solid #ddd;
}
@media (max-width: $very-small-limit) {
span.connected-user {
padding-right: 0;
}
.account-link {
border-right: none;
}
}
}
// nav
body {
border-left: 0 none;
}
div.gru-nav {
font-size: $fz-small;
.gru-nav-button {
height: $header-height;
border: 10px solid $primary-color;
border-width: #{$header-height / 3} 10px;
top: 0;
left: 0;
margin-left: 0;
@media (max-width: $very-small-limit) {
height: $very-small-header;
border-width: #{$very-small-header / 3} 10px;
}
&.toggled {
border-color: transparent;
.icon-bar {
border-color: #ccc;
}
+ ul {
background: $blue;
}
}
& + ul {
border: none;
@media (max-width: $nav-mobile-limit) {
padding: 0;
}
}
}
> ul {
overflow: visible;
margin: 0;
padding: 8px 0;
text-align: center;
li a {
font-weight: 700;
}
li.menu-index.selected:first-child {
border-left: 0;
}
@media ($min-desktop-viewport) {
> li {
position: relative;
padding-left: 0.625em;
padding-right: 0.625em;
> a {
padding: 0.33em 0.66em;
}
ul {
left: -1px;
padding-top: 1em;
}
}
}
// sep line
li {
@media ($max-mobile-viewport) {
border-top: 1px solid $sep-color;
}
@media ($min-desktop-viewport) {
border-left: 1px solid $sep-color;
}
}
}
}
.gru-nav-wrapper {
@media (max-width: $nav-mobile-limit) {
margin-top: -$header-height;
}
@media (max-width: $very-small-limit) {
margin-top: -$very-small-header;
}
}
// Page Image
body.has-picture {
.site-nav::after {
top: 0;
height: 0;
padding-top: 10%;
}
@media ($min-desktop-viewport) {
div#main-content-wrapper {
margin-top: -1.9rem;
}
}
}
// Main content
div#main-content-wrapper {
background-color: white;
padding: $columns-gutter;
@media (max-width: $very-small-limit) {
padding-left: #{$columns-gutter / 2};
padding-left: 0;
padding-right: #{$columns-gutter / 2};
padding-right: 0;
}
}
// cells vertical gutters
.column div.a2-block,
.gru-content div.cell,
.block {
margin-bottom: $columns-gutter;
}
div.gru-content .cell.trackingcodeinputcell button {
color: white;
}
div[class^='grid-'],
div[class*=' grid-'] {
@if $grid-gutter != 0px {
// only define property if some gutter is requested
.gru-content #columns > &.cell {
border-left: 2px solid #eee;
}
@media (max-width: $very-small-limit) {
.gru-content #columns > &.cell {
border-left: none;
}
}
}
}
// Links-list
div#rub_service div.category ul,
div#services > ul > li > ul,
div#account-management ul,
div.links-list ul,
div.menucell ul,
div.wcsformcell,
div.categoriescell ul,
div.wcscurrentdraftscell ul,
div.wcscurrentformscell ul {
& > li {
> a {
padding-left: 2rem;
&::before {
content: "\f04b";
color: $link-color;
font-family: fontawesome;
font-size: 0.7em;
position: absolute;
left: 1rem;
line-height: 1.7;
}
}
}
}
.search-cell {
@extend .pk-transparent;
input[type=search] {
background-color: white;
border-color: $font-color;
border-radius: 2em;
}
}
// Authenticated links
li.required-authentication a::after {
margin-left: 10px;
position: unset;
}
// Forms
input[readonly], select[readonly], textarea[readonly] {
background-color: transparent;
}
div#rub_service {
background-color: white;
& > h2 {
font-size: $fz-h1;
padding-left: 0.5rem;
}
}
div.gru-content div#rub_service,
div#rub_service {
h3 {
font-size: $fz-h2;
color: $title-color;
}
h4 {
color: $title-color;
font-size: $fz-h3;
}
}
div#summary h2,
div#evolution-log h2 {
border-bottom: 1px solid currentColor;
}
ul#evolutions div.evolution-metadata,
ul#evolutions li div.msg {
background-color: white;
}
// Footer
#footer {
font-size: $fz-small;
padding-left: 0.7rem;
padding-right: 0.7rem;
h2, h3 {
font-weight: 500;
}
.menucell {
li a {
&::before {
content: none;
}
}
}
div.links-list ul {
& > li {
border: none;
> a {
padding: 0;
margin-bottom: 1em;
&::before {
content: none;
}
&:hover {
text-decoration: underline;
}
}
}
}
}
#footer-wrapper {
margin-top: 0;
}
.has-pwa-navigation footer {
@media (max-width: $nav-mobile-limit) {
margin-bottom: 0;
}
}

View File

@ -0,0 +1,105 @@
// New colors
$blue: #4c87c7;
// New font sizes
$fz-h1: 3.125em;
$fz-h2: 1.875em;
$fz-h3: 1.375em;
$fz-h4: 1.25rem;
$fz-small: 0.875em;
$fz-xsmall: 0.78em;
// Publik overrides
// see: https://doc-publik.entrouvert.com/dev/integration-graphique/infrastructure-scss/
// Couleurs
$primary-color: $blue;
$sep-color: #fff9;
// Généralité
$body-background: #fafafa;
$link-color: $blue;
$font-family: "Open Sans Condensed", Roboto, sans-serif;
$width: 1200px;
$header-background-color: white;
$footer-background: $blue;
$footer-link-color: white;
$columns-gutter: 30px;
// Titres
$title-background: transparent;
$title-font-family: Lato, "Open Sans Condensed", Roboto, sans-serif;
$title-weight: 700;
// Navigation
$nav-background: $blue;
$nav-color: #eee;
$nav-item-selected-background: #ccc4;
$nav-item-selected-color: white;
// Mode responsive
$mobile-limit: 1000px;
$nav-button-background: $primary-color;
$nav-border-color: transparent;
// Application mobile (PWA)
$nav-mobile-bottom-bar-background: $blue;
$nav-mobile-bottom-bar-color: white;
$nav-mobile-bottom-bar-item-hover-color: white;
$nav-mobile-bottom-bar-item-hover-background: $link-color;
$nav-mobile-bottom-bar-item-selected-background: $link-color;
$nav-mobile-bottom-bar-item-selected-color: white;
// Formulaires
$button-color: white;
$button-background: $link-color;
$button-hover-background: $primary-color;
// Bloc étapes d'une démarche
$wcs-steps-spacing: 0.7rem;
$wcs-step-color: darken(#fafafa, 40%);
$wcs-step-current-marker-background: $primary-color;
$wcs-step-current-marker-color: white;
$wcs-step-border-bottom: none;
$wcs-step-marker-background: darken(#fafafa, 15%);
$wcs-step-marker-color: white;
$wcs-step-marker-type: disc;
// Cellules
//$cell-background: #fafafa;
$cell-border: none;
$cell-entry-font-weight: 400;
$cell-entry-color: #333;
$cell-entry-hover-background: transparent;
$cell-entry-hover-color: $link-color;
$cell-entry-border: 1px solid $sep-color;
// Customs
$logo-height: 60px;
$logo-wrapper-height: 90px;
$header-height: $logo-wrapper-height + 10px;
$very-small-limit: 560px;
$very-small-reduction: 20px;
$very-small-header: $header-height - $very-small-reduction;
$very-small-logo: $logo-wrapper-height - $very-small-reduction;
$very-small-logo-bg: $logo-height - $very-small-reduction;
$very-small-cols-gutter: $columns-gutter - $very-small-reduction;
$nav-full-width-background: true;
//$nav-submenu-color: $blue;
$nav-mobile-menu-background: #fafafa;
$nav-mobile-menu-item-color: $nav-color;
$cell-image-position: top;
$cell-image-padding: 0;
$cell-title-cover-border: false;
$widget-background: $body-background;
$widget-border: 1px solid $sep-color;
$widget-focus-border: 1px solid $blue;
$widget-unique-checkbox-position: left;
$footer-menucell-separator: 1px solid hsla(0, 0%, 100%, 0.3);

View File

@ -0,0 +1,8 @@
{
"label": "IDE'AU (atReal)",
"variables": {
"pwa_display": "standalone",
"theme_color": "#4c87c7",
"favicon": "ideau/img/favicon.ico"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 314 KiB

View File

@ -0,0 +1,105 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="43.809708mm"
height="61.799667mm"
viewBox="0 0 43.809708 61.79967"
version="1.1"
id="svg1539"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
sodipodi:docname="logo_IDEAU_155x219.svg">
<defs
id="defs1533" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#f56617"
borderopacity="1"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.979899"
inkscape:cx="44.158004"
inkscape:cy="137.47592"
inkscape:document-units="mm"
inkscape:current-layer="svg1539"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1001"
inkscape:window-x="-9"
inkscape:window-y="-9"
inkscape:window-maximized="1"
inkscape:showpageshadow="false"
borderlayer="true" />
<metadata
id="metadata1536">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="g851">
<path
inkscape:export-ydpi="90"
inkscape:export-xdpi="90"
sodipodi:nodetypes="cccc"
inkscape:connector-curvature="0"
id="path1379"
d="m 21.904516,24.275716 c -3.895698,6.727006 -7.791952,13.453658 -11.68818,20.180321 7.79235,0 15.584699,0 23.377038,0 C 29.697078,37.729269 25.800823,31.002491 21.904516,24.275716 Z"
style="display:inline;opacity:1;fill:#4c87c7;fill-opacity:1;stroke:none;stroke-width:3.91309714;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<path
inkscape:export-ydpi="90"
inkscape:export-xdpi="90"
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#999999;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:6.03975105;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="M 21.90449,0 C 10.264781,0 0.738194,9.489096 0.738194,21.083008 c 0,6.383181 2.891261,12.124659 7.429473,15.999677 l 3.154045,-5.441217 1.173507,-2.024672 c -2.048113,-2.242507 -3.290226,-5.231103 -3.290226,-8.533788 0,-7.036261 5.63544,-12.649523 12.699497,-12.649523 7.064057,0 12.700222,5.613262 12.700222,12.649523 0,3.302685 -1.241949,6.291281 -3.290237,8.533788 l 1.173533,2.024672 3.154019,5.4405 c 4.538109,-3.875016 7.429487,-9.616025 7.429487,-15.99896 C 43.071514,9.489096 33.544214,0 21.90449,0 Z"
id="path1389"
inkscape:connector-curvature="0" />
<path
d="m 1.1013614,53.674068 v 8.011384 H 0.36712043 V 53.674068 Z M 0.73424091,50.835004 q 0.30185459,0 0.51396869,0.212114 0.2202722,0.212113 0.2202722,0.513969 0,0.310012 -0.2202722,0.522126 -0.2121141,0.212113 -0.51396869,0.212113 -0.3018546,0 -0.52212689,-0.212113 Q -2.9637975e-8,51.871099 -2.9637975e-8,51.561087 q 0,-0.301856 0.212114049637975,-0.513969 0.22027229,-0.212114 0.52212689,-0.212114 z"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:63.14857483px;line-height:125%;font-family:'Caviar Dreams';-inkscape-font-specification:'Caviar Dreams, Normal';text-align:justify;writing-mode:lr-tb;text-anchor:start;fill:#4c87c7;fill-opacity:1;stroke:none;stroke-width:13.22916603;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path824"
inkscape:connector-curvature="0" />
<path
d="m 4.462553,49.399155 v 11.527581 h 0.057108 q 2.9043307,0 4.4625532,-1.566381 1.7377028,-1.737704 1.7377028,-4.201488 0,-2.45563 -1.7377028,-4.201491 Q 7.4239917,49.399155 4.519661,49.399155 Z m 0,-0.750559 h 0.057108 q 3.2225019,0 4.9928382,1.778494 1.9579758,1.966135 1.9579758,4.731777 0,2.773799 -1.9579758,4.731774 -1.7703363,1.778494 -4.9928382,1.778494 H 4.462553 v 0.01633 H 3.7283121 V 48.632287 H 4.462553 Z"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:63.14857483px;line-height:125%;font-family:'Caviar Dreams';-inkscape-font-specification:'Caviar Dreams, Normal';text-align:justify;writing-mode:lr-tb;text-anchor:start;fill:#4c87c7;fill-opacity:1;stroke:none;stroke-width:13.22916603;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path826"
inkscape:connector-curvature="0" />
<path
d="m 20.044777,48.632279 v 0.734242 h -5.792345 v 5.425223 h 5.792345 v 0.734243 h -5.792345 v 5.425223 h 5.792345 v 0.734242 H 13.518191 V 48.632279 Z"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:63.14857483px;line-height:125%;font-family:'Caviar Dreams';-inkscape-font-specification:'Caviar Dreams, Normal';text-align:justify;writing-mode:lr-tb;text-anchor:start;fill:#4c87c7;fill-opacity:1;stroke:none;stroke-width:13.22916603;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path828"
inkscape:connector-curvature="0" />
<path
d="m 22.092494,53.551695 v -4.89494 h 0.734241 v 4.89494 z"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:63.14857483px;line-height:125%;font-family:'Caviar Dreams';-inkscape-font-specification:'Caviar Dreams, Normal';text-align:justify;writing-mode:lr-tb;text-anchor:start;fill:#4c87c7;fill-opacity:1;stroke:none;stroke-width:13.22916603;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path830"
inkscape:connector-curvature="0" />
<path
d="m 31.107342,55.950214 -1.990609,-5.474173 -1.990608,5.474173 z m 0.269221,0.73424 h -4.519662 l -1.819285,5.000998 h -0.78319 l 4.862307,-13.355026 4.854147,13.355026 h -0.775031 z"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:63.14857483px;line-height:125%;font-family:'Caviar Dreams';-inkscape-font-specification:'Caviar Dreams, Normal';text-align:justify;writing-mode:lr-tb;text-anchor:start;fill:#4c87c7;fill-opacity:1;stroke:none;stroke-width:13.22916603;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path832"
inkscape:connector-curvature="0" />
<path
d="m 43.06731,48.632279 h 0.7424 v 9.381969 q -0.203957,1.492956 -1.248212,2.537211 -1.248209,1.248209 -3.010387,1.248209 -1.770335,0 -3.018546,-1.248209 -1.248209,-1.248212 -1.248209,-3.01039 v -8.90879 h 0.7424 v 8.90879 q 0,1.452166 1.027938,2.488261 1.036095,1.027938 2.496417,1.027938 1.460323,0 2.488261,-1.027938 1.027938,-1.036095 1.027938,-2.488261 z"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:63.14857483px;line-height:125%;font-family:'Caviar Dreams';-inkscape-font-specification:'Caviar Dreams, Normal';text-align:justify;writing-mode:lr-tb;text-anchor:start;fill:#4c87c7;fill-opacity:1;stroke:none;stroke-width:13.22916603;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="path834"
inkscape:connector-curvature="0" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 8.4 KiB

View File

@ -0,0 +1,6 @@
@charset "UTF-8";
@import '../includes/fonts/orkney';
@import 'vars';
@import '../includes/publik';
@import 'custom';