미디어위키:Cargoquery.css

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

• 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
• 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
• 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.

/*
---- 분류 ----
[[분류:리소스]] [[분류:LocalSettings에서 사용되는 리소스]] [[분류:UseResource로 사용할 수 있는 리소스]]

---- 설명 ----
[[특수:CargoQuery]]에 항상 로드될 css. 필요에 따라 일반 문서에서도 사용할 수 있음.

이 파일이 제공하는 css 클래스
* .mw-Cargoquery--container
* .mw-Cargoquery--thumbnail

[[특수:CargoQuery]]에 로드하기 위해 LocalSettings.php에 아래와 같은 코드를 추가합니다.
`
$wgResourceModules['local.cargoquery.styles'] = [
	'class' => 'MediaWiki\ResourceLoader\WikiModule',
    'styles' => ['MediaWiki:Cargoquery.css'],
];
$wgHooks['BeforePageDisplay'][] = function ( OutputPage &$out, Skin &$skin ) {
    $title = $out->getTitle();
    if ( $title && $title->isSpecialPage() ) {
        if ( $title->getDBkey() === 'CargoQuery' ) {
            $out->addModuleStyles( 'local.cargoquery.styles' );
        }
    }
    return true;
};
`

*/

.mw-Cargoquery--container {
	padding: 0.5rem 0.75rem;
}

body.skin-citizen .citizen-overflow-content:has(.mw-Cargoquery--container) {
	padding: var(--space-xs) var(--space-sm);
}

.mw-Cargoquery--thumbnail img {
	height: 60px;
}

table.dataTable tbody td:has(.mw-Cargoquery--thumbnail) {
	padding: 0;
}

.mw-parser-output {
	container-type: inline-size;
	container-name: container;
}

@container container (max-width: 1080px) {
	.mw-Cargoquery--container {
		overflow: scroll;
	}
	
	.mw-Cargoquery--container table.dataTable thead th {
		width: 5em;
	}
}