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

Stumbler	1789495244 using Report Comment
Danny	1789312310 Using, love it sm ty!! Report Comment
intellium2007	1781301315 using Report Comment
Sunky the Eevee	1780682757 using Report Comment
Chocolatt	1779714649 using!! Report Comment
Ava	1776599438 love it! Report Comment
agus	1776215159 using but the pfp border doesn't work :( Report Comment
Ritaaa	1776170915 using Report Comment
M1ndRuin	1774219155 Using!! Report Comment
Fiviee	1773510343 using Report Comment
_winHARVEY	1767982871 using!! Report Comment
3epcidicvermin_69	1765140969 usinggg (yoink) Report Comment
Pickle_pounder60	1762134958 boing Report Comment
Marliemac	1759799417 does anyone know how to make the border appear? im new and i am not the best with coding. thx Report Comment
「、。𝚔𝚊𝚜𝚑.ᐟ 🩸」	1757671973 using Report Comment
mikey	1756608642 using Report Comment
Patachoo	1754322980 Using the pfp code and frame, thanks ! Report Comment
oqureqz	1753873964 i am using it Report Comment
૮ – ﻌ–ა	1752416637 used . 💚 Report Comment
Gu@d@	1752008175 Using x Report Comment