add cnil theme (#34382)

This commit is contained in:
Frédéric Péters 2019-10-16 14:28:52 +02:00
parent 5f13adee79
commit bfbe936163
8 changed files with 278 additions and 0 deletions

179
static/cnil/_custom.scss Normal file
View File

@ -0,0 +1,179 @@
body {
background: $nav-background;
@media screen and (max-width: $mobile-limit) {
background: white;
}
h1, h2, h3 {
font-family: $title-font-family;
}
}
header {
background: white;
border-top: 40px solid #444444;
@media screen and (max-width: $mobile-limit) {
border-top: 0;
}
h1#logo {
padding: 40px 0;
@media screen and (max-width: $mobile-limit) {
padding: 50px 0;
}
a {
display: block;
margin: 0 auto;
width: 275px;
height: 52.25px;
background: url(img/logo_CNIL.png) no-repeat;
background-size: cover;
text-indent: -10000px;
}
}
#toplinks {
border: none;
}
}
nav {
text-align: center;
@media screen and (max-width: $mobile-limit) {
text-align: left;
}
div.gru-nav > ul > li a {
font-weight: normal;
&:hover {
text-decoration: underline;
}
}
@media screen and (max-width: $mobile-limit) {
div.gru-nav-wrapper {
background: transparent;
}
}
}
#main-content {
background: white;
box-sizing: border-box;
padding: 10px;
font-size: 18px;
a:hover {
text-decoration: underline
}
}
footer {
margin-top: 30px;
@media screen and (max-width: $mobile-limit) {
margin-top: 0;
}
a {
color: white;
&:hover {
color: #4796ec;
text-decoration: underline;
}
}
}
div#title-section {
text-align: center;
h1 {
font-family: $title-font-family;
font-size: 40px;
color: #333;
text-align: center;
font-weight: bold;
&::after {
content: '';
height: 3px;
width: 170px;
display: block;
margin: 30px auto 10px auto;
background: $gray;
}
}
}
div#steps {
ol {
display: flex;
justify-content: center;
li {
position: relative;
text-align: center;
display: flex;
flex-direction: column;
margin-bottom: 0;
span.marker {
position: relative;
z-index: 100;
order: 1;
margin: 0 auto;
font-size: 120%;
font-weight: bold;
background: #c6bfa5;
color: white;
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50px;
}
span.label {
order: 0;
padding-bottom: 10px;
font-size: 80%;
text-transform: uppercase;
}
&.current {
span.marker {
background: $lightblue;
}
span.label {
font-weight: normal;
}
}
&::after {
content: '';
display: block;
height: 3px;
background: #c6bfa5;
width: 100%;
position: absolute;
z-index: 10;
bottom: 35px;
left: 50%;
}
&.last::after {
content: none;
}
}
}
}
div.tracking-code-part {
text-align: center;
h3, a {
font-size: 100%;
display: inline-block;
}
}
form.quixote {
h3, h4 {
clear: both;
margin: 25px 0;
text-align: left;
font-size: 32px;
font-weight: normal;
line-height: 40px;
color: #333333;
}
h4 {
font-size: 28px;
}
div.buttons {
text-align: center;
}
}

36
static/cnil/_vars.scss Normal file
View File

@ -0,0 +1,36 @@
@import '../includes/font-opensans';
$darkblue: #2c1e9e;
$lightblue: #4796EC;
$gray: #c6bfa5;
$darkgray: #71716e;
$bggray: #ebe9de;
$font-family: Georgia, "Times New Roman", Times, serif;
$title-font-family: "Open Sans", sans-serif;
$title-font-size: 24px;
$width: 1000px;
$font-color: $darkgray;
$font-size: 16px;
$footer-background: #222222;
$footer-color: white;
$nav-background: $bggray;
$nav-full-width-background: true;
$nav-color: $darkgray;
$nav-active-color: #333;
$nav-item-selected-background: transparent;
$nav-item-selected-color: $nav-active-color;
$nav-submenu-color: $nav-color;
$border-radius: 0;
$button-background: $gray;
$button-color: white;
$button-border-radius: 10px;
$title-background: white;
$title-color: #333;
$link-color: #4596ec;
$cell-border: 1px solid transparent;
$widget-border: 2px solid $gray;
$widget-focus-border: 2px solid #66afe9;
$form-sidebar-position: top;

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

@ -0,0 +1,6 @@
{
"label": "CNIL",
"variables": {
"theme_color": "#2c1e9e"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

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

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

View File

@ -0,0 +1,26 @@
{% extends "wcs/base.html" %}
{% load static %}
{% block placeholder-content %}
{% block content %}
{% if title %}
<div id="title-section">
<h1>{{ title }}</h1>
</div>
{% endif %}
{% block side %}
{% if gauche %}
<div id="gauche">
{{ gauche|safe }}
</div>
{% endif %}
{% endblock %}
<div id="{{bigdiv|default:'rub_service'}}">
{% block body %}
{{ body|safe }}
{% endblock %}
</div>
{% endblock %}
{% endblock %}

View File

@ -0,0 +1,10 @@
{% extends "wcs/formdata_filling.html" %}
{% block side %}
{% endblock %}
{% block form-side %}
{{ tracking_code_box|safe }}
{{ steps|safe }}
{{ publisher.get_request.session.display_message|safe }}
{% endblock %}

View File

@ -0,0 +1,16 @@
{% extends "wcs/base.html" %}
{% load qommon %}
{% block side %}
{% endblock %}
{% block body %}
{{ tracking_code_box|safe }}
{{ steps|safe }}
<div class="form-validation">
{{ publisher.get_request.session.display_message|safe }}
{% standard_text "check-before-submit" %}
{{ form.render|safe }}
</div>
{% endblock %}