Untitled diff
481 removals
947 lines
433 additions
902 lines
/* --------------------------------------
/* --------------------------------------
content.css
content.css
Contient les elements :
Contient les elements :
- conteneurs generaux, elements de module,
- conteneurs, elements de module,
- pagination des pages,
- pagination des pages,
- exploreur de categorie,
- exploreur de categorie,
- gestion des categories,
- gestion des categories,
- mini-module,
- mini-module,
- message postes,
- message postes,
- maintenance,
- maintenance,
-----------------------------------------*/
- sharing elements
-------------------------------------- */
/* -- Conteneurs, elements de module -- */
/* -- Conteneurs, elements de module -- */
/* ------------------------------------ */
/* ------------------------------------ */
section,
section,
article {
article {
position: relative;
position: relative;
margin: 0 auto;
margin: 0 auto;
width: 100%;
width: 100%;
vertical-align: top;
vertical-align: top;
padding: 0 0 0.809em;
}
}
@media (min-width: 769px) {
@media (min-width: 769px) {
section,
section,
article {
article {
margin: 1em auto;
margin: 0.809em auto;
width: 98%;
}
}
}
}
/* --- Titre d'une page ou d'un element d'un module --- */
/* --- Titre d'une page ou d'un element d'un module --- */
section header h1,
section header,
article header h1 {
article header {
border-bottom: 1px solid #366493;
padding: 0 0.809em;
}
}
@media (min-width: 769px) {
article header {
margin: 0 0 0.809em 0;
}
}
section header a:hover {
section header a:hover {
text-decoration: none;
text-decoration: none;
}
}
section header h2,
.cat-actions {
article header h2 {
text-align: right;
margin-left: 15px;
border-bottom: 1px solid #366493;
}
}
section header h3,
.elements-container {
article header h3 {
padding: 1.618em 0 0
margin-left: 15px;
border-bottom: 1px solid #366493;
}
@media (min-width: 769px) {
section header,
article header {
margin: 0 0 1em 0;
}
}
}
/* --- Titre d'un bas de page --- */
/* --- Titre d'un bas de page --- */
@media (min-width: 769px) {
@media (min-width: 769px) {
section footer,
section footer,
article footer {
article footer {
margin-bottom: 1.5em;
margin-bottom: 1.618em;
}
}
}
}
section footer,
section footer,
article footer {
article footer {
clear: both;
clear: both;
}
}
/* --- Icones actions (edition, suppression, etc) --- */
/* --- Icones actions (edition, suppression, etc) --- */
span.actions {
.actions {
float: right;
float: right;
}
}
header span.actions a {
.actions a {
font-size: 1.2rem;
display: inline-block;
padding: 0 0.456em;
}
@media (max-width: 768px) {
.actions a {
padding: 0 0.809em;
}
}
}
.more {
header h2 .actions {
padding: 10px 5px 0;
font-size: 0.456em;
font-size: 11px;
font-size: 1.1rem;
font-style: italic;
}
}
@media (min-width: 769px) {
.actions-menu {
.more {
position: relative;
margin: 0 0.2em 2em 1.2em;
padding: 0;
}
}
}
/* --- Contenu --- */
.actions-title {
.content {
position: relative;
padding: 0 1em;
display: block;
text-align: justify;
padding: 0.309em 0.456em;
}
}
@media (min-width: 769px) {
@media (max-width: 768px) {
div#main.main-with-left.main-with-right section .content {
.actions-title {
padding: 0 5px;
position: relative;
display: block;
padding: 1em 1.309em;
}
}
}
.actions-menu.opened .fa-actions-menu:before {
content: "\f00d";
}
.actions-submenu {
position: absolute;
list-style: none;
padding: 0;
top: 100%;
left: -9999px;
width: 250px;
z-index: 1;
}
.opened .actions-submenu {
left: auto;
right: 0;
}
.action {
font-size: 1.5rem;
padding: 0.309em 0.456em;
}
}
@media (max-width: 768px) {
@media (max-width: 768px) {
.content {
.action {
padding: 1em 0;
padding: 1em 0.618em;
}
}
}
}
.action i {
text-align: center;
width: 20px;
}
/* --- Contenu --- */
.content {
text-align: justify;
padding: 0.809em;
}
.content::after,
.content::before {
content: '';
display: block;
clear: both;
}
.content + aside {
.content + aside {
clear: both;
clear: both;
padding: 0.809em;
}
}
/* --- Block --- */
/* --- Block --- */
.block {
.block {
padding: 0.8em;
border-width: 2px 1px 1px 1px;
background-color: #FBFDFF;
border-style: solid;
border-style: solid;
border-width: 2px 1px 1px 1px;
border-color: transparent;
border-color: #366493 #F1F1F1 #F1F1F1 #F1F1F1;
margin: 0 0 1.618em;
width: 100%;
}
}
.no-style .block {
@media (min-width: 769px) {
background-color: transparent!important;
.block { width: 98%; }
border: none!important;
}
}
.block .content {
.no-style .block,
margin: 0;
.no-style .block header {
background-color: transparent !important;
border: none !important;
}
}
.block h1 {
.block h1 {
border: none;
border: none;
}
}
.block header {
.block header {
margin: 0 0 1% 0;
margin: 0 0 0.618em 0;
}
}
.block footer {
.block footer {
margin: 0;
margin: 0;
}
}
.elements-container {
/* --- Gestion en colonnes pour ecran large --- */
display: flex;
@media (min-width: 769px) {
display: -ms-flexbox;
.columns-1 .block { width: 98%; }
display: -webkit-flex;
.columns-2 .block { width: calc(100% / 2.1); }
flex-direction: column;
.columns-3 .block { width: calc(100% / 3.1); }
-ms-flex-direction: column;
.columns-4 .block { width: calc(100% / 4.1); }
-webkit-flex-direction: column;
.columns-5 .block { width: calc(100% / 5.1); }
flex-wrap: wrap;
.columns-6 .block { width: calc(100% / 6.1); }
-ms-flex-wrap: wrap;
.columns-7 .block { width: calc(100% / 7.1); }
-webkit-flex-wrap: wrap;
align-content: flex-start;
.block-xlarge { width: 100% !important; }
-ms-flex-line-pack: start;
-webkit-align-content: flex-start;
justify-content: space-around;
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
}
}
.elements-container > .block {
/* --- Gestion des media --- */
flex: 0 1 auto;
.thumbnail-item {
-ms-flex: 0 1 auto;
padding: 0.309em 0;
-webkit-flex: 0 1 auto;
display: block;
}
}
/* Gestion en colonnes pour ecran large*/
@media (min-width: 769px) {
@media (min-width: 769px) {
.elements-container {
.thumbnail-item {
flex-direction: row;
max-width: 38%;
-ms-flex-direction: row;
float: left;
-webkit-flex-direction: row;
padding: 0.309em 0.618em 0.309em 0;
margin-left: -5px; /* @{gutter} */
}
}
.block {
.columns-3 .thumbnail-item,
margin-left: 5px; /* @{gutter} */
.columns-4 .thumbnail-item,
width: 100%;
.columns-5 .thumbnail-item,
}
.columns-6 .thumbnail-item,
.columns-7 .thumbnail-item {
.columns-2 .block { width: calc(100% / 2 - 5px); } /* calc(100% / @{number} - @{gutter}); */
float: none;
.columns-3 .block { width: calc(100% / 3 - 5px); }
max-width: 100%;
.columns-4 .block { width: calc(100% / 4 - 5px); }
padding: 0.309em 0;
.columns-5 .block { width: calc(100% / 5 - 5px); }
}
.columns-6 .block { width: calc(100% / 6 - 5px); }
.columns-7 .block { width: calc(100% / 7 - 5px); }
.block-xlarge { width: 100%!important; } /* Extension du bloc sur une ligne complète */
}
}
/* Gestion en ligne pour petit ecran */
@media (max-width: 768px) {
@media (max-width: 768px) {
.block {
.media-content {
margin-bottom: 5px;
clear: both;
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.media-content object,
.media-content embed,
.media-content video,
.media-content iframe,
.media-content .video-player {
position: absolute;
top: 0;
left: 0;
width: 100%;
width: 100%;
}
height: 100%;
}
}
}
@media (min-width:769px) {
.media-content embed,
.media-content iframe {
width: auto;
height: auto;
}
}
/* ---- Friends content ---- */
/* --- Friends content --- */
.content-friends {
.content-friends {
border-width: 7px 1px 1px 1px;
border-width: 7px 1px 1px 1px;
border-top-color: #103B67;
}
}
.content-privileged-friends {
.content-privileged-friends {
border-width: 7px 1px 1px 1px;
border-width: 7px 1px 1px 1px;
border-top-color: #E2BE47;
}
}
/* -- Pagination des pages -- */
/* -- Pagination des pages -- */
/* -------------------------- */
/* -------------------------- */
section footer ul.pagination {
section footer ul.pagination {
text-align: center;
text-align: center;
}
}
ul.pagination {
ul.pagination {
margin: 0;
margin: 0;
}
}
ul.pagination .fa:before {
ul.pagination .fa:before {
font-size: 0.8em;
font-size: 0.809em;
}
}
ul.pagination-block {
ul.pagination-block {
margin: 5px 0;
margin: 0.309em 0;
}
}
ul.pagination-block li {
ul.pagination-block li {
padding: 2px 2px;
padding: 0.1618em;
}
}
ul.pagination-block li a {
ul.pagination-block li a {
display: inline-block;
display: inline-block;
padding: 2px 7px;
padding: 0.1618em 0.618em;
outline: none;
outline: none;
font-weight: bold;
font-weight: bold;
font-size: 0.8em;
font-size: 0.809em;
text-align: center;
text-align: center;
text-decoration: none;
text-decoration: none;
}
}
ul.pagination-block li a {
ul.pagination-block li a {
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18) 0%, rgba(56, 56, 56, 0.10) 100%);
background-color: #FAFAFA;
border-style: solid;
border-width: 1px;
border-width: 1px;
border-color: #E1E1E1 #D1D1D1 #C9C9C9 #DDDDDD;
border-style: solid;
box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.05);
border-color: transparent;
color: #777777;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.1);
transition: all 0.2s linear;
transition: all 0.2s linear;
}
}
ul.pagination-block li a:hover {
ul.pagination-block li a:hover {
background-color: #FDFDFD;
box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.2), 0 0 2px rgba(0, 0, 0, 0.1);
transition: all 0.1s linear;
transition: all 0.1s linear;
}
}
ul.pagination-block li a:active {
ul.pagination-block li a:active {
background-color: #F1F1F1;
border: 1px solid #DDDDDD;
transition: all 0.2s linear;
transition: all 0.2s linear;
}
}
ul.pagination-block li a.current-page {
ul.pagination-block li a.current-page {
background-color: #366493;
border-color: #1E5083;
color: #F1F1F1;
text-decoration: none;
text-decoration: none;
}
}
ul.pagination-block li a.current-page:hover {
background-color: #517BA6;
border-color: #366493;
}
ul.pagination-block-bis li a.prev-page,
ul.pagination-block-bis li a.next-page {
border: none;
background: none;
box-shadow: none;
text-shadow: none;
}
ul.pagination-block-bis li a.prev-page:hover,
ul.pagination-block-bis li a.prev-page:hover,
ul.pagination-block-bis li a.next-page:hover {
ul.pagination-block-bis li a.next-page:hover {
text-decoration: underline;
text-decoration: underline;
}
}
.pages-pagination a {
.pages-pagination a {
text-decoration: none;
text-decoration: none;
}
}
/* -- Exploreur des categories -- */
/* -- Exploreur des categories -- */
/* ------------------------------ */
/* ------------------------------ */
.explorer .cats,
.explorer .cats,
.explorer .files {
.explorer .files {
width: 100%;
display: inline-block;
display: inline-block;
margin: 5px 0.33%;
margin: 0.309em 0;
width: 48%;
vertical-align: top;
vertical-align: top;
}
}
@media (max-width: 480px) {
.explorer h2 {
font-size: 1.618em;
}
@media (min-width: 481px) {
.explorer .cats,
.explorer .cats,
.explorer .files {
.explorer .files {
width: 100%;
width: calc(100% / 2.1);
}
}
}
}
.explorer .cats {
.explorer .cats {
min-width: 200px;
min-width: 200px;
}
}
.explorer h1 {
margin: 5px 0;
color: #666666;
font-size: 13px;
}
.explorer .content {
.explorer .content {
padding: 5px 0;
padding: 0;
min-height: 120px;
min-height: 120px;
border: 1px solid #DDDDDD;
border-width: 1px;
border-style: solid;
border-color: transparent;
}
}
.explorer .content ul {
.explorer .content ul {
margin: 0;
margin: 0;
padding: 0;
padding: 0;
list-style-type: none;
list-style-type: none;
}
}
.explorer .content ul ul {
.explorer .content ul ul {
margin-left: 22px;
margin-left: 1em;
}
}
.explorer .content ul a.parent {
.explorer .content ul a.parent {
float: left;
float: left;
height: 0;
height: 0;
}
}
.explorer .content ul a.parent i[id^="img2_"] {
.explorer .content ul a.parent [id^="img2_"] {
margin-left: -18px;
margin-left: -1em;
margin-right: 0.1618em;
}
}
.explorer .content ul a {
.explorer .content ul a {
display: block;
display: block;
padding: 3px 0;
padding: 0.228em 0.309em;
color: #666666;
text-decoration: none;
text-decoration: none;
text-align: left;
text-align: left;
}
}
.explorer .content > ul > li > a {
.explorer .content ul i {
padding: 3px 5px;
width: 1.309em;
}
.explorer .content ul .fa {
width: 20px;
vertical-align: top;
vertical-align: top;
margin-right: 0.309em;
}
}
.explorer .content ul .fa:before {
.explorer .content ul i:before {
vertical-align: middle;
vertical-align: middle;
}
}
.explorer .content ul a.parent .fa:first-child {
.explorer .content ul a.parent i:first-child {
width: 14px;
width: 0.809em;
}
.explorer .content ul a.parent .fa:first-child:before {
width: 14px;
font-size: 11px;
}
.explorer .content ul a:hover,
.explorer .content ul a:hover + a {
background-color: #EEEEEE;
}
}
.explorer .content ul .sub a.parent {
.explorer .content ul a.parent i:first-child:before {
padding-left: 4px;
font-size: 0.809em;
}
.explorer .selected {
background-color: #DDDDDD;
}
}
.options {
.options {
float: right;
margin: 0.309em 0;
margin: 5px;
padding: 0.456em 0.809em;
padding: 6px 12px;
max-width: 100%;
max-width: 100%;
background-color: #EEEEEE;
border-width: 1px;
border: 1px solid #DDDDDD;
border-style: solid;
border-color: transparent;
font-size: 0.809em;
}
}
.options h6 {
@media (min-width: 769px) {
margin: 10px 3px;
.options {
font-size: 14px;
float: right;
margin: 0.309em 0 0.309em 1em;
}
}
}
.options > h6,
.options .horizontal-fieldset,
.options > a ,
.options .horizontal-fieldset-element,
.options > span > a.small {
.options .horizontal-fieldset .form-element {
color: #333333;
margin: 0;
}
}
.options img {
.options h6 {
margin: 0 0 5px 0;
margin: 0 auto;
vertical-align: middle;
font-weight: 400;
padding: 0.228em;
}
}
.infos {
.infos {
margin-left: 20px;
width: 100%;
}
}
@media (max-width: 480px) {
.infos img {
padding: 0 0 0.618em 0;
display: block;
margin: auto;
}
@media (min-width: 769px) {
.infos {
.infos {
float: none;
max-width: 38%;
width: 100%;
margin: 0 0 10px;
}
}
}
}
.infos-options {
display: block;
}
/* -- Gestion des categories -- */
/* -- Gestion des categories -- */
/* ---------------------------- */
/* ---------------------------- */
.cat-description {
.cat-description {
margin: 10px 5px;
margin: 0.618em 0.309em;
}
text-align: left;
.subcat-container {
margin: 10px 0 5px 0;
font-size: 0;
}
}
.subcat-element {
.subcat-element {
margin-bottom: 20px;
font-size: 13px;
text-align: center;
text-align: center;
border: none;
background-color: transparent;
}
}
.subcat-content {
.subcat-thumbnail,
margin: auto;
.subcat-title,
padding: 0 5px;
.subcat-options {
display: block;
}
}
.subcat-content img {
.subcat-thumbnail {
margin-bottom: 10px;
margin-bottom: 0.309em;
}
}
/* --- Systeme de drag&Drop --- */
/* --- Systeme de drag&Drop --- */
.sortable-block .sortable-element > .sortable-block {
.sortable-block .sortable-element > .sortable-block {
margin-left: 30px;
flex: 1 0 calc(100% - 0.618em);
-ms-flex: 1 0 calc(100% - 0.618em);
-webkit-flex: 1 0 calc(100% - 0.618em);
margin: 0 0 0 0.618em;
}
}
.sortable-block {
.sortable-block {
margin: 0;
margin: 0;
padding: 0;
padding: 0;
min-height: 24px;
min-height: 24px;
list-style-type: none;
list-style-type: none;
list-style-position: outside;
list-style-position: outside;
color: #777777;
}
}
.sortable-block .sortable-element {
.sortable-block .sortable-element {
display: table;
display: flex;
margin-bottom: 6px;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: row;
-ms-flex-direction: row;
-webkit-flex-direction: row;
align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-content: center;
-webkit-align-content: center;
-ms-align-content: center;
flex-wrap: wrap;
-webkit-flex-wrap: center;
-ms-flex-wrap: center;
margin-bottom: 0.309em;
padding: 0;
padding: 0;
width: 100%;
width: 100%;
border-color: #517BA6;
transition: all 0.2s;
border-style: solid;
border-width: 0 0 0 3px;
transition: all 0.2s;
}
}
.sortable-block .sortable-element:hover {
.sortable-block .sortable-element:hover {
border-color: #366493;
transition: all 0.2s;
transition: all 0.2s;
}
}
@media (min-width:769px){
.sortable-block .sortable-selector {
padding: 0 0 0 0.309em;
}
@media (min-width:769px){
.sortable-block .sortable-element .sortable-selector {
.sortable-block .sortable-element .sortable-selector {
display: table-cell;
flex: 0 0 1.309em;
position: relative;
-ms-flex: 0 0 1.309em;
width: 20px;
-webkit-flex: 0 0 1.309em;
opacity: 0.2;
opacity: 0.2;
transition: opacity 0.3s;
transition: opacity 0.3s;
cursor: move;
cursor: move;
}
}
.sortable-selector:after {
.sortable-selector:after {
position: absolute;
content: "\f0b2";
content: "\f047";
font-family: 'Font Awesome 5 Free';
top: 34%;
font-weight: 900;
left: 4px;
color: #517BA6;
font-family: fontawesome;
}
}
}
}
.sortable-block .sortable-element:hover .sortable-actions {
.sortable-block .sortable-element:hover .sortable-actions {
opacity: 1;
opacity: 1;
transition: opacity 0.3s;
transition: opacity 0.3s;
}
}
.sortable-block .sortable-element:hover .sortable-selector {
.sortable-block .sortable-element:hover .sortable-selector {
opacity: 1;
opacity: 1;
transition: opacity 0.3s;
transition: opacity 0.3s;
}
}
.sortable-block .sortable-title {
.sortable-block .sortable-title {
padding: 8px 5px 5px 10px;
flex: 1 1 auto;
-ms-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
padding: 0.618em;
max-width: calc(100% - 5.2em)
}
}
.sortable-block .sortable-title:hover {
.sortable-block .sortable-title:hover {
background-color: #FAFAFA;
transition: all 0.2s linear;
transition: all 0.2s linear;
}
}
.sortable-block .sortable-title > span {
.sortable-block .sortable-title > span {
font-size: 1.5em;
font-size: 1.482em;
font-weight: bold;
}
.sortable-block .sortable-title a {
color: #555555;
}
}
.sortable-block .sortable-title span.cat-desc {
.sortable-block .sortable-title span.cat-desc {
font-size: 0.8em;
font-size: 0.8em;
font-weight: normal;
font-weight: normal;
font-style: italic;
font-style: italic;
}
}
.sortable-block fieldset {
.sortable-block fieldset {
padding: 0 30px;
padding: 0 1.618em;
}
}
.sortable-block .sortable-actions {
.sortable-block .sortable-actions {
float: right;
flex: 0 1 auto;
padding: 3px 3px;
-ms-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
padding: 0.1618em;
opacity: 0.2;
opacity: 0.2;
transition: opacity 0.2s;
transition: opacity 0.2s;
}
}
.sortable-block .sortable-element hr {
.sortable-block .sortable-element hr {
margin-top: 5px;
margin-top: 0.309em;
background-color: #999999;
}
}
.sortable-block .sortable-element label {
.sortable-block .sortable-element label {
margin-left: 14px;
margin-left: 0.809em;
color: #1F507F;
}
}
.sortable-block .sortable-actions img,
.sortable-block .sortable-actions img,
.sortable-block .sortable-element:hover label,
.sortable-block .sortable-element:hover label,
.sortable-block .sortable-element .fa:hover {
.sortable-block .sortable-element .fa:hover {
cursor: pointer;
cursor: pointer;
}
}
.dragged {
.dragged {
position: absolute;
position: absolute;
opacity: 0.9;
opacity: 0.9;
z-index: 2000;
z-index: 2000;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}
}
body.dragging,
body.dragging,
body.dragging * {
body.dragging * {
cursor: move !important;
cursor: move !important;
}
}
.dropzone {
.dropzone {
margin: 10px 0;
margin: 0.618em 0;
padding-top: 5px;
padding: 0.309em;
height: 30px;
opacity: 0.6;
opacity: 0.6;
border: 1px dashed #AAAAAA;
text-align: center;
text-align: center;
color: #AAAAAA;
border-width: 1px;
border-style: dashed;
border-color: transparent;
}
}
.preview img {
.preview img {
overflow: hidden;
overflow: hidden;
}
}
/* -- Modules minis -- */
/* -- Modules minis -- */
/* ------------------- */
/* ------------------- */
.module-mini-container {
.module-mini-container {
margin: 0 0 10px 0;
margin: 0 0 0.618em 0;
padding: 5px;
border-spacing: 1px;
clear: both;
clear: both;
}
}
.module-mini-top {
.module-mini-top {
padding: 0.2em 0 0.2em 0;
padding: 0.1618em 0;
min-height: 24px;
min-height: 1.482em;
border-bottom: 2px #366493 solid;
border-width: 0 0 1px;
border-style: solid;
border-color: transparent;
text-align: center;
text-align: center;
}
}
.module-mini-container .sub-title {
.module-mini-container .sub-title {
display: block;
display: block;
margin-top: 5px;
margin-top: 0.309em;
color: #366493;
font-size: 1.6rem;
font-weight: bold;
font-weight: bold;
}
}
.module-mini-contents {
.module-mini-contents {
padding: 5px 4px 0 4px;
padding: 0.309em;
border-top: none;
border-bottom: none;
text-align: center;
text-align: center;
}
}
.module-mini-bottom {
.module-mini-bottom {
height: 15px;
height: 1em;
}
}
/* -- Messages postes par les membres -- */
/* -- Messages postes par les membres -- */
/* (mp & commentaires) */
/* ------------------------------------- */
/* ------------------------------------- */
#comments-list {
#comments-list {
clear: both;
clear: both;
}
}
#comments-list > header {
#comments-list > header {
display: none;
display: none;
}
}
#comments-list .message > header {
display:none;
}
.message {
.message {
width: 98%;
margin-bottom: 1.309em;
margin-bottom: 20px;
overflow: auto;
overflow: auto;
}
}
#comments-list .message > header {
display:none;
}
.message > footer {
.message > footer {
clear: both;
clear: both;
}
}
.view-topic {
.message-user-infos,
margin-top: 10px;
}
.view-topic i {
margin: 0 0 1px 5px;
}
/* --- infos du message --- */
.message-date {
.message-date {
margin-left: 150px;
overflow: hidden;
}
padding: 0.309em;
.message-date i {
vertical-align: top;
}
.message-user-infos {
float: left;
width: 120px;
text-align: center;
}
.message-message {
position: relative;
margin: 5px 0 0 140px;
padding: 15px;
min-height: 80px;
background-color: #ECEFFA;
border: 1px solid #D6DEE7;
color: #333333;
}
.message-message::before {
position: absolute;
top: 15px;
bottom: auto;
left: -25px;
display: block;
width: 0;
border-width: 15px 25px 15px 0;
border-color: transparent #D6DEE7;
border-style: solid;
content: "";
}
}
.message-message::after {
.message-pseudo {
position: absolute;
float: left;
content: "";
top: 16px;
bottom: auto;
left: -24px;
display: block;
width: 0;
border-width: 14px 24px 14px 0;
border-color: transparent #ECEFFA;
border-style: solid;
}
}
.message-avatar {
.message-avatar {
width: 80px;
float: right;
max-width: 3.82em;
}
}
.message-user-infos img.message-avatar {
.view-topic {
padding: 10px 0;
padding: 0.809em 0;
}
}
article .message-user-infos .message-user-group {
.view-topic i {
display: none;
margin: 0 0 0.1618em 0.309em;
}
}
@media (max-width: 480px) {
/* --- infos du message --- */
.message-user-infos img.message-avatar {
@media (min-width: 769px) {
float: left;
.message-pseudo,
margin: 5px 5px 0 15px;
.message-avatar {
padding: 4px;
float: none;
max-height: 54px;
width: auto;
}
.message-message {
border-top: 1px solid #CAD1EB;
}
}
.message-pseudo {
.message-avatar {
float: right;
max-width: 100%;
padding: 20px 10px 0 0px;
padding: 0.309em 0 0;
}
}
.message-level {
.message-user-infos {
display: none;
float: left;
width: 120px;
text-align: center;
padding: 0;
}
}
.message-date {
.message-date {
float: right;
padding: 0;
margin: 0 15px 0 0;
padding: 20px 0 0 0;
max-width: 120px;
text-align: right;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.message-container {
padding-left: 70px;
}
.message-pseudo {
padding: 20px 10px 0 15px;
}
.message-user-infos img {
position: absolute;
top: 20px;
left: 15px;
max-width: 54px;
}
}
.message-date {
.message-date {
margin: 0;
margin-left: 150px;
padding: 23px 0 0 0;
text-align: left;
}
}
@media (max-width: 768px) {
.message-container {
position: relative;
min-height: 80px;
background-color: #ECEFFA;
border: 1px solid #D6DEE7;
color: #333333;
}
}
.message-message {
.message-message {
background-color: transparent;
position: relative;
border: none;
margin: 0.309em 0 0 150px;
min-height: 4.56em;
border-width: 1px;
border-style: solid;
border-color: transparent;
}
}
.message-message::after,
.message-message::before {
.message-message::before {
display: none;
position: absolute;
}
top: 15px;
bottom: auto;
.message-user-infos {
left: -20px;
display: inline-block;
display: block;
}
width: 0;
border-width: 15px 20px 15px 0;
.message-pseudo {
border-style: solid;
text-align: left;
border-color: transparent;
}
content: "";
.message-pseudo a {
color: #555555;
font-size: 1.2em;
font-weight: bold;
}
.message-pseudo a:hover {
color: #222222;
text-decoration: none;
}
.message-user-infos {
width: auto;
}
.message-user-infos img {
padding: 3px;
background-color: #FFFFFF;
box-shadow: 0 1px 9px #e0e0e0,inset 0 0 2px rgba(215, 215, 215, 0.75);
}
.message-date {
display: inline-block;
font-size: 0.8em;
}
}
.message-date span.actions {
.message-message::after {
position: absolute;
position: absolute;
bottom: 0;
content: "";
right: 6px;
top: 16px;
z-index: 1;
bottom: auto;
left: -19px;
display: block;
display: block;
text-align: right;
width: 0;
font-size: 1.2em;
border-width: 14px 19px 14px 0;
}
border-style: solid;
.message-date span.actions a {
border-color: transparent;
display: inline-block;
padding: 5px 2px 5px 2px;
}
}
.message-message {
.message-content {
margin: 0 auto 10px auto;
padding: 0.809em;
clear: both;
}
}
.message-message::before {
.view-topic {
top: auto;
padding: 0.809em;
bottom: 100%;
left: 204px;
border-width: 15px;
border-color: transparent;
border-bottom-color: #D6DEE7;
border-style: solid;
}
.message-message::after {
top: auto;
bottom: 100%;
left: 205px;
border-width: 14px;
border-color: transparent;
border-bottom-color: #ECEFFA;
border-style: solid;
}
}
}
}
/* --- Moderation des messages --- */
/* --- Moderation des messages --- */
.message-moderate {
.message-moderate {
margin-bottom: 10px;
margin-bottom: 0.618em;
padding: 4px 0 4px 0;
padding: 0.309em 0 0.309em 0;
width: 98%;
width: 98%;
background-color: #ECEFFA;
border: 1px solid #D6DEE7;
text-align: center;
text-align: center;
vertical-align: middle;
vertical-align: middle;
}
}
.message-moderate a {
.message-moderate a {
vertical-align: top;
vertical-align: top;
}
}
i.message-announce,
i.message-announce,
i.message-announce-new,
i.message-announce-new,
i.message-announce-track {
i.message-announce-track {
font-size: 1.6em;
font-size: 1.618em;
}
i.message-announce {
color: #D1D2D4;
}
i.message-announce-new {
color: #4372AA;
}
}
/* -- Le maintenance -- */
/* -- Le maintenance -- */
/* -------------------- */
/* -------------------- */
#maintain {
#maintain {
margin: 10px 0;
margin: 0.618em 0;
}
}
div.delay {
div.delay {
margin: 20px 0;
margin: 1.309em 0;
}
}
#global.global-maintain {
#global.global-maintain {
flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
-ms-flex-direction: column;
-webkit-flex-direction: column;
-webkit-flex-direction: column;
}
}
div#message-maintain {
div#message-maintain {
position: absolute;
position: absolute;
z-index: 20;
z-index: 20;
top: 5px;
top: 1em;
width: 100%;
width: 100%;
opacity: 0.98;
opacity: 0.98;
text-align: center;
text-align: center;
}
}
div#message-maintain > div {
div#message-maintain > div {
margin: 0 auto;
margin: 0 auto;
}
}
div#release {
div#release {
margin-top: 20px;
margin-top: 1.309em;
}
}
/* -- Elements .more d'un contenu -- */
/* --------------------------------- */
/* --- General --- */
.more {
padding: 0.618em 0.618em 1.618em;
font-size: 0.809em;
font-size: 0.809em;
font-style: italic;
}
/* --- Sharing items --- */
.more-element-sharing {
position: relative;
margin: 0.309em 0 0 0;
padding: 0;
}
@media (min-width: 769px) {
.more-element-sharing {
margin: 1.309em 0 0.309em 0;
}
}
.sharing-button {
display: none;
}
.sharing-elements-list {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: row;
-ms-flex-direction: row;
-webkit-flex-direction: row;
text-align: center;
justify-content: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
@media (min-width: 769px) {
.sharing-elements-list {
justify-content: flex-start;
-ms-flex-pack: flex-start;
-webkit-justify-content: flex-start;
}
}
.sharing-element {
flex: 0 0 auto;
-ms-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
}
@media (min-width: 769px) {
.sharing-element {
margin: 0 0.309em 0.309em 0;
}
}
.sharing-element a {
display: block;
padding: 0.618em 1.228em;
display: block;
margin: 0 0.1em 0.309em 0;
}