mirror of
https://github.com/ae-utbm/sith.git
synced 2024-12-23 00:01:16 +00:00
Changed site design v1
This commit is contained in:
Soldat
parent
3a778e2105
commit
a78f1101c3
@ -1,23 +1,23 @@
|
||||
$first-color: hsl(220, 100%, 50%);
|
||||
$second-color: hsl(40, 100%, 50%);
|
||||
$second-color: #ffdd59;
|
||||
$primary-color: hsl(219.9, 53.7%, 50%);
|
||||
$secondary-color: hsl(40.1, 78.0%, 50%);
|
||||
$secondary-color: #2980b9;
|
||||
$primary-color-text: hsl(0, 0%, 100%);
|
||||
$secondary-color-text: hsla(0, 0%, 0%, 0.87);
|
||||
|
||||
$primary-light-color: hsl(219.8, 46.4%, 64.9%);
|
||||
$primary-dark-color: hsl(219.8, 46.4%, 35.1%);
|
||||
$primary-dark-color: #2d98da;
|
||||
|
||||
$secondary-light-color: hsl(40, 68%, 65%);
|
||||
$secondary-dark-color: hsl(40, 68%, 35%);
|
||||
|
||||
|
||||
$primary-neutral-color: hsl(219.6, 20.8%, 50%);
|
||||
$primary-neutral-light-color: hsl(219.6, 20.8%, 83%);
|
||||
$primary-neutral-dark-color: hsl(219.6, 20.8%, 17%);
|
||||
$primary-neutral-light-color: #efefef;
|
||||
$primary-neutral-dark-color: #34495e;
|
||||
|
||||
$secondary-neutral-color: hsl(40, 57.6%, 50%);
|
||||
$secondary-neutral-light-color: hsl(40, 57.6%, 83%);
|
||||
$secondary-neutral-color: #2980b9;
|
||||
$secondary-neutral-light-color: #e7e7e7;
|
||||
$secondary-neutral-dark-color: hsl(40, 57.6%, 17%);
|
||||
|
||||
$white-color: hsl(219.6, 20.8%, 98%);
|
||||
@ -26,17 +26,71 @@ $black-color: hsl(40.0, 0%, 17%);
|
||||
$faceblue: #3B5998;
|
||||
$twitblue: #55acee;
|
||||
|
||||
$shadow-color: rgb(223, 223, 223);
|
||||
|
||||
$background-bouton-color: #e6e6e6;
|
||||
|
||||
/*--------------------------------GENERAL------------------------------*/
|
||||
|
||||
body {
|
||||
background-color: $primary-neutral-light-color;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
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: #d3d3d3;
|
||||
}
|
||||
}
|
||||
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: #d3d3d3;
|
||||
}
|
||||
}
|
||||
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 {
|
||||
text-decoration: none;
|
||||
color: $primary-dark-color;
|
||||
@ -77,7 +131,7 @@ a {
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
padding: 4px;
|
||||
margin: 0px;
|
||||
}
|
||||
form {
|
||||
@ -91,10 +145,10 @@ header {
|
||||
width: 90%;
|
||||
margin: 0px auto;
|
||||
display: flex;
|
||||
box-shadow: grey 1px 1px 5px;
|
||||
border: solid 1px grey;
|
||||
box-shadow: $shadow-color 0px 0px 15px;
|
||||
border-top: none;
|
||||
background-color: $primary-neutral-dark-color;
|
||||
border-radius: 0px 0px 10px 10px;
|
||||
|
||||
#header_logo {
|
||||
display: inline-block;
|
||||
@ -102,6 +156,8 @@ header {
|
||||
background-size: 100% 100%;
|
||||
background-color: $white-color;
|
||||
padding: 0.2em;
|
||||
border-radius: 0px 0px 0px 9px;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
margin: 0px;
|
||||
@ -129,10 +185,11 @@ header {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
width: 80%;
|
||||
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
margin: 0em 1em;
|
||||
font-weight: bold;
|
||||
color: $white-color;
|
||||
&:hover {
|
||||
color: $secondary-color;
|
||||
@ -228,10 +285,10 @@ header {
|
||||
margin: 1em auto;
|
||||
p {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
padding: 7px;
|
||||
}
|
||||
#alert_box, #info_box {
|
||||
font-size: smaller;
|
||||
font-size: 14px;
|
||||
display: inline-block;
|
||||
flex: auto;
|
||||
padding: 2px;
|
||||
@ -239,28 +296,23 @@ header {
|
||||
min-width: 10%;
|
||||
max-width: 46%;
|
||||
min-height: 20px;
|
||||
box-shadow: grey 1px 1px 5px;
|
||||
&:before {
|
||||
float: left;
|
||||
margin: 0.2em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.markdown {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
#info_box {
|
||||
border: solid 1px grey;
|
||||
background: $white-color;
|
||||
border-radius: 10px;
|
||||
background: $primary-neutral-light-color;
|
||||
&:before {
|
||||
font-family: FontAwesome;
|
||||
font-size: 4em;
|
||||
content: "\f05a";
|
||||
color: darkblue;
|
||||
color: #1e90ff;
|
||||
}
|
||||
}
|
||||
#alert_box {
|
||||
border: solid 1px grey;
|
||||
border-radius: 10px;
|
||||
background: $second-color;
|
||||
&:before {
|
||||
font-family: FontAwesome;
|
||||
@ -273,17 +325,17 @@ header {
|
||||
|
||||
|
||||
#page {
|
||||
box-shadow: grey 1px 1px 5px;
|
||||
width: 90%;
|
||||
margin: 0em auto;
|
||||
border: solid 1px grey;
|
||||
|
||||
/*---------------------------------NAV---------------------------------*/
|
||||
nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: $primary-dark-color;
|
||||
color: $white-color;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
box-shadow: $shadow-color 0px 0px 15px;
|
||||
|
||||
a {
|
||||
flex: auto;
|
||||
text-align: center;
|
||||
@ -313,6 +365,7 @@ header {
|
||||
|
||||
#content {
|
||||
padding: 1em 1%;
|
||||
box-shadow: $shadow-color 0px 0px 15px;
|
||||
background: $white-color;
|
||||
overflow: auto;
|
||||
}
|
||||
@ -324,23 +377,27 @@ header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
float: right;
|
||||
background: $white-color;
|
||||
border: 1px solid $black-color;
|
||||
background: $primary-neutral-light-color;
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
a {
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
color: $black-color;
|
||||
font-weight: bold;
|
||||
flex: 1;
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
&.selected_tab {
|
||||
background: $second-color;
|
||||
color: $black-color;
|
||||
background: $primary-color;
|
||||
color: $white-color;
|
||||
border-radius: 10px;
|
||||
}
|
||||
&:hover {
|
||||
background: $primary-color;
|
||||
color: $white-color;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -364,12 +421,11 @@ header {
|
||||
width: 79%;
|
||||
h3 {
|
||||
background: $second-color;
|
||||
box-shadow: grey 2px 2px 2px;
|
||||
box-shadow: $shadow-color 1px 1px 1px;
|
||||
padding: 0.4em;
|
||||
margin: 0em 0em 0.5em 0em;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.1em;
|
||||
border: solid 1px grey;
|
||||
&:not(:first-of-type) {
|
||||
margin: 2em 0em 1em 0em;
|
||||
}
|
||||
@ -381,22 +437,22 @@ header {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: white;
|
||||
box-shadow: grey 2px 2px 2px;
|
||||
font-size: 70%;
|
||||
border: solid 1px grey;
|
||||
margin-bottom: 1em;
|
||||
#agenda_title,#birthdays_title {
|
||||
margin: 0em;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
box-shadow: $shadow-color 1px 1px 1px;
|
||||
padding: 0.5em;
|
||||
font-weight: bold;
|
||||
font-size: 150%;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
border-bottom: solid 1px grey;
|
||||
background: $second-color;
|
||||
}
|
||||
#agenda_content {
|
||||
overflow: auto;
|
||||
box-shadow: $shadow-color 1px 1px 1px;
|
||||
height: 20em;
|
||||
}
|
||||
#agenda_content,#birthdays_content {
|
||||
@ -440,21 +496,22 @@ header {
|
||||
|
||||
/* EVENTS TODAY AND NEXT FEW DAYS */
|
||||
.news_events_group {
|
||||
border: solid 1px grey;
|
||||
box-shadow: grey 2px 2px 2px;
|
||||
box-shadow: $shadow-color 1px 1px 1px;
|
||||
margin-left: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
.news_events_group_date {
|
||||
display: table-cell;
|
||||
padding: 0.6em;
|
||||
vertical-align: middle;
|
||||
background: $primary-dark-color;
|
||||
background: $primary-neutral-dark-color;
|
||||
color: $white-color;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-family: monospace;
|
||||
font-size: 1.4em;
|
||||
border-radius: 10px 0px 0px 10px;
|
||||
|
||||
div {
|
||||
margin: 0px auto;
|
||||
.day {
|
||||
@ -465,7 +522,6 @@ header {
|
||||
.news_events_group_items {
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
border-left: solid 1px grey;
|
||||
.news_event:nth-of-type(odd) {
|
||||
background: white;
|
||||
}
|
||||
@ -541,9 +597,9 @@ header {
|
||||
margin: 0em 0em 1em 1em;
|
||||
padding: 0.4em;
|
||||
padding-left: 1em;
|
||||
background: lightgrey;
|
||||
border: 1px solid grey;
|
||||
box-shadow: grey 2px 2px 2px;
|
||||
background: $secondary-neutral-light-color;
|
||||
box-shadow: $shadow-color 0px 0px 2px;
|
||||
border-radius: 18px 5px 18px 5px;
|
||||
h4 {
|
||||
margin: 0em;
|
||||
}
|
||||
@ -560,7 +616,7 @@ header {
|
||||
padding-left: 1em;
|
||||
background: $secondary-neutral-light-color;
|
||||
border: 1px solid grey;
|
||||
box-shadow: grey 2px 2px 2px;
|
||||
box-shadow: $shadow-color 1px 1px 1px;
|
||||
h4 {
|
||||
margin: 0em;
|
||||
}
|
||||
@ -584,6 +640,7 @@ header {
|
||||
|
||||
#news_details {
|
||||
display: inline-block;
|
||||
margin-top: 20px;
|
||||
padding: 0.4em;
|
||||
width: 80%;
|
||||
background: $white-color;
|
||||
@ -603,6 +660,7 @@ header {
|
||||
max-width: 12em;
|
||||
display: block;
|
||||
margin: 0em auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.share_button {
|
||||
@ -637,6 +695,7 @@ header {
|
||||
}
|
||||
|
||||
.helptext {
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -1004,6 +1063,7 @@ u, .underline {
|
||||
background: $primary-neutral-light-color;
|
||||
float: right;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#products {
|
||||
@ -1189,7 +1249,7 @@ u, .underline {
|
||||
height: 18em;
|
||||
overflow: hidden;
|
||||
border: 1px solid black;
|
||||
box-shadow: 2px 2px 5px grey;
|
||||
box-shadow: $shadow-color 1px 1px 1px;
|
||||
&:hover {
|
||||
box-shadow: 1px 1px 5px $second-color;
|
||||
}
|
||||
@ -1229,11 +1289,12 @@ textarea {
|
||||
|
||||
#forum {
|
||||
.button {
|
||||
background-color: $primary-neutral-light-color;
|
||||
border: outset $primary-neutral-dark-color 2px;
|
||||
padding: 4px;
|
||||
background-color: rgb(230, 230, 230);
|
||||
padding: 7px;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
&:hover {
|
||||
border: inset $primary-neutral-dark-color 2px;
|
||||
background-color: rgb(211, 211, 211);
|
||||
}
|
||||
}
|
||||
.topic {
|
||||
@ -1255,6 +1316,7 @@ textarea {
|
||||
.tools {
|
||||
font-size: x-small;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
a {
|
||||
padding: 1px;
|
||||
}
|
||||
@ -1297,6 +1359,8 @@ textarea {
|
||||
.category {
|
||||
margin-top: 5px;
|
||||
background: $secondary-color;
|
||||
color: #ffffff;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@ -1305,7 +1369,7 @@ textarea {
|
||||
.message {
|
||||
padding: 1px;
|
||||
margin: 1px;
|
||||
background: $white-color;
|
||||
background: #f3f3f3;
|
||||
&:nth-child(odd) {
|
||||
background: $primary-neutral-light-color;
|
||||
}
|
||||
@ -1334,7 +1398,6 @@ textarea {
|
||||
display: inline-block;
|
||||
width: 19%;
|
||||
text-align: center;
|
||||
background: $primary-light-color;
|
||||
img {
|
||||
max-width: 70%;
|
||||
margin: 0px auto;
|
||||
@ -1415,22 +1478,23 @@ footer {
|
||||
width: 90%;
|
||||
margin: 2em auto;
|
||||
|
||||
font-size: 80%;
|
||||
font-size: 90%;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
div {
|
||||
margin: 0.6em 0em;
|
||||
color: $white-color;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
background-color: $primary-neutral-dark-color;
|
||||
box-shadow: grey 1px 1px 5px;
|
||||
border: solid 1px grey;
|
||||
box-shadow: $shadow-color 0px 0px 15px;
|
||||
a {
|
||||
padding: 0.8em;
|
||||
flex: 1;
|
||||
font-weight: bold;
|
||||
color: $white-color;
|
||||
&:hover {
|
||||
color: $secondary-color;
|
||||
color: $primary-dark-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1440,11 +1504,13 @@ footer {
|
||||
|
||||
form {
|
||||
margin: 0px auto;
|
||||
margin-bottom: 10px;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.choose_file_widget {
|
||||
@ -1490,8 +1556,6 @@ label {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
button {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
</div>
|
||||
{% else %}
|
||||
<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>
|
||||
</div>
|
||||
<div id="header_bar">
|
||||
@ -62,11 +62,11 @@
|
||||
<li>
|
||||
<a href="{{ url('counter:activity', counter_id=bar.id) }}" style="padding: 0px">
|
||||
{% 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(): %}
|
||||
<i class="fa fa-check" style="color: green"></i>
|
||||
<i class="fa fa-check" style="color: #2ecc71"></i>
|
||||
{% else %}
|
||||
<i class="fa fa-times" style="color: red"></i>
|
||||
<i class="fa fa-times" style="color: #eb2f06"></i>
|
||||
{% endif %}
|
||||
{{ bar }}
|
||||
</a>
|
||||
@ -181,7 +181,6 @@
|
||||
>{{ t.name }}</a>
|
||||
{%- endfor %}
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user