/* ==UserStyle==
@name Desktop Forocoches
@namespace nisgrak
@description Correcciones al nuevo estilo de Forocoches
@version 0.0.26
@author Nisgrak
@homepageURL https://github.com/Nisgrak/desktop-forocoches
@updateURL https://github.com/Nisgrak/desktop-forocoches/raw/main/fc-style.user.css
@supportURL https://github.com/Nisgrak/desktop-forocoches/issues
@license GPL
@preprocessor stylus
@var color bgColor "Fondo Color" #ffe816
@var color sectionBgColor "Sección Color" #ffe816
@var color separatorColor "Separador Color" #ffe816
@var color quoteBgColor "Cita Fondo Color" #ffe816
@var color quoteTitleColor "Cita Título Color" #ffe816
@var color quoteTextColor "Cita Texto Color" #ffe816
@var checkbox quoteBorder "Cita Border" 1
==/UserStyle== */
@-moz-document regexp("(http[s]?:\\/\\/)*(www\\.)?forocoches.*") {
$defaultVarColor = '#ffe816';
body.dark_theme {
--background-color: bgColor != $defaultVarColor ? bgColor : #101010;
--header-menu-search-background: bgColor != $defaultVarColor ? bgColor : #101010;
--body-background-color: bgColor != $defaultVarColor ? bgColor : #101010;
--menu-background-color: bgColor != $defaultVarColor ? bgColor : #101010;
--section-background-color: sectionBgColor != $defaultVarColor ? sectionBgColor : #2a2a2a;
--quote-background-color: quoteBgColor != $defaultVarColor ? quoteBgColor : #303030;
--quote-title-color: quoteTitleColor != $defaultVarColor ? quoteTitleColor : #ffffff;
--quote-text-color: quoteTextColor != $defaultVarColor ? quoteTextColor : #ffffff;
--separator-color: separatorColor != $defaultVarColor ? separatorColor : #8d8d8d;
.dd-menu .dropdown-menu-bg {
background-color: #2e2e2e !important;
}
}
body {
--background-color: bgColor != $defaultVarColor ? bgColor : white;
--header-menu-search-background: bgColor != $defaultVarColor ? bgColor : white;
--body-background-color: bgColor != $defaultVarColor ? bgColor : #f5f5f5;
--menu-background-color: bgColor != $defaultVarColor ? bgColor : white;
--section-background-color: sectionBgColor != $defaultVarColor ? sectionBgColor : white;
--quote-background-color: quoteBgColor != $defaultVarColor ? quoteBgColor : #efefef;
--quote-title-color: quoteTitleColor != $defaultVarColor ? quoteTitleColor : #000000;
--quote-text-color: quoteTextColor != $defaultVarColor ? quoteTextColor : #000000;
--separator-color: separatorColor != $defaultVarColor ? separatorColor : #8d8d8d;
overflow: unset !important;
}
div.fc-ab-root {
display:none !important;
visibility: hidden!important;
}
header {
box-shadow: unset !important;
-webkit-box-shadow: unset !important;
}
#header {
max-width: unset;
margin: unset;
width: 100%;
height: 60px;
}
main {
margin: 0px;
width: 100%;
max-width: unset;
grid-template-columns: 1fr auto;
}
#container {
/* Título */
> section:nth-child(1) {
> div > button > span {
height: 30px;
width: 30px;
}
> div > h1 {
font-size: 20px;
}
}
/* Lista de páginas */
> section:nth-child(2) {
> div > div {
justify-content: center !important; /* Ir a Primera página */
> :nth-child(1) {
margin-right: 25px;
}
/* Páginas */
> :nth-child(2) {
span {
margin-right: 0px !important;
margin-left: 0px !important;
}
}
/* Ir a Última página */
> :nth-child(3) {
margin-left: 25px;
}
}
}
}
#social-networks {
grid-area: social-networks;
}
#sidebar {
}
/* Message */
div[id^='edit'] > section {
padding: 12px !important;
> div[id^=post]:not([id^='post_']) {
display: grid;
grid-template-rows: 210px 1fr 40px;
grid-template-columns: 214px 21px 1fr;
grid-template-areas: 'user separator content' 'info separator content' 'controls separator content'; /* Separator */
> separator {
height: 100%;
width: 1px;
grid-area: separator;
margin-left: 10px;
margin-right: 10px;
border-radius: 5px;
background-color: var(--separator-color);
}
/* User */
> div:nth-child(2):not(.smallfont), > div:first-child:not(separator) {
/* background-color: white; */
grid-area: user;
flex-direction: column;
justify-items: center;
justify-content: flex-start !important; /* Avatar, Username and description */
> :first-child {
flex-direction: column; /* Avatar */
> a {
height: 130px !important;
.thread-profile-image {
height: 130px !important;
width: 130px !important;
border-radius: 10% !important;
}
}
/* Username and description */
> :last-child {
align-items: center;
margin-left: 0px !important;
margin-top: 20px;
}
}
/* Message info */
> :last-child {
align-items: center !important;
margin-top: 25px;
flex-direction: row !important;
justify-content: center;
order: -1;
position: relative;
margin-top: 5px;
margin-bottom: 15px;
> div {
width: 100%;
position: relative;
display: flex;
justify-content: center;
margin-bottom: 0px !important;
> a {
position: absolute;
left: 0px;
}
> span {
}
}
/* Post Number */
> a {
position: absolute;
right: 0px;
> div {
color: var(--coral);
font-weight: bold;
font-size: 14px;
}
}
}
}
/* Content */
> div[id^='post_'] {
/* background-color: red; */
grid-area: content;
padding: 15px;
height: min-content;
> .squote {
background-color: var(--quote-background-color);
> .quote {
if (quoteBorder != 1) {
border: 0px !important;
}
div:first-child {
color: var(--quote-title-color);
}
div:last-child {
color: var(--quote-text-color);
}
}
}
/* Tiktok */
iframe[name^='__tt_embed__'] {
height: 100vh !important;
}
/* Twitter */
div.twitter-tweet {
width: 550px !important;
}
}
/* Info */
> div[id^='postmenu_'] {
display: block !important;
position: unset !important;
z-index: unset !important;
clip: unset !important;
left: unset !important;
top: unset !important;
> div {
padding: 0px !important;
margin: 0px !important;
height: 100%;
> div {
background-color: transparent !important;
border: 0px !important;
box-shadow: none !important;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
grid-template-areas: 'info link';
position: relative;
height: calc(100% - 40px);
--padding-bottom-icons: 0px;
--padding-left-icons: 15px;
--icons-size: 34px;
> separator {
display: none;
}
> h2 {
visibility: hidden;
> a, a > span {
visibility: visible;
}
}
> div {
grid-area: info;
width: 120px;
margin-left: 30px;
text-align: center;
word-break: break-word;
> p:empty {
display: none;
}
}
> a, h2 > a {
visibility: hidden;
width: 15px;
&:before {
visibility: visible;
position: absolute;
bottom: var(--padding-bottom-icons);
}
&:after {
padding: 2px;
padding-left: 15px;
padding-right: 15px;
display: none;
position: absolute;
bottom: calc(var(--padding-bottom-icons) + 20px);
border: 1px solid grey;
border-radius: 8px;
z-index: 15;
text-align: center;
white-space: nowrap;
background-color: #2e2e2e;
color: var(--coral);
visibility: visible;
font-weight: 400;
}
&:hover::after {
display: block;
}
}
> h2 >a {
&:before, &:after {
left: calc(var(--padding-left-icons) + (var(--icons-size) * 0));
}
&:before {
content: url('https://api.iconify.design/ri:user-3-fill.svg?color=%23ff5845');
}
&:after {
content: 'Ver Usuario';
}
}
> a[href^='private.php'] {
grid-area: mp;
&:before, &:after {
left: calc(var(--padding-left-icons) + (var(--icons-size) * 1));
}
&:before {
content: url('https://api.iconify.design/ic:baseline-email.svg?color=%23a4a4a4');
}
&:after {
content: 'Enviar Mensaje Privado';
}
}
> a[href^='search.php']:not([href*='starteronly']) {
grid-area: msg;
&:before, &:after {
left: calc(var(--padding-left-icons) + (var(--icons-size) * 2));
}
&:before {
content: url('https://api.iconify.design/ic:outline-message.svg?color=%23a4a4a4');
}
&:after {
content: 'Ver Mensajes';
}
}
> a[href^='search.php'][href*='starteronly'] {
grid-area: thread;
&:before, &:after {
left: calc(var(--padding-left-icons) + (var(--icons-size) * 3));
}
&:before {
content: url('https://api.iconify.design/mdi:message.svg?color=%23a4a4a4');
}
&:after {
content: 'Ver Temas Iniciados';
}
}
> a[href^='profile.php']:not([href*='ignore']) {
grid-area: contact;
&:before, &:after {
left: calc(var(--padding-left-icons) + (var(--icons-size) * 4));
}
&:before {
content: url('https://api.iconify.design/bx:bxs-user-plus.svg?color=%23a4a4a4');
}
&:after {
content: 'Añadir a Lista de Contactos';
}
}
> a[href^='profile.php'][href*='ignore'] {
grid-area: ignore;
&:before, &:after {
left: calc(var(--padding-left-icons) + (var(--icons-size) * 5));
}
&:before {
content: url('https://api.iconify.design/wpf:mute.svg?color=%23a4a4a4');
}
&:after {
content: 'Añadir a lista de ignorados';
}
}
}
}
}
/* Controls */
> div:nth-last-child(2) {
/* background-color: green; */
grid-area: controls;
justify-content: flex-start;
flex-direction: column-reverse !important;
> separator {
display: none;
}
> div:not(.date-and-time-gray) {
flex-direction: row;
align-items: flex-end !important;
max-height: 24px;
position: relative;
span:last-child:not(.post-controls-icon) {
display: none;
}
a {
--padding-bottom-icons: 0px;
&:after {
padding: 2px;
padding-left: 15px;
padding-right: 15px;
display: none;
position: absolute;
bottom: calc(var(--padding-bottom-icons) + 35px);
border: 1px solid grey;
border-radius: 8px;
z-index: 15;
text-align: center;
white-space: nowrap;
background-color: #2e2e2e;
color: var(--coral);
visibility: visible;
font-weight: 400;
}
&:hover::after {
display: block;
}
}
> a[href^='report.php'] {
&:after {
content: 'Reportar';
}
}
> div:nth-child(2) > a {
&:after {
content: 'Responder';
}
}
> a:nth-child(3) {
&:after {
content: 'Citar';
}
}
> a:nth-child(4):has(> img[src$='add_on.svg']) {
&:after {
content: 'Quitar de multicita';
}
}
> a:nth-child(4):has(> img[src$='add_off.svg']) {
&:after {
content: 'Añadir a multicita';
}
}
> a:last-child {
margin-left: 0px !important;
}
}
> div.date-and-time-gray {
text-align: center;
margin-bottom: 30px;
}
}
}
}
}
@-moz-document regexp("(http[s]?:\\/\\/)*www.tiktok.com/embed/v2/.*?.*") {
/* Background */
div[data-testid='card-component'] {
background-color: white;
}
/* Fondo de body para igualar el color del post */
html, body, .main-body, #root, #main, #main > div {
background-color: transparent !important;
}
}