/* * Satellite Source Viewer -- the look. * * ONE WINDOW. The whole viewer is a single code window in the look of the site's * own syntax highlighter (wpshl): the navy background, the polygons picture under * a white veil, the blue edge down the left and along the bottom, white letters * with the raised black shadow, and the same colours for the parts of the code. * The title bar, the zip, LAST TESTED, the administrators' panel, the folder * listing and every open file are all drawn ON that one window: none of them has * a frame of its own, so nothing about it looks like a different program. * * WHAT HOLDS WHAT. The markup is written by includes/class-satsrc-plugin.php and * by the REST answers, and must match the spec's markup contract exactly: * * .satsrc the frame: colour, picture, edge, corners * .satsrc-bar the title, CLOSE ALL, FULL WINDOW * .satsrc-repos THE CHOOSER, the first screen: one row per repository * -- or, once one is chosen -- * .satsrc-view ONE REPOSITORY (viewer.js swaps the two) * .satsrc-repo-bar ALL REPOSITORIES | repo-7/ | CREATED ... * .satsrc-zip full_source | zip | size | built | age | DOWNLOAD * .satsrc-tested LAST TESTED: ... * .satsrc-admin (administrators only) * .satsrc-window the listing; scrolls sideways when narrow * .satsrc-head-row NAME TYPE SIZE MODIFIED * .satsrc-rootline satellite/ * .satsrc-items one .satsrc-item per entry * .satsrc-item > .satsrc-row a grid: name, type, size, date, actions * > .satsrc-items a folder's own entries (viewer.js fills it) * > .satsrc-code a file's code panel (viewer.js fills it) * * (A viewer without repositories -- the plugin's first version -- has the zip, * LAST TESTED, the panel and the listing straight in .satsrc; every rule below * works either way.) * * WHY EVERY NAME IS OUR OWN. wpshl's stylesheet is on every page of the site. * Every class here begins satsrc-, and the highlighted code says satsrc-line and * satsrc-tk- where wpshl says wsh-line and wsh-, so neither plugin * ever styles the other's windows, whichever of them is switched on. * * WHY "html body" AND !important. The theme (Hueman) and the site's own * satellite-posts.css have rules for every link, button, input, and 
 * inside a page -- underlines, a grey box, another font, wrapped lines -- and
 * several of them are more specific than a plain class. Only those properties
 * are pinned down, the way wpshl pins down the structure of its own box; the
 * colours are left to the custom properties.
 */

/* The palette: a copy of the live wpshl settings on satellite.foundation. */
.satsrc {
	--satsrc-bg: #000f30;
	--satsrc-veil: #ffffff;
	--satsrc-border: #36a5e4;
	--satsrc-text: #ffffff;
	--satsrc-shadow: #000000;
	--satsrc-comment: #8fb2d9;
	--satsrc-keyword: #ffffff;
	--satsrc-type: #a9d6ff;
	--satsrc-function: #dcefff;
	--satsrc-word: #dcefff;
	--satsrc-meta: #9ccaf2;
	--satsrc-string: #c4f0ff;
	--satsrc-number: #b9dcff;
	--satsrc-constant: #eaf6ff;
	--satsrc-variable: #cfe4fa;
	--satsrc-operator: #ffffff;
	--satsrc-punctuation: #ffffff;
	--satsrc-tab: 4;
	--satsrc-pad: 20px;
	--satsrc-edge: 3px;
	--satsrc-title-size: 22px;
	--satsrc-text-shadow: 0 0 .05em var(--satsrc-bg), 0 0 .09em var(--satsrc-bg), .07em .07em 0 var(--satsrc-shadow), .13em .13em 0 var(--satsrc-shadow), .18em .18em .05em var(--satsrc-shadow);
	--satsrc-keyword-weight: 700;
	--satsrc-image: url("../img/polygons.jpg");
	--satsrc-scrim: linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.18));
	--satsrc-image-min: 630px;
	--satsrc-on-text: #000000;
	--satsrc-rule: rgba(255, 255, 255, 0.35);
	--satsrc-tint: rgba(255, 255, 255, 0.16);

	/* The viewer's own, beyond wpshl's palette. */
	--satsrc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
	--satsrc-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
	--satsrc-code-size: 15px;
	--satsrc-press: rgba(255, 255, 255, 0.34); /* a button under the pointer: wpshl's --wsh-tabs-hover */
	--satsrc-hover: rgba(255, 255, 255, 0.08); /* a row under the pointer */
	--satsrc-guide: rgba(255, 255, 255, 0.14); /* the faint lines that show which folder a row is in */
	--satsrc-num: 1.85em; /* room for the line numbers; viewer.js widens it for files of 10,000 lines or more */

	/*
	 * The listing's columns: name, then type, size, date and actions. The actions
	 * column never goes below the width of its widest content (VIEW + DOWNLOAD, or
	 * "too big to show" + DOWNLOAD), so that every row -- each one its own grid --
	 * has its columns in the same places whether it has buttons or not.
	 *
	 * Each level of folder pushes a name in by --satsrc-step, and that room is ADDED
	 * to the name's column rather than taken out of it: a name deep in the tree
	 * keeps --satsrc-name-min to itself, and on a narrow screen the listing scrolls
	 * sideways instead of squeezing the name to a letter a line.
	 */
	--satsrc-step: 1.5em;
	--satsrc-icon: 1.6em; /* the arrow or mark before each name */
	--satsrc-name-min: 16em;
	--satsrc-cols: 6em 8em 10.5em minmax(12.5em, max-content);
	--satsrc-gap: 1em;
	/* Below this width (about 895px: it fits the page's column even with the theme's
	   two sidebars) the listing scrolls sideways instead of squashing its columns.
	   On a screen narrower than 940px the MODIFIED column goes instead (TABLETS, below). */
	--satsrc-row-min: calc(var(--satsrc-name-min) + 37em + 4 * var(--satsrc-gap) + 2 * var(--satsrc-pad));

	/*
	 * The chooser's columns, the same way: the name, then CREATED (the longest
	 * date, "Sep. 22nd, 2026", is 15 letters), the zip's size, LAST TESTED (a date
	 * and its PASSED or FAILED) and OPEN. Every row is its own grid, so the
	 * columns have fixed widths, and line up from row to row. Unlike a file's
	 * name, a repository's is short, and its date is what the chooser is for: the
	 * name's column stops growing at --satsrc-repo-name-max, so the dates stay
	 * beside the names on a wide screen, and OPEN follows them.
	 */
	--satsrc-repo-name-min: 13em;
	--satsrc-repo-name-max: 24em;
	--satsrc-repo-cols: 9.6em 9em 14em minmax(5em, 1fr);
	--satsrc-repo-min: calc(var(--satsrc-repo-name-min) + 37.6em + 4 * var(--satsrc-gap) + 2 * var(--satsrc-pad));
}

