Sith/core/static/core/style.scss

2216 lines
45 KiB
SCSS

$first-color: hsl(220, 100%, 50%);
$second-color: hsl(48, 100%, 67%);
$primary-color: hsl(219.9, 53.7%, 50%);
$secondary-color: hsl(204, 64%, 44%);
$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(203, 75%, 40%);
$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(0, 0%, 94%);
$primary-neutral-dark-color: hsl(210, 29%, 29%);
$secondary-neutral-color: hsl(204, 64%, 44%);
$secondary-neutral-light-color: hsl(0, 0%, 91%);
$secondary-neutral-dark-color: hsl(40, 57.6%, 17%);
$white-color: hsl(219.6, 20.8%, 98%);
$black-color: hsl(0, 0%, 17%);
$faceblue: hsl(221, 44%, 41%);
$twitblue: hsl(206, 82%, 63%);
$shadow-color: rgb(223, 223, 223);
$background-button-color: hsl(0, 0%, 95%);
/*--------------------------MEDIA QUERY HELPERS------------------------*/
$small-devices: 576px;
$medium-devices: 768px;
$large-devices: 992px;
$extra-large-devices: 1200px;
/*--------------------------------GENERAL------------------------------*/
body {
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-button-color;
padding: 0.4em;
margin: 0.1em;
font-weight: bold;
font-size: 1.2em;
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-button-color;
padding: 0.4em;
margin: 0.1em;
font-size: 1.18em;
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-button-color;
padding: 0.4em;
margin: 0.1em;
font-size: 1.2em;
border-radius: 5px;
max-width: 95%;
}
textarea{
border: none;
text-decoration: none;
background-color: $background-button-color;
padding: 7px;
font-size: 1.2em;
border-radius: 5px;
}
select{
border: none;
text-decoration: none;
font-size: 1.2em;
background-color: $background-button-color;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
a {
text-decoration: none;
color: $primary-dark-color;
&:hover {
color: $primary-light-color;
}
&:active {
color: $primary-color;
}
}
.ib {
display: inline-block;
padding: 1px;
margin: 1px;
}
.w_big {
width: 75%;
}
.w_medium {
width: 47%;
}
.w_small {
width: 23%;
}
/*--------------------------------HEADER-------------------------------*/
#header_language_chooser {
position: absolute;
top: 2em;
left: 0.5em;
width: 3%;
min-width: 2.2em;
text-align: center;
input {
display: block;
width: 100%;
padding: 4px;
margin: 0px;
}
form {
display: block;
margin: 0.2em 0em;
width: 100%;
}
}
header {
width: 90%;
margin: 0px auto;
display: flex;
box-shadow: $shadow-color 0px 0px 15px;
border-top: none;
background-color: $primary-neutral-dark-color;
border-radius: 0px 0px 10px 10px;
#header_logo {
background-color: $white-color;
padding: 0.2em;
border-radius: 0px 0px 0px 9px;
a {
display: inline-block;
margin: 0px;
width: 100%;
height: 100%;
img {
max-width: 70%;
max-height: 100%;
margin: auto;
display: block;
}
}
}
#header_connect_links {
margin: 0.6em 0.6em 0em auto;
padding: 0.2em;
color: $white-color;
form {
display: inline;
width: 100%;
label {
display: inline;
}
}
a {
display: button;
}
}
#header_bar {
display: flex;
flex: auto;
flex-wrap: wrap;
width: 80%;
a {
text-decoration: none;
margin: 0em 1em;
font-weight: bold;
color: $white-color;
&:hover {
color: $secondary-color;
}
}
#header_bars_infos {
flex: initial;
list-style-type: none;
margin: 0.2em 0.2em;
}
#header_search {
display: inline-block;
flex: auto;
margin: 0.8em 0em;
input {
width: 14ch;
}
}
#header_user_links {
display: flex;
flex: initial;
flex-wrap: wrap;
text-align: right;
margin: 0em;
div {
display: inline;
padding: 1.2em 0em;
&:first-child {
flex: auto;
}
}
.white {
background: $white-color;
a {
color: $black-color;
}
}
#header_notif {
display: none;
position: absolute;
max-height: 20em;
width: 22em;
overflow: auto;
list-style-type: none;
box-shadow: grey 1px 1px 5px;
background: white;
text-align: left;
font-size: 80%;
margin: 1.5em 0em 0em -14em;
.header_notif_date {
font-weight: bold;
}
.header_notif_time {
color: grey;
}
a {
margin: 0em;
color: $black-color;
&:hover {
color: $primary-dark-color;
}
}
li {
padding: 0.2em;
&:hover {
background: hsl(180, 14%, 77%);
}
}
li:last-child {
text-align: center;
a {
color: $primary-dark-color;
&:hover {
color: $primary-light-color;
}
}
}
}
}
}
}
#popupheader {
width: 88%;
margin: 0px auto;
padding: 0.3em 1%;
}
#info_boxes {
display: flex;
flex-wrap: wrap;
width: 90%;
margin: 1em auto;
#alert_box, #info_box {
flex: 49%;
font-size: 0.9em;
margin: 0.2em;
border-radius: 0.6em;
.markdown {
margin: 0.5em;
}
&:before {
font-family: FontAwesome;
font-size: 4em;
float: right;
margin: 0.2em;
}
}
#info_box {
background: $primary-neutral-light-color;
&:before {
content: "\f05a";
color: hsl(210, 100%, 56%);
}
}
#alert_box {
background: $second-color;
&:before {
content: "\f06a";
color: $white-color;
}
}
}
#page {
width: 90%;
margin: 0em auto;
/*---------------------------------NAV---------------------------------*/
nav {
display: flex;
flex-wrap: wrap;
background-color: $primary-dark-color;
color: $white-color;
border-radius: 6px 6px 0px 0px;
box-shadow: $shadow-color 0px 0px 15px;
a {
flex: auto;
text-align: center;
padding: 1.5em;
color: $white-color;
font-style: normal;
font-weight: bolder;
text-decoration: none;
&:hover {
background: $secondary-neutral-color;
color: $white-color;
&:first-of-type {
border-radius: 6px 0px 0px 0px;
}
&:last-of-type {
border-radius: 0px 6px 0px 0px;
}
}
}
.dropdown {
flex: auto;
text-align: center;
position: relative;
}
.dropbtn {
all: unset;
padding: 20px;
font-weight: bolder;
}
.dropdown-content {
display: none;
position: absolute;
overflow: auto;
width: 100%;
background-color: #f9f9f9;
box-shadow: 3px 3px 3px 0px $shadow-color;
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
display: block;
text-align: center;
&:hover {
border-radius: unset;
color: white;
background: $secondary-neutral-color;
}
}
.dropdown:hover .dropdown-content {
display: block;
}
}
/*--------------------------------CONTENT------------------------------*/
#quick_notif {
width: 100%;
margin: 0px auto;
list-style-type: none;
background: $second-color;
li {
padding: 10px;
}
}
#content {
padding: 1em 1%;
box-shadow: $shadow-color 0px 5px 10px;
background: $white-color;
overflow: auto;
}
.tool_bar {
overflow: auto;
padding: 4px;
.tools {
display: flex;
flex-wrap: wrap;
float: right;
background: $primary-neutral-light-color;
padding: 5px;
border-radius: 6px;
text-align: center;
a {
padding: 7px;
display: inline-block;
color: $black-color;
font-weight: bold;
margin: 2px;
flex: 1;
flex-wrap: nowrap;
white-space: nowrap;
&.selected_tab {
background: $primary-color;
color: $white-color;
border-radius: 6px;
}
&:hover {
background: $primary-color;
color: $white-color;
border-radius: 6px;
}
}
}
}
/*---------------------------------NEWS--------------------------------*/
#news {
display: flex;
flex-wrap: wrap;
.news_column {
display: inline-block;
margin: 0px;
vertical-align: top;
}
#news_admin {
margin-bottom: 1em;
}
#right_column {
flex: 20%;
float: right;
margin: 0.2em;
}
#left_column {
flex: 79%;
margin: 0.2em;
h3 {
background: $second-color;
box-shadow: $shadow-color 1px 1px 1px;
padding: 0.4em;
margin: 0em 0em 0.5em 0em;
text-transform: uppercase;
font-size: 1.1em;
&:not(:first-of-type) {
margin: 2em 0em 1em 0em;
}
}
}
@media screen and (max-width: $small-devices){
#left_column, #right_column {
flex: 100%;
}
}
/* AGENDA/BIRTHDAYS */
#agenda,#birthdays {
display: block;
width: 100%;
background: white;
font-size: 70%;
margin-bottom: 1em;
#agenda_title,#birthdays_title {
margin: 0em;
border-radius: 5px 5px 0px 0px;
box-shadow: $shadow-color 1px 1px 1px;
padding: 0.5em;
font-weight: bold;
font-size: 150%;
text-align: center;
text-transform: uppercase;
background: $second-color;
}
#agenda_content {
overflow: auto;
box-shadow: $shadow-color 1px 1px 1px;
height: 20em;
}
#agenda_content,#birthdays_content {
.agenda_item {
padding: 0.5em;
margin-bottom: 0.5em;
&:nth-of-type(even) {
background: $secondary-neutral-light-color;
}
.agenda_time {
font-size: 90%;
color: grey;
}
.agenda_item_content {
p {
margin-top: 0.2em;
}
}
}
ul.birthdays_year {
margin: 0em;
list-style-type: none;
font-weight: bold;
>li {
padding: 0.5em;
&:nth-child(even) {
background: $secondary-neutral-light-color;
}
}
ul {
margin: 0em;
margin-left: 1em;
list-style-type: square;
list-style-position: inside;
font-weight: normal;
}
}
}
}
/* END AGENDA/BIRTHDAYS */
/* EVENTS TODAY AND NEXT FEW DAYS */
.news_events_group {
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-neutral-dark-color;
color: $white-color;
text-transform: uppercase;
text-align: center;
font-weight: bold;
font-family: monospace;
font-size: 1.4em;
border-radius: 7px 0px 0px 7px;
div {
margin: 0px auto;
.day {
font-size: 1.5em;
}
}
}
.news_events_group_items {
display: table-cell;
width: 100%;
.news_event:nth-of-type(odd) {
background: white;
}
.news_event:nth-of-type(even) {
background: $primary-neutral-light-color;
}
.news_event {
display: block;
padding: 0.4em;
&:not(:last-child) {
border-bottom: 1px solid grey;
}
div {
margin: 0.2em;
}
h4 {
margin-top: 1em;
text-transform: uppercase;
}
.club_logo {
float: left;
min-width: 7em;
max-width: 9em;
margin: 0em;
margin-right: 1em;
margin-top: 0.8em;
img {
max-height: 6em;
max-width: 8em;
display: block;
margin: 0em auto;
}
}
.news_date {
font-size: 100%;
}
.news_content {
clear: left;
.button_bar {
text-align: right;
.fb {
color: $faceblue;
}
.twitter {
color: $twitblue;
}
}
}
}
}
}
/* END EVENTS TODAY AND NEXT FEW DAYS */
/* COMING SOON */
.news_coming_soon {
display: list-item;
list-style-type: square;
list-style-position: inside;
margin-left: 1em;
padding-left: 0em;
a {
font-weight: bold;
text-transform: uppercase;
}
.news_date {
font-size: 0.9em;
}
}
/* END COMING SOON */
/* NOTICES */
.news_notice {
margin: 0em 0em 1em 1em;
padding: 0.4em;
padding-left: 1em;
background: $secondary-neutral-light-color;
box-shadow: $shadow-color 0px 0px 2px;
border-radius: 18px 5px 18px 5px;
h4 {
margin: 0em;
}
.news_content {
margin-left: 1em;
}
}
/* END NOTICES */
/* CALLS */
.news_call {
margin: 0em 0em 1em 1em;
padding: 0.4em;
padding-left: 1em;
background: $secondary-neutral-light-color;
border: 1px solid grey;
box-shadow: $shadow-color 1px 1px 1px;
h4 {
margin: 0em;
}
.news_date {
font-size: 0.9em;
}
.news_content {
margin-left: 1em;
}
}
/* END CALLS */
.news_empty {
margin-left: 1em;
}
.news_date {
color: grey;
}
}
}
@media screen and (max-width: $small-devices){
#page {
width: 98%;
}
}
#news_details {
display: inline-block;
margin-top: 20px;
padding: 0.4em;
width: 80%;
background: $white-color;
h4 {
margin-top: 1em;
text-transform: uppercase;
}
.club_logo {
display: inline-block;
text-align: center;
width: 19%;
float: left;
min-width: 15em;
margin: 0em;
img {
max-height: 15em;
max-width: 12em;
display: block;
margin: 0em auto;
margin-bottom: 10px;
}
}
.share_button {
border: none;
color: white;
padding: 0.5em 1em;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1.2em;
border-radius: 2px;
float: right;
display: block;
margin-left: 0.3em;
&:hover {
color: lightgrey;
}
}
.facebook {
background: $faceblue;
}
.twitter {
background: $twitblue;
}
.news_meta {
margin-top: 10em;
font-size: small;
}
}
.helptext {
margin-top: 10px;
display: block;
}
/*---------------------------POSTERS----------------------------*/
#poster_list, #screen_list, #poster_edit, #screen_edit{
position: relative;
#title{
position: relative;
padding: 10px;
margin: 10px;
border-bottom: 2px solid black;
h3{
display: flex;
justify-content: center;
align-items: center;
}
#links{
position: absolute;
display: flex;
bottom: 5px;
&.left{
left: 0;
}
&.right{
right: 0;
}
.link{
padding: 5px;
padding-left: 20px;
padding-right: 20px;
margin-left: 5px;
border-radius: 20px;
background-color: hsl(40, 100%, 50%);
color: black;
&:hover{
color: black;
background-color: hsl(40, 58%, 50%);
}
&.delete{
background-color: hsl(0, 100%, 40%);
}
}
}
}
#posters, #screens{
position: relative;
display: flex;
flex-wrap: wrap;
#no-posters, #no-screens{
display: flex;
justify-content: center;
align-items: center;
}
.poster, .screen{
min-width: 10%;
max-width: 20%;
display: flex;
flex-direction: column;
margin: 10px;
border: 2px solid darkgrey;
border-radius: 4px;
padding: 10px;
background-color: lightgrey;
*{
display: flex;
justify-content: center;
align-items: center;
}
.name{
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px solid whitesmoke;
}
.image{
flex-grow: 1;
position: relative;
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px solid whitesmoke;
img{
max-height: 20vw;
max-width: 100%;
}
&:hover{
&::before{
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
top: 0;
left: 0;
z-index: 10;
content: "Click to expand";
color: white;
background-color: rgba(black, 0.5);
}
}
}
.dates{
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px solid whitesmoke;
*{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-left: 5px;
margin-right: 5px;
}
.begin, .end{
width: 48%;
}
.begin{
border-right: 1px solid whitesmoke;
padding-right: 2%;
}
}
.edit, .moderate, .slideshow{
padding: 5px;
border-radius: 20px;
background-color: hsl(40, 100%, 50%);
color: black;
&:hover{
color: black;
background-color: hsl(40, 58%, 50%);
}
&:nth-child(2n){
margin-top: 5px;
margin-bottom: 5px;
}
}
.tooltip{
visibility: hidden;
width: 120px;
background-color: hsl(210, 20%, 98%);
color: hsl(0, 0%, 0%);
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 10;
ul{
margin-left: 0;
display: inline-block;
li{
display: list-item;
list-style-type: none;
}
}
}
&.not_moderated
{
border: 1px solid red;
}
&:hover .tooltip{
visibility: visible;
}
}
}
#view{
position: fixed;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
z-index: 10;
visibility: hidden;
background-color: rgba(10, 10, 10, 0.9);
overflow: hidden;
&.active{
visibility: visible;
}
#placeholder{
width: 80vw;
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
img{
max-width: 100%;
max-height: 100%;
}
}
}
}
/*---------------------------ACCOUNTING----------------------------*/
#accounting {
.journal-table {
tbody {
.neg-amount {
color: red;
&:before {
font-family: FontAwesome;
font-size: 1em;
content: "\f063";
}
}
.pos-amount {
color: green;
&:before {
font-family: FontAwesome;
font-size: 1em;
content: "\f062";
}
}
}
}
}
/*-----------------------------GENERAL-----------------------------*/
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
margin-top: 0.5em;
}
h1 {
font-size: 160%;
margin-left: 0px;
}
h2 {
font-size: 150%;
margin-left: 10px;
}
h3 {
font-size: 140%;
margin-left: 20px;
}
h4 {
font-size: 130%;
margin-left: 30px;
}
h5 {
font-size: 120%;
margin-left: 40px;
}
h6 {
font-size: 110%;
margin-left: 50px;
}
p, pre {
margin-top: 0.8em;
margin-left: 0px;
}
ul, ol, dl {
margin-top: 1em;
margin-bottom: 1em;
margin-left: 25px;
}
dt {
margin-top: 25px;
}
code {
font-family: monospace;
overflow: auto;
max-width: 100%;
}
blockquote {
margin: 5px;
padding: 2px;
border: solid 1px $black-color;
}
blockquote h5:first-child {
font-size: 100%;
}
.edit-bar {
display: block;
margin: 4px;
a {
display: inline-block;
margin: 4px;
}
}
.important {
font-size: 1.2em;
font-weight: bold;
color: red;
}
table {
width: 100%;
font-size: 0.90em;
}
td {
padding: 4px;
margin: 5px;
border: solid 1px $primary-neutral-color;
border-collapse: collapse;
vertical-align: top;
overflow: hidden;
text-overflow: ellipsis;
> ul {
margin-top: 0px;
}
}
thead {
font-weight: bold;
}
tbody > tr {
&:nth-child(even) {
background: $primary-neutral-light-color;
}
&:hover {
background: $secondary-neutral-light-color;
width: 100%;
}
}
sup {
vertical-align: super;
font-size: smaller;
}
sub {
vertical-align: sub;
font-size: smaller;
}
b, strong {
font-weight: bold;
}
i, em {
font-style: italic;
}
.highlight {
background: $second-color;
font-weight: bold;
}
u, .underline {
text-decoration: underline;
}
#bar_ui {
padding: 0.4em;
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
#products {
flex-basis: 100%;
margin: 0.2em;
overflow: auto;
}
#click_form {
flex: auto;
margin: 0.2em;
}
#user_info {
flex: auto;
padding: 0.5em;
margin: 0.2em;
height: 100%;
background: $secondary-neutral-light-color;
img {
max-width: 70%;
}
input {
background: white;
}
}
}
/*-----------------------------USER PROFILE----------------------------*/
#user_profile_page {
#user_profile {
display: flex;
justify-content: center;
margin-top: 2em;
margin-bottom: 4em;
#user_profile_infos {
flex-basis: 30%;
border-right: solid 1px grey;
div {
margin: 0.5em;
}
#user_profile_infos_items {
margin-top: 3em;
}
.user_profile_infos_item, .user_profile_infos_item_value {
vertical-align: top;
display: inline-block;
width: 49%;
}
.user_profile_infos_item {
color: grey;
}
#user_profile_infos_promo {
display: flex;
align-items: center;
img {
width: 5em;
margin: 0.5em;
}
}
#user_profile_infos_quote {
text-align: right;
color: grey;
font-style: italic;
&:after, &:before {
content: "\201C";
vertical-align: middle;
}
}
}
#user_profile_pictures {
height: 20em;
flex-basis: 30%;
display: flex;
justify-content: flex-end;
#user_profile_pictures_bigone {
flex-grow: 9;
flex-basis: 20em;
display: flex;
justify-content: center;
align-items: center;
img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
}
#user_profile_pictures_thumbnails {
flex-grow: 1;
flex-basis: 50px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
img {
margin: 0.1em;
width: 50px;
}
}
}
@media screen and (max-width: $small-devices){
#user_profile_infos, #user_profile_pictures {
flex-basis: 50%;
}
}
}
}
.user_mini_profile {
height: 100%;
width: 100%;
img {
max-width: 100%;
max-height: 100%;
}
.user_mini_profile_infos {
padding: 0.2em;
height: 20%;
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
font-size: 0.9em;
div {
max-height: 100%;
}
.user_mini_profile_infos_text {
text-align: center;
.user_mini_profile_nick {
font-style: italic;
}
}
}
.user_mini_profile_picture {
height: 80%;
display: flex;
justify-content: center;
align-items: center;
}
}
.mini_profile_link {
display: block;
text-decoration: none;
span {
display: inline-block;
width: 50px;
vertical-align: middle;
}
em {
vertical-align: middle;
}
img {
max-width: 40px;
max-height: 60px;
margin: 2px auto;
display: block;
}
}
#notifications li {
padding: 5px;
margin: 2px;
list-style: none;
}
#moderation {
div {
margin: 2px;
padding: 2px;
border: solid 1px red;
text-align: center;
}
img {
width: 500px;
}
}
/* XXX This seems to be used in the SAS */
#pict {
display: inline-block;
width: 80%;
background: hsl(0, 0%, 20%);
border: solid hsl(0, 0%, 20%) 2px;
}
/*--------------------------------MATMAT-------------------------------*/
.matmat_results {
display: flex;
flex-wrap: wrap;
.matmat_user {
flex-basis: 14em;
align-self: flex-start;
margin: 0.5em;
height: 18em;
overflow: hidden;
border: 1px solid black;
box-shadow: $shadow-color 1px 1px 1px;
&:hover {
box-shadow: 1px 1px 5px $second-color;
}
}
.matmat_user a {
color: $primary-neutral-dark-color;
height: 100%;
width: 100%;
margin: 0em;
padding: 0em;
display: block;
}
}
/*---------------------------------PAGE--------------------------------*/
.page_content {
display: block;
margin: 10px;
padding: 10px;
background: $white-color;
}
textarea {
width: 98%;
margin-top: 10px;
}
/*---------------------------LAUNDERETTE-------------------------------*/
#token_form label {
display: inline;
}
/*------------------------------FORUM----------------------------------*/
#forum {
.button {
background-color: rgb(230, 230, 230);
padding: 10px;
font-weight: bold;
border-radius: 5px;
&:hover {
background-color: rgb(211, 211, 211);
}
}
.topic {
border: solid $primary-neutral-color 1px;
padding: 1px;
margin: 1px;
p {
margin: 1px;
font-size: smaller;
}
a {
color: $black-color;
}
a:hover {
text-decoration: underline;
}
}
.tools {
font-size: x-small;
border: none;
font-weight: bold;
a {
padding: 1px;
}
}
.title {
font-size: small;
font-weight: bold;
padding: 2px;
}
.last_message date {
white-space: nowrap;
}
.last_message span {
white-space: nowrap;
text-overflow: ellipsis;
overflow:hidden;
width: 100%;
display: block;
}
.forum {
background: $primary-neutral-light-color;
padding: 1px;
margin: 1px;
p {
margin: 1px;
font-size: smaller;
}
a {
color: $black-color;
}
a:hover {
text-decoration: underline;
}
}
.search_bar {
margin: 10px 0px;
display: flex;
flex-wrap: wrap;
height: 20p;
align-items: center;
}
.search_check {
margin-left: 10px;
}
.search_bouton {
margin-left: 10px;
}
.category {
margin-top: 5px;
background: $secondary-color;
color: white;
border-radius: 10px 10px 0px 0px;
.title {
text-transform: uppercase;
}
}
.message {
padding: 1px;
margin: 1px;
background: $secondary-neutral-light-color;
&:nth-child(odd) {
background: $primary-neutral-light-color;
}
.title {
font-size: 100%;
}
&.unread {
background: #e9eea1;
}
}
.msg_author.deleted {
background: #ffcfcf;
}
.msg_content {
&.deleted {
background: #ffefef;
}
display: inline-block;
width: 80%;
vertical-align: top;
}
.msg_author {
display: inline-block;
width: 19%;
text-align: center;
img {
max-width: 70%;
margin: 0px auto;
}
}
.msg_header {
display: inline-block;
width: 100%;
font-size: small;
}
.msg_meta {
font-size: small;
list-style-type: none;
li {
padding: 1px;
margin: 1px;
}
}
.forum_signature {
color: hsl(0, 0%, 75%);
border-top: 1px solid hsl(0, 0%, 75%);
a {
color: hsl(0, 0%, 75%);
&:hover {
text-decoration: underline;
}
}
}
}
/*------------------------------SAS------------------------------------*/
.album {
display: inline-block;
border: solid 1px $black-color;
text-align: center;
padding: 5px;
width: 200px;
height: 140px;
background: hsl(0, 0%, 93%);
box-shadow: black 2px 2px 10px;
margin: 10px;
vertical-align: top;
img {
max-height: 100px;
}
}
.picture {
display: inline-block;
border: solid 1px $black-color;
width: 150px;
height: 100px;
margin: 5px;
background: #eeeeee;
box-shadow: grey 2px 2px 5px;
padding: 2px;
vertical-align: middle;
img {
max-width: 100%;
max-height: 100px;
display: block;
margin: auto;
}
}
.not_moderated {
border: solid 1px red;
box-shadow: red 2px 2px 10px;
}
/*--------------------------------FOOTER-------------------------------*/
footer {
width: 90%;
margin: 2em auto;
font-size: 90%;
text-align: center;
vertical-align: middle;
div {
margin: 0.6em 0em;
color: $white-color;
border-radius: 5px;
display: flex;
flex-wrap: wrap;
background-color: $primary-neutral-dark-color;
box-shadow: $shadow-color 0px 0px 15px;
a {
padding: 0.8em;
flex: 1;
font-weight: bold;
color: $white-color;
&:hover {
color: $primary-dark-color;
}
}
}
}
/*---------------------------------FORMS-------------------------------*/
form {
margin: 0px auto;
margin-bottom: 10px;
}
label {
display: block;
margin-bottom: 8px;
}
.choose_file_widget {
display: none;
}
.ui-dialog .ui-dialog-buttonpane {
bottom: 0px;
position: absolute;
width: 97%;
}
#user_edit {
* {
text-align: center;
}
img {
width: 100px;
}
}
#cash_summary_form label, .inline {
display: inline;
}
.form_button {
width: 150px;
height: 120px;
padding: 2px;
display: inline-block;
font-size: 0.8em;
span {
width: 70px;
float: right;
}
img {
max-width: 50px;
max-height: 50px;
float: left;
}
strong {
font-weight: bold;
font-size: 1.2em;
}
button {
vertical-align: middle;
}
}
/*-------------------------------MARKDOWN------------------------------*/
.markdown {
margin: 0px;
padding: 0px;
code {
font-family: monospace;
color: $white-color;
background: $black-color;
display: inline-block;
padding: 4px;
line-height: 120%;
vertical-align: middle;
}
a {
color: $primary-dark-color;
}
a:hover {
text-decoration: underline;
}
.footnotes {
font-size: 85%;
}
}
/*--------------------------------JQuery-------------------------------*/
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header
.ui-state-active, a.ui-button:active, .ui-button:active,
.ui-button.ui-state-active:hover {
background: $primary-color;
border-color: $primary-color;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-top,
.ui-corner-left {
border-radius: 0px;
}
#club_detail {
.club_logo {
float: right;
img {
display: block;
max-height: 10em;
max-width: 10em;
}
}
}
/* --------------------------------------pedagogy-----------------------------------*/
$pedagogy-blue: #1bb9ea;
$pedagogy-orange: #ea7900;
$pedagogy-hover-blue: #0e97ce;
$pedagogy-light-blue: #caf0ff;
$pedagogy-white-text: #f0f0f0;
.pedagogy {
&.star-not-checked {
color : #f7f7f7;
margin-bottom: 0px;
margin-top: 0px;
}
&.star-checked {
color: $pedagogy-orange;
margin-bottom: 0px;
margin-top: 0px;
}
&.grade-without-star {
display: none
}
@media screen and (max-width: $large-devices){
&.star-not-checked {
margin-left: 5px;
margin-right: 5px;
}
&.star-checked {
margin-left: 5px;
margin-right: 5px;
}
}
@media screen and (max-width: $small-devices){
&.grade-without-star {
display: block;
}
&.grade-with-star {
display: none;
}
}
#dynamic_view {
font-size: 1.1em;
overflow-wrap: break-word;
td {
text-align: center;
border: none;
}
}
#search_form {
.search-form-container {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto auto;
grid-template-areas:
"action-bar action-bar"
"search-bar search-bar"
"radio-department radio-department"
"radio-credit-type radio-semester";
}
.action-bar {
grid-area: action-bar;
margin-bottom: 10px;
}
.search-bar {
grid-area: search-bar;
display: grid;
grid-template-columns: auto 200px;
grid-template-rows: auto;
grid-template-areas: "search-bar-input search-bar-button";
@media screen and (max-width: $medium-devices){
grid-template-columns: auto auto;
grid-template-rows: auto;
grid-template-areas: "search-bar-input search-bar-button";
}
@media screen and (max-width: $small-devices){
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas: "search-bar-input";
.search-bar-button {
display: none;
}
}
.search-bar-input {
grid-area: search-bar-input;
background: $pedagogy-light-blue;
}
.search-bar-button {
grid-area: search-bar-button;
background: $pedagogy-orange;
color: white;
font-weight: bold;
margin-left: 20px;
}
}
.radio-department {
grid-area: radio-department;
}
.radio-credit-type {
grid-area: radio-credit-type;
}
.radio-semester {
grid-area: radio-semester;
}
.radio-guide input[type="radio"],input[type="checkbox"] {
display:none;
}
.radio-guide {
margin-top: 10px;
color: white;
}
.radio-guide label {
display: inline-block;
background-color: $pedagogy-blue;
padding: 10px 20px;
font-family: Arial, sans-serif;
font-size: 16px;
border-radius: 4px;
}
.radio-guide input[type="radio"]:checked + label {
background-color: $pedagogy-orange;
}
.radio-guide input[type="checkbox"]:checked + label {
background-color: $pedagogy-orange;
}
.radio-guide label:hover {
background-color: $pedagogy-hover-blue;
}
}
#uv_detail {
color: #062f38;
.uv-quick-info-container {
display: grid;
grid-template-columns: 20% 20% 20% 20% auto;
grid-template-rows: auto auto;
grid-template-areas:
"hours-cm hours-td hours-tp hours-te hours-the"
"department credit-type semester . ." ;
}
.department {
grid-area: department;
}
.credit-type {
grid-area: credit-type;
}
.semester {
grid-area: semester;
}
.hours-cm {
grid-area: hours-cm;
}
.hours-td {
grid-area: hours-td;
}
.hours-tp {
grid-area: hours-tp;
}
.hours-te {
grid-area: hours-te;
}
.hours-the {
grid-area: hours-the;
}
#leave_comment_not_allowed {
p {
text-align: center;
color: red;
}
}
#leave_comment {
.leave-comment-grid-container {
display: grid;
grid-template-columns: 270px auto;
grid-template-rows: 100%;
grid-template-areas: "stars comment";
@media screen and (max-width: $large-devices){
grid-template-columns: 100%;
grid-template-rows: auto auto;
grid-template-areas:
"stars"
"comment";
}
}
.ui-accordion-content {
background-color: $white-color;
border-color: $pedagogy-orange;
border-right: none;
}
.form-stars {
grid-area: stars;
}
.form-comment {
grid-area: comment;
}
.ui-accordion-header {
background-color: $pedagogy-orange;
color: $pedagogy-white-text;
clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0);
@media screen and (max-width: $large-devices){
clip-path: none;
}
}
.ui-accordion-header-icon {
color: $pedagogy-white-text;
margin-right: 10px;
}
.input-stars {
margin-top: 20px;
}
input[type="submit"] {
float: right;
}
}
.uv-details-container {
display: grid;
grid-template-columns: 150px 100px auto;
grid-template-rows: 156px 1fr;
grid-template-areas:
"grade grade-stars uv-infos"
". . uv-infos";
@media screen and (max-width: $large-devices){
grid-template-columns: 50% 50%;
grid-template-rows: auto auto;
grid-template-areas:
"grade grade-stars"
"uv-infos uv-infos";
}
}
.grade {
grid-area: grade;
color: $pedagogy-white-text;
background-color: $pedagogy-blue;
padding-right: 10px;
> p {
text-align: right;
font-weight: bold;
}
}
.grade-stars {
grid-area: grade-stars;
color: $pedagogy-white-text;
background-color: $pedagogy-blue;
font-weight: bold;
}
.uv-infos {
grid-area: uv-infos;
padding-left: 10px;
}
.comment-container {
display: grid;
grid-template-columns: 300px auto;
grid-template-rows: auto auto auto;
grid-template-areas:
"grade-block comment"
"grade-block info"
"comment-end-bar comment-end-bar";
margin-bottom: 30px;
margin-top: 10px;
@media screen and (max-width: $large-devices){
grid-template-columns: auto;
grid-template-rows: auto auto auto auto;
grid-template-areas:
"grade-block"
"comment"
"info"
"comment-end-bar"
}
.grade-block {
grid-area: grade-block;
width: 300px;
display: grid;
grid-template-columns: 150px 150px;
grid-template-rows: 156px auto;
grid-template-areas:
"grade-type grade-stars"
"grade-extension grade-extension";
grid-gap: 15px;
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30px, 270px 0);
align-items: start;
background-color: $pedagogy-blue;
@media screen and (max-width: $large-devices){
grid-template-columns: 50% auto;
grid-template-rows: auto;
grid-template-areas:"grade-type grade-stars";
width: auto;
clip-path: none;
align-content: space-evenly;
align-items: end;
}
.grade-extension {
grid-area: grade-extension;
background-color: $pedagogy-blue;
}
.grade-type {
grid-area: grade-type;
> p {
color: $pedagogy-white-text;
font-weight: bold;
text-align: right;
}
}
.grade-stars {
grid-area: grade-stars;
}
}
.comment {
grid-area: comment;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto auto;
grid-template-areas:
"anchor"
"markdown";
@media screen and (max-width: $large-devices){
border-left: solid;
border-right: solid;
border-color: $pedagogy-blue;
}
.anchor {
grid-area: anchor;
text-align: right;
margin-right: 15px;
}
.markdown {
grid-area: markdown;
min-height: 139px;
margin-top: 0px;
margin-right: 0px;
padding: 10px;
text-align: justify;
overflow: auto;
}
}
.info {
grid-area: info;
padding-bottom: 10px;
@media screen and (max-width: $large-devices){
border-left: solid;
border-right: solid;
border-color: $pedagogy-blue;
}
.status-reported {
color: red;
float: left;
padding-left: 10px;
}
.actions {
float: right;
}
}
.comment-end-bar {
grid-area: comment-end-bar;
display: grid;
grid-template-columns: 33% auto auto;
grid-template-rows: 2.5em;
grid-template-areas: "author date report";
background-color: $pedagogy-blue;
margin-top: -1px;
@media screen and (max-width: $large-devices){
grid-template-columns: auto;
grid-template-rows: auto auto auto;
grid-template-areas:
"report"
"date"
"author";
margin-top: 0px;
text-align: center;
}
.author {
grid-area: author;
padding-top: 6px;
padding-left: 20px;
background-color: $pedagogy-orange;
clip-path: polygon(0 10px, 0 100%, 350px 200%, 300px 10px);
@media screen and (max-width: $large-devices){
clip-path: none;
padding: 0px;
padding-bottom: 7px;
}
a {
color: $pedagogy-white-text;
font-weight: bold;
}
a:hover {
color: $pedagogy-hover-blue;
}
}
.date {
grid-area: date;
color: $pedagogy-white-text;
@media screen and (max-width: $large-devices){
padding-bottom: 7px;
}
}
.report {
grid-area: report;
justify-self: right;
padding-right: 30px;
padding-left: 30px;
a {
color: $pedagogy-white-text;
}
a:hover {
color: $pedagogy-hover-blue;
}
@media screen and (max-width: $large-devices){
text-align: center;
justify-self: inherit;
padding-bottom: 7px;
background-color: $white-color;
border-left: solid;
border-right: solid;
border-color: $pedagogy-blue;
a {
color: $black-color;
}
}
}
}
}
}
}