<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/JoeeGrigg/pen/Ppxxaj?q=gnome&order=popularity&depth=everything&show_forks=false" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style class="cp-pen-styles">html {
font-family: Helvetica, Arial, Sans-Serif;
font-size: 62.5%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
background: #929292;
}
body {
margin: 0;
font-size: 1.6rem;
line-height: 1.5;
}
.gnome-window {
width: 90vw;
height: 90vh;
margin-top: 5vh;
margin-left: 5vw;
border-radius: .5rem;
overflow: hidden;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(28, 31, 31, 0.75);
}
button:focus {
outline: none;
}
.gnome-window {
background: #292929;
color: #fff;
display: flex;
flex-direction: column;
}
.gnome-title-bar {
width: 100%;
height: 4.5rem;
overflow: hidden;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background: #424949;
background: linear-gradient(to bottom, #424949, #363c3c);
border-bottom: 1px solid rgba(28, 31, 31, 0.75);
}
.gnome-title-bar__title {
line-height: 4.5rem;
text-align: center;
text-shadow: 0px -1px 2px #000;
font-weight: bold;
}
.gnome-title-bar__actions-left {
box-sizing: border-box;
padding: 0.5rem;
flex: 1;
}
.gnome-title-bar__actions-right {
box-sizing: border-box;
padding: 0.5rem;
flex: 1;
text-align: right;
}
.gnome-title-bar__separator {
box-sizing: border-box;
vertical-align: middle;
display: inline-block;
width: 2px;
height: calc(4.5rem - (0.5rem * 2));
background: rgba(34, 34, 34, 0);
background: linear-gradient(to bottom, rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, 0.5) 50%, rgba(34, 34, 34, 0) 100%);
border-radius: 100%;
}
.gnome-body {
width: 100%;
flex: 1;
display: flex;
}
.gnome-sidebar {
height: 100%;
width: 20rem;
background: #454c4c;
border-right: 1px solid rgba(28, 31, 31, 0.75);
padding-top: 0.5rem;
overflow-y: auto;
overflow-x: hidden;
}
.gnome-sidebar__list {
margin: 0;
padding: 0;
list-style: none;
}
.gnome-sidebar__list li {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
cursor: pointer;
}
.gnome-sidebar__list li i {
margin-right: 1rem;
}
.gnome-sidebar__group {
border-bottom: 2px solid rgba(28, 31, 31, 0.1);
padding-bottom: 0.5rem;
}
.gnome-sidebar__group:last-of-type {
border-bottom: none;
}
.gnome-content {
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
}
.gnome-content__wrapper {
flex: 1;
}
.gnome-content__footer {
height: 4.5rem;
padding: 0.5rem;
box-sizing: border-box;
overflow: hidden;
background: #424949;
background: linear-gradient(to bottom, #424949, #3d4444);
border-top: 1px solid rgba(28, 31, 31, 0.75);
}
.gnome-action__button {
height: calc(4.5rem - (0.5rem * 2));
min-width: calc(4.5rem - (0.5rem * 2));
background: #444a4a;
background: linear-gradient(to bottom, #444a4a, #383d3d, #383d3d);
border: 1px solid rgba(28, 31, 31, 0.75);
border-radius: 0.4rem;
padding: 0 1rem;
color: inherit;
cursor: pointer;
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
text-shadow: 0px -1px 2px #000;
font-weight: inherit;
position: relative;
overflow: hidden;
}
.gnome-action__button i, .gnome-action__button span {
position: relative;
z-index: 2;
}
.gnome-action__button i + span {
margin-left: 0.5rem;
}
.gnome-action__button.noborder {
background: none;
border: 1px solid rgba(28, 31, 31, 0);
transition: all .3s ease-in-out;
}
.gnome-action__button:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
background: #586161;
background: linear-gradient(to bottom, #586161, #404646, #404646);
border-radius: 0.4rem;
transition: all .3s ease-in-out;
}
.gnome-action__button:hover {
border: 1px solid rgba(28, 31, 31, 0.75);
}
.gnome-action__button:hover:after {
opacity: 1;
}
.gnome-action__button:active:after {
background: grey;
}
.gnome-action__button.selected {
background: linear-gradient(to bottom, #232828, #383d3d, #383d3d);
}
.gnome-action__button.selected:after {
display: none;
}
.gnome-action__button-group {
display: inline-block;
margin-right: 4px;
}
.gnome-action__button-group .gnome-action__button {
border-radius: 0;
margin-right: -5px;
border-right: none;
}
.gnome-action__button-group .gnome-action__button:after {
border-radius: 0;
}
.gnome-action__button-group .gnome-action__button:first-of-type {
border-top-left-radius: 0.4rem;
border-bottom-left-radius: 0.4rem;
}
.gnome-action__button-group .gnome-action__button:first-of-type:after {
border-top-left-radius: 0.4rem;
border-bottom-left-radius: 0.4rem;
}
.gnome-action__button-group .gnome-action__button:last-of-type {
border-top-right-radius: 0.4rem;
border-bottom-right-radius: 0.4rem;
border-right: 1px solid rgba(28, 31, 31, 0.75);
}
.gnome-action__button-group .gnome-action__button:last-of-type:after {
border-top-right-radius: 0.4rem;
border-bottom-right-radius: 0.4rem;
}
</style></head><body>
<!-- Window Wrapper -->
<div class="gnome-window">
<!-- Title Bar -->
<header class="gnome-title-bar">
<div class="gnome-title-bar__actions-left">
<div class="gnome-action__button-group">
<button class="gnome-action__button"><i class="fa fa-chevron-left"></i></button>
<button class="gnome-action__button"><i class="fa fa-chevron-right"></i></button>
</div>
<div class="gnome-action__button-group">
<button class="gnome-action__button"><i class="fa fa-home"></i><span>Home</span></button>
<button class="gnome-action__button selected"><span>Pictures</span></button>
<button class="gnome-action__button"><span>Wallpapers</span></button>
</div>
</div>
<div class="gnome-title-bar__title">Gnome Window</div>
<div class="gnome-title-bar__actions-right">
<button class="gnome-action__button"><i class="fa fa-search"></i></button>
<div class="gnome-action__button-group">
<button class="gnome-action__button"><i class="fa fa-th-list"></i></button>
<button class="gnome-action__button selected"><i class="fa fa-th"></i></button>
<button class="gnome-action__button"><i class="fa fa-chevron-down"></i></button>
</div>
<button class="gnome-action__button"><i class="fa fa-bars"></i></button>
<span class="gnome-title-bar__separator"></span>
<button class="gnome-action__button noborder"><i class="fa fa-times"></i></button>
</div>
</header>
<!-- Body Wrapper -->
<div class="gnome-body">
<!-- Sidebar -->
<aside class="gnome-sidebar">
<ul class="gnome-sidebar__list gnome-sidebar__group">
<li><i class="fa fa-clock-o"></i>Recent</li>
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-file-o"></i>Documents</li>
<li><i class="fa fa-download"></i>Downloads</li>
<li><i class="fa fa-music"></i>Music</li>
<li><i class="fa fa-camera"></i>Pictures</li>
<li><i class="fa fa-video-camera"></i>Videos</li>
<li><i class="fa fa-trash-o"></i>Wastebasket</li>
</ul>
<ul class="gnome-sidebar__list gnome-sidebar__group">
<li><i class="fa fa-hdd-o"></i>Computer</li>
</ul>
<ul class="gnome-sidebar__list gnome-sidebar__group">
<li><i class="fa fa-microchip"></i>Browse Network</li>
<li><i class="fa fa-server"></i>Connect to Server</li>
</ul>
</aside>
<!-- Content -->
<div class="gnome-content">
<!-- Content Wrapper -->
<div class="gnome-content__wrapper">
</div>
<!-- Footer -->
<footer class="gnome-content__footer">
<button class="gnome-action__button"><i class="fa fa-refresh"></i></button>
</footer>
</div>
</div>
</div>
</body></html>