/*
 * THE FRAME. As in wpshl: two background layers over the colour, the veil on top
 * and the picture under it, the picture as wide as the frame (never narrower than
 * --satsrc-image-min) and pinned to the BOTTOM. A viewer taller than the picture
 * shows the background colour above it, into which the picture's own dark top
 * edge fades. The frame itself never scrolls (except in FULL WINDOW), so the
 * picture stays still while things open and close over it.
 */
html body .satsrc {
	/* flow-root: the margins of the parts inside stay inside the window's edge */
	display: flow-root;
	position: relative;
	box-sizing: border-box;
	clear: both;
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	/* !important: the theme gives a full-width block a white background of its own */
	background-color: var(--satsrc-bg) !important;
	background-image: var(--satsrc-scrim), var(--satsrc-image);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% 100%, max(100%, var(--satsrc-image-min)) auto;
	color: var(--satsrc-text);
	text-shadow: var(--satsrc-text-shadow);
	/* The window's edge: down the left and along the bottom only, so that it seems
	   to stand out of the page. A hard shadow rather than a border, because a border
	   on two sides of a rounded box tapers away to nothing at its corners. */
	box-shadow: calc(var(--satsrc-edge) * -1) var(--satsrc-edge) 0 0 var(--satsrc-border);
	/* Sizes of our own: the theme's line height is in em of ITS font size, and would
	   arrive here as a fixed number of pixels. */
	font-size: 16px;
	line-height: 1.45;
	text-align: left;
	direction: ltr;
	overflow-wrap: normal;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

html body .satsrc *,
html body .satsrc *::before,
html body .satsrc *::after {
	box-sizing: border-box;
}

/* Hidden means hidden, whatever a theme says about a 
 or a 
. */
html body .satsrc [hidden] {
	display: none !important;
}

/*
 * THE THEME'S RULES, UNDONE. Hueman underlines every link in a post and colours
 * it; it puts  in a grey box in another font, and gives 
 a striped
 * background, a border, margins and wrapped lines; satellite-posts.css changes
 * the font of both. Inside the viewer,  is only a marker: it takes
 * everything from what it is in.
 */
html body .satsrc a,
html body .satsrc a:hover,
html body .satsrc a:focus,
html body .satsrc a:active,
html body .satsrc a:visited {
	border-bottom: 0;
	text-decoration: none !important;
	box-shadow: none;
}

/*
 * Words that ARE links -- "Setup check: Settings > Satellite Source" in the
 * administrators' messages -- are the light blue of a type in the code, and
 * underlined, so they can be told from the words around them; white under the
 * pointer. (The theme would make them teal, and dark grey under the pointer:
 * invisible on navy.) Links that look like buttons are left to the buttons' rules.
 */
html body .satsrc a:not(.satsrc-btn),
html body .satsrc a:not(.satsrc-btn):visited {
	color: var(--satsrc-type);
	text-decoration: underline !important;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

html body .satsrc a:not(.satsrc-btn):hover,
html body .satsrc a:not(.satsrc-btn):focus {
	color: var(--satsrc-text);
}

html body .satsrc a:not(.satsrc-btn):focus-visible {
	outline: 2px solid var(--satsrc-text);
	outline-offset: 2px;
}

html body .satsrc code {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: inherit !important;
	font: inherit !important;
	letter-spacing: inherit;
	text-shadow: inherit;
	vertical-align: baseline;
}

html body .satsrc pre {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	background: none !important;
	box-shadow: none !important;
	color: inherit;
	font-family: var(--satsrc-mono) !important;
	line-height: 1.55 !important;
	text-shadow: inherit;
	overflow: visible !important;
	white-space: pre !important;
	word-wrap: normal !important;
	overflow-wrap: normal !important;
}

/* Generic resets for every