Windows 7 Aero Glass V2

Tags: windows, frutiger, aero, frutigeraero, live, windows7, windowsvista

Description:

This is a heavily optimized and modified version of my old Windows 7 layout, it now has animations, easier customization, more realism and even a PFP border.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by IPTVman (https://layouts.spacehey.com/layout?id=34300) -->

<style>

@keyframes windowOpen {
	0% {
		opacity: 0.3;
		transform: perspective(600px) rotateX(-13deg) translateY(-5px) scale(0.85);
	}
	100% {
		opacity: 1;
		transform: perspective(600px) rotateX(0deg) rotateY(0deg) translateY(0px)
			scale(1);
	}
}

@font-face {
	font-family: 'Segoe UI';
	src: url('./fonts/normal/segoeui.eot');
	src: local("Segoe UI"),
		 local("Segoe"),
		 local("Segoe WP"),
		 url('https://win7.nota-robot.com/fonts/normal/segoeui.eot?#iefix') format('embedded-opentype'),
		 url('https://win7.nota-robot.com/fonts/normal/segoeui.woff') format('woff'),
		 url('https://win7.nota-robot.com/fonts/normal/segoeui.svg#SegoeUI') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Segoe UI Semibold';
	src: url('./fonts/semibold/seguisb.eot');
	src: local("Segoe Semibold"),
		 local("Segoe WP Semibold"),
		 url('https://win7.nota-robot.com/fonts/semibold/seguisb.eot?#iefix') format('embedded-opentype'),
		 url('https://win7.nota-robot.com/fonts/semibold/seguisb.woff') format('woff'),
		 url('https://win7.nota-robot.com/fonts/semibold/seguisb.svg#SegoeUISemibold') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Segoe UI Bold';
	src: url('https://win7.nota-robot.com/fonts/bold/segoeuib.eot');
	src: local("Segoe Bold"),
		 local("Segoe WP Bold"),
		 url('https://win7.nota-robot.com/fonts/bold/segoeuib.eot?#iefix') format('embedded-opentype'),
		 url('https://win7.nota-robot.com/fonts/bold/segoeuib.woff') format('woff'),
		 url('https://win7.nota-robot.com/fonts/bold/segoeuib.svg#SegoeUI') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Segoe UI Light';
	src: url('https://win7.nota-robot.com/fonts/light/segoeuil.eot');
	src: local("Segoe UI Light"),
		 local("Segoe WP Light"),
		 url('https://win7.nota-robot.com/fonts/light/segoeuil.eot?#iefix') format('embedded-opentype'),
		 url('https://win7.nota-robot.com/fonts/light/segoeuil.woff') format('woff'),
		 url('https://win7.nota-robot.com/fonts/light/segoeuil.svg#SegoeUI') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {
  background-image: url(https://external-media.spacehey.net/media/sdn7meUeWIXeenMOhhumZzbGHheMZe_rUscErpxXb7zw=/https://static.miraheze.org/windowswallpaperwiki/5/50/Img0_%28Windows_7%29.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

nav .top {
  background: none;
}
main {
  background: none;
}
nav .links {
  background: none;
}
nav .links a {
  text-shadow: 0px 0px 16px #ffffff,0px 0px 16px #ffffff,0px 0px 16px #ffffff,0px 0px 16px #ffffff !important;
}
* {
  font-size: 9pt !important;
  font-family: Segoe UI,sans-serif !important;
  color: black !important;
  text-decoration: none !important;
  cursor: context-menu !important;
  font-weight: normal !important;
  text-shadow: 0px 0px 16px #ffffff,0px 0px 16px #ffffff,0px 0px 16px #ffffff,0px 0px 16px #ffffff !important;
}
.container:before {
  border-radius: 6px;
  height: 100%;
  left: 0;
  top: 0;
  box-shadow: 0px 0px 15px 2px #000000c3, inset 0px 0px 0px 1px var(--aero-black), inset 0px 0px 0px 2px #d9e2eb;
  background: linear-gradient(#fff0 20%,hsla(0,0%,100%,.7) 29%,transparent 29.3%);
}
.container {
  animation:.5s windowOpen cubic-bezier(.19,1,.22,1);
  box-shadow: 0 0 15px 2px #000000c3,inset 0 0 0 1px var(--aero-black),inset 0 0 0 2px #d9e2eb;
  background: linear-gradient(-139deg,rgba(135,173,190,.47) 0%,rgba(0,0,0,0) 25%),var(--aero-accent);
  border-radius: 6px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: 8px;
}

:root {
	--accent: #74B8FC;
	--aero-white: #ffffff7a;
	--aero-black: #000000bd;
	--saturation: 100%;
	--brightness: 100%;
	--intensity: 80%;
	--aero-color: rgba( 116, 184, 252, calc(.7 * var(--intensity)) );
	--aero-accent: color-mix( in srgb, #000, color-mix(in srgb, var(--aero-color) var(--saturation), transparent) var(--brightness) );
}

footer {
	background: none !important;;
}

.container {
	background-image: url("https://i.imgur.com/O8DqcaX.png");
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
}

.logout-btn {
	color: black;
}

.logout-btn, .blog-entry .kudos-btn {
 color: black !important;
 font-size: 9pt;
 outline:none;
 border:solid thin #707070 !important;
 border-radius:3px;
 min-width:60px;
 padding:2px 12px;
 box-shadow:inset 0 0 0 1px var #ffffff7a !important;
 background:linear-gradient(180deg,rgba(242,242,242,1) 0%,rgba(235,235,235,1) 40%,rgba(221,221,221,1) 40%,rgba(207,207,207,1) 100%) !important;
 position:relative;
 z-index:1;
 transition:opacity .35s linear;
 text-decoration: none !important;
}

button {
 outline:none;
 border:solid thin #707070 !important;
 border-radius:3px;
 min-width:60px;
 padding:2px 12px;
 box-shadow:inset 0 0 0 1px var #ffffff7a !important;
 background:linear-gradient(180deg,rgba(242,242,242,1) 0%,rgba(235,235,235,1) 40%,rgba(221,221,221,1) 40%,rgba(207,207,207,1) 100%) !important;
 position:relative;
 z-index:1;
 transition:opacity .35s linear;
 cursor: context-menu !important;
}

button:hover {
 border:solid thin #3c7fb1 !important
}
button:before {
 position:absolute;
 content:"";
 top:0;
 right:0;
 bottom:0;
 left:0;
 background:linear-gradient(180deg,rgba(234,246,253,1) 0%,rgba(217,240,252,1) 40%,rgba(190,230,253,1) 40%,rgba(167,217,245,1) 100%) !important;
 z-index:-1;
 transition:opacity .35s linear;
 opacity:0;
 border-radius:3px
}
button:hover:before {
 opacity:1
}
button:after {
 box-shadow:inset 0 0 0 1px #95ade474 !important;
 position:absolute;
 content:"";
 top:0;
 right:0;
 bottom:0;
 left:0;
 background:linear-gradient(180deg,rgba(229,244,252,1) 0%,rgba(196,229,246,1) 40%,rgba(152,209,239,1) 40%,rgba(104,179,219,1) 100%) !important;
 z-index:-1;
 transition:opacity .1s linear;
 opacity:0;
 border-radius:3px
}
button:active:after {
 opacity:1
}

button {
	height: 22px;
	font-size: 9pt;
}

h1 {
	font-size: 15pt !important;
}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
  border: none !important;
}


.heading {
  background: none !important;
}
h4 {
  font-size: 11pt !important;
  padding-bottom: 2px;
}

input[type="text"] {
	border-top: solid thin #abadb3;
	border-left: solid thin #e2e3ea;
	border-bottom: solid thin #e3e9ef;
	border-right: solid thin #dbdfe6;
	outline: none;
	box-shadow: inset 0 0 0 1px var(--aero-white);
}
td {
  border-top: solid thin #abadb3;
  border-left: solid thin #e2e3ea;
  border-bottom: solid thin #e3e9ef;
  border-right: solid thin #dbdfe6;
  outline: none;
  box-shadow: inset 0 0 0 1px #ffffff57;
  background: #ffffffba !important;
  border-radius: 2px;
}
.icon {
}
td:before {
  opacity: ;
}
.general-about .profile-pic img {
  background-image: url("https://i.imgur.com/Nx0acPU.png");
  max-height: 149px;
  width: 144px;
  max-width: 100%;
  border: 0px solid rgba(.0,.0,.0,.0);
  padding: 25px;
  padding-top: 19px;
  border-radius: 2px;
}
.general-about .profile-pic {
  height: 138px;
}

.logo {
	content: url(https://i.imgur.com/pTl3Hkq.png);
	filter: drop-shadow(0px 0px 15px #fff) drop-shadow(0px 0px 15px #fff) !important;
}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 50 comments ( View all | Add Comment )

mikey	1731876637 using Report Comment
itsd3n1zz	1730481414 usingg Report Comment
fentcel⁶	1729621262 usin Report Comment
nvtbvster	1727216067 using rn!! its so pretty i love it ^_^ Report Comment
Missa510UwU	1724363743 11/10, I <3 it Report Comment
𖥂Ailbe𖥂	1722827454 using :D Report Comment
Nicholas (music on prof🎧)	1722805969 Using! Thanks for making this! Report Comment
λ486	1722540777 Using! Just as an extra question in case; is there also a way of changing the colour scheme/accent of the main area/container? Report Comment
Blenber	1721318600 Using! Report Comment
Eryn ^^	1721244925 Using!! Report Comment
Edmund Abernathy	1720214388 Using. Report Comment
kota x)	1718395234 using! X) Report Comment
str4wb3rr7_l0v3	1716129610 using!!! x3 Report Comment
Cass	1715738585 using :3 Report Comment
coolguy	1714632398 using^^ Report Comment
krix	1714089100 Using Report Comment
✟ - Samber/BSoD #	1714044885 using Report Comment
windowstopuser	1713736177 using xd Report Comment
jazz headcrab	1713576442 using Report Comment
Gilbert 64	1711897388 Excelente trabajo tilín Report Comment