Увеличьте ширину контейнеров на страницах lolz.live. ballada
// ==UserScript==
// @name Lolz Wide Container
// @namespace https://lolz.live/
// @version 1.0.1
// @description Увеличьте ширину контейнеров на страницах lolz.live. ballada
// @match https://lolz.live/*
// @match http://lolz.live/*
// @match https://www.lolz.live/*
// @match http://www.lolz.live/*
// @run-at document-start
// @grant none
// @license MIT
// ==/UserScript==
(function () {
'use strict';
const css = `
@media (min-width: 1025px) {
:root {
--lzt-wide-max-width: 1680px;
--lzt-wide-gap: 16px;
}
#headerMover,
#content,
#navigation .pageContent,
.breadBoxTop,
.breadBoxBottom,
#content > .pageWidth,
#content .pageContent,
#content > .pageWidth > .pageContent {
width: min(var(--lzt-wide-max-width), calc(100vw - (var(--lzt-wide-gap) * 2))) !important;
max-width: min(var(--lzt-wide-max-width), calc(100vw - (var(--lzt-wide-gap) * 2))) !important;
margin-left: auto !important;
margin-right: auto !important;
}
html.Sidebar #content .pageContent {
align-items: flex-start !important;
}
html.Sidebar #content .pageContent .leftContainer {
float: none !important;
width: calc(100% - 250px - var(--lzt-wide-gap)) !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
html.Sidebar #content .pageContent .leftContent {
margin-left: 0 !important;
width: 100% !important;
}
html.Sidebar #content .pageContent .leftSidebar {
float: none !important;
width: 250px !important;
flex: 0 0 250px !important;
margin: 0 !important;
}
html.Sidebar #content .pageContent > .mainContent,
html.Sidebar #content .pageContent > .main-container,
html.Sidebar #content .pageContent > .mainContainer {
float: none !important;
width: calc(100% - 276px - var(--lzt-wide-gap)) !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
html.Sidebar #content .pageContent > aside {
width: 276px !important;
flex: 0 0 276px !important;
}
html[data-lzt-account="true"] #content > .pageWidth > .pageContent,
html[data-lzt-account="true"] #content > .pageWidth > form > .pageContent {
display: flex !important;
align-items: flex-start !important;
gap: var(--lzt-wide-gap) !important;
}
html[data-lzt-account="true"] #content > .pageWidth > .pageContent > .accountSideBar,
html[data-lzt-account="true"] #content > .pageWidth > form > .pageContent > .accountSideBar {
float: none !important;
width: 260px !important;
flex: 0 0 260px !important;
margin: 0 !important;
}
html[data-lzt-account="true"] #content > .pageWidth > .pageContent > .accountContent,
html[data-lzt-account="true"] #content > .pageWidth > form > .pageContent > .accountContent {
float: none !important;
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
`;
const style = document.createElement('style');
style.id = 'lzt-wide-container-style';
style.textContent = css;
document.documentElement.appendChild(style);
const syncPage = () => {
document.documentElement.dataset.lztAccount = String(/^\/account(?:\/|$)/i.test(location.pathname));
};
const wrapHistory = (method) => {
const original = history[method];
history[method] = function () {
const result = original.apply(this, arguments);
syncPage();
return result;
};
};
wrapHistory('pushState');
wrapHistory('replaceState');
window.addEventListener('popstate', syncPage);
syncPage();
})();