mirror of
https://github.com/ae-utbm/sith.git
synced 2024-12-23 00:01:16 +00:00
Fixes & améliorations du nouveau CSS (#616)
This commit is contained in:
Julien Constant
GitHub
parent
d83842af27
commit
a198f5252d
@ -1,6 +1,15 @@
|
||||
$hovered-text-color: #c2c2c2;
|
||||
$text-color: white;
|
||||
|
||||
$background-color: #354a5f;
|
||||
$background-color-hovered: #283747;
|
||||
|
||||
$red-text-color: #eb2f06;
|
||||
$hovered-red-text-color: #ff4d4d;
|
||||
|
||||
.header {
|
||||
box-sizing: border-box;
|
||||
background-color: #354a5f;
|
||||
background-color: $background-color;
|
||||
box-shadow: 3px 3px 3px 0 #dfdfdf;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
@ -24,11 +33,11 @@
|
||||
gap: 10px;
|
||||
|
||||
>a {
|
||||
color: #fff;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
&:hover>a {
|
||||
color: #1a78b3;
|
||||
color: $hovered-text-color;;
|
||||
}
|
||||
|
||||
@media (max-width: 607px) {
|
||||
@ -51,7 +60,7 @@
|
||||
}
|
||||
|
||||
&-text {
|
||||
color: white;
|
||||
color: $text-color;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@ -89,16 +98,16 @@
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
background-color: #354a5f;
|
||||
background-color: $background-color;
|
||||
width: 45px;
|
||||
height: 25px;
|
||||
padding: 0;
|
||||
color: white;
|
||||
color: $text-color;
|
||||
font-weight: normal;
|
||||
line-height: 1.3em;
|
||||
|
||||
&:hover {
|
||||
background-color: #283747;
|
||||
background-color: $background-color-hovered;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -126,13 +135,13 @@
|
||||
align-items: center;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
color: $text-color;
|
||||
margin: 0;
|
||||
font-size: .9em;
|
||||
width: 120px;
|
||||
|
||||
&:hover {
|
||||
background-color: #283747;
|
||||
background-color: $background-color-hovered;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -198,30 +207,34 @@
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #354a5f;
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
>.options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
gap: 5px;
|
||||
|
||||
>.username {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 5px;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
>a {
|
||||
color: white;
|
||||
color: $text-color;
|
||||
|
||||
&:hover {
|
||||
color: #1a78b3;
|
||||
color: $hovered-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -230,7 +243,7 @@
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 5px;
|
||||
gap: 15px;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
justify-content: flex-start;
|
||||
@ -238,17 +251,17 @@
|
||||
|
||||
>a {
|
||||
text-align: right;
|
||||
color: white;
|
||||
color: $text-color;
|
||||
|
||||
&:hover {
|
||||
color: #1a78b3;
|
||||
color: $hovered-text-color;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
color: #eb2f06;
|
||||
color: $red-text-color;
|
||||
|
||||
&:hover {
|
||||
color: #cc2804;
|
||||
color: $hovered-red-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -265,16 +278,16 @@
|
||||
position: relative;
|
||||
|
||||
>a {
|
||||
color: white;
|
||||
color: $text-color;
|
||||
position: relative;
|
||||
font-size: 25px;
|
||||
|
||||
&:hover {
|
||||
color: #1a78b3;
|
||||
color: $hovered-text-color;
|
||||
}
|
||||
|
||||
>span {
|
||||
color: white;
|
||||
color: $text-color;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -282,7 +295,7 @@
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding: 5px;
|
||||
background-color: #eb2f06;
|
||||
background-color: $red-text-color;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
@ -388,9 +401,13 @@
|
||||
border-radius: 5px;
|
||||
font-size: .9em;
|
||||
margin: 0;
|
||||
background-color: #283747;
|
||||
background-color: $background-color-hovered;
|
||||
padding: 0 10px;
|
||||
color: white;
|
||||
color: $text-color;
|
||||
|
||||
&::placeholder {
|
||||
color: $hovered-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -418,10 +435,10 @@
|
||||
|
||||
>li>a {
|
||||
display: flex;
|
||||
color: white;
|
||||
color: $text-color;
|
||||
|
||||
&:hover {
|
||||
color: #1a78b3;
|
||||
color: $hovered-text-color;
|
||||
}
|
||||
|
||||
>span {
|
||||
|
||||
@ -1,13 +1,9 @@
|
||||
nav.navbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: hsl(203, 75%, 40%);
|
||||
margin: 1em;
|
||||
color: white;
|
||||
border-radius: 0.6em;
|
||||
min-height: 40px;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
position: relative;
|
||||
@ -17,6 +13,37 @@ nav.navbar {
|
||||
margin: .2em;
|
||||
}
|
||||
|
||||
> .expand-button {
|
||||
background-color: transparent;
|
||||
display: none;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
|
||||
> i {
|
||||
font-size: 1.5em;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
> .content {
|
||||
@media (min-width: 500px) {display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
> .menu,
|
||||
> .link {
|
||||
box-sizing: border-box;
|
||||
@ -107,4 +134,5 @@ nav.navbar {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -196,6 +196,8 @@
|
||||
{% block nav %}
|
||||
{% if not popup %}
|
||||
<nav class="navbar">
|
||||
<button class="expand-button" onclick="showMenu()"><i class="fa fa-bars"></i></button>
|
||||
<div id="navbar-content" class="content" style="display: none;">
|
||||
<a class="link" href="{{ url('core:index') }}">{% trans %}Main{% endtrans %}</a>
|
||||
<div class="menu">
|
||||
<span class="head">{% trans %}Associations & Clubs{% endtrans %}</span>
|
||||
@ -243,6 +245,7 @@
|
||||
<li><a href="{{ url('core:page', page_name='Index') }}">{% trans %}Wiki{% endtrans %}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@ -308,6 +311,13 @@
|
||||
<script src="{{ static('ajax_select/js/ajax_select.js') }}"></script>
|
||||
<script src="{{ url('javascript-catalog') }}"></script>
|
||||
<script>
|
||||
function showMenu() {
|
||||
let navbar = document.getElementById("navbar-content");
|
||||
const current = navbar.style.getPropertyValue("display");
|
||||
navbar.style.setProperty("display", current == "none" ? "block" : "none");
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
$('.select_date').datepicker({
|
||||
changeMonth: true,
|
||||
changeYear: true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user