MokoOnyx/source/media/css/component.css

@charset "UTF-8";
/* Copyright (C) 2025 Moko Consulting <hello@mokoconsulting.tech>

 This file is part of a Moko Consulting project.

 SPDX-License-Identifier: GPL-3.0-or-later
 */

/* ==========================================================================
   Component / Print-view stylesheet
   Used by component.php (tmpl=component) for modals, popups, and print.
   Consumes theme variables from light.standard.css (always light in this view).
   ========================================================================== */

/* ---- Screen: minimal chrome for modal / popup views ---- */

body {
	margin: 0;
	padding: 1.5rem;
	font-family: var(--body-font-family);
	font-size: var(--body-font-size, 1rem);
	font-weight: var(--body-font-weight, 400);
	line-height: var(--body-line-height, 1.5);
	color: var(--body-color, #22262a);
	background: var(--body-bg, #fff);
}

.navbar-brand {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: var(--border-width, 1px) var(--border-style, solid) var(--border-color, #dfe3e7);
}

.navbar-brand .brand-logo {
	text-decoration: none;
	color: var(--color-primary, #112855);
}

.navbar-brand .logo {
	max-height: 48px;
	width: auto;
}

.navbar-brand .site-title {
	font-size: var(--navbar-brand-font-size, 1.25rem);
	font-weight: 600;
	color: var(--color-primary, #112855);
}

a {
	color: var(--link-color, #224faa);
	text-decoration: var(--link-decoration, underline);
}

a:hover {
	color: var(--link-hover-color, #424077);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--heading-color, inherit);
	margin-top: 0;
	margin-bottom: 0.5rem;
}

img {
	max-width: 100%;
	height: auto;
}

table {
	border-collapse: collapse;
	width: 100%;
	color: var(--table-color, var(--body-color));
	background-color: var(--table-bg, transparent);
}

th, td {
	padding: 0.5rem;
	border: var(--border-width, 1px) var(--border-style, solid) var(--table-border-color, var(--border-color, #dfe3e7));
	text-align: left;
	vertical-align: top;
}

th {
	font-weight: 600;
	color: var(--emphasis-color, #000);
}

.container-footer {
	margin-top: 2rem;
	padding-top: 0.75rem;
	border-top: var(--border-width, 1px) var(--border-style, solid) var(--border-color, #dfe3e7);
	font-size: 0.85rem;
	color: var(--muted-color, #6d757e);
}

pre, code {
	font-family: var(--font-monospace);
	color: var(--code-color-ink, #e93f8e);
}

pre {
	background: var(--tertiary-bg, #f9fafb);
	padding: 1rem;
	border-radius: var(--border-radius, .25rem);
	overflow-x: auto;
}

blockquote {
	padding: 0.5rem 1rem;
	margin: 0 0 1rem;
	border-left: 4px solid var(--accent-color-primary, #3f8ff0);
	color: var(--secondary-color, #22262abf);
}

hr {
	border: 0;
	border-top: var(--border-width, 1px) solid var(--hr-color, #dfe3e7);
	margin: 1rem 0;
}

/* ---- Print ---- */

@media print {
	@page {
		margin: 1.5cm;
		size: auto;
	}

	*,
	*::before,
	*::after {
		color: #000 !important;
		background: transparent !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}

	body {
		padding: 0;
		font-size: 11pt;
		line-height: 1.4;
	}

	.navbar-brand {
		border-bottom: 1px solid #000;
		margin-bottom: 0.75cm;
		padding-bottom: 0.25cm;
	}

	.navbar-brand .logo {
		max-height: 36px;
	}

	.container-footer,
	.alert,
	.btn,
	iframe,
	video,
	audio,
	[data-module],
	#debug,
	.joomla-script-options {
		display: none !important;
	}

	a[href] {
		text-decoration: underline !important;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		font-weight: normal;
	}

	a[href^="#"]::after,
	a[href^="javascript:"]::after,
	a[href^="mailto:"]::after {
		content: "";
	}

	h1, h2, h3, h4 {
		page-break-after: avoid;
		orphans: 3;
		widows: 3;
	}

	img, table, figure, pre, blockquote {
		page-break-inside: avoid;
	}

	thead {
		display: table-header-group;
	}

	tr {
		page-break-inside: avoid;
	}

	p, h2, h3 {
		orphans: 3;
		widows: 3;
	}

	table {
		border-color: #000 !important;
	}

	th, td {
		border-color: #000 !important;
	}

	pre {
		border: 1px solid #999;
		white-space: pre-wrap;
		word-wrap: break-word;
	}

	blockquote {
		border-left-color: #000 !important;
	}
}