/* ------------------ GLOBAL STYLE ------------------- */ @mixin li-no-margin() { li { margin: 0; } } .no-pills { list-style:none; } .align { &-center {text-align: center;} &-left {text-align: left;} &-right {text-align: right;} } /* ------------------ HEADERS ------------------- */ header h1 { border-style:none !important; color: $color-light; font-weight:700; font-size:5.4em; font-style:oblique; text-shadow: 0px 2px 12px rgba(0, 0, 0, 0); padding-bottom:0px; margin:auto; text-align:center; line-height: 1.5em; } .navbar { box-shadow: $large-shadow; @include borders(); border-left: 0; border-right: 0; ul { padding-bottom:0; } @include li-no-margin(); } .dropdown-menu { box-shadow: $narrow-shadow, $inset-shadow; } @import 'cards'; /* ------------------ FOOTER ------------------- */ footer { color: $color-footer-text; margin-top:40px; } /* social media */ ul.social { font-size:1.5em; padding-bottom:1em; margin:auto; text-align:center; li { margin:0; list-style: none; display: inline; a { color: $color-footer-back; background-color: $color-footer-text; padding:0.3em; padding-left:0.36em; padding-right:0.36em; vertical-align:middle; border-radius:100%; &:hover { color:$color-footer-text; background-color: $color-footer-back; } } } } /* ------------------ BUTTONS ------------------- */ .btn { @include borders(); @include border-radius(); box-shadow: $large-shadow, $inset-shadow; text-shadow: 0px -1px 0px rgba(0,0,0,0.3); } .btn:hover { position:relative; box-shadow: $narrow-shadow, $inset-shadow; @include borders(); } .btn:active { position:relative; box-shadow: $inset-shadow-inverted; @include borders(); } .btn-group { box-shadow: $large-shadow; } .btn-group .btn { box-shadow: $inset-shadow; @include border-radius(); &:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } &:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } } .btn-group .btn:hover { position:relative; box-shadow: $inset-shadow; } .btn-group .btn:active, .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active, .show > .btn.dropdown-toggle { position:relative; box-shadow: $inset-shadow-inverted!important; @include borders(); } .btn:focus, .btn-primary:focus, .btn-secondary:focus, .btn-danger:focus, .btn-warning:focus, .btn-success:focus, .btn-info:focus, .btn-dark:focus, .btn-light:focus { position:relative; box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3); outline: none; } /* ------------------ BREADCRUMB ------------------- */ .breadcrumb { @include border-radius(); box-shadow: $large-shadow, $inset-shadow; border: 0; background-color: $color-light2; margin-bottom:1.2em; @include li-no-margin(); } /* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */ .share-buttons { margin:15px; } .reagir { text-align:right; } /* ------------------ PREVIEWS ------------------- */ .previews-section { display: flex; align-content: flex-start; flex-wrap: wrap; } .preview-container { margin-bottom:1em; padding:0.4em; width:100% } @media(max-width:767px){} @media(min-width:768px){} @media(min-width:992px){ .prev-col-2 .preview-container { width:50%; } .prev-col-3 .preview-container { width:33%; } .prev-col-4 .preview-container { width:25%; } } .card-preview { @include border-radius(); width:100%; margin:auto; box-shadow: $large-shadow, $inset-shadow; } .preview-link:hover { text-decoration:none!important; } .preview-item { height:200px; overflow:hidden; font-size:0.9em; line-height: 1.5em !important; padding:0.2em; text-align:justify; background-color:rgba(0,0,0,0.05); color:rgba(0,0,0,0.4); position: relative; display: flex; -ms-flex-align: center !important; align-items: center !important; justify-content: center; } .preview-content { max-height:200px; } .preview-content > p { width:100%; margin:auto; } .preview-content > p.p-img { text-align:center; margin:auto; padding:auto; display: block; width:100%; } .preview-content > p > img { max-width:100%; height:auto; vertical-align:middle; margin:auto; text-align:center; } .preview-item h1, .preview-item h2, .preview-item h3, .preview-item h4, .preview-item h5, .preview-item h6, .preview-item h7 { margin-bottom:0px; max-width:100%; display:none; } .preview-item h1 { display:none; } .preview-overlay { height: 100%; width: 100%; opacity: 0; top: 0; left: 0; position: absolute; padding: 0; transition: opacity .5s; color: $color-light; background-color: rgba(0,0,0,0.5); text-shadow: 1px 1px 0px rgba(0,0,0,0.7); backdrop-filter: none; } .preview-overlay h1 { max-width:100%; padding-top:0.3em; margin:auto; margin-bottom:0px; text-align:center; display:block; font-size:2em; color: $color-light; } .preview-overlay h1,.preview-overlay h2,.preview-overlay h3,.preview-overlay h4,.preview-overlay h5,.preview-overlay h6,.preview-overlay h7,.preview-overlay h8,.preview-overlay h9,.preview-overlay h10 { color: $color-light; text-shadow: 1px 1px 0px rgba(0,0,0,0.7); } .preview-item:hover .preview-overlay { opacity: .9; transition: opacity .5s; backdrop-filter: blur(2px); } .comment-text { margin-top:0.8em; } .card-preview time { margin-bottom:0.4em; display:block; }