win95.css

@font-face
{
	font-family: MsSansSerif;
	src: url("MsSansSerif.ttf") ;/*format("opentype");*/
}

:root
{
	--win32_Highlight:	#fff;
	--win32_Medlight:	#ccc;
	--win32_Background:	#b8b8b8;
	--win32_LoLight:	#888;
	--win32_DarkLight:	#000;
}

/* this was global/desktop styling, but can just apply to window */
.PopGuiWindow
{
	color:			var(--win32_DarkLight);	/* text colour */

	/* current closest I can get to original */
	font-family:	MsSansSerif, courier;
	font-smooth:	never;
	-webkit-font-smoothing : none;
	font-size:		11px;
	
	image-rendering: pixelated;
	
	background:		#0cc;	/*	desktop	*/
	
	margin:			0px;
	padding:		0px;
}


/* default edges */
.PopGuiWindow,
.PopGuiIconView, 
.PopGuiWindow * input 
{
	/* colour from topleft to bottom right */
	--ColourA:	var(--win32_Highlight);
	--ColourB:	var(--win32_Medlight);
	--ColourBg:	var(--win32_Background);
	--ColourC:	var(--win32_LoLight);
	--ColourD:	var(--win32_DarkLight);

	border-top:		1px var(--ColourB) solid !important;
	border-left:	1px var(--ColourB) solid !important;
	border-bottom:	1px var(--ColourD) solid !important;
	border-right:	1px var(--ColourD) solid !important;
	/* x offset, y offset, blur radius, spread radius, colour */
	box-shadow:		inset 1px 1px 0px 0px var(--ColourA), inset -1px -1px 0px 0px var(--ColourC) !important;
	background:		var(--ColourBg);
}

.PopGuiWindow
{
	padding:		3px;	/* this gets ignored if child is positioned with absolute, so add margin */
	
	xposition:	absolute;
	position:	relative;
	xleft:		10px;
	xtop:		20px;
}


/* embossed controls */
.PopGuiIconView, 
.PopGuiWindow * input[type=text],
.PopGuiTitleBar .PopGuiButton,
.PopGuiWindow * input[type=button]
{
	--ColourA:	var(--win32_DarkLight);
	--ColourB:	var(--win32_LoLight);
	--ColourBg:	#fff;
	--ColourC:	var(--win32_Medlight);
	--ColourD:	var(--win32_Highlight);

	/* as we're absolute, the padding from above needs to be put as margin */
	margin: 3px;
	padding: 1px; /* border is inside the margins so we need to pad otherwise stuff inside overlaps border */
}

.PopGuiIconView
{
	display:	flex;
	flex-wrap:	wrap;
		
	/* title bar offset as we're absolute :/ would be good to take away need for absolute	*/
	top:		20px !important;	/* important to override the .style set in code */
}

.PopGuiIconView#Desktop
{
	border:		none;
	box-shadow:	none;
	background:	transparent;
}


.PopGuiTitleBar:before
{
	xxcontent:	attr(id);
	content:	attr(content);
	overflow:	hidden;
	position:	absolute;
	top:		3px;
	left:		3px;
}

.PopGuiTitleBar
{
	background:	#00c;
	padding:	3px;
	color:		#fff;
	xmargin-bottom:	2px;
	
	/*
	 gr: this is all blurry atm, can't make it pixel-bold :/
	 also, the weight doesn't do anything at 11px
	 font-size:		12px;
	 font-weight:	900;
	 */
	
	display:		flex;
	
}

.PopGuiTitleBar .PopGuiTitleIcon
{
	display:	none;
	width:		16px;
	xheight:	16px;
	
}

.PopGuiTitleBar .PopGuiTitleText
{
	flex-grow:	99;
}

.PopGuiTitleBar .PopGuiButton
{
	color:			#000;
	width:			10px;
	height:			10px;
	text-align:		center;
	vertical-align:	middle;
	margin-left:	2px;
	
	/* swap this for wingdings */
	font-size:		8px;
	font-weight:	bold;
}

.PopGuiIcon
{
	display:	flex;
	justify-content:	center;
	position:	relative;
	width:		82px;
	height:		62px;
	margin:		6px;
}


.PopGuiIcon:hover .PopGuiIconImage,
.PopGuiIconImage:hover
{
	filter: url(#BlueFilter);
}

.PopGuiIconImage
{
	position:	absolute;
	top:	0px;
	left:	25px;
	width:	32px;
	height:	32px;
}

.PopGuiIconLabel
{
	xbackground:red;
	display:block;
	position:	absolute;
	top:		36px;
	padding:	2px;
}


.PopGuiIconLabel:before
{
	content:	attr(content);
	xxoverflow:	hidden;
	position:	absolute;
	xtop:		3px;
	xleft:		4px;
	width:		100%;
	text-align:	center;
}

.PopGuiIcon:hover .PopGuiIconLabel,
.PopGuiIconLabel:hover
{
	background:	#00C;
	border:		dotted 1px #FF0;
	color:		#fff;
}

.PopGuiMenuBar
{
	display:	flex;
}

.PopGuiMenuBar .PopGuiMenuItem:first-letter
{
	text-decoration:	underline;
}
.PopGuiMenuBar .PopGuiMenuItem
{
	padding:	4px 4px 4px 6px;
}

.PopGuiMenuBar .PopGuiMenuItem:hover
{
	background-color:	#00C;
	color:				#fff;
}



.PopGuiWindow * table
{
	border-collapse: collapse;
}

.PopGuiWindow * thead 
{
	background: #ccc;
	font-weight:bold;
}

.PopGuiWindow * tr 
{
}

.PopGuiWindow * td 
{
	padding: 4px;
	border: 1px #ccc solid;
	white-space: nowrap;
}

.PopGuiWindow * input[type=text]
{
	/* current closest I can get to original */
	font-family: MsSansSerif, courier;
	font-smooth: never;
	-webkit-font-smoothing: none;
	font-size: 11px;
	padding: 7px;
	margin: 0px;
	outline: none;	/* outline on-focus */
}

.PopGuiWindow * input[type=button] 
{
	/* colours from top left to bottom right */
	--ColourA:	#fff;
	--ColourB:	#ccc;
	--ColourBg:	#B8B8B8;
	--ColourC:	#888;
	--ColourD:	#000;

	/* as we're absolute, the padding from above needs to be put as margin */
	margin: 3px;
	padding: 1px; /* border is inside the margins so we need to pad otherwise stuff inside overlaps border */

	/* current closest I can get to original */
	font-family: MsSansSerif, courier;
	font-smooth: never;
	-webkit-font-smoothing: none;
	font-size: 11px;
	padding: 7px;
	margin: 0px;
	outline: none;	/* outline on-focus */
}

.PopGuiWindow * input[type=button]:focus
{
	/* dashed outline text */ 
}

.PopGuiWindow * input[type=button]:active
{
	--ColourA:	var(--win32_DarkLight);
	--ColourB:	var(--win32_LoLight);
	--ColourC:	var(--win32_Medlight);
	--ColourD:	var(--win32_Highlight);
}