klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-11-29 20:44:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'il-faut-sauver-le-css' into 'master'

Browse Source 
Changed the design of the Sith.

See merge request ae/Sith!162
This commit is contained in:
Soldat 2018-10-07 22:21:12 +02:00
commit 3ae0c3f3e1
2 changed files with 142 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

212
core/static/core/style.scss
View File

@ -1,42 +1,96 @@
$first-color: hsl(220, 100%, 50%); $first-color: hsl(220, 100%, 50%);
$second-color: hsl(40, 100%, 50%); $second-color: hsl(48, 100%, 67%);
$primary-color: hsl(219.9, 53.7%, 50%); $primary-color: hsl(219.9, 53.7%, 50%);
$secondary-color: hsl(40.1, 78.0%, 50%); $secondary-color: hsl(204, 64%, 44%);
$primary-color-text: hsl(0, 0%, 100%); $primary-color-text: hsl(0, 0%, 100%);
$secondary-color-text: hsla(0, 0%, 0%, 0.87); $secondary-color-text: hsla(0, 0%, 0%, 0.87);
$primary-light-color: hsl(219.8, 46.4%, 64.9%); $primary-light-color: hsl(219.8, 46.4%, 64.9%);
$primary-dark-color: hsl(219.8, 46.4%, 35.1%); $primary-dark-color: hsl(203, 70%, 52%);
$secondary-light-color: hsl(40, 68%, 65%); $secondary-light-color: hsl(40, 68%, 65%);
$secondary-dark-color: hsl(40, 68%, 35%); $secondary-dark-color: hsl(40, 68%, 35%);
$primary-neutral-color: hsl(219.6, 20.8%, 50%); $primary-neutral-color: hsl(219.6, 20.8%, 50%);
$primary-neutral-light-color: hsl(219.6, 20.8%, 83%); $primary-neutral-light-color: hsl(0, 0%, 94%);
$primary-neutral-dark-color: hsl(219.6, 20.8%, 17%); $primary-neutral-dark-color: hsl(210, 29%, 29%);
$secondary-neutral-color: hsl(40, 57.6%, 50%); $secondary-neutral-color: hsl(204, 64%, 44%);
$secondary-neutral-light-color: hsl(40, 57.6%, 83%); $secondary-neutral-light-color: hsl(0, 0%, 91%);
$secondary-neutral-dark-color: hsl(40, 57.6%, 17%); $secondary-neutral-dark-color: hsl(40, 57.6%, 17%);
$white-color: hsl(219.6, 20.8%, 98%); $white-color: hsl(219.6, 20.8%, 98%);
$black-color: hsl(40.0, 0%, 17%); $black-color: hsl(40.0, 0%, 17%);
$faceblue: #3B5998; $faceblue: hsl(221, 44%, 41%);
$twitblue: #55acee; $twitblue: hsl(206, 82%, 63%);
$shadow-color: rgb(223, 223, 223);
$background-bouton-color: hsl(0, 0%, 90%);
/*--------------------------------GENERAL------------------------------*/ /*--------------------------------GENERAL------------------------------*/
body { body {
background-color: $primary-neutral-light-color;
position: relative; position: relative;
width: 100%; width: 100%;
font-family: sans-serif; font-family: sans-serif;
} }
input[type=button], input[type=submit], input[type=reset],input[type=file] {
border: none;
text-decoration: none;
background-color: $background-bouton-color;
padding: 10px;
font-weight: bold;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
box-shadow: $shadow-color 0px 0px 1px;
&:hover {
background: hsl(0, 0%, 83%);
}
}
button{
border: none;
text-decoration: none;
background-color: $background-bouton-color;
padding: 10px;
font-size: 14px;
border-radius: 5px;
box-shadow: $shadow-color 0px 0px 1px;
cursor: pointer;
&:hover {
background: hsl(0, 0%, 83%);
}
}
input,textarea[type=text],[type=number]{
border: none;
text-decoration: none;
background-color: $background-bouton-color;
padding: 7px;
font-size: 16px;
border-radius: 5px;
}
textarea{
border: none;
text-decoration: none;
background-color: $background-bouton-color;
padding: 7px;
font-size: 16px;
border-radius: 5px;
}
select{
border: none;
text-decoration: none;
font-size: 15px;
background-color: $background-bouton-color;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
a { a {
text-decoration: none; text-decoration: none;
color: $primary-dark-color; color: $primary-dark-color;
@ -77,7 +131,7 @@ a {
input { input {
display: block; display: block;
width: 100%; width: 100%;
padding: 0px; padding: 4px;
margin: 0px; margin: 0px;
} }
form { form {
@ -91,10 +145,10 @@ header {
width: 90%; width: 90%;
margin: 0px auto; margin: 0px auto;
display: flex; display: flex;
box-shadow: grey 1px 1px 5px; box-shadow: $shadow-color 0px 0px 15px;
border: solid 1px grey;
border-top: none; border-top: none;
background-color: $primary-neutral-dark-color; background-color: $primary-neutral-dark-color;
border-radius: 0px 0px 10px 10px;
#header_logo { #header_logo {
display: inline-block; display: inline-block;
@ -102,6 +156,8 @@ header {
background-size: 100% 100%; background-size: 100% 100%;
background-color: $white-color; background-color: $white-color;
padding: 0.2em; padding: 0.2em;
border-radius: 0px 0px 0px 9px;
a { a {
display: inline-block; display: inline-block;
margin: 0px; margin: 0px;
@ -133,6 +189,7 @@ header {
a { a {
text-decoration: none; text-decoration: none;
margin: 0em 1em; margin: 0em 1em;
font-weight: bold;
color: $white-color; color: $white-color;
&:hover { &:hover {
color: $secondary-color; color: $secondary-color;
@ -199,7 +256,7 @@ header {
li { li {
padding: 0.2em; padding: 0.2em;
&:hover { &:hover {
background: #bcc; background: hsl(180, 14%, 77%);
} }
} }
li:last-child { li:last-child {
@ -228,10 +285,10 @@ header {
margin: 1em auto; margin: 1em auto;
p { p {
margin: 0px; margin: 0px;
padding: 0px; padding: 7px;
} }
#alert_box, #info_box { #alert_box, #info_box {
font-size: smaller; font-size: 14px;
display: inline-block; display: inline-block;
flex: auto; flex: auto;
padding: 2px; padding: 2px;
@ -239,28 +296,23 @@ header {
min-width: 10%; min-width: 10%;
max-width: 46%; max-width: 46%;
min-height: 20px; min-height: 20px;
box-shadow: grey 1px 1px 5px;
&:before { &:before {
float: left; float: left;
margin: 0.2em; margin: 0.2em;
margin-right: 0.5em;
}
.markdown {
margin-top: 0.5em;
} }
} }
#info_box { #info_box {
border: solid 1px grey; border-radius: 10px;
background: $white-color; background: $primary-neutral-light-color;
&:before { &:before {
font-family: FontAwesome; font-family: FontAwesome;
font-size: 4em; font-size: 4em;
content: "\f05a"; content: "\f05a";
color: darkblue; color: hsl(210, 100%, 56%);
} }
} }
#alert_box { #alert_box {
border: solid 1px grey; border-radius: 10px;
background: $second-color; background: $second-color;
&:before { &:before {
font-family: FontAwesome; font-family: FontAwesome;
@ -273,17 +325,17 @@ header {
#page { #page {
box-shadow: grey 1px 1px 5px;
width: 90%; width: 90%;
margin: 0em auto; margin: 0em auto;
border: solid 1px grey;
/*---------------------------------NAV---------------------------------*/ /*---------------------------------NAV---------------------------------*/
nav { nav {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
background-color: $primary-dark-color; background-color: $primary-dark-color;
color: $white-color; color: $white-color;
border-radius: 10px 10px 0px 0px;
box-shadow: $shadow-color 0px 0px 15px;
a { a {
flex: auto; flex: auto;
text-align: center; text-align: center;
@ -313,6 +365,7 @@ header {
#content { #content {
padding: 1em 1%; padding: 1em 1%;
box-shadow: $shadow-color 0px 0px 15px;
background: $white-color; background: $white-color;
overflow: auto; overflow: auto;
} }
@ -324,23 +377,27 @@ header {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
float: right; float: right;
background: $white-color; background: $primary-neutral-light-color;
border: 1px solid $black-color; padding: 5px;
border-radius: 10px;
text-align: center; text-align: center;
a { a {
padding: 10px; padding: 10px;
display: inline-block; display: inline-block;
color: $black-color; color: $black-color;
font-weight: bold;
flex: 1; flex: 1;
flex-wrap: nowrap; flex-wrap: nowrap;
white-space: nowrap; white-space: nowrap;
&.selected_tab { &.selected_tab {
background: $second-color; background: $primary-color;
color: $black-color; color: $white-color;
border-radius: 10px;
} }
&:hover { &:hover {
background: $primary-color; background: $primary-color;
color: $white-color; color: $white-color;
border-radius: 10px;
} }
} }
} }
@ -364,12 +421,11 @@ header {
width: 79%; width: 79%;
h3 { h3 {
background: $second-color; background: $second-color;
box-shadow: grey 2px 2px 2px; box-shadow: $shadow-color 1px 1px 1px;
padding: 0.4em; padding: 0.4em;
margin: 0em 0em 0.5em 0em; margin: 0em 0em 0.5em 0em;
text-transform: uppercase; text-transform: uppercase;
font-size: 1.1em; font-size: 1.1em;
border: solid 1px grey;
&:not(:first-of-type) { &:not(:first-of-type) {
margin: 2em 0em 1em 0em; margin: 2em 0em 1em 0em;
} }
@ -381,22 +437,22 @@ header {
display: block; display: block;
width: 100%; width: 100%;
background: white; background: white;
box-shadow: grey 2px 2px 2px;
font-size: 70%; font-size: 70%;
border: solid 1px grey;
margin-bottom: 1em; margin-bottom: 1em;
#agenda_title,#birthdays_title { #agenda_title,#birthdays_title {
margin: 0em; margin: 0em;
border-radius: 10px 10px 0px 0px;
box-shadow: $shadow-color 1px 1px 1px;
padding: 0.5em; padding: 0.5em;
font-weight: bold; font-weight: bold;
font-size: 150%; font-size: 150%;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
border-bottom: solid 1px grey;
background: $second-color; background: $second-color;
} }
#agenda_content { #agenda_content {
overflow: auto; overflow: auto;
box-shadow: $shadow-color 1px 1px 1px;
height: 20em; height: 20em;
} }
#agenda_content,#birthdays_content { #agenda_content,#birthdays_content {
@ -440,21 +496,22 @@ header {
/* EVENTS TODAY AND NEXT FEW DAYS */ /* EVENTS TODAY AND NEXT FEW DAYS */
.news_events_group { .news_events_group {
border: solid 1px grey; box-shadow: $shadow-color 1px 1px 1px;
box-shadow: grey 2px 2px 2px;
margin-left: 1em; margin-left: 1em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
.news_events_group_date { .news_events_group_date {
display: table-cell; display: table-cell;
padding: 0.6em; padding: 0.6em;
vertical-align: middle; vertical-align: middle;
background: $primary-dark-color; background: $primary-neutral-dark-color;
color: $white-color; color: $white-color;
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
font-family: monospace; font-family: monospace;
font-size: 1.4em; font-size: 1.4em;
border-radius: 10px 0px 0px 10px;
div { div {
margin: 0px auto; margin: 0px auto;
.day { .day {
@ -465,7 +522,6 @@ header {
.news_events_group_items { .news_events_group_items {
display: table-cell; display: table-cell;
width: 100%; width: 100%;
border-left: solid 1px grey;
.news_event:nth-of-type(odd) { .news_event:nth-of-type(odd) {
background: white; background: white;
} }
@ -541,9 +597,9 @@ header {
margin: 0em 0em 1em 1em; margin: 0em 0em 1em 1em;
padding: 0.4em; padding: 0.4em;
padding-left: 1em; padding-left: 1em;
background: lightgrey; background: $secondary-neutral-light-color;
border: 1px solid grey; box-shadow: $shadow-color 0px 0px 2px;
box-shadow: grey 2px 2px 2px; border-radius: 18px 5px 18px 5px;
h4 { h4 {
margin: 0em; margin: 0em;
} }
@ -560,7 +616,7 @@ header {
padding-left: 1em; padding-left: 1em;
background: $secondary-neutral-light-color; background: $secondary-neutral-light-color;
border: 1px solid grey; border: 1px solid grey;
box-shadow: grey 2px 2px 2px; box-shadow: $shadow-color 1px 1px 1px;
h4 { h4 {
margin: 0em; margin: 0em;
} }
@ -584,6 +640,7 @@ header {
#news_details { #news_details {
display: inline-block; display: inline-block;
margin-top: 20px;
padding: 0.4em; padding: 0.4em;
width: 80%; width: 80%;
background: $white-color; background: $white-color;
@ -596,15 +653,14 @@ header {
text-align: center; text-align: center;
width: 19%; width: 19%;
float: left; float: left;
min-width: 10em; min-width: 15em;
margin: 0em; margin: 0em;
margin-right: 0.5em;
margin-top: 0.5em;
img { img {
max-height: 15em; max-height: 15em;
max-width: 12em; max-width: 12em;
display: block; display: block;
margin: 0em auto; margin: 0em auto;
margin-bottom: 10px;
} }
} }
.share_button { .share_button {
@ -639,6 +695,7 @@ header {
} }
.helptext { .helptext {
margin-top: 10px;
display: block; display: block;
} }
@ -672,14 +729,14 @@ header {
padding-right: 20px; padding-right: 20px;
margin-left: 5px; margin-left: 5px;
border-radius: 20px; border-radius: 20px;
background-color: #ffaa00; background-color: hsl(40, 100%, 50%);
color: black; color: black;
&:hover{ &:hover{
color: black; color: black;
background-color: #c99836; background-color: hsl(40, 58%, 50%);
} }
&.delete{ &.delete{
background-color: #cb0000; background-color: hsl(0, 100%, 40%);
} }
} }
} }
@ -764,11 +821,11 @@ header {
.edit, .moderate, .slideshow{ .edit, .moderate, .slideshow{
padding: 5px; padding: 5px;
border-radius: 20px; border-radius: 20px;
background-color: #ffaa00; background-color: hsl(40, 100%, 50%);
color: black; color: black;
&:hover{ &:hover{
color: black; color: black;
background-color: #c99836; background-color: hsl(40, 58%, 50%);
} }
&:nth-child(2n){ &:nth-child(2n){
margin-top: 5px; margin-top: 5px;
@ -778,8 +835,8 @@ header {
.tooltip{ .tooltip{
visibility: hidden; visibility: hidden;
width: 120px; width: 120px;
background-color: #f9fafb; background-color: hsl(210, 20%, 98%);
color: #000; color: hsl(0, 0%, 0%);
text-align: center; text-align: center;
padding: 5px 0; padding: 5px 0;
border-radius: 6px; border-radius: 6px;
@ -1006,6 +1063,7 @@ u, .underline {
background: $primary-neutral-light-color; background: $primary-neutral-light-color;
float: right; float: right;
padding: 10px; padding: 10px;
border-radius: 10px;
} }
#products { #products {
@ -1177,8 +1235,8 @@ u, .underline {
#pict { #pict {
display: inline-block; display: inline-block;
width: 80%; width: 80%;
background: #333; background: hsl(0, 0%, 20%);
border: solid #333 2px; border: solid hsl(0, 0%, 20%) 2px;
} }
/*--------------------------------MATMAT-------------------------------*/ /*--------------------------------MATMAT-------------------------------*/
.matmat_results { .matmat_results {
@ -1191,7 +1249,7 @@ u, .underline {
height: 18em; height: 18em;
overflow: hidden; overflow: hidden;
border: 1px solid black; border: 1px solid black;
box-shadow: 2px 2px 5px grey; box-shadow: $shadow-color 1px 1px 1px;
&:hover { &:hover {
box-shadow: 1px 1px 5px $second-color; box-shadow: 1px 1px 5px $second-color;
} }
@ -1231,11 +1289,12 @@ textarea {
#forum { #forum {
.button { .button {
background-color: $primary-neutral-light-color; background-color: rgb(230, 230, 230);
border: outset $primary-neutral-dark-color 2px; padding: 10px;
padding: 4px; font-weight: bold;
border-radius: 5px;
&:hover { &:hover {
border: inset $primary-neutral-dark-color 2px; background-color: rgb(211, 211, 211);
} }
} }
.topic { .topic {
@ -1257,6 +1316,7 @@ textarea {
.tools { .tools {
font-size: x-small; font-size: x-small;
border: none; border: none;
font-weight: bold;
a { a {
padding: 1px; padding: 1px;
} }
@ -1299,6 +1359,8 @@ textarea {
.category { .category {
margin-top: 5px; margin-top: 5px;
background: $secondary-color; background: $secondary-color;
color: white;
border-radius: 10px 10px 0px 0px;
.title { .title {
text-transform: uppercase; text-transform: uppercase;
} }
@ -1307,7 +1369,7 @@ textarea {
.message { .message {
padding: 1px; padding: 1px;
margin: 1px; margin: 1px;
background: $white-color; background: $secondary-neutral-light-color;
&:nth-child(odd) { &:nth-child(odd) {
background: $primary-neutral-light-color; background: $primary-neutral-light-color;
} }
@ -1336,7 +1398,6 @@ textarea {
display: inline-block; display: inline-block;
width: 19%; width: 19%;
text-align: center; text-align: center;
background: $primary-light-color;
img { img {
max-width: 70%; max-width: 70%;
margin: 0px auto; margin: 0px auto;
@ -1359,10 +1420,10 @@ textarea {
} }
.forum_signature { .forum_signature {
color: #C0C0C0; color: hsl(0, 0%, 75%);
border-top: 1px solid #C0C0C0; border-top: 1px solid hsl(0, 0%, 75%);
a { a {
color: #C0C0C0; color: hsl(0, 0%, 75%);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -1379,7 +1440,7 @@ textarea {
padding: 5px; padding: 5px;
width: 200px; width: 200px;
height: 140px; height: 140px;
background: #eee; background: hsl(0, 0%, 93%);
box-shadow: black 2px 2px 10px; box-shadow: black 2px 2px 10px;
margin: 10px; margin: 10px;
vertical-align: top; vertical-align: top;
@ -1394,7 +1455,7 @@ textarea {
width: 150px; width: 150px;
height: 100px; height: 100px;
margin: 5px; margin: 5px;
background: #eee; background: #eeeeee;
box-shadow: grey 2px 2px 5px; box-shadow: grey 2px 2px 5px;
padding: 2px; padding: 2px;
vertical-align: middle; vertical-align: middle;
@ -1417,22 +1478,23 @@ footer {
width: 90%; width: 90%;
margin: 2em auto; margin: 2em auto;
font-size: 80%; font-size: 90%;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
div { div {
margin: 0.6em 0em; margin: 0.6em 0em;
color: $white-color; color: $white-color;
border-radius: 5px;
display: flex; display: flex;
background-color: $primary-neutral-dark-color; background-color: $primary-neutral-dark-color;
box-shadow: grey 1px 1px 5px; box-shadow: $shadow-color 0px 0px 15px;
border: solid 1px grey;
a { a {
padding: 0.8em; padding: 0.8em;
flex: 1; flex: 1;
font-weight: bold;
color: $white-color; color: $white-color;
&:hover { &:hover {
color: $secondary-color; color: $primary-dark-color;
} }
} }
} }
@ -1442,11 +1504,13 @@ footer {
form { form {
margin: 0px auto; margin: 0px auto;
margin-bottom: 10px;
width: 60%; width: 60%;
} }
label { label {
display: block; display: block;
margin-bottom: 8px;
} }
.choose_file_widget { .choose_file_widget {
@ -1492,8 +1556,6 @@ label {
font-size: 1.2em; font-size: 1.2em;
} }
button { button {
width: 100%;
height: 100%;
vertical-align: middle; vertical-align: middle;
} }
} }

9
core/templates/core/base.jinja
View File

@ -53,7 +53,7 @@
</div> </div>
{% else %} {% else %}
<div id="header_logo" style="background-image: url('{{ <div id="header_logo" style="background-image: url('{{
static('core/img/logo.png') }}'); width: 92px; height: 50px;"> static('core/img/logo.png') }}'); width: 92px; height: 52px;">
<a href="{{ url('core:index') }}"></a> <a href="{{ url('core:index') }}"></a>
</div> </div>
<div id="header_bar"> <div id="header_bar">
@ -62,11 +62,11 @@
<li> <li>
<a href="{{ url('counter:activity', counter_id=bar.id) }}" style="padding: 0px"> <a href="{{ url('counter:activity', counter_id=bar.id) }}" style="padding: 0px">
{% if bar.is_inactive(): %} {% if bar.is_inactive(): %}
<i class="fa fa-question" style="color: orange"></i> <i class="fa fa-question" style="color: #f39c12"></i>
{% elif bar.is_open(): %} {% elif bar.is_open(): %}
<i class="fa fa-check" style="color: green"></i> <i class="fa fa-check" style="color: #2ecc71"></i>
{% else %} {% else %}
<i class="fa fa-times" style="color: red"></i> <i class="fa fa-times" style="color: #eb2f06"></i>
{% endif %} {% endif %}
{{ bar }} {{ bar }}
</a> </a>
@ -181,7 +181,6 @@
>{{ t.name }}</a> >{{ t.name }}</a>
{%- endfor %} {%- endfor %}
</div> </div>
<hr>
</div> </div>
{% endif %} {% endif %}