V os Concept

index.html

<div class="desktop">
  
  <div class="taskbar"><center>
    <a class="taskbar__item taskbar__item--video" data-window="video">
      <i class="fa fa-video-camera"></i>
    </a>
    <a class="taskbar__item taskbar__item--notepad" data-window="notepad">
      <i class="fa fa-pencil"></i>
    </a>
    <a class="taskbar__item taskbar__item--terminal" data-window="terminal">
      <i class="fa fa-terminal"></i>
    </a>
  </center></div>
  
  
  <div class="window window--video window--minimized" data-window="video" style="width:500px;height:315px;top:30%;left:3%;">
    <div class="window__titlebar">
      <div class="window__controls window__controls--left">
      </div>

      <span class="window__title">
        Video
      </span>
      
      <div class="window__controls window__controls--right">
        <a class="window__minimize"></a>
        <a class="window__maximize"></a>
        <a class="window__disabled"></a>
      </div>
    </div>
    
    <div class="window__body black">
      <!--<video id="video" controls preload="auto" data-setup='' controlsList="nodownload" onClick="playPause();">
<source src="http://downloads.paramount.com/kaltura/content/r71v1/entry/data/354/854/0_buycdmn8_0_ygksx8j3_2.mp4" type='video/mp4'>
</video>-->
      <iframe width="100%" height="100%" src="https://www.youtube.com/embed/z-3Cnrqe_uA?ecver=1&rel=0&modestbranding=1" frameborder="0" gesture="media" allowfullscreen></iframe>
    </div>
    
  </div>
    
 <div class="window window--notepad window--minimized" data-window="notepad" style="width:400px;height:300px;top:10%;left:30%;">
    <div class="window__titlebar">
      <div class="window__controls window__controls--left">
      </div>

      <span class="window__title">
        Notes
      </span>
      
      <div class="window__controls window__controls--right">
        <a class="window__minimize"></a>
        <a class="window__disabled"></a>
        <a class="window__close"></a>
      </div>
    </div>
    <div class="window__body">
      <div class="window__main">
        <textarea class="full-textarea" spellcheck="false"></textarea>
      </div>
    </div>
    
  </div>
    
<div class="window window--terminal" data-window="terminal" style="width:600px;height:400px;top:20%;left:50%;">
    <div class="window__titlebar">
      <div class="window__controls window__controls--left">
      </div>
    
      <span class="window__title">
        Terminal
      </span>
      
      <div class="window__controls window__controls--right">
        <a class="window__minimize"></a>
        <a class="window__disabled"></a>
        <a class="window__close"></a>
      </div>
    </div>
    
    <div class="window__body black">
      <div class="window__main anim">
    <div id="outputs" class="outputs">
    </div>
    <div for="cmd-input" class='console-prompt-box'>
      <input id="input" type="text" class='console-input' placeholder="Type command..." spellcheck="false"><span class="cmd-pre">></span>
    </div>
      </div>
    </div>
  </div>
  
  <div id="netConnected" class="notification">
  <div class="icon"><span class="fa fa-wifi"></span></div>
  Connected to <b>saaNet</b>
</div>


<div id="spectreIso" class="file">
  <div class="icon"><span class="fa fa-file-archive-o"></span></div>
  <div class="name">spectre.iso</div>
</div>
<div id="spectreExo" class="file exe">
  <div class="icon"><span class="fa fa-cogs"></span></div>
  <div class="name">Spectre.exe</div>
</div>
  
</div>


<div class="context" hidden>
  <div class="context_item">
    <div class="inner_item">
      Copy
    </div> 
  </div>
  <div class="context_item"> 
    <div class="inner_item">
      Cut
    </div> 
  </div>
  <div class="context_item"> 
    <div class="inner_item">
      Paste
    </div> 
  </div>
  <div class="context_hr"></div>
  <div class="context_item"> 
    <div class="inner_item">
      More >
    </div> 
  </div>
