Modèle:ConsoleCommand/styles.css

.console-command {
    background: var(--ark-kibbletable-background-color);
    border: 2px solid var(--ark-kibbletable-border-color);
    border-radius: 4px;
    padding: 0.8em 1em 0.5em;
    margin-bottom: 1.2em;
}

/* #region Table styling */
	.console-command table {
		width: 100%;
	}
	.console-command table > caption {
		background-color: var(--table-heading-background-color);
		border: 1px solid var(--table-border-color);
		border-bottom: 0;
		padding: 0.12em 0.3em;
		font-size: 105%;
	}
	.console-command__gutter--right table td:first-child {
		width: 40%;
		font-size: 95%;
	}
/* #endregion */
/* #region Header */
	.console-command__header {
		line-height: 1.6;
		margin: 0 0 0.3em;
		gap: 0.35em;
	}
		.console-command__header h4 {
			display: inline;
			margin: 0;
			padding: 0;
		}
		.console-command__header h4 .section-link {
			margin-left: 0.2em;
			margin-right: 0.25em;
		}
	.console-command__keyword--cheat {
		font-weight: 500;
		font-size: 16px;
		color: var(--content-header-color);
	}
	.console-command__keyword--argument {
		margin-left: 0.35em;
	}
		.console-command__keyword--argument img {
			height: 1.3em;
			width: auto;
			margin-top: -3px;
		}
	.console-command__compatbadge {
		border: 1px solid var(--ark-ambox-red);
		float: right;
		padding: .2rem;
		margin-left: .2rem;
		border-radius: .1rem;
		background: var(--ark-ambox-background-color);
		display: flex;
		align-items: center;
		gap: 0.2rem;
		height: 1.3rem;
		user-select: none;
	}
		.console-command__compatbadge--yes {
			border-color: var(--ark-ambox-green);
		}
/* #endregion */
/* #region Gutter layout */
	.console-command__gutter {
		clear: both;
	}
	@media screen and (min-width: 1200px) {
		.console-command__gutter {
			display: grid;
			grid-template-areas: 'a b';
			grid-template-columns: 1fr minmax(0, 30em);
			gap: 1rem;
		}
		.console-command__gutter--left {
			grid-area: a;
		}
		.console-command__gutter--right {
			grid-area: b;
			margin-top: -0.5em;
		}
	}
/* #endregion */


/* #region Interactive command filtering */
	#console-filters {
		--margin: calc( var( --content-horizontal-margin ) / -3 );
		--padding: calc( var( --content-horizontal-margin ) / 6 );
	    margin: 0.2rem var( --margin ) 1.2rem;
	    padding: 0.1rem var( --padding );
	    background: var(--content-background-color--transparent);
	    font-size: 105%;
	    position: sticky;
	    top: var(--sticky-offset);
	    z-index: 5;
	}
	#console-filters:not( [ data-loaded ] ) {
		display: none;
	}
	.console-filters__box {
		border: 1px solid var(--ark-difficulty-none);
		padding: 1rem 1em;
		margin: 0 0 1rem;
		background: var(--ark-dossiernote-background-color);
		border-radius: 0.1rem;
	}
	.console-filters__box > h4:first-child {
		margin: 0 0 0.5rem;
		padding-top: 0;
	}
	/* #region Tags */
		.console-filters__tags-section {
			display: flex;
			gap: 0.8rem;
		    font-size: 94%;
		}
		.console-filters__tags-section > div:first-child {
			flex-grow: 1;
		}
		@media screen and ( max-width: 900px ) {
			.console-filters__tags-section {
				flex-direction: column;
			}
		}
		.console-filters__tags-container {
			display: flex;
			flex-wrap: wrap;
			gap: 0.4rem 0.5em;
		}
		.console-filters__tag label {
			padding: 0.2rem 0.4rem;
			border-radius: 4px;
			border: 1px solid var(--ark-ambox-gray);
		}
		.console-filters__tag input[ type="checkbox" ] {
			display: none;
		}
		.console-filters__tag input[ type="checkbox" ]:checked + label {
			background: var(--ark-ambox-cyan);
			color: #222;
		}
		.console-filters__box--filters {
			min-width: 9.2rem;
			font-size: 85%;
			padding: 1rem 0.6rem;
		}
		.console-filters__filter-toggle {
			display: flex;
			gap: 0.3rem;
			align-items: center;
			border: 1px solid #fff2;
			padding: 0.1rem 0.3rem;
			margin-bottom: 0.2rem;
			border-radius: 0.2rem;
		}
	/* #endregion */
	/* #region Search */
		.console-filters__search-box input {
	    	background: var(--wmui-background-color-framed);
	    	border: 3px solid var(--wmui-border-color-primary);
	    	border-radius: 0.4rem;
	    	font-size: 1.4em;
	    	appearance: none;
	    	padding: 0.5em 0.8em;
	    	width: 100%;
	    	height: 100%;
	    	box-sizing: border-box;
	    	color: var(--wmui-color-base);
	    	box-shadow: 0 0 1rem 0px #0004;
		}
		.console-filters__search-box input::placeholder {
		    color: var(--wmui-color-base--emphasized);
		}
		.console-filters__search-box input:hover {
			background: var(--wmui-background-color-framed--hover);
		}
		.console-filters__search-box input:active {
		 	background: var(--wmui-background-color-framed--active);
		}
	/* #endregion */
	/* #region Counter */
		.console-filters__counter {
			position: absolute;
			right: 1rem;
			bottom: -20%;
			background: var(--wmui-border-color-primary);
			padding: 0 0.6rem;
			border-radius: 0.3rem;
			color: var(--wmui-color-base--inverted);
		}
	/* #endregion */
/* #endregion */