Style du menu des departements
This commit is contained in:
parent
560868a7b8
commit
44483fad6a
|
@ -1,4 +1,4 @@
|
||||||
<header>UniSquat</header>
|
<div class="flex"><header>UniSquat</header></div>
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--bg: #191919;
|
--bg: #191919;
|
||||||
|
@ -8,25 +8,21 @@
|
||||||
--hl: #8080ff;
|
--hl: #8080ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
body {
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
padding-left: 5px;
|
margin: 0px;
|
||||||
padding-right: 5px;
|
padding: 0px;
|
||||||
font-family: "ubuntu", "sans";
|
font-family: "ubuntu", "sans";
|
||||||
color: var(--fg);
|
color: var(--fg);
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
background: var(--hl);
|
background: var(--hl);
|
||||||
|
display: inline-block;
|
||||||
font-size: 250%;
|
font-size: 250%;
|
||||||
|
width: 100%;
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 10px;
|
|
||||||
margin-left: calc(-50vw + 50%);
|
|
||||||
margin-right: calc(-50vw + 50%);
|
|
||||||
margin-top: calc(-50vw + 50%);
|
|
||||||
padding-top: 20px;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
|
@ -97,19 +93,53 @@
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
button, input {
|
input[type="submit"]{
|
||||||
background: var(--bg-light);
|
background: var(--bg-light);
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-color: var(--bg);
|
border-color: var(--bg);
|
||||||
padding: 10px;
|
padding: 20px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
transition: background 0.1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
input checkbox {
|
input[type="submit"]:hover {
|
||||||
margin-bottom: 5px;
|
background: var(--bg-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"] {
|
||||||
|
display: none;
|
||||||
|
width: 0px;
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"]:hover + label {
|
||||||
|
background: var(--bg-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"]:checked + label {
|
||||||
|
background: var(--hl);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"] + label {
|
||||||
|
background: var(--bg-light);
|
||||||
|
transition: background 0.1s;
|
||||||
|
display: inline-block;
|
||||||
|
width: 200px;
|
||||||
|
height: 80px;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 10px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: 5px 5px black;
|
||||||
|
}
|
||||||
|
|
||||||
.done {
|
.done {
|
||||||
background: var(--bg-dark);
|
background: var(--bg-dark);
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
|
|
|
@ -9,16 +9,20 @@
|
||||||
<body>
|
<body>
|
||||||
{% include "base.html" %}
|
{% include "base.html" %}
|
||||||
<main>
|
<main>
|
||||||
Sélectionnez des départements dans la liste :
|
|
||||||
|
<div class="flex"><p>Sélectionnez des départements dans la liste :</p></div>
|
||||||
<form action="/app/free-rooms" method="get">
|
<form action="/app/free-rooms" method="get">
|
||||||
<input type="submit" value="Valider">
|
<div class="flex">
|
||||||
<br>
|
<input type="submit" value="Valider">
|
||||||
{% for d in dept_list : %}
|
</div>
|
||||||
<div>
|
<div class="flex">
|
||||||
<input type="checkbox" id="{{ d.ident }}" name="dept" value="{{ d.ident }}">
|
{% for d in dept_list : %}
|
||||||
<label for="{{ d.ident }}">{{ d.name }}</label>
|
<div>
|
||||||
</div>
|
<input type="checkbox" id="{{ d.ident }}" name="dept" value="{{ d.ident }}">
|
||||||
{% endfor %}
|
<label for="{{ d.ident }}">{{ d.name }}</label>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</main>
|
</main>
|
||||||
<footer></footer>
|
<footer></footer>
|
||||||
|
|
Loading…
Reference in New Issue