Templates & CSS & JS
Templates modifiés:viewtopic_body viewtopic_poll_ballot viewtopic_poll_result
Un sujet minimaliste et clair.
Informations importantes
Ce LS en inclus un autre qui est la Réponse minimaliste #1 disponible ici. Les modifications templates de ce LS inclus ne sont pas nécessaires mais son CSS l'est et n'est pas inclus par défaut dans le LS Affichage sujet minimaliste #01. Pour que tout fonctionne correctement, incluez également le CSS de la Réponse minimaliste #1.
viewtopic_body
Code:
<!-- BEGIN switch_push_direct_send -->
<div id="push-answer" class="jqmWindow"></div>
<script src="{JQUERY_DIR}jqmodal/jqmodal.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#push-answer').jqm({toTop: true});
$('#push-bell').click(function () {
return sendWebPush({TOPIC_ID});
});
function sendWebPush(tId){
$.get("/ajax_push.php?topicID=" + tId ).done(showPushAnswer);
}
function showPushAnswer(data) {
$('#push-answer').html(data).jqmShow();
$('.jqmOverlay').bgiframe();
$('#push-answer').bgiframe();
}
});
//]]>
</script>
<!-- END switch_push_direct_send -->
<!-- BEGIN switch_plus_menu -->
<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}';
</script>
<!-- END switch_plus_menu -->
<script type="text/javascript">
var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id) {
try {
var regId = parseInt(id, 10);
if( isNaN(regId) ) { regId = 0; }
if( regId > 0) {
$('.post--' + id).toggle(0, function() {
if( $(this).is(":visible") ) {
$('#hidden-title--' + id).html(hiddenMsgLabel.visible);
} else {
$('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
}
});
}
} catch(e) { }
return false;
};
//]]>
</script>
<div class="thread_top">
<div class="thread_title">
<a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
<!-- BEGIN switch_push_direct_send --> <span id="push-bell" style="color:goldenrod;" title="{switch_push_direct_send.L_PUSH_SEND}" class="ion-android-notifications"></span><!-- END switch_push_direct_send -->
</div>
<div class="thread_arianne"><a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>{NAV_CAT_DESC}</div>
<div class="thread_posterslist">{POSTERS_LIST}</div>
</div>
<div class="thread_buttons thread_top_buttons">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow" {S_POST_NEW_TOPIC} title="{T_POST_NEW_TOPIC}" class="newtopic button1">{L_POST_NEW_TOPIC}</a>
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}" {S_POST_REPLY_TOPIC} title="{T_POST_REPLY_TOPIC}" class="replytopic button1">{L_POST_REPLY_TOPIC}</a>
<!-- END switch_user_authreply -->
</div>
<div class="thread_pagination thread_pagination_top">
<!-- BEGIN topicpagination -->
<div class="pagination">{PAGINATION}</div>
<!-- END topicpagination -->
</div>
<div class="quick-nav-topics" style="display: none;">
<!-- BEGIN switch_isconnect -->
<a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>
<!-- END switch_isconnect -->
<a href="#bottom">{L_GOTO_DOWN}</a>
<!-- BEGIN switch_isconnect -->
<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
<!-- END switch_isconnect -->
</div>
<div class="thread_poll">{POLL_DISPLAY}</div>
<div class="allposts">
<!-- BEGIN postrow -->
<!-- BEGIN hidden -->
<div class="post {postrow.hidden.ROW_COUNT}"><p style="text-align:center">{postrow.hidden.MESSAGE}</p></div>
<!-- END hidden -->
<!-- BEGIN displayed -->
<div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID} mpost"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
<div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
<div class="mpost_profile">
<span class="mpost_avatar_container"><div class="mpost_avatar">{postrow.displayed.POSTER_AVATAR}</div></span>
<div class="mpost_username">{postrow.displayed.POSTER_NAME}</div>
<div class="mpost_rank">{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</div>
<div class="mpost_profilehover">
<!-- BEGIN profile_field -->
<div class="mpost_pfield">
{postrow.displayed.profile_field.LABEL}
{postrow.displayed.profile_field.CONTENT}
{postrow.displayed.profile_field.SEPARATOR}
</div>
<!-- END profile_field -->
<div class="mpost_rpg">{postrow.displayed.POSTER_RPG}</div>
<div class="mpost_contact">
{postrow.displayed.PROFILE_IMG}
{postrow.displayed.PM_IMG}
{postrow.displayed.EMAIL_IMG}
<!-- BEGIN contact_field -->
{postrow.displayed.contact_field.CONTENT}
<!-- END contact_field -->
</div>
</div>
<a class="mpost_permalink" href="{postrow.displayed.POST_URL}">#{postrow.displayed.U_POST_ID}</a>
</div>
<div class="mpost_post">
<div class="mpost_content">
<div class="postbody">
<div class="content"><div>{postrow.displayed.MESSAGE}</div></div>
<div class="edited-message">{postrow.displayed.EDITED_MESSAGE}</div>
<!-- BEGIN switch_signature -->
<div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
<!-- END switch_signature -->
</div>
</div>
</div>
<div class="mpost_bottom">
<!-- BEGIN switch_likes_active -->
<div class="fa_like_div">
<button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}" data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">
<span class="mdi mdi-thumb-up"></span> <span class="votecount count_like">{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}</span>
</button>
<!-- BEGIN switch_dislike_button -->
<button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">
<span class="mdi mdi-thumb-down"></span> <span class="votecount count_dislike">{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}</span>
</button>
<!-- END switch_dislike_button -->
<!-- BEGIN switch_like_list -->
{postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
<!-- END switch_like_list -->
<!-- BEGIN switch_dislike_list -->
{postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
<!-- END switch_dislike_list -->
</div>
<!-- END switch_likes_active -->
<ul class="profile-icons">
<li class="btn-thank"><a href="{postrow.displayed.THANK_URL}"><i class="ion-heart"></i></a></li>
<li class="btn-quote"><a href="{postrow.displayed.QUOTE_URL}">Répondre</a></li>
<li class="btn-quote-multi"><span onclick="{postrow.displayed.MULTIQUOTE_URL}" id="post_mq{TOPIC_ID}_{postrow.displayed.U_POST_ID}">Cit. multipl.</span></li>
<li class="btn-edit"><a href="{postrow.displayed.EDIT_URL}">Modifier</a></li>
<li class="btn-delete"><a href="{postrow.displayed.DELETE_URL}">Supprimer</a></li>
<li class="btn-ip"><a href="{postrow.displayed.IP_URL}">IP</a></li>
<li class="btn-report">{postrow.displayed.REPORT_IMG}</li>
</ul>
<div class="mpost_date">{postrow.displayed.POST_DATE_NEW}</div>
</div>
</div>
<!-- END displayed -->
<!-- END postrow -->
</div>
<a name="bottomtitle"></a>
<div class="thread_buttons thread_bottom_buttons">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow" {S_POST_NEW_TOPIC} title="{T_POST_NEW_TOPIC}" class="newtopic button1">{L_POST_NEW_TOPIC}</a>
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}" {S_POST_REPLY_TOPIC} title="{T_POST_REPLY_TOPIC}" class="replytopic button1">{L_POST_REPLY_TOPIC}</a>
<!-- END switch_user_authreply -->
</div>
<div class="thread_pagination thread_pagination_bottom">
<!-- BEGIN topicpagination -->
<div class="pagination">{PAGINATION}</div>
<!-- END topicpagination -->
</div>
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
<div class="thread_watchtopic">{S_WATCH_TOPIC}</div>
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}
<script type="text/javascript">
$(function() {
$('#quick_reply div[style="text-align:center; margin-top:20px;"]').detach().appendTo('.sceditor-toolbar');
});
</script>
<!-- END switch_user_logged_in -->
<!-- BEGIN viewtopic_bottom -->
<div class="modtools">{S_TOPIC_ADMIN}</div>
<!-- END viewtopic_bottom -->
<!-- BEGIN show_permissions -->
<div class="thread_permissions">{S_AUTH_LIST}</div>
<!-- END show_permissions -->
<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github-gist.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script>
<script>
$(document).ready(function() {
$('pre, code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
$('.mpost_avatar a').on('click', function(e) {
e.preventDefault();
$(this).parent().parent().parent().find('.mpost_profilehover').fadeToggle('50');
});
</script>viewtopic_poll_ballot
Code:
<form method="post" action="{S_POLL_ACTION}">
<div class="panel">
<div class="inner">
<span class="corners-top"><span></span></span>
<div class="content">
<h2 class="left-box h3" style="width: 97%;">{POLL_QUESTION}</h2>
<div class="panel-close">{CLOSE_POLL}</div>
<div class="clear"></div>
<fieldset class="polls">
<!-- BEGIN poll_option -->
<dl>
<input type="{poll_option.POLL_TYPE_BUTTON}" name="vote_id[]" value="{poll_option.POLL_OPTION_ID}" />
<dt>{poll_option.POLL_OPTION_CAPTION}</dt>
</dl>
<!-- END poll_option -->
<dl style="border-top:none" class="poll-submit">
<dd><input type="submit" name="submit" value="Voter" class="button1" /></dd>
</dl>
<dl style="border-top:none">
<dd class="resultbar">
<strong><a href="{U_VIEW_RESULTS}">{L_VIEW_RESULTS}</a></strong>
</dd>
</dl>
<dl style="border-top:none">
<dt> </dt>
<dd class=""><!-- BEGIN warning_public_votes -->
{warning_public_votes.L_WARNING_PUBLIC_VOTES}
<br/>
<!-- END warning_public_votes -->
{L_VOTE_EXPIRE}</dd>
</dl>
{S_HIDDEN_FIELDS}
</fieldset>
</div>
<span class="corners-bottom"><span></span></span>
</div>
</div>
</form>viewtopic_poll_result
Code:
<div class="panel">
<h2>{POLL_QUESTION}</h2><div class="panel-close">{CLOSE_POLL}</div>
<fieldset class="polls">
<!-- BEGIN poll_option -->
<dl>
<dt><label>{poll_option.POLL_OPTION_CAPTION}</label></dt>
<dd class="poll-bar">
<div class="poll-bar-bar" style="width: {poll_option.POLL_OPTION_PERCENT};"></div>
<div class="poll-bar-desc">{poll_option.POLL_OPTION_RESULT} - {poll_option.POLL_OPTION_PERCENT}</div>
</dd>
<!-- BEGIN option_voters -->
<dd><div class="option_voters_list">{poll_option.option_voters.POLL_OPTION_VOTERS}</div></dd>
<!-- END option_voters -->
</dl>
<!-- END poll_option -->
<dl class="poll_total poll_back_cancellable">
<dt> </dt>
<dd><strong>{L_TOTAL_VOTES}: {TOTAL_VOTES}</strong></dd>
{ALL_POLL_VOTERS_LIST}
<!-- BEGIN cancel_vote -->
<dd><b><a href="{U_CANCEL_VOTE}">{L_CANCEL_VOTE}</a></b></dd>
<!-- END cancel_vote -->
</dl>
<!-- BEGIN switch_back_to_vote -->
<dl class="poll_back">
<dt> </dt>
<dd><b><a href="{switch_back_to_vote.U_BACK_TO_VOTE}">{switch_back_to_vote.L_BACK}</a></b></dd>
</dl>
<!-- END switch_back_to_vote -->
<!-- BEGIN switch_hide_result -->
<div id="hide_result_msg">{L_POLL_HIDE_RESULT}</div>
<!-- END switch_hide_result -->
<dl>
<dt> </dt>
<dd>{L_VOTE_EXPIRE}</dd>
</dl>
</fieldset>
</div>css
Code:
/* - - - - - -
------ AFFICHAGE SUJET MINIMALISTE #01
--- Merci de me créditer ! (Jei)
- - - - - - */
/* - - HAUT DES SUJETS - - */
.thread_top {
width: 100%;
display: inline-block;
text-align: center;
}
.thread_title {
display: inline-block;
width: 70%;
box-sizing: border-box;
padding: 0 0 0 2%;
}
.thread_title a {
font-size: 21pt;
color: #313131;
font-weight: 500;
}
.thread_top span#push-bell {
font-size: 16pt;
margin-left: 1%;
opacity: .7;
transition: all .25s ease-in-out;
}
.thread_top span#push-bell:hover {
opacity: 1;
}
.thread_posterslist {
display: block;
vertical-align: top;
text-align: center;
width: fit-content;
margin: 0 auto;
}
.thread_posterslist .poster-list {
text-align: right;
display: block;
padding: 0;
margin-bottom: 30px;
}
.thread_posterslist div.poster {
width: 25px !important;
transform: none !important;
height: 25px !important;
display: inline-block;
vertical-align: middle;
}
.thread_posterslist div.poster::before {
width: 30px !important;
height: 30px !important;
}
.thread_posterslist .poster-count {
display: inline-block;
vertical-align: middle;
position: relative;
top: 3px;
margin-left: 10px;
}
.thread_arianne {
width: fit-content;
margin: 0 auto;
opacity: .75;
text-transform: uppercase;
font-weight: 500;
font-size: 0;
}
.thread_arianne a[href="/"] {
display: none;
}
.thread_arianne a {
font-size: 9pt;
}
.thread_arianne > a:not(:last-of-type)::after {
content: "\F0142";
font-family: 'Material Design Icons', sans-serif;
font-size: 11pt;
vertical-align: middle;
position: relative;
top: -1px;
opacity: .75;
}
.thread_arianne a:hover {
opacity: 1;
color: black;
}
.thread_top_buttons {
display: inline-block;
vertical-align: middle;
text-align: right;
padding-right: 2%;
box-sizing: border-box;
margin: 2% 0 1% 0;
width: 100%;
}
.thread_buttons a.button1 {
all: unset;
padding: 8px 20px;
border-radius: 4px;
cursor: pointer;
margin: 0 0 0 2%;
background-color: #fafafa;
font-family: 'Roboto', sans-serif;
font-weight: 400;
opacity: .75;
transition: all .25s ease-in-out;
font-size: 12pt;
}
.thread_buttons a.replytopic {
background-color: #3793ff;
color: white;
}
.thread_buttons a.button1:hover {
opacity: 1;
}
.thread_buttons a.newtopic {
background-color: #eaeaea;
}
/* - - - - */
/* - - AFFICHAGE DES SONDAGES - - */
/* peut être retiré: Début */
.thread_poll .panel {
background-color: transparent;
}
.thread_poll .content > h2 {border: none;color: #313131;font-size: 11pt;}
fieldset.polls dt {
all: unset;
position: relative;
font-weight: 500;
}
fieldset.polls dd {
all: unset;
}
fieldset.polls dl {
width: fit-content;
background-color: transparent !important;
position: relative;
}
fieldset.polls input[type="radio"], fieldset.polls input[type="checkbox"] {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
z-index: 2;
}
fieldset.polls dl:not([style="border-top:none"]) input[type="radio"]:checked + dt::before {
color: #3793ff !important;
content: "\F0133";
opacity: 1;
}
.thread_poll {
width: 75%;
margin: 2.5% auto;
background-color: white;
box-shadow: -3px 3px 15px #33333335;
border-radius: 6px;
}
.thread_poll > form dl:not([style="border-top:none"]) input[type="radio"] + dt::before {
content: "\F0130";
font-family: 'Material Design Icons', sans-serif;
margin-right: 6px;
color: #555;
opacity: .45;
font-size: 14pt;
position: relative;
top: 2px;
}
.thread_poll > form dl:not([style="border-top:none"]) input[type="checkbox"] + dt::before {
content: "\F0131";
font-family: 'Material Design Icons', sans-serif;
margin-right: 6px;
color: #555;
opacity: .45;
font-size: 14pt;
position: relative;
top: 2px;
}
fieldset.polls dl:not([style="border-top:none"]) input[type="checkbox"]:checked + dt::before {
color: #3793ff !important;
content: "\F0132";
opacity: 1;
}
fieldset.polls dl input.button1 {
all: unset;
right: 10px;
bottom: 10px;
position: absolute;
padding: 10px 18px;
border-radius: 5px;
cursor: pointer;
margin: 0 0 0 2%;
background-color: #3793ff;
font-family: 'Roboto', sans-serif;
font-weight: 400;
opacity: .75;
transition: all .25s ease-in-out;
font-size: 11pt;
color: white;
}
dl.poll-submit {
position: initial !important;
}
.thread_poll .content > h2::before {
content: "Sondage";
text-transform: uppercase;
font-size: 10pt;
color: #4e4e4e;
background-color: #d7d7d7;
font-weight: 500;
padding: 3px 6px;
border-radius: 5px;
margin-right: 6px;
}
fieldset.polls dl input.button1:hover {
opacity: 1;
}
.polls a[href$="?vote=viewresult"] {
all: unset;
border-radius: 4px;
cursor: pointer;
background-color: #eaeaea;
font-family: 'Roboto', sans-serif;
font-weight: 400;
opacity: .75;
transition: all .25s ease-in-out;
padding: 3px 6px;
}
.polls a[href$="?vote=viewresult"]:hover {
opacity: 1;
}
fieldset.polls > dl:last-of-type b {
background-color: #ff373759;
color: #121212;
padding: 2px 4px;
border-radius: 3px;
font-weight: 600;
}
.panel-close::before {
content: "\F01B4" !important;
font-family: 'Material Design Icons';
font-size: 14pt;
color: #ff3737;
}
.panel-close {
top: 17px;
}
.panel-close:empty {
display: none;
}
.poll-bar-bar {
margin: 2px 0;
left: 0 !important;
top: 40px !important;
height: 6px;
}
.poll-bar-bar[style="width: 0%;"] {
background-color: #000000;
width: 10px !important;
height: 6px;
opacity: .15;
}
/* - résultats - */
.thread_poll > .panel dl {
width: 100%;
margin: 0 !important;
padding-left: 0;
}
.thread_poll > .panel dt label {
display: inline-block;
margin-top: 0;
padding: 4px 0;
border-radius: 4px;
}
.thread_poll > .panel .poll-bar-desc {
float: right;
background-color: #ffffffcf;
padding: 4px 8px;
color: #313131;
font-size: 10pt;
border-radius: 4px;
font-weight: 500;
}
.thread_poll > .panel h2 {
border: none;
color: #313131;
font-size: 11pt;
font-weight: 500;
}
.thread_poll > .panel h2::before {
content: "Résultats";
text-transform: uppercase;
font-size: 10pt;
color: #ffffff;
background-color: #3793ff;
font-weight: 500;
padding: 3px 6px;
border-radius: 5px;
margin-right: 6px;
}
dl.poll_back {
width: fit-content !important;
position: absolute !important;
right: 10px;
bottom: 10px;
z-index: 2;
}
dl.poll_back a {
all: unset;
padding: 10px 18px;
border-radius: 5px;
cursor: pointer;
background-color: #3793ff;
font-family: 'Roboto', sans-serif;
opacity: .75;
transition: all .25s ease-in-out;
font-size: 11pt;
color: white;
font-weight: 400;
}
dl.poll_back a:hover {
opacity: 1;
}
dl.poll_total {
text-align: center;
}
dl.poll_total strong {
font-size: 11pt;
}
.thread_poll > .panel .polls .poster-list {
margin-left: 0 !important;
}
dl.poll_back_cancellable b a {
all: unset;
padding: 10px 18px;
border-radius: 5px;
cursor: pointer;
background-color: #3793ff;
font-family: 'Roboto', sans-serif;
opacity: .75;
transition: all .25s ease-in-out;
font-size: 11pt;
color: white;
font-weight: 400;
position: absolute;
right: 10px;
bottom: 10px;
z-index: 2;
}
dl.poll_back_cancellable {
position: unset !important;
}
dl.poll_back_cancellable b a:hover {
opacity: 1;
}
dl.poll_back_cancellable > strong {
display: block;
text-align: center;
font-size: 11pt;
}
/* peut être retiré: Fin */
/* - - - - */
/* - - AFFICHAGE DES MESSAGES - - */
.post.mpost {
border: none;
background-color: transparent;
box-shadow: none;
border-bottom: 2px solid #e6e6e6;
padding-bottom: 2%;
margin: 24px auto;
}
.mpost_avatar {
display: inline-block;
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 50%;
vertical-align: middle;
}
.mpost_username {
display: inline-block;
vertical-align: middle;
}
.mpost_rank {
display: inline-block;
vertical-align: middle;
}
.mpost_avatar img {
width: 100%;
height: auto;
}
.mpost_username a {
font-size: 12pt;
}
.mpost_rank {
margin-left: .5%;
font-size: 10pt;
font-weight: 400;
color: #6E6E6E;
position: relative;
top: -1px;
}
.mpost_profile {
position: relative;
}
.mpost_profilehover {
position: absolute;
left: 0;
top: 45px;
background-color: white;
border: 1px solid #31313125;
border-radius: 8px;
box-sizing: border-box;
padding: 1.5%;
z-index: 2;
box-shadow: -1px 1px 6px #31313120;
display: none;
}
.mpost_contact {
text-align: center;
margin-top: 5%;
}
a.mpost_permalink {
float: right;
opacity: .75;
transition: all .25s ease-in-out;
color: #313131;
}
a.mpost_permalink:hover {
opacity: 1;
}
.mpost_content .postbody {
margin: 0 55px;
padding: 15px 0 2% 0;
color: #585757;
font-weight: 400;
}
span.mpost_avatar_container {
position: relative;
display: inline-block;
margin-right: 1%;
}
.mpost.online span.mpost_avatar_container::before {
content: "";
position: absolute;
right: -2px;
bottom: -4px;
background-color: #50c737;
width: 16px;
height: 16px;
border-radius: 50%;
border: 4px solid white;
}
.mpost.online:before {
display: none;
}
.profile-icons li {
list-style: none;
}
.mpost_date {
display: inline-block;
vertical-align: top;
height: 26px;
line-height: 26px;
color: #888;
font-size: 9pt;
float: right;
}
/* - J'AIME / JE N'AIME PAS - */
.fa_like_div {
clear: none !important;
padding: 0;
display: inline-block;
vertical-align: top;
position: relative;
border-right: 2px solid #57575725;
padding-right: .5%;
margin-right: .5%;
}
.fa_like_div button {
margin: 0 6px 0 0;
background-color: #f7f7f7;
color: #1e1e1e;
border: 1px solid #e8e8e8;
box-shadow: 0 0 4px #30303030;
border-radius: 4px;
}
.fa_like_div span.rep-nb {
margin-left: 2px;
background-color: transparent;
font-weight: 600;
}
.fa_like_div button.fa_liked, .fa_like_div button.fa_disliked {
background-color: #3793ff;
color: white;
}
.fa_like_div button:focus, .fa_like_div button:active {
background-color: #3793ff !important;
color: white !important;
}
.fa_like_div button:hover {
background-color: #e7e7e7 !important;
color: #313131;
}
button.fa_liked:hover, button.fa_disliked:hover {
background-color: #3793ff !important;
color: white !important;
}
p.fa_like_list {
position: absolute;
left: 0;
width: max-content;
background-color: #f9f9f9;
border: 1px solid #39393910;
padding: 8px 12px;
box-shadow: 0 0 6px #30303030;
top: -50px;
display: none;
}
p.fa_dislike_list {
position: absolute;
left: 0;
width: max-content;
background-color: #f9f9f9;
border: 1px solid #39393910;
padding: 8px 12px;
box-shadow: 0 0 6px #30303030;
top: -50px;
display: none;
}
button.rep-button.fa_like:hover + button.rep-button + .fa_like_list,
button.rep-button.fa_like:hover + .fa_like_list,
button.rep-button.fa_liked:hover + button.rep-button + .fa_like_list,
button.rep-button.fa_liked:hover + .fa_like_list {
display:block;
}
button.rep-button.fa_dislike:hover + .fa_like_list + .fa_dislike_list,
button.rep-button.fa_dislike:hover + .fa_dislike_list,
button.rep-button.fa_disliked:hover + .fa_like_list + .fa_dislike_list,
button.rep-button.fa_disliked:hover + .fa_dislike_list {
display:block;
}
p.fa_like_list:empty, p.fa_dislike_list:empty {
display: none !important;
}
/* - - */
.mpost .profile-icons a, .mpost .profile-icons span {
border: none;
background-color: transparent;
box-shadow: none;
font-weight: 500;
color: #414141;
opacity: .75;
transition: all .25s ease-in-out;
}
.mpost .profile-icons a:hover, .mpost .profile-icons span:hover {
opacity: 1;
}
.mpost ul.profile-icons {
list-style: none;
display: inline-block;
margin: 0;
}
li.btn-quote-multi span.selected {
background-color: #3793ff;
opacity: 1;
color: white;
}
li.btn-quote-multi span.selected::after {
content: "\F012C";
margin-left: 4px;
font-family: 'Material Design Icons', sans-serif;
}
/* - - - - */
/* - - BAS DE PAGE - - */
.mpost_bottom {
margin-left: 55px;
}
.thread_bottom_buttons {
height: 36px;
vertical-align: middle;
text-align: right;
padding-right: 2%;
box-sizing: border-box;
width: 100%;
}
.thread_watchtopic {
text-align: right;
margin-top: 2%;
padding-right: 2%;
}
.thread_watchtopic a {
opacity: .75;
transition: all .25s ease-in-out;
color: #313131;
}
.thread_watchtopic a:hover {
opacity: 1;
}
/* - - - - */
/* - - RÉPONSE MINIMALISTE (voir sujet du LS) - - */
.sceditor-container iframe {
background-color: #f5f5f5 !important;
}
#quick_reply .sceditor-toolbar {
background-color: #f5f5f5 !important;
}
#quick_reply .sceditor-container {
background-color: #f5f5f5 !important;
}
#quick_reply #textarea_content {
box-shadow: 0 0px 12px #30303035;
}
/* - - - - */
/* - - OUTILS DE MODÉRATION - - */
.modtools {
text-align: left;
margin: 4% 0 2% 0;
opacity: .85;
border: 1px solid #e9e9e9;
padding: 2% 2% 2% 4%;
font-size: 0;
}
.modtools a {
opacity: .75;
transition: all .25s ease-in-out;
margin: 0 3px;
border: 1px solid #dbdbdb;
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-weight: 500;
}
.modtools a:hover {
opacity: 1;
color: white !important;
background-color: #3793ff;
border-color: white;
}
.modtools a img {
display: none;
}
.modtools::before {
content: "Outils de modération";
display: block;
font-size: 14pt;
color: #313131;
font-weight: 500;
margin-left: -2%;
margin-bottom: 1%;
}
.modtools a::before {
font-size: 9.5pt;
font-family: 'Material Design Icons';
margin-right: 4px;
}
.modtools a::after {
font-size: 9.5pt;
display: inline-block;
}
.modtools a[href^="/modcp?mode=delete"]::before {
content: "\F0156";
}
.modtools a[href^="/modcp?mode=move"]::before {
content: "\F19B0";
}
.modtools a[href^="/modcp?mode=lock"]::before {
content: "\F033E";
}
.modtools a[href^="/modcp?mode=split"]::before {
content: "\F093C";
}
.modtools a[href^="/merge"]::before {
content: "\F09A6C";
}
.modtools a[href^="/modcp?mode=delete"]::after {
content: "Supprimer";
}
.modtools a[href^="/modcp?mode=move"]::after {
content: "Déplacer";
}
.modtools a[href^="/modcp?mode=lock"]::after {
content: "Verrouiller";
}
.modtools a[href^="/modcp?mode=split"]::after {
content: "Diviser";
}
.modtools a[href^="/merge"]::after {
content: "Fusionner";
}
/* - - - - */
/* - - AFFICHAGE DES PERMISSIONS - - */
.thread_permissions::before {
content: "Permissions";
display: block;
font-size: 14pt;
color: #313131;
font-weight: 500;
margin-left: -2%;
}
.thread_permissions {
opacity: .85;
border: 1px solid #e9e9e9;
padding: 2% 2% 2% 4%;
}
.thread_permissions a[href^="/modcp"] {
color: #3793ff;
font-weight: 500;
border-bottom: 1px solid #30303045;
}
/* - - - - */
/* - - - - - - - - */Merci de me créditer (Jei) quelque part sur le forum: footer, sujet dédié, PA ou autre; c'est un travail qui a pris beaucoup de temps. 
modernbb