@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: $compl * 0.9; 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: $barre * 0.6; } } } } } 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%; //border: 1px solid $fond * 1.3; 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; } } // // // 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 $fond * 0.7; 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 { display: flex; flex-wrap: wrap; li { display:inline-block; } .as-selection-item { 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 { .lieu-ui { position: relative; .map { height: 400px; width: 100%; } &.hidden { display: none; } .masked { visibility: hidden; } } .lieu-choixmodif { display: none; } &.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";