</div>  

script.js

// Window size
$(function() {
  var zIndex = 1;

  var fullHeight = $(window).height(),
      fullWidth  = $(window).width();
 
  
  $(window).resize(function() {
    fullHeight = $(window).height();
    fullWidth = $(window).width();
  });
  
// Window & taskbar actions
  $(function() {
    $('.window:visible').each(function() {
      var appName = $(this).data('window');
      
      $('.taskbar__item[data-window="' + appName + '"]').addClass('taskbar__item--open');
    });
  });
  
  $(function() {
    var initialActive = $('.window').first();
    var appName = $(initialActive).data('window');
    
   $(initialActive).addClass('window--active').css({'z-index' : zIndex++});
   $('.taskbar__item[data-window="' + appName + '"]').addClass('taskbar__item--active');
  });

  
  $('.window').click(function() {
    $('.window').removeClass('window--active');
    
    $(this).addClass('window--active');
    $(this).css({'z-index' : zIndex++});
  });
  
  $('.window').resizable({
    stop: function() {
     var initialHeight = $(this).height(),
     initialWidth = $(this).width(),
     initialTop = $(this).position().top,
     initialLeft = $(this).position().left; }
   });

  $('.window').draggable({    
    handle: '.window__titlebar',
    stop: function() {
    var initialHeight = $(this).height(),
        initialWidth = $(this).width(),
        initialTop = $(this).position().top,
        initialLeft = $(this).position().left; 
    },
    start: function(event, ui) {
      $('.window').removeClass('window--active');
      
      $(this).addClass('window--active');
      $(this).css({'z-index' : zIndex++});

      if ( $(this).hasClass('window--maximized') ) {
        $(this).removeClass('window--maximized');
        
        $(this).css({ 'height' : initialHeight,
                      'width'  : initialWidth,
                      'top'    : 0,
                      'left'   : '50%' });        
      }            
    }
  });

  function openApp(e) {
    var appName = $(this).data('window');
    var targetWindow = $('.window[data-window="' + appName + '"]');
    var targetTaskbar = $('.taskbar__item[data-window="' + appName + '"]');
    
    e.preventDefault();
    $('.taskbar__item').removeClass('taskbar__item--active');
    
    if ( targetWindow.is(':visible') ) {
      if ( targetWindow.hasClass('window--active') ) {
        $(targetWindow).toggleClass('window--minimized');

        if ( !targetWindow.hasClass('window--minimized') ) {
          var initialHeight = $(targetWindow).height(),
               initialWidth = $(targetWindow).width(),
               initialTop = $(targetWindow).position().top,
               initialLeft = $(targetWindow).position().left; 
          
          $('.window').removeClass('window--active');

         $(targetWindow).addClass('window--active').css({ 
            'z-index' : zIndex++
          });
          
          $(targetTaskbar).addClass('taskbar__item--active');
        }
      } else {
        $('.window').removeClass('window--active');
        $(targetWindow).addClass('window--active').css({'z-index' : zIndex++});
        
        $(targetTaskbar).addClass('taskbar__item--active');
      }
    } else {
      $('.window').removeClass('window--active');
      
      $('.window[data-window="' + appName + '"]').fadeIn().addClass('window--active').css({ 'z-index' : zIndex++ });
      
      setTimeout(function() {
        $('.window[data-window="' + appName + '"]').removeClass('window--opening');
      }, 0);
      
      $(targetTaskbar).addClass('taskbar__item--active').addClass('taskbar__item--open');
    } 
  }
  
  $('.taskbar__item').click(openApp);  
  
// Window controls  
  
  $('.window__controls').each(function() {
    var parentWindow = $(this).closest('.window'); 
    
    $(this).find('a').click(function(e) {
      e.preventDefault();
    });
    
    $(this).find('.window__close').click(function(e) {
      $(parentWindow).addClass('window--closing');
      
      setTimeout(function() {
        $(parentWindow).hide().removeClass('window--closing').addClass('window--opening');
      }, 500);
      
      var appName = $(parentWindow).data('window');
      
      $('.taskbar__item[data-window="' + appName + '"]').removeClass('taskbar__item--open taskbar__item--active');
    });
    
    $(this).find('.window__minimize').click(function(e) {
      $(parentWindow).addClass('window--minimized');
    });
    
    $(this).find('.window__maximize').click(function(e) {

      $(parentWindow).toggleClass('window--maximized');

      if ( !$(parentWindow).hasClass('window--maximized') ) {
        $(parentWindow).css({ 'height' : initialHeight,
                              'width'  : initialWidth,
                              'top'    : initialTop,
                              'left'   : initialLeft});
      } else {
        initialHeight = $(parentWindow).height();
        initialWidth = $(parentWindow).width();
        initialTop = $(parentWindow).position().top;
        initialLeft = $(parentWindow).position().left;

        $(parentWindow).css({ 'height' : fullHeight,
                              'width'  : fullWidth,
                              'top'    : 0,
                              'left'   : 0 });
      }
    });
  });
}); 


