미디어위키:Citizen.css
창팝위키
다른 명령
참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
/* 여기의 모든 CSS는 시티즌 스킨을 사용하는 사용자에게 로드됩니다 */
:root {
/* 메인 색상 */
/* HEX: #a443f4 */
--color-progressive-oklch__l: 60%;
--color-progressive-oklch__c: 0.23;
--color-progressive-oklch__h: 305;
/* --color-progressive-oklch__h가 있어 필요 없어야 하지만, 스킨에 아래 변수를 기반으로 하는 값이 아직 존재하는 것으로 보임 */
--color-progressive-hsl__h: 305;
/* 메인 색상이 배경에 활용되는 것을 방지 */
--color-surface-0-oklch__l: 100%;
--color-surface-0-oklch__c: 0;
--color-secondary-hue-oklch: 262.29;
--color-visited-hue-oklch: 287.24;
/* 리브레 스킨 테이블 헤딩의 밝기와 유사한 배경색 변수 */
--color-surface-subtle-progressive: oklch( 0.98 0.005 var(--color-progressive-oklch__h) );
--color-surface-subtle-secondary: oklch( 0.98 0.005 var(--color-secondary-hue-oklch) );
--color-surface-subtle-achromatic: oklch( 0.98 0 0 );
--color-surface-th: oklch( 0.96 0 0 / 50% );
--color-surface-section-tr: oklch( 0.90 0 0 / 50% );
/* surface-1과 2 채도 조정 */
--color-surface-1-oklch__c: 0.003;
--color-surface-2-oklch__c: 0.003;
--color-surface-1: oklch( var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--color-secondary-hue-oklch) );
--color-surface-2: oklch( var(--color-surface-2-oklch__l) var(--color-surface-2-oklch__c) var(--color-secondary-hue-oklch) );
/* 텍스트 컬러 */
--color-emphasized-oklch__l: 0%;
--color-emphasized-oklch__c: 0;
--color-base-oklch__l: 25%;
--color-base-oklch__c: 0;
--color-subtle-oklch__l: 35%;
--color-subtle-oklch__c: 0;
--color-placeholder-oklch__c: 0;
/* 폰트 */
/* Citizen 스킨은 기본값으로 Roboto를 사용, 이를 무효화 */
--font-family-citizen-base: sans-serif;
--font-family-citizen-serif: serif;
--font-family-citizen-monospace: monospace;
}
/* 다크모드용 값 */
@media screen {
:root.skin-theme-clientpref-night {
--color-emphasized-oklch__c: 0;
--color-base-oklch__l: 85%;
--color-base-oklch__c: 0;
--color-subtle-oklch__l: 80%;
--color-subtle-oklch__c: 0;
--color-placeholder-oklch__c: 0;
/* 리브레 스킨 테이블 헤딩의 밝기와 유사한 배경색 변수 */
--color-surface-subtle-progressive: oklch( calc(var(--color-surface-0-oklch__l) + 2%) + 2% 0.005 var(--color-progressive-oklch__h) );
--color-surface-subtle-secondary: oklch( calc(var(--color-surface-0-oklch__l) + 2%) 0.005 var(--color-secondary-hue-oklch) );
--color-surface-subtle-achromatic: oklch( calc(var(--color-surface-0-oklch__l) + 2%) 0 0 );
--color-surface-th: oklch( calc(var(--color-surface-0-oklch__l) + 4%) 0 0 / 50% );
--color-surface-section-tr: oklch( calc(var(--color-surface-0-oklch__l) + 10%) 0 0 / 50% );
--color-link-red: #fd7865;
--color-link-red--hover: #fea898;
--color-link-red--active: #ffc8bd;
}
}
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os {
--color-emphasized-oklch__c: 0;
--color-base-oklch__l: 85%;
--color-base-oklch__c: 0;
--color-subtle-oklch__l: 80%;
--color-subtle-oklch__c: 0;
--color-placeholder-oklch__c: 0;
/* 리브레 스킨 테이블 헤딩의 밝기와 유사한 배경색 변수 */
--color-surface-subtle-progressive: oklch( calc(var(--color-surface-0-oklch__l) + 2%)0.005 var(--color-progressive-oklch__h) );
--color-surface-subtle-secondary: oklch( calc(var(--color-surface-0-oklch__l) + 2%) 0.005 var(--color-secondary-hue-oklch) );
--color-surface-subtle-achromatic: oklch( calc(var(--color-surface-0-oklch__l) + 2%) 0 0);
--color-surface-th: oklch( calc(var(--color-surface-0-oklch__l) + 4%) 0 0 / 50% );
--color-surface-section-tr: oklch( calc(var(--color-surface-0-oklch__l) + 10%) 0 0 / 50% );
}
}
:root.skin-theme-clientpref-night .show-only-light {
display: none;
}
:root.skin-theme-clientpref-day .show-only-dark {
display: none;
}
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os .show-only-light {
display: none;
}
}
@media screen and (prefers-color-scheme: light) {
:root.skin-theme-clientpref-os .show-only-dark {
display: none;
}
}
em:lang(ko) {
text-emphasis: dot;
font-weight: 500;
}
a:hover {
text-decoration: underline;
}
/* 링크 색상을 기본 테마처럼(스킨 테마 컬러 적용 덮어쓰기) */
a {
--color-link: #36c;
--color-visited: #6a60b0;
}
@media screen {
:root.skin-theme-clientpref-night a {
--color-link: #88a3e8;
--color-visited: #a799cd;
}
:root.skin-theme-clientpref-night a:where(.new:not([role="button"])) {color: #fd7865;}
:root.skin-theme-clientpref-night a:where(.new:not([role="button"])):hover {color: #fea898;}
:root.skin-theme-clientpref-night a:where(.new:not([role="button"])):active {color: #ffc8bd;}
:root.skin-theme-clientpref-night a:where(.new:not([role="button"])):visited {color: #c99391;}
}
@media screen and (prefers-color-scheme: dark) {
:root.skin-theme-clientpref-os a {
--color-link: #88a3e8;
--color-visited: #a799cd;
}
:root.skin-theme-clientpref-os a:where(.new:not([role="button"])) {color: #fd7865;}
:root.skin-theme-clientpref-os a:where(.new:not([role="button"])):hover {color: #fea898;}
:root.skin-theme-clientpref-os a:where(.new:not([role="button"])):active {color: #ffc8bd;}
:root.skin-theme-clientpref-os a:where(.new:not([role="button"])):visited {color: #c99391;}
}
.citizen-header {
background-color: var( --color-surface-1 );
}
.wikitable th {
background-color: var( --color-surface-th );
}
.wikitable tr.table--section {
background-color: var( --color-surface-subtle-progressive );
}
.wikitable tr.table--section > th,
.wikitable tr.table--section > td {
background-color: unset;
text-align: center;
font-size: var(--font-size-medium);
}
/* 문서 제목 이름공간 부분 투명도 약간 연하게 조절 */
.mw-page-title-namespace {
opacity: 0.8;
}
/* syntaxhighlight 조정 */
.mw-highlight pre {
background-color: var( --color-surface-1 );
border-radius: 0;
line-height: var(--line-height-small);
}
.skin-citizen .mw-highlight .linenos {
background-color: unset;
}
#footer-places {
flex-grow: unset;
}
/* 특수 이름공간에서 자동으로 확장 너비로 넓히기 억제 */
@media screen and (min-width: 1680px) {
.citizen-feature-custom-width-clientpref-standard .ns--1 {
--width-layout--extended: 1080px;
}
}
@media screen and (min-width: 1120px) {
.page-actions > .mw-portlet li#ca-formedit > a {
font-size: inherit;
}
}
@media screen {
.page-actions > .mw-portlet li#ca-formedit > a {
font-size: inherit;
}
}
@media screen {
/*
DiscussionTools가 활성화된 페이지에,
강조색 배경이 적용되는 버튼이 '편집' 말고 '주제 추가'가 되되도록
*/
.ext-discussiontools-newtopictool-enabled #ca-addsection > a {
color: var(--color-inverted-primary);
background-color: var(--color-progressive)
}
.ext-discussiontools-newtopictool-enabled #ca-addsection > a:hover {
background-color: var(--color-progressive--hover);
}
.ext-discussiontools-newtopictool-enabled #ca-addsection > a:active {
background-color: var(--color-progressive--active);
}
.ext-discussiontools-newtopictool-enabled #ca-addsection {
order: 100;
}
.ext-discussiontools-newtopictool-enabled #ca-edit > a,
.ext-discussiontools-newtopictool-enabled #ca-ve-edit > a{
color: unset;
background-color: unset;
}
.ext-discussiontools-newtopictool-enabled .citizen-ve-edit-merged#ca-edit {
border-left-color: var(--border-color-base);
}
.ext-discussiontools-newtopictool-enabled #ca-edit > a:hover,
.ext-discussiontools-newtopictool-enabled #ca-ve-edit > a:hover{
background-color: var(--background-color-button-quiet--hover);
}
.ext-discussiontools-newtopictool-enabled #ca-edit > a:active,
.ext-discussiontools-newtopictool-enabled #ca-ve-edit > a:active{
background-color: var(--background-color-button-quiet--active);
}
/*
일반 편집 시 시각편집 버튼 숨기기
*/
.ve-available .action-edit #ca-ve-edit,
.ve-available .action-submit #ca-ve-edit{
display: none;
}
}