add theme for PFWB (#30194)

This commit is contained in:
Frédéric Péters 2019-04-03 10:16:00 +02:00
parent 165244e800
commit e03090f492
5 changed files with 444 additions and 0 deletions

153
static/pfwb/_custom.scss Normal file
View File

@ -0,0 +1,153 @@
a#publik-portal-agent {
right: auto;
left: 5px;
}
%title {
@extend %title;
border-radius: $border-radius $border-radius 0 0;
}
body {
background: #e8e9e9;
}
span#environment-label {
font-size: 10px;
}
#toplinks {
left: 74vw;
top: -2rem;
font-size: 90%;
width: 20vw;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
font-size: 90%;
border-color: black;
}
header {
position: fixed;
top: 0;
left: 0;
z-index: 100;
#header {
transition: all ease 0.2s;
margin-top: 2rem;
margin-bottom: 2rem;
h1 {
margin-top: 0.4rem;
a {
padding-left: 60px;
background: url(img/pfwb.svg) 10px 0px no-repeat;
background-size: 40px 40px;
}
}
}
}
div#nav {
position: fixed;
top: 0;
right: 0;
width: 100%;
max-width: none;
text-align: right;
padding-right: 1rem;
border-bottom: 1px solid #aaa;
z-index: 10;
margin-top: 0;
& > ul {
transition: all ease 0.2s;
margin-top: 2rem;
margin-bottom: 2rem;
li > a {
font-weight: normal;
}
}
}
div#main-content-wrapper {
z-index: 0;
padding-top: 8rem;
}
body.has-picture {
div#main-content-wrapper {
padding-top: 1rem;
}
}
body.has-picture nav::after {
top: 100px;
}
body.scrolled {
header #header,
div#nav > ul {
margin-top: 0;
margin-bottom: 0;
}
}
#logo a {
color: $primary-color;
font-weight: normal;
}
@media screen and (max-width: $mobile-limit) {
div#nav, header {
text-align: left;
position: static;
width: auto;
padding-right: 0;
border-bottom: 0;
#header h1 a {
background-position: 0 0;
padding-left: 50px;
white-space: pre;
overflow: hidden;
max-width: calc(100vw - 180px);
display: inline-block;
}
}
header #header {
margin-top: 3rem;
margin-bottom: 0.4rem;
}
div#nav > ul {
margin-top: 0;
margin-bottom: 0px;
}
div#main-content-wrapper {
padding-top: 0;
}
#toplinks {
right: 1vw;
left: auto;
top: -3rem;
width: auto;
}
body.has-picture nav::after {
top: 0px;
}
}
div#gauche, div#rub_service {
background: white;
border-radius: $border-radius;
}
footer {
a {
color: white;
}
}

24
static/pfwb/_vars.scss Normal file
View File

