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 57 comments ( View all | Add Comment )

FraceXD	1738169056 using Report Comment
✩࿐࿔ EOYX >__< (Autoplay!)	1737295438 Using on blogs Report Comment
Wesley L.	1737143686 Using this layout for my profile right now. Thank you for designing this! Report Comment
theredlumas2	1736098864 using but its really buggy. trying to use the CD case pfp thing as well Report Comment
Spaghetti-Gardener	1735982987 A truly wonderful layout. I am using this layout! :3 Report Comment
MeowCarkk	1733573549 using Report Comment
Catherine	1733570917 using!! Report 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