MediaWiki:Common.css: различия между версиями
Перейти к навигации
Перейти к поиску
Нет описания правки Метка: отменено |
Нет описания правки |
||
(не показано 10 промежуточных версий этого же участника) | |||
Строка 1: | Строка 1: | ||
.pie-chart445 { | |||
position: absolute; | |||
min-width: 200px; | |||
min-height: 200px; | |||
overflow: hidden; | |||
} | } | ||
.pie-chart445 img { | |||
width: 100%; | |||
height: 100%; | |||
display: block; | |||
} | } | ||
. | |||
--header-size: 3.5rem; | |||
--header-card-maxheight: 80vh; | |||
--width-layout--extended: calc(var(--width-layout) * 1.5); | |||
--width-toc: 240px; | |||
--line-height: 1.6; | |||
--line-height-xs: 1.25; | |||
--line-height-sm: 1.375; | |||
--toolbar-size: 2.5rem; | |||
--space-unit: 1rem; | |||
--space-xxs: calc(0.25 * var(--space-unit)); | |||
--space-xs: calc(0.5 * var(--space-unit)); | |||
--space-sm: calc(0.75 * var(--space-unit)); | |||
--space-md: var(--space-unit); | |||
--space-lg: calc(1.25 * var(--space-unit)); | |||
--space-xl: calc(1.5 * var(--space-unit)); | |||
--space-xxl: calc(2 * var(--space-unit)); | |||
--margin-layout: calc((100vw - var(--width-layout)) / 2); | |||
--padding-page: 24px; | |||
--border-radius-medium: calc(var(--border-radius-base) * 2); | |||
--border-radius-large: calc(var(--border-radius-base) * 3); | |||
--color-inverted-primary: #fff; | |||
--color-surface-0: hsl(var(--color-primary__h),var(--color-surface-0__s),var(--color-surface-0__l)); | |||
--color-surface-1: hsl(var(--color-primary__h),var(--color-surface-1__s),var(--color-surface-1__l)); | |||
--color-surface-2: hsl(var(--color-primary__h),var(--color-surface-2__s),var(--color-surface-2__l)); | |||
--color-surface-2--hover: hsl(var(--color-primary__h),var(--color-surface-2__s),calc(var(--color-surface-2__l) + var(--delta-lightness-hover-state))); | |||
--color-surface-2--active: hsl(var(--color-primary__h),var(--color-surface-2__s),calc(var(--color-surface-2__l) - var(--delta-lightness-hover-state))); | |||
--color-surface-3: hsl(var(--color-primary__h),var(--color-surface-3__s),var(--color-surface-3__l)); | |||
--color-surface-4: hsl(var(--color-primary__h),var(--color-surface-4__s),var(--color-surface-4__l)); | |||
--color-link: var(--color-progressive); | |||
--color-link--hover: var(--color-progressive--hover); | |||
--color-link--active: var(--color-progressive--active); | |||
--box-shadow-border: var(--border-color-base) 0 0 0 1px; | |||
--box-shadow-drop-small: 0 calc(var(--shadow-vertical-small) * 0.028) 2.2px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .03)),0 calc(var(--shadow-vertical-small) * 0.067) 5.3px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .01)),0 calc(var(--shadow-vertical-small) * 0.125) 10px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .02)),0 calc(var(--shadow-vertical-small) * 0.223) 17.9px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .02)),0 calc(var(--shadow-vertical-small) * 0.418) 33.4px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .03)),0 var(--shadow-vertical-small) 80px hsla(var(--surface-shadow),var(--shadow-strength)); | |||
--box-shadow-drop-medium: 0 calc(var(--shadow-vertical-medium) * 0.028) 2.2px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .03)),0 calc(var(--shadow-vertical-medium) * 0.067) 5.3px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .01)),0 calc(var(--shadow-vertical-medium) * 0.125) 10px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .02)),0 calc(var(--shadow-vertical-medium) * 0.223) 17.9px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .02)),0 calc(var(--shadow-vertical-medium) * 0.418) 33.4px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .03)),0 var(--shadow-vertical-medium) 80px hsla(var(--surface-shadow),var(--shadow-strength)); | |||
--box-shadow-drop-xx-large: 0 calc(var(--shadow-vertical-xx-large) * 0.028) 2.2px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .03)),0 calc(var(--shadow-vertical-xx-large) * 0.067) 5.3px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .01)),0 calc(var(--shadow-vertical-xx-large) * 0.125) 10px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .02)),0 calc(var(--shadow-vertical-xx-large) * 0.223) 17.9px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .02)),0 calc(var(--shadow-vertical-xx-large) * 0.418) 33.4px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .03)),0 var(--shadow-vertical-xx-large) 80px hsla(var(--surface-shadow),var(--shadow-strength)); | |||
--font-size-base: 1rem; | |||
--transition-delay-menu: 100ms; | |||
--delta-lightness-hover-state: 4%; | |||
--shadow-vertical-small: 4px; | |||
--shadow-vertical-medium: 16px; | |||
--shadow-vertical-xx-large: 80px; | |||
--border-width-base: 1px; | |||
--border-width-thick: 2px; | |||
--border-radius-base: 4px; | |||
--border-radius-sharp: 0; | |||
--border-radius-pill: 9999px; | |||
--border-radius-circle: 50%; | |||
--font-size-small: calc(var(--font-size-base) * 0.875); | |||
--font-size-medium: var(--font-size-base); | |||
--font-size-large: calc(var(--font-size-base) * 1.125); | |||
--color-base--hover: var(--color-subtle); | |||
--color-placeholder: var(--color-subtle); | |||
--color-disabled: var(--color-subtle); | |||
--color-inverted: #fff; | |||
--color-inverted-fixed: #fff; | |||
--color-progressive: hsl(var(--color-primary__h),var(--color-primary__s),var(--color-primary__l)); | |||
--color-progressive--hover: hsl(var(--color-primary__h),var(--color-primary__s),calc(var(--color-primary__l) + var(--delta-lightness-hover-state))); | |||
--color-progressive--active: hsl(var(--color-primary__h),var(--color-primary__s),calc(var(--color-primary__l) - var(--delta-lightness-hover-state))); | |||
--color-progressive--focus: var(--color-progressive); | |||
--color-destructive: #d60021; | |||
--color-destructive--hover: #ef4444; | |||
--color-destructive--active: #9c0015; | |||
--color-destructive--focus: var(--color-progressive); | |||
--color-visited: var(--color-link); | |||
--color-destructive--visited: var(--color-destructive); | |||
--color-error: var(--color-destructive); | |||
--color-warning: #c77f00; | |||
--color-success: #009768; | |||
--color-notice: var(--color-base); | |||
--color-content-added: var(--color-success); | |||
--color-content-removed: var(--color-destructive); | |||
--filter-invert-icon: 0; | |||
--filter-invert-primary-button-icon: 1; | |||
--box-shadow-color-base: hsla(var(--surface-shadow),var(--shadow-strength)); | |||
--box-shadow-color-progressive--active: var(--color-progressive--active); | |||
--box-shadow-color-progressive--focus: var(--color-progressive); | |||
--box-shadow-color-progressive-selected: var(--color-progressive); | |||
--box-shadow-color-progressive-selected--hover: var(--color-progressive--hover); | |||
--box-shadow-color-progressive-selected--active: var(--color-progressive--active); | |||
--box-shadow-color-destructive--focus: var(--color-progressive); | |||
--box-shadow-color-inverted: #fff; | |||
--box-shadow-color-transparent: transparent; | |||
--background-color-interactive: var(--color-surface-2); | |||
--background-color-interactive-subtle: var(--color-surface-1); | |||
--background-color-disabled: var(--color-surface-3); | |||
--background-color-disabled-subtle: var(--color-surface-1); | |||
--background-color-progressive: var(--color-progressive); | |||
--background-color-progressive--hover: var(--color-progressive--hover); | |||
--background-color-progressive--active: var(--color-progressive--active); | |||
--background-color-progressive--focus: var(--color-progressive); | |||
--background-color-destructive: var(--color-destructive); | |||
--background-color-destructive--hover: var(--color-destructive--hover); | |||
--background-color-destructive--active: var(--color-destructive--active); | |||
--background-color-destructive--focus: var(--color-progressive); | |||
--background-color-error: var(--color-destructive); | |||
--background-color-error--hover: var(--color-destructive--hover); | |||
--background-color-error--active: var(--color-destructive--active); | |||
--background-color-error-subtle: var(--background-color-destructive-subtle); | |||
--background-color-notice-subtle: var(--color-surface-2); | |||
--background-color-content-added: var(--background-color-success-subtle); | |||
--background-color-content-removed: var(--background-color-destructive-subtle); | |||
--background-color-backdrop-light: hsla(var(--color-primary__h),var(--color-surface-0__s),var(--color-surface-0__l),0.65); | |||
--background-color-backdrop-dark: rgba(0,0,0,0.65); | |||
--background-color-base: var(--color-surface-0); | |||
--background-color-neutral: var(--color-surface-2); | |||
--background-color-neutral-subtle: var(--color-surface-1); | |||
--background-color-transparent: transparent; | |||
--background-color-input-binary--checked: var(--color-progressive); | |||
--opacity-icon-base: 0.6; | |||
--opacity-icon-base--hover: 0.8; | |||
--opacity-icon-base--selected: 1; | |||
--opacity-icon-base--disabled: 0.3; | |||
--opacity-icon-placeholder: 0.4; | |||
--opacity-icon-subtle: 0.5; | |||
--border-color-disabled: var(--border-color-subtle); | |||
--border-color-muted: var(--border-color-subtle); | |||
--border-color-inverted: #fff; | |||
--border-color-progressive: var(--color-progressive); | |||
--border-color-progressive--hover: var(--color-progressive--hover); | |||
--border-color-progressive--active: var(--color-progressive--active); | |||
--border-color-progressive--focus: var(--color-progressive); | |||
--border-color-destructive: var(--color-destructive); | |||
--border-color-destructive--hover: var(--color-destructive--hover); | |||
--border-color-destructive--active: var(--color-destructive--active); | |||
--border-color-destructive--focus: var(--color-progressive); | |||
--border-color-error: var(--border-color-base); | |||
--border-color-error--hover: var(--border-color-base); | |||
--border-color-warning: var(--border-color-base); | |||
--border-color-success: var(--border-color-base); | |||
--border-color-notice: var(--border-color-base); | |||
--border-color-content-added: var(--border-color-base); | |||
--border-color-content-removed: var(--border-color-base); | |||
--border-color-transparent: transparent; | |||
--border-color-divider: var(--border-color-base); | |||
--outline-color-progressive--focus: var(--color-progressive); | |||
--color-link-red: var(--color-destructive); | |||
--color-link-red--hover: var(--color-destructive--hover); | |||
--color-link-red--active: var(--color-destructive--active); | |||
--color-link-red--focus: var(--color-destructive--focus); | |||
--color-link-red--visited: var(--color-destructive--visited); | |||
--border-color-input--hover: var(--border-color-interactive); | |||
--border-color-input-binary: var(--border-color-interactive); | |||
--border-color-input-binary--hover: var(--border-color-progressive--hover); | |||
--border-color-input-binary--active: var(--border-color-progressive--active); | |||
--border-color-input-binary--focus: var(--border-color-progressive--focus); | |||
--border-color-input-binary--checked: var(--border-color-progressive); | |||
--background-color-primary--hover: var(--background-color-progressive-subtle); | |||
--background-color-primary--active: var(--background-color-progressive-subtle); | |||
--background-color-overlay: var(--background-color-backdrop-light); | |||
--background-color-overlay--lighter: var(--background-color-backdrop-light); | |||
--background-color-quiet--hover: var(--background-color-button-quiet--hover); | |||
--background-color-quiet--active: var(--background-color-button-quiet--active); | |||
--border-radius--small: var(--border-radius-base); | |||
--border-radius--medium: var(--border-radius-medium); | |||
--border-radius--large: var(--border-radius-large); | |||
--border-radius--pill: var(--border-radius-pill); | |||
--box-shadow-card: var(--box-shadow-drop-medium); | |||
--box-shadow-dialog: var(--box-shadow-drop-xx-large); | |||
--color-base--emphasized: var(--color-emphasized); | |||
--color-base--subtle: var(--color-subtle); | |||
--color-primary: var(--color-progressive); | |||
--color-primary--hover: var(--color-progressive--hover); | |||
--color-primary--active: var(--color-progressive--active); | |||
--color-text-error: var(--color-destructive); | |||
--color-text-warning: var(--color-base); | |||
--color-text-success: var(--color-success); | |||
--opacity-icon-base--active: var(--opacity-icon-base--selected); | |||
--font-size-x-small: calc(var(--font-size-base) * 0.8125); | |||
--font-size-x-large: calc(var(--font-size-base) * 1.375); | |||
--font-size-xx-large: calc(var(--font-size-base) * 1.5); | |||
--font-size-xxx-large: calc(var(--font-size-base) * 2); | |||
--color-syntax-grey: #90a4ae; | |||
--size-icon: 1.25rem; | |||
--font-family-base: var(--font-family-citizen-base),var(--font-family-language-base),system-ui,-apple-system,sans-serif; | |||
--font-family-serif: var(--font-family-citizen-serif),var(--font-family-language-serif),'Linux Libertine','Georgia','Times','Source Serif Pro',serif; | |||
--font-family-monospace: var(--font-family-citizen-monospace),var(--font-family-language-monospace),'Menlo','Consolas','Liberation Mono','Fira Code','Courier New',monospace; | |||
--font-family-citizen-base: 'Roboto'; | |||
--font-family-citizen-serif: 'Roboto Serif'; | |||
--font-family-citizen-monospace: 'Roboto Mono'; | |||
--font-family-language-base: ''; | |||
--font-family-language-serif: ''; | |||
--font-family-language-monospace: ''; | |||
--font-weight-normal: 400; | |||
--font-weight-medium: calc(var(--font-weight-normal) + 100); | |||
--font-weight-semibold: calc(var(--font-weight-normal) + 200); | |||
--font-weight-bold: calc(var(--font-weight-normal) + 300); | |||
--transition-hover: 150ms cubic-bezier(0.215,0.61,0.355,1); | |||
--filter-invert-primary: invert(1) hue-rotate(180deg); | |||
--filter-invert-fixed: invert(1) hue-rotate(180deg); | |||
--overflow-gradient-size: 2rem; | |||
--transition-menu: 250ms cubic-bezier(0.4,0,0.2,1); | |||
--color-syntax-red: #f07178; | |||
--color-syntax-orange: #f78c6c; | |||
--color-syntax-yellow: #ffcb6b; | |||
--color-syntax-green: #c3e88d; | |||
--color-syntax-cyan: #89ddff; | |||
--color-syntax-blue: #82aaff; | |||
--color-syntax-paleblue: #b2ccd6; | |||
--color-syntax-purple: #c792ea; | |||
--color-syntax-brown: #916b53; | |||
--color-syntax-pink: #ff9cac; | |||
--color-syntax-violet: #bb80b3; | |||
--color-surface-0__s: 20%; | |||
--color-surface-0__l: 8%; | |||
--color-surface-1__s: 25%; | |||
--color-surface-1__l: 10%; | |||
--color-surface-2__s: 25%; | |||
--color-surface-2__l: 13%; | |||
--color-surface-3__s: 15%; | |||
--color-surface-3__l: 18%; | |||
--color-surface-4__s: 15%; | |||
--color-surface-4__l: 23%; | |||
--color-emphasized: hsl(var(--color-primary__h),80%,95%); | |||
--color-base: hsl(var(--color-primary__h),25%,80%); | |||
--color-subtle: hsl(var(--color-primary__h),25%,65%); | |||
--background-color-progressive-subtle: hsl(var(--color-primary__h),var(--color-primary__s),10%); | |||
--background-color-destructive-subtle: #360003; | |||
--background-color-warning-subtle: #251400; | |||
--background-color-success-subtle: #001f12; | |||
--background-color-button-quiet--hover: rgba(255,255,255,0.04); | |||
--background-color-button-quiet--active: rgba(255,255,255,0.08); | |||
--background-color-icon: rgba(255,255,255,var(--opacity-icon-base)); | |||
--background-color-icon--hover: rgba(255,255,255,var(--opacity-icon-base--hover)); | |||
--background-color-icon--active: rgba(255,255,255,var(--opacity-icon-base--active)); | |||
--border-color-base: rgba(255,255,255,0.05); | |||
--border-color-subtle: rgba(255,255,255,0.02); | |||
--border-color-interactive: rgba(255,255,255,0.08); | |||
--surface-shadow: var(--color-primary__h),50%,3%; | |||
--shadow-strength: 0.8; | |||
--filter-invert: invert(1) hue-rotate(180deg); | |||
--font-grade: -25; | |||
color-scheme: dark; | |||
--width-layout: 1080px; | |||
--color-primary__h: 42; | |||
--color-primary__s: 26%; | |||
--color-primary__l: 57%; | |||
font-family: var(--font-family-base); | |||
font-variation-settings: 'GRAD' var(--font-grade); | |||
font-weight: var(--font-weight-normal); | |||
color: var(--color-base); | |||
accent-color: var(--color-progressive); | |||
--height-sticky-header: 0 !important; | |||
direction: ltr; | |||
font-size: var(--font-size-medium); | |||
line-height: var(--line-height); | |||
box-sizing: inherit; | |||
border-color: var(--border-color-base); | |||
border-style: solid; | |||
border-width: 0; | |||
position: relative; | position: relative; | ||
min-width: 200px; | |||
min-height: 200px; | |||
max-width: 200px; | |||
overflow: hidden; | overflow: hidden; | ||
transform: scaleX(-1) rotate(-90deg); | |||
.random-button { | |||
list-style-type: none; | |||
margin: 10px 0; | |||
} | } | ||
. | .random-button a { | ||
display: inline-block; | |||
padding: 10px 20px; | |||
background-color: #007bff; | |||
padding: | |||
background-color: | |||
color: white; | color: white; | ||
text-decoration: none; | text-decoration: none; | ||
border-radius: 5px; | |||
font-weight: bold; | |||
text-align: center; | |||
} | } | ||
.random-button a:hover { | |||
. | background-color: #0056b3; | ||
} | } | ||
.random-button a::after { | |||
content: attr(href); | |||
display: none; | |||
} | } | ||
.image | |||
/* Основной стиль элемента списка */ | |||
li.zoomable-image { | |||
position: relative; | position: relative; | ||
display: inline-block; | display: inline-block; | ||
} | } | ||
/* Стиль изображения */ | |||
.image-to-zoom { | |||
width: 200px; /* Начальный размер изображения */ | |||
transition: transform 0.3s ease; | transition: transform 0.3s ease; /* Анимация при зумировании */ | ||
} | } | ||
/* | /* Зумирование изображения при наведении */ | ||
.image | li.zoomable-image:hover .image-to-zoom { | ||
transform: scale( | transform: scale(2); /* Увеличение изображения в 2 раза */ | ||
} | } | ||
Текущая версия от 22:40, 14 октября 2024
.pie-chart445 {
position: absolute;
min-width: 200px;
min-height: 200px;
overflow: hidden;
}
.pie-chart445 img {
width: 100%;
height: 100%;
display: block;
}
--header-size: 3.5rem;
--header-card-maxheight: 80vh;
--width-layout--extended: calc(var(--width-layout) * 1.5);
--width-toc: 240px;
--line-height: 1.6;
--line-height-xs: 1.25;
--line-height-sm: 1.375;
--toolbar-size: 2.5rem;
--space-unit: 1rem;
--space-xxs: calc(0.25 * var(--space-unit));
--space-xs: calc(0.5 * var(--space-unit));
--space-sm: calc(0.75 * var(--space-unit));
--space-md: var(--space-unit);
--space-lg: calc(1.25 * var(--space-unit));
--space-xl: calc(1.5 * var(--space-unit));
--space-xxl: calc(2 * var(--space-unit));
--margin-layout: calc((100vw - var(--width-layout)) / 2);
--padding-page: 24px;
--border-radius-medium: calc(var(--border-radius-base) * 2);
--border-radius-large: calc(var(--border-radius-base) * 3);
--color-inverted-primary: #fff;
--color-surface-0: hsl(var(--color-primary__h),var(--color-surface-0__s),var(--color-surface-0__l));
--color-surface-1: hsl(var(--color-primary__h),var(--color-surface-1__s),var(--color-surface-1__l));
--color-surface-2: hsl(var(--color-primary__h),var(--color-surface-2__s),var(--color-surface-2__l));
--color-surface-2--hover: hsl(var(--color-primary__h),var(--color-surface-2__s),calc(var(--color-surface-2__l) + var(--delta-lightness-hover-state)));
--color-surface-2--active: hsl(var(--color-primary__h),var(--color-surface-2__s),calc(var(--color-surface-2__l) - var(--delta-lightness-hover-state)));
--color-surface-3: hsl(var(--color-primary__h),var(--color-surface-3__s),var(--color-surface-3__l));
--color-surface-4: hsl(var(--color-primary__h),var(--color-surface-4__s),var(--color-surface-4__l));
--color-link: var(--color-progressive);
--color-link--hover: var(--color-progressive--hover);
--color-link--active: var(--color-progressive--active);
--box-shadow-border: var(--border-color-base) 0 0 0 1px;
--box-shadow-drop-small: 0 calc(var(--shadow-vertical-small) * 0.028) 2.2px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .03)),0 calc(var(--shadow-vertical-small) * 0.067) 5.3px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .01)),0 calc(var(--shadow-vertical-small) * 0.125) 10px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .02)),0 calc(var(--shadow-vertical-small) * 0.223) 17.9px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .02)),0 calc(var(--shadow-vertical-small) * 0.418) 33.4px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .03)),0 var(--shadow-vertical-small) 80px hsla(var(--surface-shadow),var(--shadow-strength));
--box-shadow-drop-medium: 0 calc(var(--shadow-vertical-medium) * 0.028) 2.2px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .03)),0 calc(var(--shadow-vertical-medium) * 0.067) 5.3px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .01)),0 calc(var(--shadow-vertical-medium) * 0.125) 10px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .02)),0 calc(var(--shadow-vertical-medium) * 0.223) 17.9px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .02)),0 calc(var(--shadow-vertical-medium) * 0.418) 33.4px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .03)),0 var(--shadow-vertical-medium) 80px hsla(var(--surface-shadow),var(--shadow-strength));
--box-shadow-drop-xx-large: 0 calc(var(--shadow-vertical-xx-large) * 0.028) 2.2px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .03)),0 calc(var(--shadow-vertical-xx-large) * 0.067) 5.3px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .01)),0 calc(var(--shadow-vertical-xx-large) * 0.125) 10px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .02)),0 calc(var(--shadow-vertical-xx-large) * 0.223) 17.9px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .02)),0 calc(var(--shadow-vertical-xx-large) * 0.418) 33.4px hsla(var(--surface-shadow),calc(var(--shadow-strength) + .03)),0 var(--shadow-vertical-xx-large) 80px hsla(var(--surface-shadow),var(--shadow-strength));
--font-size-base: 1rem;
--transition-delay-menu: 100ms;
--delta-lightness-hover-state: 4%;
--shadow-vertical-small: 4px;
--shadow-vertical-medium: 16px;
--shadow-vertical-xx-large: 80px;
--border-width-base: 1px;
--border-width-thick: 2px;
--border-radius-base: 4px;
--border-radius-sharp: 0;
--border-radius-pill: 9999px;
--border-radius-circle: 50%;
--font-size-small: calc(var(--font-size-base) * 0.875);
--font-size-medium: var(--font-size-base);
--font-size-large: calc(var(--font-size-base) * 1.125);
--color-base--hover: var(--color-subtle);
--color-placeholder: var(--color-subtle);
--color-disabled: var(--color-subtle);
--color-inverted: #fff;
--color-inverted-fixed: #fff;
--color-progressive: hsl(var(--color-primary__h),var(--color-primary__s),var(--color-primary__l));
--color-progressive--hover: hsl(var(--color-primary__h),var(--color-primary__s),calc(var(--color-primary__l) + var(--delta-lightness-hover-state)));
--color-progressive--active: hsl(var(--color-primary__h),var(--color-primary__s),calc(var(--color-primary__l) - var(--delta-lightness-hover-state)));
--color-progressive--focus: var(--color-progressive);
--color-destructive: #d60021;
--color-destructive--hover: #ef4444;
--color-destructive--active: #9c0015;
--color-destructive--focus: var(--color-progressive);
--color-visited: var(--color-link);
--color-destructive--visited: var(--color-destructive);
--color-error: var(--color-destructive);
--color-warning: #c77f00;
--color-success: #009768;
--color-notice: var(--color-base);
--color-content-added: var(--color-success);
--color-content-removed: var(--color-destructive);
--filter-invert-icon: 0;
--filter-invert-primary-button-icon: 1;
--box-shadow-color-base: hsla(var(--surface-shadow),var(--shadow-strength));
--box-shadow-color-progressive--active: var(--color-progressive--active);
--box-shadow-color-progressive--focus: var(--color-progressive);
--box-shadow-color-progressive-selected: var(--color-progressive);
--box-shadow-color-progressive-selected--hover: var(--color-progressive--hover);
--box-shadow-color-progressive-selected--active: var(--color-progressive--active);
--box-shadow-color-destructive--focus: var(--color-progressive);
--box-shadow-color-inverted: #fff;
--box-shadow-color-transparent: transparent;
--background-color-interactive: var(--color-surface-2);
--background-color-interactive-subtle: var(--color-surface-1);
--background-color-disabled: var(--color-surface-3);
--background-color-disabled-subtle: var(--color-surface-1);
--background-color-progressive: var(--color-progressive);
--background-color-progressive--hover: var(--color-progressive--hover);
--background-color-progressive--active: var(--color-progressive--active);
--background-color-progressive--focus: var(--color-progressive);
--background-color-destructive: var(--color-destructive);
--background-color-destructive--hover: var(--color-destructive--hover);
--background-color-destructive--active: var(--color-destructive--active);
--background-color-destructive--focus: var(--color-progressive);
--background-color-error: var(--color-destructive);
--background-color-error--hover: var(--color-destructive--hover);
--background-color-error--active: var(--color-destructive--active);
--background-color-error-subtle: var(--background-color-destructive-subtle);
--background-color-notice-subtle: var(--color-surface-2);
--background-color-content-added: var(--background-color-success-subtle);
--background-color-content-removed: var(--background-color-destructive-subtle);
--background-color-backdrop-light: hsla(var(--color-primary__h),var(--color-surface-0__s),var(--color-surface-0__l),0.65);
--background-color-backdrop-dark: rgba(0,0,0,0.65);
--background-color-base: var(--color-surface-0);
--background-color-neutral: var(--color-surface-2);
--background-color-neutral-subtle: var(--color-surface-1);
--background-color-transparent: transparent;
--background-color-input-binary--checked: var(--color-progressive);
--opacity-icon-base: 0.6;
--opacity-icon-base--hover: 0.8;
--opacity-icon-base--selected: 1;
--opacity-icon-base--disabled: 0.3;
--opacity-icon-placeholder: 0.4;
--opacity-icon-subtle: 0.5;
--border-color-disabled: var(--border-color-subtle);
--border-color-muted: var(--border-color-subtle);
--border-color-inverted: #fff;
--border-color-progressive: var(--color-progressive);
--border-color-progressive--hover: var(--color-progressive--hover);
--border-color-progressive--active: var(--color-progressive--active);
--border-color-progressive--focus: var(--color-progressive);
--border-color-destructive: var(--color-destructive);
--border-color-destructive--hover: var(--color-destructive--hover);
--border-color-destructive--active: var(--color-destructive--active);
--border-color-destructive--focus: var(--color-progressive);
--border-color-error: var(--border-color-base);
--border-color-error--hover: var(--border-color-base);
--border-color-warning: var(--border-color-base);
--border-color-success: var(--border-color-base);
--border-color-notice: var(--border-color-base);
--border-color-content-added: var(--border-color-base);
--border-color-content-removed: var(--border-color-base);
--border-color-transparent: transparent;
--border-color-divider: var(--border-color-base);
--outline-color-progressive--focus: var(--color-progressive);
--color-link-red: var(--color-destructive);
--color-link-red--hover: var(--color-destructive--hover);
--color-link-red--active: var(--color-destructive--active);
--color-link-red--focus: var(--color-destructive--focus);
--color-link-red--visited: var(--color-destructive--visited);
--border-color-input--hover: var(--border-color-interactive);
--border-color-input-binary: var(--border-color-interactive);
--border-color-input-binary--hover: var(--border-color-progressive--hover);
--border-color-input-binary--active: var(--border-color-progressive--active);
--border-color-input-binary--focus: var(--border-color-progressive--focus);
--border-color-input-binary--checked: var(--border-color-progressive);
--background-color-primary--hover: var(--background-color-progressive-subtle);
--background-color-primary--active: var(--background-color-progressive-subtle);
--background-color-overlay: var(--background-color-backdrop-light);
--background-color-overlay--lighter: var(--background-color-backdrop-light);
--background-color-quiet--hover: var(--background-color-button-quiet--hover);
--background-color-quiet--active: var(--background-color-button-quiet--active);
--border-radius--small: var(--border-radius-base);
--border-radius--medium: var(--border-radius-medium);
--border-radius--large: var(--border-radius-large);
--border-radius--pill: var(--border-radius-pill);
--box-shadow-card: var(--box-shadow-drop-medium);
--box-shadow-dialog: var(--box-shadow-drop-xx-large);
--color-base--emphasized: var(--color-emphasized);
--color-base--subtle: var(--color-subtle);
--color-primary: var(--color-progressive);
--color-primary--hover: var(--color-progressive--hover);
--color-primary--active: var(--color-progressive--active);
--color-text-error: var(--color-destructive);
--color-text-warning: var(--color-base);
--color-text-success: var(--color-success);
--opacity-icon-base--active: var(--opacity-icon-base--selected);
--font-size-x-small: calc(var(--font-size-base) * 0.8125);
--font-size-x-large: calc(var(--font-size-base) * 1.375);
--font-size-xx-large: calc(var(--font-size-base) * 1.5);
--font-size-xxx-large: calc(var(--font-size-base) * 2);
--color-syntax-grey: #90a4ae;
--size-icon: 1.25rem;
--font-family-base: var(--font-family-citizen-base),var(--font-family-language-base),system-ui,-apple-system,sans-serif;
--font-family-serif: var(--font-family-citizen-serif),var(--font-family-language-serif),'Linux Libertine','Georgia','Times','Source Serif Pro',serif;
--font-family-monospace: var(--font-family-citizen-monospace),var(--font-family-language-monospace),'Menlo','Consolas','Liberation Mono','Fira Code','Courier New',monospace;
--font-family-citizen-base: 'Roboto';
--font-family-citizen-serif: 'Roboto Serif';
--font-family-citizen-monospace: 'Roboto Mono';
--font-family-language-base: '';
--font-family-language-serif: '';
--font-family-language-monospace: '';
--font-weight-normal: 400;
--font-weight-medium: calc(var(--font-weight-normal) + 100);
--font-weight-semibold: calc(var(--font-weight-normal) + 200);
--font-weight-bold: calc(var(--font-weight-normal) + 300);
--transition-hover: 150ms cubic-bezier(0.215,0.61,0.355,1);
--filter-invert-primary: invert(1) hue-rotate(180deg);
--filter-invert-fixed: invert(1) hue-rotate(180deg);
--overflow-gradient-size: 2rem;
--transition-menu: 250ms cubic-bezier(0.4,0,0.2,1);
--color-syntax-red: #f07178;
--color-syntax-orange: #f78c6c;
--color-syntax-yellow: #ffcb6b;
--color-syntax-green: #c3e88d;
--color-syntax-cyan: #89ddff;
--color-syntax-blue: #82aaff;
--color-syntax-paleblue: #b2ccd6;
--color-syntax-purple: #c792ea;
--color-syntax-brown: #916b53;
--color-syntax-pink: #ff9cac;
--color-syntax-violet: #bb80b3;
--color-surface-0__s: 20%;
--color-surface-0__l: 8%;
--color-surface-1__s: 25%;
--color-surface-1__l: 10%;
--color-surface-2__s: 25%;
--color-surface-2__l: 13%;
--color-surface-3__s: 15%;
--color-surface-3__l: 18%;
--color-surface-4__s: 15%;
--color-surface-4__l: 23%;
--color-emphasized: hsl(var(--color-primary__h),80%,95%);
--color-base: hsl(var(--color-primary__h),25%,80%);
--color-subtle: hsl(var(--color-primary__h),25%,65%);
--background-color-progressive-subtle: hsl(var(--color-primary__h),var(--color-primary__s),10%);
--background-color-destructive-subtle: #360003;
--background-color-warning-subtle: #251400;
--background-color-success-subtle: #001f12;
--background-color-button-quiet--hover: rgba(255,255,255,0.04);
--background-color-button-quiet--active: rgba(255,255,255,0.08);
--background-color-icon: rgba(255,255,255,var(--opacity-icon-base));
--background-color-icon--hover: rgba(255,255,255,var(--opacity-icon-base--hover));
--background-color-icon--active: rgba(255,255,255,var(--opacity-icon-base--active));
--border-color-base: rgba(255,255,255,0.05);
--border-color-subtle: rgba(255,255,255,0.02);
--border-color-interactive: rgba(255,255,255,0.08);
--surface-shadow: var(--color-primary__h),50%,3%;
--shadow-strength: 0.8;
--filter-invert: invert(1) hue-rotate(180deg);
--font-grade: -25;
color-scheme: dark;
--width-layout: 1080px;
--color-primary__h: 42;
--color-primary__s: 26%;
--color-primary__l: 57%;
font-family: var(--font-family-base);
font-variation-settings: 'GRAD' var(--font-grade);
font-weight: var(--font-weight-normal);
color: var(--color-base);
accent-color: var(--color-progressive);
--height-sticky-header: 0 !important;
direction: ltr;
font-size: var(--font-size-medium);
line-height: var(--line-height);
box-sizing: inherit;
border-color: var(--border-color-base);
border-style: solid;
border-width: 0;
position: relative;
min-width: 200px;
min-height: 200px;
max-width: 200px;
overflow: hidden;
transform: scaleX(-1) rotate(-90deg);
.random-button {
list-style-type: none;
margin: 10px 0;
}
.random-button a {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
text-align: center;
}
.random-button a:hover {
background-color: #0056b3;
}
.random-button a::after {
content: attr(href);
display: none;
}
/* Основной стиль элемента списка */
li.zoomable-image {
position: relative;
display: inline-block;
}
/* Стиль изображения */
.image-to-zoom {
width: 200px; /* Начальный размер изображения */
transition: transform 0.3s ease; /* Анимация при зумировании */
}
/* Зумирование изображения при наведении */
li.zoomable-image:hover .image-to-zoom {
transform: scale(2); /* Увеличение изображения в 2 раза */
}
.pie-chart {
width: 280px;
height: 280px;
border-radius: 50%;
background-image: conic-gradient(
#49C2DB 0% 50%, /* 50% голубого */
#A2C063 50% 90%, /* 40% зелёного */
#636363 90% 100% /* 10% серого */
);
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.pie-chart li {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
clip-path: polygon(50% 50%, 100% 0, 100% 100%);
}
.pie-chart li a {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
text-indent: -9999px; /* Скрываем текст */
transition: filter 0.3s; /* Плавный переход яркости */
}
.pie-chart li a:hover {
filter: brightness(1.2); /* Яркость увеличивается на 20% при наведении */
}
.pie-chart .segment-1 {
transform: rotate(0deg);
}
.pie-chart .segment-2 {
transform: rotate(180deg);
}
.pie-chart .segment-3 {
transform: rotate(324deg);
}
.pie-chart .center {
position: absolute;
top: 50%;
left: 50%;
width: 220px;
height: 220px;
background-color: var(--setlist-bg-color);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.mw-parser-output a.extiw:visited, .mw-parser-output a.external:visited {
color: transparent;
}
.mw-parser-output a.external.free {
word-break: break-all;
color: #a1383800;
}
li.ring {
width: 250px;
height: 250px;
border-radius: 50%;
position: relative;
list-style-type: none; /* Убирает маркер списка */
margin: 10px;
padding: 0; /* Убирает отступы */
overflow: hidden;
cursor: pointer; /* Курсор указывает на возможность клика */
background-color: #a2c063; /* Цвет кольца */
}
li.ring::before {
content: '';
position: absolute;
width: 50%;
height: 100%;
background-color: red; /* Красный цвет для одной половины */
border-radius: 50%;
top: 0;
left: 0;
z-index: 1;
}
li.ring::after {
content: '';
position: absolute;
width: 160px; /* Размер внутреннего круга */
height: 160px;
background-color: transparent; /* Прозрачный внутренний круг */
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #a2c063; /* Цвет внутреннего круга */
z-index: 2; /* Помещает внутренний круг выше */
}
li.ring a {
position: absolute;
display: block;
width: 100%;
height: 100%;
text-indent: -9999px; /* Убирает текст с экрана */
}
.red-area {
background-color: transparent; /* Скрывает фон, чтобы красная зона была видна */
clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); /* Оставляет только красную половину */
z-index: 1;
}
.center-area {
background-color: transparent; /* Прозрачный фон */
clip-path: circle(50% at 50% 50%); /* Центр кольца */
z-index: 2; /* Обеспечивает, что центр будет выше остальных */
}
.other-area {
background-color: transparent; /* Прозрачный фон */
clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); /* Остальная часть кольца */
z-index: 3;
}
li.ring:hover {
background-color: #b6d173; /* Подсвеченный цвет при наведении */
}
li.ring a {
display: block;
width: 100%;
height: 100%;
text-decoration: none; /* Убирает подчеркивание */
}
a.ring {
display: block;
width: 250px;
height: 250px;
border-radius: 50%;
background-color: #a2c063; /* Цвет кольца */
position: relative;
list-style-type: none; /* Убирает маркер списка */
margin: 10px;
padding: 0; /* Убирает отступы */
overflow: hidden;
transition: background-color 0.3s ease; /* Плавный переход */
cursor: pointer; /* Курсор указывает на возможность клика */
text-decoration: none; /* Убирает подчеркивание */
color: transparent;
}
a.ring:hover {
background-color: #b6d173; /* Подсвеченный цвет при наведении */
}
li.ring span {
position: relative;
z-index: -1; /* Ensure text is above the pseudo-element */
color: transparent; /* Make the text inside transparent */
}
/* Circular Table Styling */
.circular-table {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
margin: auto;
}
.circular-table a {
position: absolute;
width: 100%;
height: 100%;
}
.circular-table div {
position: absolute;
width: 100%;
height: 100%;
clip-path: polygon(50% 50%, 0 100%, 100% 100%);
transform-origin: center;
transition: background-color 0.6s ease, filter 0.6s ease;
}
.circular-table div:hover {
filter: brightness(1.2);
opacity: 1;
}
/* CSS placed here will be applied to all skins */
/* Стиль для элементов списка с адаптивным размером */
li.custom-adaptive-item {
background-color: #DDD7CC; /* Цвет фона */
border: 2px solid #999; /* Цвет и толщина рамки */
border-radius: 10px; /* Закругленные углы */
padding: 10px; /* Внутренние отступы */
margin-bottom: 10px; /* Отступ между элементами списка */
list-style-type: none; /* Убираем стандартные маркеры списка */
display: inline-block; /* Для уменьшения ширины до содержимого */
min-width: 150px; /* Минимальная ширина элемента */
min-height: 50px; /* Минимальная высота элемента */
max-width: 100%; /* Максимальная ширина до 100% контейнера */
word-wrap: break-word; /* Перенос длинных слов на следующую строку */
box-sizing: border-box; /* Учитываем рамку и отступы в размерах */
position: relative; /* Необходим для позиционирования псевдоэлемента */
transition: background-color 0.3s ease, border-color 0.3s ease, filter 0.3s ease;
}
/* Стиль для ссылки, чтобы она занимала всю область <li> */
li.custom-adaptive-item .link-item {
display: block; /* Занимает всю доступную ширину и высоту */
text-decoration: none; /* Убираем подчеркивание текста */
color: inherit; /* Наследуем цвет от родительского элемента */
height: 100%; /* Занимает полную высоту <li> */
width: 100%; /* Занимает полную ширину <li> */
}
/* Дополнительный эффект при наведении мыши */
li.custom-adaptive-item:hover {
background-color: #CFC8B2; /* Цвет фона при наведении */
border-color: #777; /* Цвет рамки при наведении */
}
/* Изменение оттенка для изображения при наведении на <li> */
li.custom-adaptive-item:hover img {
filter: brightness(0.8); /* Темнее на 20% при наведении */
}
/* Текст "Discography" появляется только в уникальном элементе */
li.unique-item::after {
content: "Discography"; /* Текст для отображения */
color: white; /* Цвет текста */
font-size: 20px; /* Размер шрифта */
font-weight: bold; /* Полужирный шрифт */
position: absolute; /* Абсолютное позиционирование */
top: 50%; /* Центрирование по вертикали */
left: 50%; /* Центрирование по горизонтали */
transform: translate(-50%, -50%); /* Смещение на половину ширины и высоты */
opacity: 0; /* Исходное состояние невидимо */
transition: opacity 0.3s ease; /* Плавный переход */
}
/* Отображение текста при наведении на уникальный элемент */
li.unique-item:hover::after {
opacity: 1; /* Сделать текст видимым */
}
.mw-mmv-post-image { background-color: #DDD7CC; }
.mw-ui-button.mw-ui-progressive:not(:disabled) { background-color: #D02019; }
.custom-table tbody .cell-red { background-color: #ffdddd; }
.custom-table { background-color: #EFE9DE; border: 2px solid #D33328; border-collapse: collapse; }
.disc-table { border: 2px solid #D33328; }
.custom-table .cell-der { background-color: #CC531E; }
.custom-table th, .custom-table td { border: 1px solid #D33328; padding: 3px; }
.custom-table .header-red { background-image:url(/images/d/db/Clancy_Letter_Background1.png); background-size: cover; color: white; text-align: center; }
.custom-table .header-blue { background-image:url(/images/0/0a/Whiteback.jpg); background-size: cover; color: white; text-align: center; }
.custom-table .cell-red { background-color: #FFE281; }
.custom-table .cell-photo { background-color: #DDD7CC; }
.custom-table .cell-box { background-image:url(/images/6/64/Boxm.png); }
.custom-table .cell-blue { background-color: #CEC9C2; border: 1px solid #C14424; height: 2px; }
.custom-table .cell-disco { text-align:center; border-color:#EFBB7F; background-color: #EFE9DE; }
.custom-table .cell-green { background-color: #EFE9DE; border: 1px solid #C14424; height: 2px; }
.custom-table .header-grass { background-color: #EFE9DE; }
#footer-info li { line-height: 1.4; background: #DDD7CC; margin-bottom: 4px; text-indent: 5px; }
#footer-places li { float: left; margin-right: 1em; line-height: 2; background: #DDD7CC; text-indent: 5px; text-indent-right: 5px; }
.background-table { background-image: url(/images/3/3b/Clancy_background.png); background-size: cover;}
.vector-user-menu-legacy li { font-size: 0.75em; float: left; margin-left: 0.75em; padding-top: 2.6em; line-height: 1.16666667; }
.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), .jquery-tablesorter th.headerSort { background-image: url(/resources/src/jquery.tablesorter.styles/images/sort_both.svg?0e440); cursor: pointer; background-repeat: no-repeat; background-position: center right; padding-right: 21px; background-size: auto; }
.table-bg { background-image:url(/images/0/0a/Whiteback.jpg); background-size: cover; background-repeat: no-repeat; }
.border-image-container { border-image-source: linear-gradient(to right, #ff8c00, #ffd700); }
.wikitable { background-color: #EFE9DE; }
.gradient-underline { display: inline-block; position: relative; }
.gradient-underline::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 100%; height: 5px; background-image: linear-gradient(to right, #ff0000, #00ff00); background-size: 100% 100%; z-index: -1; }
.my-template.theme-dark { /* Styles specific to the "dark" theme */ }
.rounded-table { border-collapse: collapse; border-radius: 10px; overflow: hidden; }
.wikitable.transparent { background-color: transparent; border: none; }
/* Change the background color of the bottom and left of eath page, up to behind the logo: */
body { background: #D02019 url(/images/a/a9/Dema_beck_clancy.png) no-repeat; font-family: 'Roboto', Arial, sans-serif; }
#content .client-darkmode { background: #AA3C14; font-family: "Roboto"; }
.theme-dark .infobox { background-color: #333; color: #fff; border: 1px solid #666; }
/* background color of the content and title of pages */
#content { background-color: #DDD7CC; }
/* This is from the background color of the title of the Navigation menu in the left column */
#p-navigation { background-color: #FFD800; border-radius: 10px 10px 0px 0px; border: 3px solid #722215; border-bottom:hidden; background-image:url(/images/9/97/Sidebar.png); }
/* This is from the background color of the title of the Twenty one pilots menu in the left column */
#p-Twenty_one_pilots { background-color: #FFD800; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); }
/* This is from the background color of the title of the Twenty one pilots menu in the left column */
#p-Тайлер_Джозеф { background-color: #FFD800; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); }
/* This is from the background color of the title of the Members menu in the left column */
#p-Участники { background-color: #FFD800; border: 3px solid #722215; border-bottom:hidden; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); }
.background-table { background-image: url(/images/3/3b/Clancy_background.png); background-size: cover;}
.wikitable > tr > th, .wikitable > * > tr > th { background:#}
#catlinks { background:#CEC9C2; border: 1px solid #D33328; }
.mw-parser-output .tracklist th[scope="col"] { background-color: #ef5e29; }
.wikitable > tr > th, .wikitable > * > tr > th { background-color: #D33328; border: 1px solid #7b1325; background-image: url(/images/d/db/Clancy_Letter_Background1.png); background-size: cover; color: #fff; }
.wikitable > tr > th, .wikitable > * > tr > th { background-color: #eaecf0; text-align: center; color: #fff; }
.wikitable > tr > th, .wikitable > * > tr > th { background-color: #D33328; border: 1px solid #7b1325; background-image: url(/images/d/db/Clancy_Letter_Background1.png); }
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { background: #EFE9DE; }
.wikitable > tr > th, .wikitable > * > tr > th { background-color: #D33328; border: 1px solid #7b1325; background-size: cover; background-image: url(/images/d/db/Clancy_Letter_Background1.png); }
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { border: 1px solid #7b1325; }
.catlinks li { display: inline-block; line-height: 1.25em; border-left: 1px solid #D33328; margin: 0.125em 0; padding: 0 0.5em; }
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#722215 100%); background-repeat: no-repeat; background-size: 1px 100%; }
:not(:checked) > .vector-menu-checkbox { background:#EFB737 }
li.gallerybox div.thumb { border: hidden; background-color: #D33328; text-align:center; }
.mw-parser-output .tracklist-total-length th>span { background-color: #d8663d; }
.mw-parser-output .tracklist-total-length td { background-color: #d8663d; }
.vector-menu-dropdown { background-image: linear-gradient(to bottom,rgba(167,215,249,0) 0,#722215 100%); }
.c-actions { margin: 10px 5px 0px 0px; }
.c-item { background-color: #EFE9DE; border:2px solid #D33328; color: #722215; margin: 10px 0px 15px 0px; }
.c-avatar img { padding: 3px; border: 1px solid #dcdcdc; background-color: #bc1313; margin: 6px 0px 0px 6px; }
.c-score { right: 10px; }
.c-container { margin: 0px 0px 0px 75px; }
.c-user { margin: 1px 0px 6px 0px; }
.c-time { color: #af1414; }
.f-message { background-color: #FFF8ED; width: 445px; }
.c-comment { text-indent: 5px; }
.user-section-heading { margin: 0 0 23px 0; }
#profile-title { margin: 15px 20px 29px -6px; }
#profile-image img { margin: 15px 0px 0px 0px; }
body #p-personal li#p-themes > span { position: relative; top: 24px; left: -101px; }
.vector-user-menu-legacy li { position: relative; top: -26px; right: -10px; }
.mwe-popups .mwe-popups-extract:after, .mwe-popups .mwe-popups-extract blockquote:after { content: ' '; position: absolute; bottom: 0; width: 25%; height: 20px; background-color: #EFE9DE; pointer-events: none; }
figure[typeof~='mw:File/Thumb'], figure[typeof~='mw:File/Frame'] { background-color: #D35232; border-color: #9E3A19; }
.mw-content-ltr figure[typeof~='mw:File/Thumb'] > figcaption, .mw-content-ltr figure[typeof~='mw:File/Frame'] > figcaption { background-color: #D02019; border-color: #9E3A19; color: #fff }
.mwe-popups .mwe-popups-extract[dir='ltr']:after { right: 0; background-image: linear-gradient(to right,rgba(255,255,255,0),#EFE9DE 50%); }
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { background-color: #; border: 1px solid #D33328; padding: 0.2em 0.4em; }
input[type="checkbox" i] { color: #B0E0E6; }
.mwe-popups .mwe-popups-container { background: #EFE9DE; }
.mw-parser-output .infobox-above, .mw-parser-output .infobox-title { font-size: 125%; font-weight: bold; text-align: center; border-radius: 2px 2px; background-image: url(/images/d/db/Clancy_Letter_Background1.png); background-size: cover; }
#n-Discord a { color: #fff !important; font-weight: bold; border-radius: 4px; border: 1px solid #4c57d0; background-color: #5865f2; display: block; position: relative; padding: 4px 4px 5px calc(17px + 6.5px * 2); box-shadow: 0 2px 3px rgba(0,0,0,0.1); transition: 0.2s; }
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading { display: block; color: #44180D; margin: 0.5em 0 0 0.66666667em; border: 0; padding: 0.25em 0; font-size: 0.80em; font-weight: bold; cursor: default; background-image: linear-gradient(to right,rgba(200,204,209,0) 0,#AA3C14 33%,#AA3C14 66%,rgba(200,204,209,0) 100%); background-position: center bottom; background-repeat: no-repeat; background-size: 100% 1px; }
.vectorTabs span a { background-color: #B0E0E6; }
#p-logo { ; }
.featurebox-heading { background-image: url(/images/1/14/Scaled_transparent.png); color: #fff; }
element.style { width: 60%; background-color: ; background-image: url(/images/1/14/Scaled_transparent.png); }
.toc, .toccolours { border-radius: 8px 8px; border: 3px solid #D33328; background-color: #EFE9DE; }
#p-tb { background-color: #FFD800; border-radius: 0px 0px 10px 10px; border: 3px solid #722215; border-top:hidden; background-image:url(/images/3/38/Sidebar2.png); }
#p-personal ul { background: #DDD7CC; border-radius: 3px 3px; border: 2px solid #D33328; padding:0.1em 1.5em; height: 23px; }
#mw-head { background-image: url(/images/4/42/Heared-3_%283%29.gif);}
.vector-menu-tabs-legacy .selected { background: #DDD7CC }
.vector-menu-checkbox { color: #D33328; }
.mp_header { background-image:url(/images/9/9c/Wikinews_banner_2024.png); background-repeat: no-repeat; background-position: top right; width: 100%;}
.mw-body { border: 1.5px solid #722215; margin-top: -4px; }
h1, h2 { border-color: #57544a; }
.vector-menu-dropdown .mw-list-item a:not(.mw-ui-icon) { background: #F4FFFF; }
img[Attributes Style] { height: 168px; }
.grid * { background: #E0C9AF; }
.vector-search-box-input { color: #312400; border: 1px solid #6D2614; }
.skin-vector .uls-search { border-bottom-color: #7A4D1D; }
.vector-menu-tabs-legacy li { background-image: linear-gradient(to top,#DDD7CC 0,#DDD7CC 1px,#C1BBB2 100% );
.vector-legacy-sidebar .vector-menu-portal .vector-menu-heading { background-image: linear-gradient(to right,rgba(200,204,209,0) 0,#D33328 33%,#F7572E 66%,rgba(200,204,209,0) 100%); background-position: center bottom; background-repeat: no-repeat; background-size: 100% 1px; font-weight: bold; }
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { background-image: linear-gradient(to bottom,rgba(68,137,145,0) 0,#D33328 100%); border: 4px solid #722215; background-repeat: no-repeat; background-size: 1px 100%; border: 4px solid #D33328; margin-top: -4px; }
.imagelink_telegram a {
width:100px;
height:100px;
display:block;
text-decoration:none;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Telegram_logo.svg/2048px-Telegram_logo.svg.png")
body.page-Main_Page h1.firstHeading { display:none; }
#title-para { background-color: #F0FFFF; }
.hoverimage:hover {
transition: 0.2s ease;
transform: scale(1.1);
}
#mw-content-text .featurebox .featurebox-heading{
background-image:url("https://tfwiki.net/mediawiki/images2/2/26/Allsparkstrip_transparent.png");
}
.hover-highlight:hover {
background-color: #ffffcc; /* Any desired color */
}
/* Hover Box for switching the visibility of the selected item */
.hoverbox { display:inline-block; padding:0em; }
.hoverbox .hoveritem { display:none; margin:0em; padding:0em; }
.hoverbox .hoveritem.selected { display:inline-block; }
.hoverbox:hover .hoveritem { display:inline-block; }
.hoverbox:hover .hoveritem.selected { display:none; }
--theme-background-color: #2c56a0;