-481 Removals
+433 Additions

Created by:phpboost

/* -------------------------------------- /* --------------------------------------
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;
}
Editor
Original Text
Changed Text