libreavous/squelettes/scss/styles/_perso.scss

871 lines
15 KiB
SCSS

// perso
// les différences
.btn {
padding: 0.5em 1em;
font-weight: 500;
&:hover {
background:$couleurPrincipaleOn;
color:$couleurPrincipale !important;
}
}
.liens .btn {
padding: 0.7em 1em;
}
.btn.blanc {
border-radius: 0.7em;
}
span.btn {
cursor:text;
}
.page_wrapper {
background:$couleurPrincipale url('../images/egalizer.png') repeat-x center -150px;
/* background-attachment:fixed; */
@media ($bp-small) {
background:$couleurPrincipale url('../images/egalizer-480.png') repeat-x center -150px;
}
}
.page_header {
padding:0;
> .page_container {
background-color:$couleurSecondaire;
}
.header_title {
min-width: 150px;
}
.header_menu {
flex-grow: 2;
padding:$spacer;
.nav {
padding-top:0;
}
.liens {
text-align:right;
margin-top:0.7rem;
.btn {
float:right;
margin-top:1.55rem;
.fas:before {
font-size:1rem;
}
&:hover, &:focus {
background:$couleurPrincipaleOn;
color:$couleurPrincipale !important;
.fas:before {
color:$couleurPrincipale !important;
}
}
}
.sociaux {
float:right;
display:inline-block;
font-size:0.8rem;
margin:1.8rem 1.5rem 0 0;
.socicon {
background:none !important;
color:$blancTransparent;
&:hover, &:focus {
color:$couleurPrincipaleOn;
}
}
}
.formulaire_spip.formulaire_abomailman_mini_une_liste {
width:230px;
float:right;
position:relative;
margin:0 0 0 $spacer;
text-align:left;
.reponse_formulaire {
position: absolute;
top: 100%;
margin: 0;
}
}
}
}
.nav a {
border:0;
color:white;
padding:0.3em 0.7em 0.2em;
margin-right:0;
margin-left:0;
border-radius:4px;
/* background-color:$couleurSecondaire; */
.on &,
&.on,
&:focus,
&:hover,
&:active {
background-color:$couleurPrincipaleOn;
color:$couleurPrincipale;
}
}
> .page_container .nav > ul .loupe a {
i.fa-search {
background-color:$blancTransparent;
font-size:0.8rem;
color:$couleurSecondaire;
&:hover {
background-color:$couleurPrincipaleOn;
color:$couleurPrincipale;
}
}
}
}
.page_header_container {
align-items: flex-start;
}
.arbo {
@include visuallyhidden;
}
.encart {
float:right;
text-align:right;
font-size:1.1rem;
margin-left:2rem;
span {
font-size:145%;
&.bientot {
display:inline-block;
color:$couleurSecondaire;
font-weight:900;
}
&.btn {
background:$couleurSecondaire;
color:white !important;
font-weight:900;
margin:0.6rem 0 0.3rem;
padding:1.3rem 2rem;
&:first-letter {
text-transform:uppercase;
}
}
}
}
.texte_accueil {
background-color:white;
.main {
padding-bottom:1rem;
}
}
.article-resume {
background-color:white;
padding:$spacer;
}
.page_main {
overflow:hidden;
}
.composition_emissions, .composition_emission, .composition_chroniques {
.page_main_content {
flex-direction: column;
}
.page_content, .page_aside {
}
.page_content {
}
}
.page_content {
.page_rubrique & {
/* background-color:#fff; */
}
}
.page_aside {
> ul .article-resume {
padding:0;
}
}
.page_content, .page_aside, .page_extra {
> * {
margin:0 0 ($spacer*2);
padding:$spacer ($spacer*4);
&.page_extra {
padding:0;
}
&.btn {
background:$couleurPrincipaleOn;
color:$couleurPrincipale !important;
&:hover {
background:$couleurSecondaire;
}
}
}
h1 {
margin-bottom:0;
background-color:white;
}
.page_article & > article, .composition_emission & > article, > .texte, > .ps, .rubrique_blog & > section, > .periode,
.prochaine_emission, .derniere_emission {
background-color:white;
}
> .ajaxbloc {
padding-top: 0;
margin-top: 6rem;
position: relative;
.emissions > h2, .emissions > a {
position:absolute;
margin-top:-2.6rem;
}
.article_blog & {
margin-top:0;
padding:$spacer ($spacer*2);
background-color:white;
.pagination .pagination-items a, .pagination .lien_pagination a {
color:$couleurPrincipale;
}
}
}
}
h2 {
font-weight:900;
}
.fl {
border-top:2em solid $couleurPrincipale;
border-bottom:2em solid $couleurPrincipale;
margin:0 -1000px;
padding:2em 1000px;
background:white;
}
.fb {
padding:2em 0;
> h2 {
margin-top:2em;
}
}
.photoapril {
margin-bottom:1em;
}
.galeriephotos {
float:right;
font-size:1.2rem;
line-height: 1.8;
}
.licence {
padding:1em;
line-height:1.2;
margin-top:2em;
background:$couleurBackgroundTexteBleu;
}
.detail_emission {
ul { list-style:none;
> li {
padding-left:1em;
position:relative;
&:before {
position:absolute;
left:0;
top:0.6em;
@include triangle(right,$couleurSecondaire,0.35em,1.8);
}
}
}
}
.btn.blanc {
color:$couleurPrincipale !important;
background:white;
border:1px solid rgba($couleurPrincipale,0.2);
border-radius:0.5em;
&:hover {
background:$couleurPrincipaleOn;
}
&.bold {
border-color:$couleurPrincipale;
}
}
.article__infos {
position:relative;
height:auto;
margin:0;
width: auto;
white-space: inherit;
clip: unset;
clip-path: unset;
font-size:1em;
margin:-$spacer 0 0 -($spacer*4);
overflow:visible;
.composition_blog & {
margin:0;
}
}
.num_emission {
display:inline-block;
width:150px;
padding:0.5rem;
margin-right:1.5rem;
font-weight:700;
font-size:2.8rem;
text-align:center;
color:$couleurSecondaire;
background:$couleurBackgroundTexte;
font-family:$typo-titre;
}
.article__date {
display:none; /* provisoire, par simplicite */
}
.composition_emissions, .composition_emission, .emissions, .derniere_emission, .prochaine_emission {
.article__date {
display:inline;
font-size:1.5rem;
color:$couleurSecondaire;
font-weight:700;
font-family:$typo-titre;
}
}
.composition_blog {
.article__date {
display:inline-block;
}
}
.liste.articles.blog {
padding:$spacer ($spacer*2);
background-color:white;
.liste-items {
list-style:none;
margin:0 0 ($spacer*2);
.item {
border-top:1px solid $couleurPrincipale;
&:first-child {
border:0;
}
.article-resume {
padding-left:0;
padding-right:0;
}
}
}
}
.lecteur {
@include flex;
align-items:center;
margin-bottom:($spacer*3);
> .podlove_wrapper {
/* flex-grow:2; */
width:76%;
}
}
.telecharger {
list-style:none;
width:200px;
padding:0 0 0 ($spacer*2);
margin:0;
li {
padding:($spacer/2) 0 ($spacer/2);
}
.btn.podcast {
width:100%;
padding-left:2.2rem;
padding-bottom:0.3rem;
font-size:1.15rem;
text-transform:none;
&:before {
left:0.8rem;
}
}
}
.btn.podcast {
padding:0 0.5em 0.1em 1rem;
position:relative;
text-align:left;
border-width:0.25em;
border-color:$couleurSecondaire;
color:$couleurSecondaire !important;
font-weight:900;
font-size:0.6rem;
text-transform:uppercase;
&:before {
@include triangle(right, $couleurSecondaire, 0.5em);
position: absolute;
left: 0.4rem;
top: 50%;
margin-top:-0.45em;
}
small {
font-size:0.7em;
font-weight:400;
}
&.mp3 {
border-color:$couleurPrincipale;
color:$couleurPrincipale !important;
&:before {
@include triangle(right, $couleurPrincipale, 0.5em);
}
}
&:hover, &:active, &:focus {
background:$couleurPrincipaleOn !important;
border-color:$couleurPrincipaleOn !important;
color:$couleurPrincipale !important;
&:before {
@include triangle(right, $couleurPrincipale, 0.5em);
}
}
}
.sujet_autre {
background:$couleurBackgroundTexte;
padding:$spacer ($spacer*4);
margin:($spacer*2) -($spacer*4) -($spacer*2);
.article_emission & > div {
@include flex;
@include vendor-prefix(flex-wrap, wrap);
> * {
width:50%;
&:nth-child(odd) {
padding-right:$spacer*2;
}
&:nth-child(even) {
padding-left:$spacer*2;
}
}
}
// pour insertion dans le texte/chapo avant d'avoir le podcast
.chapo & {
margin-bottom: -($spacer);
clear:both;
font-size:1rem;
> * {
font-size:1.2rem;
}
}
}
/* notation */
.formulaire_jaime_jaimepas {
.note, .reponse_formulaire {
float:left;
}
}
div.star-rating, div.star-rating a {
background-image:url('img/star.png');
}
div.rating-cancel a {
background-image:url('img/delete.png');
}
/**/
.sociaux {
.socicon {
display: inline-block;
}
a.spip_out {
border:0;
}
}
/* bloc connex */
.page_connex {
margin:3rem 0 0;
padding:0 0 1rem;
background:$couleurPrincipale;
}
.page_connex_content {
color:white;
h2 {
color:white;
font-size:1rem;
}
ul {
list-style:none;
margin-left:0;
li {
margin:0 0 0.5rem;
}
}
a {
border:0;
}
}
/**/
.page_footer {
.article {
@include media($bp-small-up) {
@include flex;
justify-content:space-between;
> * {
width: calc(50% - 1rem);
}
}
.article__texte, .article__chapo {
margin-bottom:2rem;
font-weight:400;
strong, i, .btn {
font-size:115%;
}
}
}
.formulaire_spip.formulaire_recherche {
/* max-width:100%; */
}
}
/* page sommaire */
.body__sommaire .page_main {
h1 {
margin: 1em 0 0.8em;
}
}
.derniere_emission {
position:relative;
margin-top:($spacer*6);
> h2 {
margin-top:-($spacer*3.6);
margin-bottom:($spacer*0.7);
}
}
.derniere_emission, .liste.emissions {
padding-bottom:0;
> h2 {
color:white;
}
.texte_content {
flex:1;
padding-bottom:$spacer;
h1 {
font-size:1.6rem;
}
h2 {
font-size:1.2rem;
}
p.flex {
margin-bottom:1rem;
padding-right:2rem;
align-items:center;
.podcast {
font-size:110%;
text-transform:none;
padding-left:1.6rem;
}
}
}
.article__infos {
margin-top:0;
.num_emission {
font-size:2rem;
padding:0.1rem 1rem;
width: auto;
}
.article__date {
font-size:1rem;
color:$couleurPrincipale;
font-weight:400;
}
.btn.blanc {
float:right;
margin-top:0.8rem;
margin-left:0.5rem;
font-weight:700;
}
}
.photo {
margin-right:-4rem;
background:$couleurBackgroundTexte;
.photoapril {
margin:0;
}
a {
display:inline-block;
padding:0 1rem;
font-size:0.9rem;
font-weight:500;
color:$couleurSecondaire;
}
}
}
.liste.emissions {
.cartouche {
margin:0;
}
> h2 {
margin-bottom:($spacer*0.6);
}
> ul {
list-style:none;
padding:0;
margin:0 -($spacer*4);
> li {
margin-bottom:2px;
}
}
.emission-resume.article-resume {
align-items:center;
padding: 0 1em;
margin:0;
.article__infos {
margin-left:-$spacer;
}
}
}
.liste.emissions.chroniques {
> ul > li {
background-color:white;
margin-bottom:$spacer;
}
.emission-resume.article-resume {
align-items:start;
}
}
.prochaine_emission {
.article__date {
font-size:1rem;
color:$couleurPrincipale;
font-weight:400;
}
.chapo {
font-size:1.2rem;
}
}
.orange {
color:$couleurSecondaire;
}
.pagination .pagination-items a, .pagination .lien_pagination a /* spip 3 et 4 */ {
color:white;
.composition_blog & {
color:$couleurPrincipale;
}
}
/*! Plusieurs typographies sont finalement trop grosses, j'ai réduit. */
h1, .h1 {
font-size: 2.6em;
}
h2 {
font-weight: 700;
}
.article-resume__titre a {
color: #2E5281;
border-bottom: inherit;
}
/*! certaines graisses sont trop forte en 700.*/
.page_header > .page_container .nav a {
font-weight: 500;
}
/*! Sur le menu j'ai augmenté la hauteur du bouton RSS et le champ recherche. Pour le menu avec le hover je propose de modifier le design, car le bouton bleu cyan au rollover est trop prégnant. Je convertis en filets simlple 2pt. Par contre j'ai basculé le padding sur le "li" sinon le filet sous le "a" débordait de chaque côté (voir copie-écran de la retouche css de la bannière)
Sur le menu, je vais voir s'il est possible de faire des filets de rollover composés de tirets et de points avec les fonctions css border-image. Ce qui ferrait un rappel du design.*/
/*! cyan ausurvol*/
.page_header .nav a:hover, .page_header .nav a.on, .page_header .nav a.active {
color: white !important;
background-color: transparent !important;
border-bottom:3px solid #00c4f5;
}
/*! bleu charte ensuite */
.page_header .nav a.on, .page_header .nav a.active {
border-bottom:3px solid #2E5281;
}
/*.emission-programme ul::before {
content: "Sujet Principal :";
font-size: 1.3em;
font-weight: 700;
font-family: 'Montserrat';
line-height: 2em;
margin-left: -1em;
}*/
a.spip_out {
color: #2E5281;
border-bottom: 2px solid #FDC;
}
.formulaire_spip input[type="text"]{
min-height: 2.5em;
line-height: 1.875em;
border-radius: 3px;
}
/*! trop gros, j'ai réduis. */
.num_emission {
font-size: 2.3rem;
}
.nav li {
margin: 0 0.7em;
}
.page_header .nav a {
padding: 0.3em 0em 0.2em;
color: white !important;
background-color: inherit;
border-radius:0;
border-bottom:3px solid transparent;
}
/*! couleurs des liens sortants selon la maquette */
.formulaire_spip .abonnement button::after {
bottom: 0.8rem;
}
/*! fond du cartouche galerie selon la maquette avec ombrages*/
.fl {
background: #EEF1F5;
box-shadow: inset 0px 1px 20px rgba(0, 0, 0, 0.5);
}
/*! Polices du pied de page plus maigre */
.page_footer p {
font-size: 0.8rem;
font-weight: 200;
a, a.spip_out {
display:inline;
font-weight:400;
color:white;
border-bottom-width:1px;
}
}
@media (max-width:940px) {
.page_header > .page_container {
.nav {
padding-top:($spacer/2);
font-size:0.95rem;
z-index:7;
position:static;
> ul {
position:absolute;
background:$couleurPrincipale;
width:100%;
top:36px;
left:-100%;
padding:$spacer/2 $spacer;
text-align:center;
z-index:10;
&.ouvert{
left:0;
}
a {
color:white;
border:0;
display:block;
margin:0;
padding:0.5rem;
&:hover, &:focus, &.on {
background:$couleurSecondaire;
}
}
li {
display:block;
}
.loupe {
.fas {
color:white;
}
.formulaire_recherche.vu {
right:50%;
margin-right:-160px;
max-width:320px;
form {
padding:0.5rem;
&:before {
display:none;
}
}
}
}
}
}
}
.btn-nav {
display:block;
}
.header_initiatives {
.btn-initiatives {
display:block;
}
.nav {
position:absolute;
width:100%;
top:36px;
left:-100%;
@include vendor-prefix(transition,all 0.3s ease-in-out);
&.ouvert {
left:0;
}
ul, .initiatives {
display:inline;
}
}
}
}
@include media(min-width:941px) {
.page_header > .page_container .nav {
position:relative;
}
}
@media (max-width:804px) {
.page_header .header_menu .liens {
margin-top:0;
}
.page_header .header_menu .liens .sociaux {
margin-top:0.8rem;
}
}
@media (max-width:650px) {
.page_header .header_menu .liens .btn {
margin-top:0.5rem;
}
}
@media (max-width:580px) {
.page_header > .page_container .nav {
padding-top:0;
}
.page_header .header_menu {
padding:0.3rem 1rem;
}
.page_header .header_menu .liens .sociaux {
margin-top:0;
}
.article-resume > :last-child.telecharger {
margin-bottom:1rem;
}
.page_header .header_menu .liens .formulaire_spip.formulaire_abomailman_mini_une_liste {
width:160px;
}
.page_header .header_title {
min-width: 100px;
}
}