// Unfocus windows when desktop is clicked
$('.desktop').click(function(e) {
  if ( $('.desktop').has(e.target).length === 0 ) {
  $('.window').removeClass('window--active');
  }
});

// Prevent "open" class on start
$(function() {
  $('.taskbar__item--start').click(function() {
    $(this).removeClass('taskbar__item--open taskbar__item--active');
  });
});

/* RIGHT CLICK */

$(document).bind("contextmenu", function(event) {
    event.preventDefault();
    $(".context")
        .show()
        .css({top: event.pageY + 0, left: event.pageX + 0});
});

$(document).click(function() {
  isHovered = $(".context").is(":hover");
  if (isHovered == true) {
  } else {
    $(".context").fadeOut(90);
  }
});





/* CONSOLE */ 

// Define room level

var lvl = 1;

// Focus
$('.console-input').focus();

// Output to Console
function output(print) {
  var cmd = $('.console-input').val();
  if(cmd==""){cmd="<span>null</span>";}
  $("#outputs").append("<span class='output-cmd'>" + cmd + "</span>");

  $.each(print, function(index, value) {
    cmd = " >";
    if (value == "") {
      value = "&nbsp;";
      cmd = "&nbsp;";
    }
    $("#outputs").append("<span class='output-text'>" + value + "</span>");
  });
  
  $('.console-input').val("");
  //$('.console-input').focus();
  $('.anim').animate({
    scrollTop: $('#outputs').height()
  }, 500);
}

// Break Value
var newLine = "<br/> &nbsp;";

// User Commands

var helpInfo = {
  "/connect":0,
  "/download":0,
  "/extract":0
};

var cmds = {
  
  "": function() {
  },
  
  "/reload": function() {
    window.location.replace(location.href);
  },
  
  "/rl": function(a) {
    output([lvl]);
  },

  "/clear": function() {
    $("#outputs").html("");
  },

  "/help": function() {

    var print = ["Commands:"];
    print = $.merge(print, Object.keys(helpInfo));

    output(print);
  },

  "/connect": function(a) {
    if(a === "saaNet"){
      output(['Connected to <b>' + a + '</b>']);
      $('#netConnected').addClass('triggered');
      lvl = 2;
    }
    else if(a === "list"){
      output(['Networks:' + '<li><span class="fa fa-signal" style="color:#1DD041;"></span> saaNet</li>' + '<li><span class="fa fa-signal" style="color:#FF5D5A;"></span> Novistar_E831</li>' + '<li><span class="fa fa-signal" style="color:#FF5D5A;"></span> OMO6218</li>' + '<li><span class="fa fa-signal" style="color:#FF5D5A;"></span> Yasstel_h501</li>']);
    }
    else {
      output(['Use /connect <b>[NETWORK/LIST]<b>']);
    }
  },
  
  "/download": function(a) {
    if(a === "fsociety/spectre.iso" && lvl === 2){
      output(['Downloading <b>"spectre.iso"</b> to C:/users/blackhood/desktop']);
      $('#spectreIso').addClass('download');
      lvl = 3;
    }
    /*else if(a !== null){
      output(['<div class="err">Can' + "'" +'t find <b>"' + a + '"</b> in the cloud</div>']);
    }*/
    else{
      output(['Use /download <b>[PATH]<b>']);
    }
  },
  
  "/extract": function(a) {
    if(lvl === 3 && a !== "C:/users/blackhood/desktop/spectre.iso" && a !== null){
      output(['<span class="err"> File not found</div>']);
    }
    else if(lvl === 3 && a === "C:/users/blackhood/desktop/spectre.iso"){
      output(['Extracting <b>"' + a + '"</b>']);
      $('#spectreExo').addClass('extract');
      lvl = 4;
    }
    else {
      output(['Use /extract <b>[PATH]<b>']);
    }
  }
};

