experiENS/avisstage/sass/screen.scss
2021-02-07 18:23:24 +01:00

1034 lines
19 KiB
SCSS
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@import "compass/reset";
@import "_definitions.scss";
@import "_fonts.scss";
// @import url('https://fonts.googleapis.com/css?family=Dosis:300,500,700|Alegreya:700|Lato:300,300i,700');
// Général
* {
box-sizing: border-box;
}
body {
background: $fond;
font-family: $textfont;
line-height: 1.4;
font-size: $textfontsize;
font-weight: 300;
}
h1, h2, h3, h4 {
font-family: $headfont;
line-height: 1.2;
font-weight: bold;
}
h1 {
font-size: 2.3em;
position: relative;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.4em;
}
b, strong {
font-weight: bold;
}
em, i {
font-style: italic;
}
a {
font-weight: bold;
color: darken($compl, 10%);
text-decoration: none;
}
// experiens-BETA
.beta {
position: absolute;
opacity: 0.5;
font-size: 0.7em;
display: inline-block;
transform: translate(-1em, 1em) rotate(-15deg);
}
// Feedback
#feedback-button {
position:fixed;
right:0;
top:30%;
color:#fff;
z-index:4;
background: #000;
padding: 14px;
transform: rotateZ(-90deg);
transform-origin: bottom right;
}
// Cartes
.leaflet-container {
z-index: 1;
}
// Header
header {
background: $barre;
display: flex;
justify-content: space-between;
align-items: center;
#showmenu {
display:none;
}
nav {
display: inline;
ul {
display: inline-flex;
li {
display: inline-table;
a {
text-align: center;
display: table-cell;
padding: 0 20px;
height: 90px;
vertical-align: middle;
color: lighten($fond, 40%);
&:hover {
background: darken($barre, 40%);
}
}
}
}
}
a {
color: #fff;
text-decoration: none;
}
h1 {
padding: 15px;
word-wrap: none;
display: inline-block;
}
}
// General content
.content {
background: #efefef;
width: 900px;
max-width: 95vw;
padding: 30px;
margin: 15px auto;
p {
margin: 0.5em 0;
}
h1 {
margin-bottom: 0.6em;
}
ul.messages {
margin: -20px;
margin-bottom: 15px;
li {
background: #ccc;
color: #333;
padding: 5px 10px;
font-weight: bold;
font-size: 0.8em;
&.success {
background-color: darken($fond, 10%);
color: #fff;
}
}
}
}
p.warning {
background-color: #c20;
font-weight: bold;
color: #fff;
padding: 3px;
}
.footer {
margin-top: 15px;
font-size: 0.8em;
text-align: right;
}
// Liste des stages condensée sur le profil
.condensed-stages {
li {
display: table;
width: 100%;
background: #fff;
margin: 12px;
& > *, &:before {
display: table-cell;
vertical-align: middle;
padding: 15px;
}
a {
width: auto;
&:hover {
background: darken($compl, 10%);
color: #fff;
}
}
&:before {
content: "";
text-align: right;
width: 150px;
opacity: 0.8;
color: #000;
}
&.stage-brouillon:before {
content: "Brouillon";
background: lighten($rouge, 10%);
}
&.stage-publie:before {
content: "Publié";
background: lighten($vert, 10%);
}
&.stage-ajout:before {
content:"+";
color: #000;
}
}
}
.stage-liste {
li {
display: block;
position: relative;
&.date-maj {
font-weight: 300;
font-size: 0.9em;
padding: 3px 0;
font-style: italic;
}
&.stage {
padding: 10px;
background: #fff;
margin: 10px;
border-left: 5px solid $compl;
h3 {
font-size: 1.4em;
padding-left: 5px;
& > a {
color: darken($vert, 20);
}
.auteur {
font-size: 0.8em;
&, a {
font-family: $textfont;
font-weight: normal;
}
}
}
}
.misc-hdr {
margin-bottom: 10px;
.dates {
& > span {
display: table-cell;
vertical-align: middle;
}
.year {
padding-left: 8px;
}
svg text {
font-size: 0.8;
}
}
}
}
}
a.hoverlink {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
ul.infos {
margin: 0 -3px;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100;
li {
display: inline-block;
padding: 5px;
margin: 3px;
font-weight: bold;
font-size: 0.9em;
border-radius: 4px;
flex-grow: 1;
text-align: center;
background-color: #ddd;
&.thematique {
color: darken($vert, 25);
background-color: lighten($vert, 25);
}
&.matiere {
color: darken($fond, 30);
background-color: lighten($fond, 25);
}
&.lieu {
color: darken($rouge, 25);
background-color: lighten($rouge, 25);
}
&.year {
background-color: darken($rouge, 20);
color: #fff;
display: none;
}
&.avis-len {
background-color: transparent;
border: 1px solid #eee;
border-bottom: 3px solid;
padding: 4px;
padding-bottom: 2px;
&.avis-vide {
border-bottom-color: #ddd;
}
&.avis-court {
border-bottom-color: lighten(#ff0, 20);
}
&.avis-moyen {
border-bottom-color: lighten($vert, 25);
}
&.avis-long {
border-bottom-color: lighten($fond, 10);
}
}
}
&:after {
content: "";
flex: 1000;
}
}
section.profil {
background: #fff;
max-width: 600px;
padding: 5px 15px;
margin: 5px auto;
margin-bottom: 15px;
div.infos {
border-bottom: 3px solid $vert;
display: flex;
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
}
}
section.two-cols {
display: flex;
display: flexbox;
align-items: center;
& > * {
flex: 1;
width: 50%;
margin: 10px;
}
}
ul.mes-emails {
li {
display: flex;
background: #fff;
margin: 5px;
padding: 10px;
min-height: 70px;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
& > * {
flex: 1;
text-align: center;
}
.adresse {
text-align: left;
font-weight: bold;
}
.confirmee {
width: 20px;
}
.supprimer {
flex: 0.7;
}
form {
display: flex;
align-items: center;
justify-content: space-around;
.field {
flex: 1;
}
}
}
}
//
//
// Détail d'un stage
@import "_stage_detail.scss";
//
//
// Formulaires
// Général
input, textarea, select, div.tinymce, option, optgroup:before {
background: #fff;
font-size: 1em;
font-family: $textfont;
line-height: 1.3em;
font-weight: 500;
padding: 5px;
text-align: left;
&:focus, &.mce-edit-focus {
background-color: lighten($fond, 40%);
outline: none;
}
}
input[type='text'], input[type='password'],
input[type='email'], input[type='number'], textarea, select {
border:none;
border-bottom: 1px solid $fond;
width: 100%;
max-width: 100%;
transition: border 1s ease-out, background 1s ease-out;
}
select {
-moz-appearance: none;
appearance: none;
width: auto;
margin-right: 5px;
cursor: pointer;
padding: 0;
padding-right: 30px;
background: url($staticurl + "images/choix.svg") no-repeat;
background-position: right center;
background-color: #fff;
background-size: contain;
option {
padding: 3px;
white-space: pre-wrap;
}
optgroup {
option {
padding-left: 10px;
}
&:before {
font-weight:bold;
}
}
}
input[type="submit"], .btn {
font: $textfontsize $textfont;
background-color: $fond;
color: #fff;
border: 1px solid darken($fond, 30%);
border-radius: 5px;
padding: 8px 12px;
display: inline-block;
}
p.submits {
text-align: right;
}
form .commentaire {
font-style: italic;
}
.edit-btn {
border-color:darken($jaune, 30%);
color: #000;
background: url($staticurl + "images/edit.svg") no-repeat right center;
background-color:lighten($jaune, 10%);
background-origin: content-box;
background-size: contain;
&:after {
content: "";
width: 30px;
display: inline-block;
}
}
textarea, div.tinymce {
font-family: $paragraphfont;
border:none;
border-left: 1px solid $fond;
height: auto;
min-height: 200px;
transition: border 1s ease-out, background 1s ease-out;
}
textarea {
height: 200px;
resize: vertical;
}
// Formulaire et labels
form {
.field {
margin: 5px 0;
display: flex;
background: #fff;
padding: 10px;
label, .label {
display:inline-block;
width: 250px;
text-align: right;
margin-right: 12px;
padding-top: 5px;
flex-shrink: 0;
&.required:before {
margin-right: 5px;
content:"*";
color: $rouge;
}
}
label {
font-family: $headfont;
font-weight: bold;
}
.help_text {
font-style: italic;
font-size: 0.9em;
}
.input {
display:inline-block;
flex-grow:1;
margin-right:10px;
}
}
}
// taggit autosuggest
ul.as-selections,
.selectize-control.multi {
display: flex;
flex-wrap: wrap;
li {
display:inline-block;
}
.selectize-input, .selectize-dropdown {
font-size: 100%;
line-height: 1.1;
}
.as-selection-item,
.selectize-input > div {
padding: 0 5px;
background: $compl;
color: #fff;
margin: 5px;
border-radius: 2px;
font-weight: 500;
a.as-close {
color: #fff;
-webkit-cursor: pointer;
cursor: pointer;
margin-right: 5px;
}
&.selected {
background: $fond;
}
}
.as-original {
flex-grow: 1;
min-width: 200px;
input {
width: 100%;
}
}
}
div.as-results {
position: relative;
z-index: 2;
ul {
position: absolute;
width: 100%;
background: #fff;
border: 1px solid lighten($fond, 30%);
li {
padding: 3px 5px;
}
li.as-result-item {
&.active {
background: lighten($compl, 30%);
}
}
li.as-message {
font-style: italic;
}
}
}
//
//
// Fenêtre
.window {
display:none;
position:fixed;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
z-index: 50;
&.visible {
display:block;
}
.window-bg {
background: #000;
opacity: 0.7;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.window-content {
position: relative;
margin: 0 auto;
padding: 20px;
margin-top: 50vh;
transform: translateY(-50%);
z-index: 1;
background: #eee;
max-width: 600px;
width: 90%;
max-height: 100%;
overflow: auto;
form {
label, .label {
width: 150px;
}
}
}
.window-closer {
position: absolute;
top: 0;
right: 0;
padding: 12px;
z-index: 3;
&:after {
content: "×";
}
}
}
//
//
// Widget choix et ajout de lieux
#lieu_widget {
.window-content {
max-width: 800px;
}
.lieu-ui {
position: relative;
width: 100%;
min-width: 150px;
flex: 2;
.map {
height: 400px;
width: 100%;
}
&.hidden {
display: none;
}
.masked {
visibility: hidden;
}
}
.lieu-choixmodif, .lieu-options {
display: none;
}
.lieu-global {
display: flex;
width: 100%;
flex-wrap: wrap;
&.with-options {
.lieu-options {
display: block;
}
}
}
&.modif, &.edit {
.lieu-global.with-options .lieu-options {
display: none;
}
}
.lieu-options {
padding: 7px;
max-width: 350px;
flex: 3;
.lieu-suggestions {
max-height: 300px;
overflow-y: auto;
li {
position: relative;
background: #fff;
margin: 2px;
padding: 4px;
font-size: 0.9em;
&:hover {
background: #ccc;
}
p {
margin: 2px 0;
}
.lieu-nom {
font-weight: bold;
}
.lieu-infos {
font-size: 0.8em;
display:flex;
width: 100%;
justify-content: space-between;
span {
display: inline-block;
text-overflow: ellipsis;
overlow: hidden;
}
}
}
}
}
&.modif {
.lieu-choixmodif {
display: unset;
}
}
&.modif, &.attente {
.lieu-ui {
display: none;
}
}
&.edit {
.lieu-ui {
.lieu-acinput {
display:none;
}
.map {
height: 200px;
}
}
}
#avis_lieu_vide {
display:none;
}
.message {
background: lighten($compl, 30);
padding: 5px;
font-style: italic;
font-size: 0.9em;
&.hidden {
display: none;
}
}
}
a.lieu-change {
color:#fff;
background: $compl;
overflow: hidden;
display: inline-block;
max-width: 250px;
text-overflow: ellipsis;
white-space: nowrap;
padding: 5px;
border-radius: 5px;
margin-right: 7px;
&.ajout:before {
content: "+";
margin-right: 5px;
}
}
#stages-map {
width:100%;
height: 600px;
max-height: 90vh;
}
#id_stage-thematiques {
display: none;
}
// Index
.homeh1 {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.2em;
padding-bottom: 10px;
border-bottom: 3px solid #000;
margin-bottom: 15px;
h1 {
margin-bottom: 3px;
}
& > * {
display: inline-block;
}
p {
text-align: right;
}
}
.betacadre {
background: lighten($rouge, 20%);
padding: 10px;
}
.entrer {
background: #fff;
max-width: 500px;
padding: 15px;
text-align: center;
margin: 15px auto;
.archicubes {
border-top: 2px solid $vert;
margin-top: 5px;
padding-top: 5px;
font-size: 0.9em;
}
}
article.promo {
display:block;
font-size: 1.1em;
.explications {
display:table;
&:first-child {
direction: rtl;
& > * {
direction: ltr;
}
}
& > div {
display:table-cell;
vertical-align: middle;
text-align: center;
p {
margin: 15px 15px;
}
}
}
}
// FAQ
.faq-toc {
font-family: $paragraphfont;
display: block;
max-width: 700px;
margin: 0 auto;
ul {
margin: 20px;
li {
a {
color: #000;
display: block;
padding: 5px;
}
&.toc-h1 {
display:none;
}
&.toc-h2 a {
background: lighten($compl, 20%);
}
&.toc-h3 a {
padding-left: 10px;
background: #fff;
font-weight: normal;
}
a:hover {
color: darken($fond, 30);
background: lighten($fond, 20) !important;
}
}
}
}
.faq {
article {
background: #fff;
padding: 15px;
h2 {
background-color: lighten($compl, 20%);
color: darken($compl, 20%);
margin: -15px;
padding: 15px;
}
h3 {
color: darken($vert, 20%);
background-color: lighten($vert, 30%);
margin: 0 -15px;
margin-top: 30px;
padding: 10px 15px;
&:nth-child(2) {
margin-top: 0;
}
}
ul {
padding-left: 20px;
li {
list-style: initial;
}
}
p, ul {
font-family: $paragraphfont;
font-size: $textfontsize - 1px;
max-width: 700px;
margin-left: auto;
margin-right: 5%;
}
}
}
//
//
// Modération
table.stats {
width: 100%;
background: #fff;
margin: 20px 0;
cellspacing: 1px;
th {
font-weight: bold;
border-top: 1px solid #000;
border-bottom: 1px solid #999;
}
td, th {
padding: 5px 3px;
text-align: center;
}
}
//
//
// Recherche
@import "_recherche.scss";
//
//
// Responsive
@import "_responsive.scss";