/* RISC OS 3.71 desktop - core styles */
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #000; }
body { -webkit-user-select: none; user-select: none; -webkit-font-smoothing: antialiased; }
body.dragging, body.dragging * { cursor: inherit; }
/* a frame (!Browse's embedded pages) would take the pointer from a window or file being dragged over it */
body.dragging iframe { pointer-events: none; }
.screen {
position: fixed; left: 0; top: 0; overflow: hidden; transform-origin: 0 0;
background: #777777; color: #000;
font: 15px "Homerton", Helvetica, Arial, sans-serif;
touch-action: none;
}
.screen img, .screen canvas { image-rendering: pixelated; }
.screen img.spr { display: block; pointer-events: none; }
.layer-windows, .layer-menus, .layer-drag, .layer-modal { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.layer-windows > *, .layer-menus > *, .layer-drag > *, .layer-modal > * { pointer-events: auto; }
.layer-menus { z-index: 100000; }
.layer-modal { z-index: 150000; }
.layer-drag { z-index: 200000; }
.layer-drag > * { pointer-events: none; }
/* ------------------------------------------------------------------ windows */
.win { position: absolute; box-sizing: border-box; }
.win.framed { box-shadow: inset 0 0 0 1px #000; }
.win-view { position: absolute; overflow: hidden; }
.win-work { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; }
.win-icons { position: absolute; left: 0; top: 0; }
.win-canvas { position: absolute; left: 0; top: 0; }
.tool { position: absolute; width: 20px; height: 20px; background-repeat: no-repeat; image-rendering: pixelated; }
.win-title { position: absolute; overflow: hidden; }
.win-title > * { position: absolute; }
.win-title .tfill { left: 0; top: 0; right: 0; bottom: 0; }
.win-title .tcap { top: 0; width: 3px; height: 20px; background-repeat: no-repeat; image-rendering: pixelated; }
.win-title .tcap.l { left: 0; }
.win-title .tcap.r { right: 0; }
.win-title .tmid { left: 3px; right: 3px; background-repeat: repeat-x; image-rendering: pixelated; }
.win-title .tmid.t { top: 0; }
.win-title .tmid.b { bottom: 0; }
.win-title .ttext { left: 4px; right: 4px; top: 1px; bottom: 2px; display: flex; align-items: center; white-space: pre; overflow: hidden; line-height: 1; }
.sbar { position: absolute; }
.sbar > *, .sbar .well > *, .sbar .bar > * { position: absolute; image-rendering: pixelated; }
.sbar .well { overflow: hidden; }
.sbar.v .well > *, .sbar.v .bar > * { width: 20px; }
.sbar.h .well > *, .sbar.h .bar > * { height: 20px; }
/* ------------------------------------------------------------------ icons */
.icon { position: absolute; box-sizing: border-box; overflow: hidden; }
.icon .itext { position: absolute; white-space: pre; }
.icon .itext.multi { white-space: pre-wrap; line-height: 1.25; }
/* The anti-aliased font caret (Font_Caret, used by the Wimp with an outline desktop font): a 1 pixel
red stroke whose end rows are replaced by two pixels either side, like a small I-beam. */
.caret { position: absolute; width: 1px; pointer-events: none; z-index: 5;
background: linear-gradient(to bottom, transparent 1px, #dd0000 1px, #dd0000 calc(100% - 1px), transparent calc(100% - 1px)); }
.caret::before, .caret::after { content: ''; position: absolute; left: -1px; width: 3px; height: 1px;
background: linear-gradient(to right, #dd0000 1px, transparent 1px, transparent 2px, #dd0000 2px); }
.caret::before { top: 0; }
.caret::after { bottom: 0; }
/* ------------------------------------------------------------------ menus */
.menu { position: absolute; }
.menu .mitem { position: absolute; left: 0; right: 0; }
.menu .mtext { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; white-space: pre; }
.menu .mkey { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; white-space: pre; }
.menu .mdots { position: absolute; left: 0; right: 0; height: 1px; background-image: linear-gradient(to right, #000 50%, transparent 50%); background-size: 8px 1px; }
.menu input.mwrite { position: absolute; border: 0; outline: 0; padding: 0; margin: 0; background: transparent; font: inherit; }
/* ------------------------------------------------------------------ drags */
/* Wimp_DragBox outline (Wimp04 dottedbox/rotdotdash): a 1 pixel dot-dash line (pattern &FC: 6 on,
2 off) plotted with EOR, i.e. inverting what is underneath, drawn round the box and rotated by one
pixel every 2 centiseconds so that the dashes march round it. */
.drag-box, .rubber-box { position: absolute; box-sizing: border-box; pointer-events: none;
-webkit-backdrop-filter: invert(1); backdrop-filter: invert(1);
--dash-h: linear-gradient(90deg, #000 6px, transparent 6px);
--dash-v: linear-gradient(180deg, #000 6px, transparent 6px);
-webkit-mask-image: var(--dash-h), var(--dash-h), var(--dash-v), var(--dash-v);
mask-image: var(--dash-h), var(--dash-h), var(--dash-v), var(--dash-v);
-webkit-mask-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px; mask-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
-webkit-mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y; mask-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
-webkit-mask-position: 0 0, 0 100%, 0 0, 100% 0; mask-position: 0 0, 0 100%, 0 0, 100% 0;
animation: dotdash 0.16s steps(8) infinite; }
@keyframes dotdash {
from { -webkit-mask-position: 0 0, 0 100%, 0 0, 100% 0; mask-position: 0 0, 0 100%, 0 0, 100% 0; }
to { -webkit-mask-position: -8px 0, 8px 100%, 0 8px, 100% -8px; mask-position: -8px 0, 8px 100%, 0 8px, 100% -8px; }
}
/* DragASprite (as the Filer and save boxes use it): the sprite with a black drop shadow 8 OS units
right and down, "hatched" - only alternate pixels, in a checkerboard, are plotted. */
.drag-sprite { position: absolute;
-webkit-mask-image: conic-gradient(#000 25%, transparent 0 50%, #000 0 75%, transparent 0);
mask-image: conic-gradient(#000 25%, transparent 0 50%, #000 0 75%, transparent 0);
-webkit-mask-size: 2px 2px; mask-size: 2px 2px; }
.drag-sprite img { filter: drop-shadow(4px 4px 0 #000); }
/* ------------------------------------------------------------------ modal / cli / boot */
.modal-shield { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.textscreen { position: absolute; left: 0; bottom: 0; right: 0; background: #000; color: #fff; overflow: hidden; }
.boot-screen { position: fixed; inset: 0; background: #000; color: #fff; z-index: 999999; }