// Get User Command
$('.console-input').on('keypress', function(event) {
  if (event.which === 13) {
    var str = $(this).val();
    var data = str.split(' '); data.shift(); data = data.join(' ');
    var cmd = str.split(' ')[0];
    
    if (typeof cmds[cmd] == 'function') {
      if(cmds[cmd].length > 0) {
        cmds[cmd](data);
      } else {
        cmds[cmd]();
      }
    } else {
      output(["<div class='err'>Command not found: '" + cmd + "'</div>", "Use '/help' for list of commands."]);
    }
    $(this).val("");
  }
});

/* VIDEO */

var video=document.getElementById("video");

function playPause()
{
if (video.paused)
  video.play();
else
  video.pause();
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/desandro/masonry/master/dist/masonry.pkgd.min.js"></script>

style.scss

$video-color: #3F66FF;
$notepad-color: #EC407A;
$terminal-color: #222;
$green: #1ff042;

*, *:before, *:after {
  box-sizing: border-box;
  outline: none;
}

body {
  overflow: hidden;
  font-family: 'Quicksand', sans-serif;
  font-weight: 400;
}

a {
  text-decoration: none;
  cursor: default;
}


.media {
  display: flex;
}
video {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.media__img,
.media__body {
  flex: 0 1 auto;
}
.media__body {
  padding-left: 10px;
}


.desktop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  user-select: none;
  transform: translate3d(0,0,0);
  background: rgb(105,155,200);
  background: -moz-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%, rgba(181,197,216,1) 57%);
  background: -webkit-gradient(radial, top left, 0px, top left, 100%, color-stop(0%,rgba(105,155,200,1)), color-stop(57%,rgba(181,197,216,1)));
  background: -webkit-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
  background: -o-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
  background: -ms-radial-gradient(top left, ellipse cover, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
  background: radial-gradient(ellipse at top left, rgba(105,155,200,1) 0%,rgba(181,197,216,1) 57%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#699bc8', endColorstr='#b5c5d8',GradientType=1 );
}

.window {
  -webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: 0 2px 4px rgba(black, 0.5), 0 1px 1px rgba(black, 0.1);
  transition: all 250ms,
              z-index 1ms;
  z-index: 0;
  -webkit-transform-origin: center center;
	-moz-transform-origin: center center;
	transform-origin: center center;
  -webkit-transform: none;
	-moz-transform: none;
	transform: none;
  border-radius: 5px;
  
  min-width: 500px;
  min-height: 315px;
  
  &.ui-draggable-dragging,
  &.ui-resizable-resizing {
    transition: none;
  }
}
.window--maximized {
  
}
.window--minimized {
  left: 50% !important;
  top: 100% !important;
  transform: scale(0) !important;
  -webkit-transform-origin: bottom left !important;
	-moz-transform-origin: bottom left !important;
	transform-origin: bottom left !important;
  opacity: 0;
}
.window--active {
  box-shadow: 0 10px 30px rgba(black, 0.25), 0 0 1px rgba(black, 0.1);
  z-index: 1000;
  > .window__titlebar .window__title {
    color: #333;
  }
}
.window--closing {
  -webkit-transform-origin: center center;
	-moz-transform-origin: center center;
	transform-origin: center center;
  -webkit-transform: scale(0);
	-moz-transform: scale(0);
	transform: scale(0);
  opacity: 0;
}
.window--opening {
  transform: scale(1.3);
}

.window__titlebar {
  position: absolute;
  overflow: hidden;
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  cursor: default;
  background: linear-gradient(#CCCECB, #A8ACAB);
  box-shadow: inset 0 1px 3px rgba(255,255,255,.25), inset 0 -1px 3px rgba(0,0,0,.1);
}

.window__title {
  position: relative;
  line-height: 32px;
  z-index: 10;
  color: #777;
  font-weight: 500;
  text-shadow: 0 0 1px #9f9f9f;
  transition: all .2s;
}

.window__controls {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10;
  > a {
    position: relative;
    display: block;
    float: left;
    height: 32px;
    width: 20px;
    line-height: 32px;
    font-size: 12px;
    cursor: pointer;
    &::before {
      content: '';
      position: absolute;
      top: 10px;
      left: 0px;
      width: 12px;
      height: 12px;
      background: #fff;
      border-radius: 100%;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
    }
  }
}

a.window__minimize::before {background: #FBC301;}
a.window__maximize::before {background: #1DD041;}
a.window__close::before {background: #FF5D5A;}
a.window__disabled::before {background: #aaa;cursor: not-allowed;}

.window__controls--left {
  left: 0;
}
.window__controls--right {
  right: 0;
}



.window__icon,
.window__icon:hover,
.window__menu {
  color: white !important;
  .window--video & {
    background-color: $video-color;
  }
  .window--notepad & {
    background-color: $notepad-color;
  }
  .window--terminal & {
    background-color: $terminal-color;
  }
}

.window__body {
  display: flex;
  overflow: auto;
  padding-top: 32px;
  height: 100%;
  font-size: 14px;
}
.window__main {
  flex: 0 1 auto;
  padding: 10px;
  width: 100%;
  background-color: white;
}
.window__body.black, .window__body.black .window__main {
  background: #000;
}


.taskbar {
  position: absolute;
  left: calc(50% - 175px);
  right: 0;
  bottom: -50px;
  height: 60px;
  width: 350px;
  background: rgba(0,0,0,.5);
  z-index: 10000;
  border-radius: 10px 10px 0px 0px;
  transition: .2s cubic-bezier(.44,.14,.34,.97);
  transition-delay: .5s;
  &:hover {
    bottom: 0px;
    transition-delay: 0s;
  }
  &::before {
    content: '';
    position: absolute;
    left: calc(50% - 225px);
    bottom: 0;
    height: 80px;
    width: 450px;
    z-index: -1;
  }
}
.taskbar__item {
  position: relative;
  display: inline-block;
  margin: 0px -2px;
  text-align: center;
  width: 60px;
  height: 60px;
  font-size: 20px;
  color: white;
  cursor: pointer;
  transition: all .15s cubic-bezier(.44,.14,.34,.97);
  > i {
    position: absolute;
    bottom: 10px;
    left: calc(50% - 20px);
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-shadow:  0 0 15px rgba(0,0,0,.3), 0 0 3px rgba(0,0,0,.3);
    transition: all .15s cubic-bezier(.44,.14,.34,.97);
  }
  &:hover {
    width: 80px;
    > i {
      transform: scale(1.5) translateY(-5px);
      transform-origin: center bottom;
      box-shadow: 0 10px 15px rgba(0,0,0,.25);
    }
  }
}
.taskbar__item--open::before {
  content: '';
  position: absolute;
  bottom: 3px;
  left: calc(50% - 2px);
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 100%;
  z-index: 1000;
}
.taskbar__item--active{
}
.taskbar__item--video > i {
    background-color: $video-color;
    border-radius: 10px;
  }
.taskbar__item--notepad > i {
    background-color: $notepad-color;
    border-radius: 10px;
  }
.taskbar__item--terminal > i {
    background-color: $terminal-color;
    border-radius: 10px;
  }

.full-textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  resize: none;
  position: absolute;
  z-index: 0;
  background: rgba(#FFF, 0);
  top: 31px;
  left: 0px;
  right: 0px;
  border: none;
  padding: 10px;
  width: 100%;
  height: 88%;
  margin: auto 0px;
  font-size: 30px;
}
.full-textarea::selection{
  background: #EC407A;
  color: #FFF;
}

.context {
  font-size: 16px;
  position: absolute;
  width: 190px;
  height: auto;
  padding: 5px 0px;
  border-radius: 5px;
  top: 10;
  left: 10;
  background-color: #fff;
  box-shadow: 0 0px 7px 0 rgba(0, 0, 0, 0.25);
  color: #333;
  overflow: hidden;
  .context_item {
    height: 32px;
    line-height: 32px;
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    &:hover {
      background-color: #1965FF;
      color: #FFF;
      .inner_item{
        i{
          color: #FFF;
        }
      }
    }
    .inner_item {
      margin: 0px 10px;
      i {
        margin: 0 0 0 5px;
        font-weight: bold;
        color: #CCC;
      }
    }
  }
  .context_hr {
    height: 1px;
    border-top: 1px solid #DDD;
    margin: 0px 1%;
    width: 98%;
  }
}

/* CONSOLE */

.window--terminal .window__body.black .window__main {
  line-height: 18px;
  color: #ddd;
  font-weight: 500;
  user-select: text;
  word-wrap: break-word;
  overflow-x: hidden;
}

::-webkit-scrollbar {
	min-width: 5px;
	width: 5px;
	max-width: 5px;
  min-height: 5px;
	height: 5px;
	max-height: 5px;
	background: none;
}
::-webkit-scrollbar-thumb {
	background: #bbb;
  backface-visibility: hidden;
}
::-webkit-scrollbar-thumb:hover {
    background: #bababa;
}
::-webkit-scrollbar-thumb:active {
    background: #aaa;
}
::-webkit-scrollbar-button {
	display: none;
    height: 0px;
}

.console-input {
  background: none;
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: inherit;
  width: 100%;
  color: inherit;
  font-weight: inherit;
  text-indent: 15px;
  overflow: hidden;
}

.output-text,
.output-cmd {
  display: block;
}
.output-text {
  color: #888;
}
.output-text li {
  padding-left: 20px;
  list-style: none;
  font-weight: 600;
  color: #ddd;
}
.output-text b {
  color: #444;
  font-weight: 600;
}
.output-cmd {
  animation: leftDelay .5s;
}
@keyframes leftDelay {
  0% { transform: translateX(15px)}
  100% { transform: translateX(0px)}
}

.cmd-pre {
  position: absolute;
  left: 0px;
  width: 12px;
  text-align: center;
  color: $green;
  font-weight: 600;
  pointer-events: none;
  /* animation: pulse .8s infinite; */
}
@keyframes pulse {
  0%, 100% { opacity: 1}
  50% { opacity: .3}
}

.console-prompt-box {
  position: relative;
  width: 100%;
  height: 50px;
}
.err, .output-text .err b, .output-text .err li {
  color: #F24848;
}

/* NOTIFICATIONS */

.notification {
  position: fixed;
  top: 40px;
  right: -400px;
  width: 280px;
  max-width: 280px;
  min-height: 70px;
  padding: 0px 15px 0px 85px;
  line-height: 70px;
  background: rgba(0,0,0,.9);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  word-wrap: break-word;
  overflow: hidden;
  color: #ddd;
  user-select: none;
  z-index: 10000;
}
.notification .icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: 70px;
  color: #555;
  line-height: 70px;
  text-align: center;
  font-size: 30px;
}
.notification.triggered {
  animation: pushNotification 5s cubic-bezier(.44,.14,.34,.97);
}

@keyframes pushNotification {
  0%, 100% {right: -400px;}
  10%, 90% {right: 20px;}
}


/* DESKTOP FILES */

.file {
  position: relative;
  display: none;
  margin: 20px;
  width: 120px;
  max-width: 120px;
  min-height: 100px;
  padding: 75px 5px 5px 5px;
  border-radius: 10px;
  word-wrap: break-word;
  text-align: center;
  overflow: hidden;
  color: #fff;
  user-select: none;
  text-shadow: 1px 1px 5px rgba(0,0,0,.4);
}
.file .icon {
  position: absolute;
  top: 0;
  left: 25px;
  width: 70px;
  height: 70px;
  color: #333;
  background: #fff;
  line-height: 70px;
  text-align: center;
  font-size: 50px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.125), 0 0 1px rgba(0, 0, 0, 0.05);
  text-shadow: none;
}
.file.exe .icon {
  color: #fff;
  background: #1965FF;
}
.file::before,
.file::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 10px;
  width: calc(100% - 20px);
  height: 30px;
  background: #fff;
  color: #333;
  box-shadow: 0 1px 30px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  z-index: 1;
  font-size: 12px;
  line-height: 20px;
  opacity: 0;
  font-weight: 600;
}
.file::after {
  top: 43px;
  left: 13px;
  width: calc(100% - 26px);
  height: 4px;
  background: #1965FF;
  box-shadow: none;
}

.file.download {
  display: block;
  animation: download 5s;
}
.file.download .icon {
  animation: downloadIcon 5s;
}
.file.download::before {
  animation: downloadB 5s;
}
.file.download::after {
  animation: downloadA 5s;
}

@keyframes download {
  0%, 95% {color: rgba(255,255,255,.3);text-shadow: none;}
  100% {color: rgba(255,255,255,1);text-shadow: 1px 1px 5px rgba(0,0,0,.4);}
}
@keyframes downloadIcon {
  0%, 95% {opacity: .3;box-shadow: none;}
  100% {opacity: 1;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.125), 0 0 1px rgba(0, 0, 0, 0.05);}
}
@keyframes downloadA {
  0%, 95% {opacity: 1;width: 0px;}
  95% {width: calc(100% - 26px);}
  100% {opacity: 0;width: calc(100% - 26px);}
}
@keyframes downloadB {
  0%, 95% {opacity: 1;content: 'Downloading';}
  100% {opacity: 0;}
}

.file.extract {
  display: block;
  animation: extract 10s;
}
.file.extract .icon {
  animation: extractIcon 10s;
}
.file.extract::before {
  animation: extractB 10s;
}
.file.extract::after {
  animation: extractA 10s;
}

@keyframes extract {
  0%, 97.5% {color: rgba(255,255,255,.3);text-shadow: none;}
  100% {color: rgba(255,255,255,1);text-shadow: 1px 1px 5px rgba(0,0,0,.4);}
}
@keyframes extractIcon {
  0%, 97.5% {opacity: .3;box-shadow: none;}
  100% {opacity: 1;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.125), 0 0 1px rgba(0, 0, 0, 0.05);}
}
@keyframes extractA {
  0%, 97.5% {opacity: 1;width: 0px;}
  97.5% {width: calc(100% - 26px);}
  100% {opacity: 0;width: calc(100% - 26px);}
}
@keyframes extractB {
  0%, 97.5% {opacity: 1;content: 'Extracting';}
  100% {opacity: 0;}
}

styles

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,500,700" rel="stylesheet" />

v-os-concept.markdown

V os Concept

A Pen by Lanorise Cainion on CodePen.

License.