@ -0,0 +1,24 @@
@import '../includes/font-ubuntu';
$font-color: black;
$font-family: Ubuntu, sans-serif;
$font-size: 16px;
$primary-color: #5a5c5c;
$border-radius: 5px;
$nav-background: linear-gradient(-180deg, #f5f6f6 7%, #e8e9e9);
$nav-submenu-background: #e8e9e9;
$width: 1200px;
$nav-active-color: $primary-color;
$nav-item-selected-mode: bottom-border;
$nav-submenu-color: $font-color;
$nav-after-image-height: 300px;
$button-background: $primary-color;
$cell-border: 1px solid transparent;
$title-background: linear-gradient(-180deg, #f5f6f6 7%, #e8e9e9);
$title-border-bottom: 1px solid #bbb;
$form-style: light;
$notification-style: border-icon;

6
static/pfwb/config.json Normal file
View File

@ -0,0 +1,6 @@
{
"label": "PFWB",
"variables": {
"theme_color": "#5a5c5c"
}
}

256
static/pfwb/img/pfwb.svg Normal file
View File

@ -0,0 +1,256 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 131.87466 111.2"
xml:space="preserve"
sodipodi:docname="pfwb.svg"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
width="131.87466"
height="111.2"><metadata
id="metadata89"><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><defs
id="defs87">
<defs
id="defs39">
<path
id="SVGID_9_"
d="m 147.2,54.8 c -1.2,-0.4 -1.2,-1.1 -0.4,-2.4 1.5,-2.2 7.5,-15.7 0.1,-22.7 -0.6,-0.6 -1.4,-1.2 -2.2,-1.6 -1.4,-0.7 -3.1,0 -3.1,2.4 0.2,17 -8.1,20.3 -19.7,20.4 h -1.4 v 7.8 l 10.3,0.7 h 0.2 c 11.1,0.9 17.8,8.3 17.8,16.8 0,10.3 -8.4,16.9 -17.8,16.9 -3.1,0 -6.3,-0.6 -8.8,-2.3 -0.5,-0.3 -1.1,-0.8 -1.6,-1.2 0,1.3 0,16.7 0,16.7 3.5,1.7 7.6,2.7 12.8,2.7 15,0 33.7,-11.1 33.7,-30.6 -0.2,-9.9 -8.5,-20 -19.9,-23.6"
inkscape:connector-curvature="0" />
</defs>
<clipPath
id="SVGID_10_">
<use
xlink:href="#SVGID_9_"
style="overflow:visible"
id="use41"
x="0"
y="0"
width="100%"
height="100%" />
</clipPath>
<defs
id="defs22">
<path
id="SVGID_5_"
d="m 127.8,15.7 c -0.3,0 -0.6,0 -0.9,0 -32.9,1.5 -37.7,41.8 -37.8,56.4 0,1.3 0.1,7.6 -1.4,7.6 -0.3,0 -0.7,-0.3 -1.1,-0.9 -1.7,-2.4 -6.6,-9.5 -8,-11.4 -0.4,-0.5 -1,-0.8 -1.5,-0.8 -1.2,0 -2.3,1.2 -1.8,3.6 0.3,1.2 3.5,15 8.2,20.6 1.3,1.6 4.4,4 7.6,4 3.1,0 6.3,-2.2 8.1,-9.3 3.1,-11 -0.6,-54.9 36.8,-59.9 3,-0.4 4.1,-3.9 2.4,-6 -1.2,-1.5 -4.9,-3.9 -10.6,-3.9"
inkscape:connector-curvature="0" />
</defs>
<clipPath
id="SVGID_6_">
<use
xlink:href="#SVGID_5_"
style="overflow:visible"
id="use24"
x="0"
y="0"
width="100%"
height="100%" />
</clipPath>
<defs
id="defs5">
<path
id="SVGID_1_"
d="m 63.2,8 c -3.4,0 -5.7,1.9 -5.9,3.2 -0.1,1.4 0.8,2.8 2,3.7 9,7 -17,20.5 -13.8,48.1 2.3,19.5 25,46.2 29.6,46.2 0.2,0 0.3,0 0.5,-0.1 3.6,-2.3 -10.6,-27.9 -13.9,-36.3 -7.2,-18.9 3.7,-31.1 8,-38.1 5.6,-9.3 7,-18 2.6,-22.3 C 69,9.1 65.8,8 63.2,8"
inkscape:connector-curvature="0" />
</defs>
<clipPath
id="SVGID_2_">
<use
xlink:href="#SVGID_1_"
style="overflow:visible"
id="use7"
x="0"
y="0"
width="100%"
height="100%" />
</clipPath>
</defs><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1600"
inkscape:window-height="836"
id="namedview85"
showgrid="false"
inkscape:zoom="3.337544"
inkscape:cx="74.062244"
inkscape:cy="50.877933"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1"
fit-margin-top="5"
fit-margin-left="5"
fit-margin-right="5"
fit-margin-bottom="5" />
<style
type="text/css"
id="style2">
.st0{enable-background:new ;}
.st1{clip-path:url(#SVGID_2_);}
.st2{clip-path:url(#SVGID_4_);}
.st3{fill:#C9282D;}
.st4{clip-path:url(#SVGID_6_);}
.st5{clip-path:url(#SVGID_8_);}
.st6{fill:#F4AA00;}
.st7{clip-path:url(#SVGID_10_);}
.st8{clip-path:url(#SVGID_12_);}
.st9{fill:#00317A;}
.st10{fill:#656565;}
</style>
<g
id="XMLID_33_"
class="st1"
clip-path="url(#SVGID_2_)"
transform="translate(-40.225336,-3)">
<defs
id="defs11">
<rect
id="SVGID_3_"
x="-1.8"
y="-8.5"
width="207.60001"
height="219.10001" />
</defs>
<clipPath
id="SVGID_4_">
<use
xlink:href="#SVGID_3_"
style="overflow:visible"
id="use13"
x="0"
y="0"
width="100%"
height="100%" />
</clipPath>
<g
id="XMLID_11_"
class="st2"
clip-path="url(#SVGID_4_)">
<rect
x="37.099998"
y="-0.2"
class="st3"
width="47.400002"
height="117.6"
id="rect16"
style="fill:#c9282d" />
</g>
</g><g
id="XMLID_28_"
class="st4"
clip-path="url(#SVGID_6_)"
transform="translate(-40.225336,-3)">
<defs
id="defs28">
<rect
id="SVGID_7_"
x="-1.8"
y="-8.5"
width="207.60001"
height="219.10001" />
</defs>
<clipPath
id="SVGID_8_">
<use
xlink:href="#SVGID_7_"
style="overflow:visible"
id="use30"
x="0"
y="0"
width="100%"
height="100%" />
</clipPath>
<g
id="XMLID_8_"
class="st5"
clip-path="url(#SVGID_8_)">
<rect
x="66.900002"
y="7.5"
class="st6"
width="80.599998"
height="95.5"
id="rect33"
style="fill:#f4aa00" />
</g>
</g><g
id="XMLID_23_"
class="st7"
clip-path="url(#SVGID_10_)"
transform="translate(-40.225336,-3)">
<defs
id="defs45">
<rect
id="SVGID_11_"
x="-1.8"
y="-8.5"
width="207.60001"
height="219.10001" />
</defs>
<clipPath
id="SVGID_12_">
<use
xlink:href="#SVGID_11_"
style="overflow:visible"
id="use47"
x="0"
y="0"
width="100%"
height="100%" />
</clipPath>
<g
id="XMLID_5_"
class="st8"
clip-path="url(#SVGID_12_)">
<rect
x="112.2"
y="19.700001"
class="st9"
width="62.900002"
height="97.699997"
id="rect50"
style="fill:#00317a" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.0 KiB

5
static/pfwb/style.scss Normal file
View File

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