Nettoie et restructure l'interface EDC.
// ==UserScript==
// @name [DC] Refonte EDC
// @namespace https://www.dreadcast.net/
// @version 0.17
// @description Nettoie et restructure l'interface EDC.
// @author L'Auryn
// @match https://www.dreadcast.net/EDC*
// @icon https://www.google.com/s2/favicons?sz=64&domain=dreadcast.net
// @grant GM_addStyle
// @run-at document-start
// ==/UserScript==
(function () {
'use strict';
const CONFIG = {
headerAccueilColor: '#111820',
mainWidth: 'min(1500px, calc(100vw - 48px))',
rightMenuWidth: '200px',
gap: '24px',
headerMainGap: '24px',
headerMinHeight: '180px',
headerLogoMaxHeight: '140px'
};
function removeUselessElements() {
[
'#menu_gauche',
'#main_bordure_gauche_1',
'#main_bordure_gauche_2',
'#main_bordure_gauche_3',
'#main_bordure_droite_1',
'#main_bordure_droite_2',
'#main_bordure_droite_3',
'#main_bordure_bas'
].forEach(selector => {
document.querySelector(selector)?.remove();
});
}
function removeFakeLineBreaks() {
document.querySelectorAll('#page_content ul > li').forEach(li => {
const style = li.getAttribute('style') || '';
if (
style.includes('clear:both') ||
style.includes('clear: both') ||
style.includes('width:1px') ||
style.includes('width: 1px')
) {
li.remove();
}
});
}
function restructureFooter() {
const footer = document.querySelector('#footer');
if (!footer || footer.querySelector('#edc_footer_content')) return;
const wrapper = document.createElement('div');
wrapper.id = 'edc_footer_content';
while (footer.firstChild) {
wrapper.appendChild(footer.firstChild);
}
footer.appendChild(wrapper);
}
function restructureMain() {
const main = document.querySelector('#main');
const search = document.querySelector('#recherche');
const mainContent = document.querySelector('#main_content');
const rightMenu = document.querySelector('#menu_droite');
const footer = document.querySelector('#footer');
if (!main || !mainContent) return;
let layout = document.querySelector('#edc_custom_layout');
if (!layout) {
layout = document.createElement('div');
layout.id = 'edc_custom_layout';
}
if (rightMenu && search) {
rightMenu.insertBefore(search, rightMenu.firstChild);
}
layout.appendChild(mainContent);
if (rightMenu) {
layout.appendChild(rightMenu);
}
main.appendChild(layout);
if (footer) {
main.appendChild(footer);
}
}
function restructureInfosDroite() {
const pageContent = document.querySelector('#page_content');
const infosDroite =
document.querySelector('#infos_droite') ||
document.querySelector('.infos_droite');
if (!pageContent || !infosDroite) return;
const toggleSpan = document.querySelector(
'span.link.couleur2[onclick*="page_content"]'
);
if (!toggleSpan) return;
const toggleContainer = toggleSpan.closest('div');
if (!toggleContainer) return;
toggleContainer.id = 'edc_toggle_full';
toggleContainer.style.position = 'static';
toggleContainer.style.right = 'auto';
toggleContainer.style.top = 'auto';
toggleContainer.style.fontSize = '10px';
toggleContainer.style.zIndex = 'auto';
toggleContainer.style.marginBottom = '8px';
if (pageContent.firstElementChild !== toggleContainer) {
pageContent.insertBefore(toggleContainer, pageContent.firstChild);
}
}
function tagCommentLists() {
document.querySelectorAll('ul').forEach(ul => {
if (ul.querySelector('li[id^="comment_"]')) {
ul.classList.add('edc_comment_list');
}
});
}
let stylesInjected = false;
function applyStyles() {
if (stylesInjected) return;
stylesInjected = true;
GM_addStyle(`
html,
body {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
background: #07090c !important;
}
body {
position: relative !important;
}
#header {
width: 100% !important;
min-width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: ${CONFIG.headerMinHeight} !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
transform: none !important;
margin: 0 !important;
padding: 0 !important;
z-index: 10 !important;
display: block !important;
clear: both !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
box-sizing: border-box !important;
overflow: hidden !important;
border-bottom: 1px solid rgba(180, 220, 230, 0.18) !important;
}
#header_bandeau {
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
transform: none !important;
width: min(1180px, 100%) !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
#header_logo {
position: absolute !important;
left: 22% !important;
right: auto !important;
top: 15% !important;
max-height: 80% !important;
width: auto !important;
height: auto !important;
display: flex !important;
align-items: center !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
#header_logo img {
display: block !important;
max-height: ${CONFIG.headerLogoMaxHeight} !important;
max-width: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
}
#main {
width: ${CONFIG.mainWidth} !important;
max-width: ${CONFIG.mainWidth} !important;
min-width: 0 !important;
margin: ${CONFIG.headerMainGap} auto 0 auto !important;
padding: 0 24px 0 !important;
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
transform: none !important;
z-index: 1 !important;
float: none !important;
clear: both !important;
background: transparent !important;
box-sizing: border-box !important;
overflow: visible !important;
}
#edc_custom_layout {
width: 100% !important;
max-width: 100% !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) ${CONFIG.rightMenuWidth} !important;
gap: ${CONFIG.gap} !important;
align-items: start !important;
margin: 0 auto !important;
padding: 0 !important;
position: relative !important;
left: auto !important;
right: auto !important;
box-sizing: border-box !important;
overflow: visible !important;
}
#main_content,
#menu_droite,
#recherche {
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
float: none !important;
clear: none !important;
box-sizing: border-box !important;
}
#main_content {
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
color: #fff !important;
background: rgba(10, 14, 18, 0.92) !important;
border: 1px solid rgba(120, 160, 180, 0.25) !important;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.45) !important;
}
#edc_toggle_full {
width: 100% !important;
text-align: right !important;
display: block !important;
visibility: visible !important;
box-sizing: border-box !important;
}
#edc_toggle_full .link.couleur2 {
text-transform: uppercase !important;
}
#page_content.full #infos_droite {
display: none !important;
}
#page_content.full #edc_toggle_full {
display: block !important;
visibility: visible !important;
}
#infos_droite {
float: right !important;
width: 20% !important;
margin-right: 0 !important;
}
#infos_droite h4 {
color: #fff !important;
}
#infos_droite a {
font-weight: normal !important;
}
#menu_droite {
width: ${CONFIG.rightMenuWidth} !important;
max-width: ${CONFIG.rightMenuWidth} !important;
min-width: 0 !important;
margin: 0 !important;
padding: 16px !important;
background: rgba(10, 14, 18, 0.75) !important;
border: 1px solid rgba(120, 160, 180, 0.18) !important;
}
#recherche {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 18px 0 !important;
padding: 0 !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px !important;
box-sizing: border-box !important;
}
#recherche_label {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
float: none !important;
clear: both !important;
box-sizing: border-box !important;
}
#recherche_input {
flex: 0 1 calc(100% - 32px) !important;
width: calc(100% - 32px) !important;
max-width: calc(100% - 32px) !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
float: none !important;
clear: none !important;
box-sizing: border-box !important;
}
#recherche_input input {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
#recherche_submit {
flex: 0 0 26px !important;
width: 26px !important;
min-width: 26px !important;
max-width: 26px !important;
position: relative !important;
float: none !important;
clear: none !important;
box-sizing: border-box !important;
}
#header_accueil {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: clamp(14px, 3vw, 28px) clamp(16px, 4vw, 32px) !important;
background-color: ${CONFIG.headerAccueilColor} !important;
background-repeat: no-repeat !important;
background-position: center top !important;
background-size: cover !important;
border-bottom: 1px solid rgba(180, 220, 230, 0.18) !important;
box-sizing: border-box !important;
display: block !important;
overflow: hidden !important;
}
#header_accueil > a:first-child {
display: block !important;
float: left !important;
margin: 0 15px 0 0 !important;
}
#header_accueil > a:first-child img {
display: block !important;
max-width: 75px !important;
width: 75px !important;
height: auto !important;
}
#header_accueil h1,
#header_accueil .forum_description {
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
max-height: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
display: block !important;
overflow: hidden !important;
text-overflow: clip !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
white-space: normal !important;
position: static !important;
}
#header_accueil h1 {
margin: 0 0 8px 0 !important;
font-size: clamp(18px, 3vw, 28px) !important;
line-height: 1.15 !important;
letter-spacing: clamp(0px, 0.12vw, 1px) !important;
}
#header_accueil .forum_description {
margin: 0 !important;
font-size: clamp(11px, 1.6vw, 14px) !important;
line-height: 1.35 !important;
}
#page_content {
width: 100% !important;
max-width: 100% !important;
padding: 28px 32px !important;
margin: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
}
#page_content > ul {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
gap: 18px 18px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 28px 0 !important;
padding: 0 !important;
list-style: none !important;
box-sizing: border-box !important;
}
#page_content > ul > li {
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
float: none !important;
clear: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
#page_content > ul > li.elt_liste_personnage {
display: block !important;
}
#page_content > ul > li[style*="clear"] {
display: none !important;
}
#page_content ul.edc_comment_list {
display: block !important;
grid-template-columns: none !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
padding-left: 0 !important;
list-style: none !important;
}
#page_content ul.edc_comment_list > li.commentaire {
display: block !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: both !important;
margin: 0 0 10px 0 !important;
padding: 10px !important;
border: 1px solid #dddddd7a;
background: #ffffff1f !important;
box-sizing: border-box !important;
}
#new_comment textarea {
background: #252525b5 !important;
background-image: none !important;
color: #fff;
}
.elt_liste_personnage {
box-sizing: border-box !important;
}
#page_content .elt_liste_personnage {
transition: background 0.15s ease !important;
}
#page_content .elt_liste_personnage:hover {
background: #9E9E9E !important;
}
#liste_sujets a.sujet.peut_voir.vu {
background-color: #d3d3d317 !important;
}
#liste_sujets a.sujet.peut_voir.vu:hover {
background: #6767673d !important;
}
#liste_sujets h3,
#liste_sujets h3 .nom_sujet {
color: #9E9E9E !important;
font-weight: 200 !important;
}
#page_content > ul#categories {
display: block !important;
grid-template-columns: none !important;
}
#page_content > ul#categories > li {
display: block !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: both !important;
margin: 0 0 14px 0 !important;
box-sizing: border-box !important;
}
textarea.zone_reponse_text,
#zone_reponse_text {
background: #e3e5e82e !important;
background-image: none !important;
color: #fff !important;
}
#list_articles li.ui-state-default,
#fiche_parrain_param li.ui-state-default,
ul.ui-sortable li.ui-state-default {
background: #e3e5e82e !important;
background-image: none !important;
}
#menu_short {
top: 107px !important;
}
#liste_blocs .separator {
width: 100% !important;
margin: 10px 0 10px 0 !important;
left: 0 !important;
box-sizing: border-box !important;
}
h2.infoAide {
margin: 5px 5px 0px 5px !important;
}
#liste_blocs h2 a {
color: #fff !important;
}
#main_content .texte .quote {
background: #e3e5e82e !important;
border: 1px solid #000000 !important;
color: #a9b4b9 !important;
}
textarea.zone_reponse_text,
#zone_reponse_text {
background: #e3e5e82e !important;
background-image: none !important;
color: #fff !important;
}
#main_content .texte .invisible {
color: #e5e5e500 !important;
}
#main_content a.link.couleur5,
#main_content a.link.couleur5:link,
#main_content a.link.couleur5:visited,
#main_content a.link.couleur5:hover {
font-weight: 100 !important;
color: #9E9E9E !important;
text-transform: uppercase !important;
}
#footer {
position: relative !important;
width: 100vw !important;
max-width: 100vw !important;
left: 50% !important;
transform: translateX(-50%) !important;
margin: 32px 0 0 0 !important;
padding: 0 !important;
float: none !important;
clear: both !important;
text-align: center !important;
background: rgba(10, 14, 18, 0.65) !important;
border-top: 1px solid rgba(120, 160, 180, 0.15) !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
#edc_footer_content {
width: ${CONFIG.mainWidth} !important;
max-width: ${CONFIG.mainWidth} !important;
margin: 0 auto !important;
padding: 18px !important;
text-align: center !important;
box-sizing: border-box !important;
}
`);
}
applyStyles();
function init() {
removeUselessElements();
restructureMain();
restructureFooter();
restructureInfosDroite();
removeFakeLineBreaks();
tagCommentLists();
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();