Skip to content

Instantly share code, notes, and snippets.

@xRiddiK

xRiddiK/index.html

Created April 23, 2022 10:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save xRiddiK/dd2d4062b5a857b1ddd8e6aaf26447c9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save xRiddiK/dd2d4062b5a857b1ddd8e6aaf26447c9 to your computer and use it in GitHub Desktop.
Download ZIP
Windows 10
Raw
index.html
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="desktop">
<div class="start-menu-fade"></div>
<div class="start-menu">
<div class="start-menu__list">
<div class="media">
<a class="user-info menu-toggle" href="#" data-menu="user">
<img class="user-info__img media__img" src="https://i.imgur.com/KkCqvK9.png" alt="User image">
<div class="user-info__name media__body">
User Name
</div>
</a>
<div class="menu" data-menu="user">
<a href="#">Change account picture</a>
<a href="#">Lock</a>
<a href="#">Sign out</a>
</div>
<a class="user-info__power menu-toggle" href="#" data-menu="power">
<i class="fa fa-power-off"></i>
</a>
</div>
<div class="menu" data-menu="power">
<a href="#">Sleep</a>
<a href="#">Power off</a>
<a href="#">Restart</a>
</div>
<ul class="start-menu__recent">
<li class="start-menu__explorer">
<a href="#" data-window="explorer">
<i class="fa fa-folder"></i>
File Explorer
</a>
</li>
<li class="start-menu__mail">
<a href="#" data-window="mail">
<i class="fa fa-envelope"></i>
Mail
</a>
</li>
<li class="start-menu__notepad">
<a href="#" data-window="notepad">
<i class="fa fa-pencil"></i>
Notepad
</a>
</li>
<li class="start-menu__explorer">
<a href="#">
<i class="fa fa-folder"></i>
File Explorer
</a>
</li>
<li class="start-menu__mail">
<a href="#">
<i class="fa fa-envelope"></i>
Mail
</a>
</li>
<li class="start-menu__notepad">
<a href="#">
<i class="fa fa-pencil"></i>
Notepad
</a>
</li>
</ul>
<a class="all-apps" href="#">
All apps
<i class="fa fa-arrow-right"></i>
</a>
<form class="search">
<input type="text" class="search__input" placeholder="Ask me anything">
<button class="search__btn">
</button>
</form>
</div>
<div class="start-screen-scroll">
<div class="start-screen">
<a class="start-screen__tile start-screen__tile--explorer masonry-item" href="#" data-window="explorer">
<i class="fa fa-folder"></i>
<span>File Explorer</span>
</a>
<a class="start-screen__tile masonry-item" href="#">
</a>
<a class="start-screen__tile start-screen__tile--wide masonry-item" href="#" data-ss-colspan="2">
</a>
<div class="start-screen__smallgroup masonry-item">
<a class="start-screen__tile start-screen__tile--small" href="#"></a>
<a class="start-screen__tile start-screen__tile--small" href="#"></a>
<a class="start-screen__tile start-screen__tile--small" href="#"></a>
</div>
<a class="start-screen__tile masonry-item" href="#">
</a>
<a class="start-screen__tile masonry-item" href="#">
</a>
<a class="start-screen__tile start-screen__tile--notepad masonry-item" href="#">
</a>
<a class="start-screen__tile start-screen__tile--large start-screen__tile--mail masonry-item" href="#" data-ss-colspan="2">
<i class="fa fa-envelope"></i>
<span>Mail</span>
</a>
<a class="start-screen__tile masonry-item" href="#">
</a>
<a class="start-screen__tile masonry-item" href="#">
</a>
<a class="start-screen__tile masonry-item" href="#">
</a>
</div>
</div>
</div>
<div class="taskbar">
<a class="taskbar__item taskbar__item--start" href="#" data-window="start">
<i class="fa fa-windows"></i>
</a>
<a class="taskbar__item taskbar__item--explorer" href="#" data-window="explorer">
<i class="fa fa-folder"></i>
</a>
<a class="taskbar__item taskbar__item--mail" href="#" data-window="mail">
<i class="fa fa-envelope"></i>
</a>
<a class="taskbar__item taskbar__item--notepad" href="#" data-window="notepad">
<i class="fa fa-pencil"></i>
</a>
<div class="taskbar__tray">
<span class="time">
<script>
</script>
</span>
</div>
</div>
<div class="window window--explorer window--minimized" data-window="explorer" style="width:670px;height:400px;top:5%;left:10%;">
<div class="window__titlebar">
<div class="window__controls window__controls--left">
<a class="window__icon" href="#"><i class="fa fa-folder"></i></a>
<a class="window__menutoggle" href="#"><i class="fa fa-bars"></i></a>
</div>
<span class="window__title">
File Explorer
</span>
<div class="window__controls window__controls--right">
<a class="window__minimize" href="#"><i class="fa fa-minus"></i></a>
<a class="window__maximize" href="#"><i class="fa"></i></a>
<a class="window__close" href="#"><i class="fa fa-close"></i></a>
</div>
</div>
<ul class="window__menu">
<li>
<a href="#">
<i class="menu__icon fa fa-search"></i>
Search
</a>
</li>
<li>
<a href="#">
<i class="menu__icon fa fa-share-alt"></i>
Share
</a>
</li>
<li>
<a href="#">
<i class="menu__icon fa fa-plug"></i>
Devices
</a>
</li>
<li class="divided">
<a href="#">
<i class="menu__icon fa fa-cog"></i>
Settings
</a>
</li>
</ul>
<div class="window__actions">
<a class="window__back" href="#">
<i class="fa fa-arrow-left"></i>
</a>
<a class="window__forward" href="#">
<i class="fa fa-arrow-right"></i>
</a>
<div class="window__path">
<a href="#">
<i class="fa fa-desktop"></i>
Desktop
</a>
</div>
<form class="search">
<input type="text" class="search__input" placeholder="Search files and folders">
<button class="search__btn">
</button>
</form>
</div>
<div class="window__body">
<div class="window__side">
<ul class="side__list">
<li><a href="#">Home</a></li>
<li>
<a href="#">Favorites</a>
<ul>
<li><a href="#">Desktop</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Recent Places</a></li>
</ul>
</li>
<li>
<a href="#">This Device</a>
<ul style="display:none">
<li><a href="#">Desktop</a>
<ul style="display:none">
<li>
<a href="#">Folder 1</a>
</li>
</ul>
</li>
<li><a href="#">Documents</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Local Disk (C:)</a></li>
</ul>
</div>
<div class="window__main">
<div class="folders">
<a href="#">
<i class="fa fa-folder"></i>
<span>Folder 1</span>
</a>
<a href="#">
<i class="fa fa-folder"></i>
<span>Folder 2</span>
</a>
<a href="#">
<i class="fa fa-folder"></i>
<span>Folder 3</span>
</a>
<a href="#">
<i class="fa fa-folder"></i>
<span>Folder 4</span>
</a>
<a href="#">
<i class="fa fa-folder"></i>
<span>Folder 5</span>
</a>
<a href="#">
<i class="fa fa-folder"></i>
<span>Folder 6</span>
</a>
<a href="#">
<i class="fa fa-file"></i>
<span>File</span>
</a>
<a href="#">
<i class="fa fa-file"></i>
<span>File</span>
</a>
<a href="#">
<i class="fa fa-file"></i>
<span>File</span>
</a>
<a href="#">
<i class="fa fa-file"></i>
<span>File</span>
</a>
<a href="#">
<i class="fa fa-file"></i>
<span>File</span>
</a>
<a href="#">
<i class="fa fa-file"></i>
<span>File</span>
</a>
<a href="#">
<i class="fa fa-file"></i>
<span>File</span>
</a>
<a href="#">
<i class="fa fa-file"></i>
<span>File</span>
</a>
<a href="#">
<i class="fa fa-file"></i>
<span>File</span>
</a>
<a href="#">
<i class="fa fa-file"></i>
<span>File</span>
</a>
<a href="#">
<i class="fa fa-file"></i>
<span>File</span>
</a>
<a href="#">
<i class="fa fa-file"></i>
<span>File</span>
</a>
<a href="#">
<i class="fa fa-file"></i>
<span>File</span>
</a>
<a href="#">
<i class="fa fa-file"></i>
<span>File</span>
</a>
<a href="#">
<i class="fa fa-file"></i>
<span>File</span>
</a>
</div>
</div>
</div>
</div>
<div class="window window--mail" data-window="mail" style="display:none;width:400px;height:300px;top:40%;left:40%;">
<div class="window__titlebar">
<div class="window__controls window__controls--left">
<a class="window__icon" href="#"><i class="fa fa-envelope"></i></a>
<a class="window__menutoggle" href="#"><i class="fa fa-bars"></i></a>
</div>
<span class="window__title">
Mail
</span>
<div class="window__controls window__controls--right">
<a class="window__minimize" href="#"><i class="fa fa-minus"></i></a>
<a class="window__maximize" href="#"><i class="fa"></i></a>
<a class="window__close" href="#"><i class="fa fa-close"></i></a>
</div>
</div>
<ul class="window__menu">
<li>
<a href="#">
<i class="menu__icon fa fa-search"></i>
Search
</a>
</li>
<li>
<a href="#">
<i class="menu__icon fa fa-share-alt"></i>
Share
</a>
</li>
<li>
<a href="#">
<i class="menu__icon fa fa-plug"></i>
Devices
</a>
</li>
<li class="divided">
<a href="#">
<i class="menu__icon fa fa-cog"></i>
Settings
</a>
</li>
</ul>
<div class="window__body">
<div class="window__side">
</div>
<div class="window__main">
</div>
</div>
</div>
<div class="window window--notepad" data-window="notepad" style="display:none;width:600px;height:300px;top:10%;left:30%;">
<div class="window__titlebar">
<div class="window__controls window__controls--left">
<a class="window__icon" href="#"><i class="fa fa-pencil"></i></a>
<a class="window__menutoggle" href="#"><i class="fa fa-bars"></i></a>
</div>
<span class="window__title">
Notepad
</span>
<div class="window__controls window__controls--right">
<a class="window__minimize" href="#"><i class="fa fa-minus"></i></a>
<a class="window__maximize" href="#"><i class="fa"></i></a>
<a class="window__close" href="#"><i class="fa fa-close"></i></a>
</div>
</div>
<ul class="window__menu">
<li>
<a href="#">
<i class="menu__icon fa fa-download"></i>
Save
</a>
</li>
<li>
<a href="#">
<i class="menu__icon fa fa-folder-open"></i>
Open
</a>
</li>
<li>
<a href="#">
<i class="menu__icon fa fa-print"></i>
Print
</a>
</li>
<li>
<a href="#">
<i class="menu__icon fa fa-share-alt"></i>
Share
</a>
</li>
<li class="divided">
<a href="#">
<i class="menu__icon fa fa-file"></i>
Format
</a>
</li>
<li>
<a href="#">
<i class="menu__icon fa fa-cog"></i>
Settings
</a>
</li>
</ul>
<div class="window__body">
<div class="window__main">
<textarea class="full-textarea"></textarea>
</div>
</div>
</div>
</div>
Raw
script.js
$(window).load(function() {
var $container = $('.start-screen');
$container.masonry({
itemSelector: '.masonry-item',
columnWidth: 128
});
/*$container.sortable({
items: '.start-screen__tile',
start: function(e, ui) {
ui.item.removeClass('masonry-item');
$container.masonry('reloadItems');
console.log('start drag');
},
change: function(e, ui) {
$container.masonry('reload');
},
stop: function(e, ui) {
ui.item.addClass('masonry-item');
$container.masonry('reload');
console.log('stop drag');
}
});
$container.disableSelection();*/
$('.start-menu').hide().css('opacity', 1);
});
$(function() {
//$('.start-screen-scroll').jScrollPane();
});
function resizeStart() {
var startWidth = $('.start-screen').outerWidth();
var startRound = Math.ceil(startWidth / 128.0) * 128;
console.log('original: ' + startWidth);
console.log('rounded: ' + startRound);
$('.start-screen').css({
'width' : startRound
});
}
//$(window).load(resizeStart);
//$(window).resize(resizeStart);
$(function() {
var zIndex = 1;
var fullHeight = $(window).height() - 48,
fullWidth = $(window).width();
$(window).resize(function() {
fullHeight = $(window).height() - 48;
fullWidth = $(window).width();
});
$(function() {
$('.window:visible').each(function() {
var appName = $(this).data('window');
$('.taskbar__item[data-window="' + appName + '"]').addClass('taskbar__item--open');
});
$('.window:hidden').each(function() {
$(this).addClass('window--opening');
});
});
$(function() {
var initialActive = $('.window:visible').not('.window--minimized').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(e) {
if ( !$(this).is('.window--active')) {
$('.window').removeClass('window--active');
}
$(this).addClass('window--active');
$(this).css({'z-index' : zIndex++});
var appName = $(this).data('window');
var targetTaskbar = $('.taskbar__item[data-window="' + appName + '"]');
if ( !$('.window__close').is(e.target) && $('.window__close').has(e.target).length === 0 && !$('.window__minimize').is(e.target) && $('.window__minimize').has(e.target).length === 0 ) {
$('.taskbar__item').removeClass('taskbar__item--active'); $(targetTaskbar).addClass('taskbar__item--active');
}
});
$('.window').resizable({
handles: 'n,ne,e,se,s,sw,w,nw',
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) {
var mouseX = event.pageX + 'px';
console.log(mouseX);
$('.window').removeClass('window--active');
$(this).addClass('window--active');
$(this).css({'z-index' : zIndex++});
if ( $(this).hasClass('window--maximized') ) {
//alert(mouseX);
$(this).removeClass('window--maximized').css({ 'height' : initialHeight,
'width' : initialWidth,
'top' : 0,
'left' : mouseX });
}
var appName = $(this).data('window');
var targetTaskbar = $('.taskbar__item[data-window="' + appName + '"]')
$('.taskbar__item').removeClass('taskbar__item--active'); $(targetTaskbar).addClass('taskbar__item--active');
}
});
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').removeClass('window--minimized').css({'z-index' : zIndex++});
$(targetTaskbar).addClass('taskbar__item--active');
}
} else {
$('.window').removeClass('window--active');
$('.window[data-window="' + appName + '"]').css({ 'z-index' : zIndex++ }).addClass('window--active').show();
setTimeout(function() {
$('.window[data-window="' + appName + '"]').removeClass('window--opening');
}, 500);
$(targetTaskbar).addClass('taskbar__item--active').addClass('taskbar__item--open');
}
}
$('.taskbar__item').click(openApp);
$('.start-menu__recent li a').click(openApp);
$('.start-screen__tile').click(openApp);
$('.window__titlebar').each(function() {
var parentWindow = $(this).closest('.window');
$(this).find('a').click(function(e) {
e.preventDefault();
});
$(this).find('.window__icon').click(function(e) {
$(this).siblings('.window__menutoggle').trigger('click');
});
$(this).find('.window__menutoggle').click(function(e) {
$(parentWindow).find('.window__menu').fadeToggle(100).toggleClass('window__menu--open');
$(this).toggleClass('window__menutoggle--open');
});
$(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').removeClass('taskbar__item--active');
var closest = $('.window').not('.window--minimized, .window--closing, .window--opening').filter(function() {
return $(this).css('z-index') < zIndex
}).first();
$(closest).addClass('window--active');
});
$(this).find('.window__minimize').click(function(e) {
$(parentWindow).addClass('window--minimized');
var appName = $(parentWindow).data('window');
var targetTaskbar = $('.taskbar__item[data-window="' + appName + '"]');
//alert(targetTaskbar.attr('class'));
$(targetTaskbar).removeClass('taskbar__item--active');
});
$(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 });
}
});
});
$('.window__titlebar').mouseup(function(e) {
var parentWindow = $(this).closest('.window');
var pos = $(parentWindow).offset().top;
if ( pos < -5 ) {
//alert('at top')
$(parentWindow).addClass('window--maximized');
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');
$('.taskbar__item').removeClass('taskbar__item--active');
}
});
$(function() {
$('.side__list ul').each(function() {
if ( $(this).find('ul').is(':visible') ) {
$(this).children('li').addClass('side__list--open');
}
});
});
$(function() {
$('.side__list li').each(function() {
if ( $(this).children('ul').length ) {
//$(this).addClass('list__sublist');
$(this).children('a').append('<span class="list__toggle"></span>');
}
if ( $(this).children('ul').is(':visible') ) {
$(this).addClass('side__list--open');
}
});
});
$(document).on('click', '.list__toggle', function() {
$(this).closest('li').children('ul').animate({
'height' : 'toggle',
'opacity' : 'toggle'
}, 250);
$(this).closest('li').toggleClass('side__list--open');
});
function toggleStart(e) {
$('.start-menu-fade').fadeToggle(500);
$('.start-menu').fadeToggle(250).toggleClass('start-menu--open');
$('.taskbar__item--start').toggleClass('start--open');
}
$('.taskbar__item--start').click(toggleStart);
$('.start-menu__recent li a').click(toggleStart);
$('.start-screen__tile').click(toggleStart);
// Prevent "open" class on start
$(function() {
$('.taskbar__item--start').click(function() {
$(this).removeClass('taskbar__item--open taskbar__item--active');
});
});
$(document).mouseup(function(e) {
var start = $('.start-menu');
var startToggle = $('.taskbar__item--start');
if (start.is(':visible') && !startToggle.is(e.target) && startToggle.has(e.target).length === 0 && !start.is(e.target) && start.has(e.target).length === 0 ) {
toggleStart();
//alert('clicked outside start');
}
});
// Current time
$(function() {
var a_p = "";
var d = new Date();
var curr_hour = d.getHours();
if (curr_hour < 12)
{
a_p = "AM";
}
else
{
a_p = "PM";
}
if (curr_hour == 0)
{
curr_hour = 12;
}
if (curr_hour > 12)
{
curr_hour = curr_hour - 12;
}
var curr_min = d.getMinutes();
if ( curr_min < 10 ) {
curr_min = '0' + curr_min;
}
$('.time').html(curr_hour + ':' + curr_min + ' ' + a_p);
});
$('.menu-toggle').each(function() {
var menuName = $(this).data('menu');
var menu = $('.menu[data-menu="' + menuName + '"]');
var pos = $(this).position();
var height = $(this).outerHeight();
if ( !$(menu).hasClass('menu--bottom') ) {
$(menu).position({
my: 'left top',
at: 'left bottom',
of: this,
collision: 'none'
});
} else {
}
$(menu).hide();
$(this).click(function(e) {
e.preventDefault();
$('.menu').not(menu).hide();
$(menu).toggle();
});
});
$(document).mouseup(function(e) {
if ( $('.menu').has(e.target).length === 0 && !$('.menu-toggle').is(e.target) && $('.menu-toggle').has(e.target).length === 0 ) {
$('.menu').hide();
}
});
Raw
scripts
<script src="https://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>
Raw
style.scss
$theme-color: #1976D2;
$explorer-color: #0097A7;
$mail-color: #5C6BC0;
$notepad-color: #EC407A;
*, *:before, *:after {
box-sizing: border-box;
}
body {
overflow: hidden;
font-family: 'Segoe UI', sans-serif;
}
a {
text-decoration: none;
cursor: default;
}
.media {
display: flex;
}
.media__img,
.media__body{
flex: 0 1 auto;
}
.media__body {
padding-left: 10px;
}
.desktop {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translate3d(0,0,0);
}
.desktop,
.window__titlebar:after {
background-image: url(https://i.imgur.com/K7ZTvoQ.png);
background-size: cover;
background-position: 50%;
background-attachment: fixed;
}
.window {
//overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-top: 0;
//background-color: white;
box-shadow: 0 2px 4px rgba(black, 0.5), 0 1px 1px rgba(black, 0.1);
filter: contrast(0.7)
grayscale(0.5)
brightness(1.3);
transform: scale(0.995);
transition: all 250ms,
z-index 1ms;
z-index: 0;
&.ui-draggable-dragging,
&.ui-resizable-resizing {
transition: none;
}
}
.window--maximized {
}
.window--minimized {
//top: 50% !important;
//left: -50% !important;
top: 100% !important;
left: 0 !important;
transform:
scale(0) translate(-100%, 0) !important;
opacity: 0;
}
.window--active {
filter: none;
transform: none;
box-shadow: 0 10px 30px rgba(black, 0.25), 0 0 1px rgba(black, 0.1);
z-index: 1000;
}
.window--closing {
transform: scale(0.9);
opacity: 0;
}
.window--opening {
transform: scale(1.25);
opacity: 0;
}
.window--explorer {
.window__body {
padding-top: 32px * 2;
}
}
.window__titlebar {
position: absolute;
overflow: hidden;
text-align: center;
top: 0;
left: 0;
right: 0;
height: 32px;
cursor: default;
//background-color: lighten($theme-color, 15%);
background-color: rgba(lighten($theme-color, 25%), 1);
//border-bottom: 1px solid #B0BEC5;
&:after {
//content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
//filter: blur(5px);
filter: grayscale(100%);
opacity: 0.5;
}
}
.window__title {
position: relative;
line-height: 32px;
z-index: 10;
color: rgba(black, 0.75);
//text-shadow: 0 0 7px white;
}
.window__controls {
position: absolute;
top: 0;
bottom: 0;
z-index: 10;
> a {
display: block;
float: left;
height: 32px;
width: 32px;
line-height: 32px;
font-size: 12px;
transition: all 100ms;
cursor: default;
color: rgba(black, 0.5);
&:hover {
background-color: rgba(white, 0.25);
}
}
> .window__close {
color: white;
background-color: desaturate(lighten($theme-color, 8%), 10%);
&:hover {
background-color: #e53935;
}
}
}
.window__controls--left {
left: 0;
}
.window__controls--right {
right: 0;
}
.window__maximize {
position: relative;
> i {
box-sizing: content-box;
width: 6px;
height: 6px;
border-radius: 2px;
border: 2px solid rgba(black, 0.6);
.window--maximized & {
margin-bottom: -1px;
margin-left: -4px;
width: 5px;
height: 5px;
transition: all 100ms 350ms;
&:after {
box-sizing: content-box;
content: '';
display: block;
position: absolute;
right: 10px;
top: 10px;
width: 6px;
height: 6px;
border: inherit;
border-radius: inherit;
border-left: 0;
border-bottom: 0;
transition: all 100ms 350ms;
}
}
}
}
.window__icon,
.window__icon:hover,
.window__menu {
color: white !important;
.window--explorer & {
background-color: $explorer-color;
}
.window--mail & {
background-color: $mail-color;
}
.window--notepad & {
background-color: $notepad-color;
}
}
.window__menutoggle {
}
.window__menutoggle--open,
.window__menutoggle--open:hover {
color: white !important;
background-color: #5C6BC0;
.window--explorer & {
background-color: $explorer-color;
}
.window--mail & {
background-color: $mail-color;
}
.window--notepad & {
background-color: $notepad-color;
}
}
.window__menu {
overflow: hidden;
display: none;
position: absolute;
top: 31px;
width: 25%;
min-width: 200px;
min-height: calc(100% - 31px);
margin: 0;
padding: 10px 0;
//font-size: 20px;
color: white;
background-color: #5C6BC0;
z-index: 100;
.window--explorer & {
background-color: $explorer-color;
}
> li {
list-style: none;
transform: translate(-50%, 0);
transition: transform 500ms 100ms;
> a {
opacity: 0;
position: relative;
display: block;
padding: 10px;
padding-left: 45px;
color: white;
font-weight: 200;
text-decoration: none;
transition: all 100ms,
opacity 750ms 150ms;
&:hover {
background-color: rgba(white, 0.1);
}
}
&.divided > a {
border-top: 1px solid rgba(black, 0.1);
}
}
}
.window__menu--open {
li {
transform: none;
> a {
opacity: 1;
}
}
}
.menu__icon.menu__icon {
position: absolute;
left: 20px;
top: 50%;
transform: translate(0, -50%);
font-size: 16px
}
.window__body {
display: flex;
//flex-flow: row wrap;
//overflow: auto;
padding-top: 32px;
height: 100%;
font-size: 14px;
}
.window__side,
.window__main {
flex: 0 1 auto;
//height: 100%;
overflow: auto;
}
.window__side {
//flex: 1 1 auto;
overflow: auto;
width: 25%;
min-width: 200px;
padding: 10px;
background-color: #ECEFF1;
}
.window__main {
//flex: 1 1 auto;
padding: 10px;
width: 100%;
background-color: white;
}
.window__actions {
//flex: 0 0 100%;
//display: none;
position: absolute;
top: 32px;
display: flex;
align-items: center;
width: 100%;
height: 32px;
padding: 0;
border-bottom: 1px solid rgba(black, 0.1);
background-color: lighten(#ECEFF1, 5%);
.search {
position: relative;
height: 32px;
width: 33%;
max-width: 248px;
min-width: 170px;
margin-left: auto;
border-left: 1px solid rgba(black, 0.1);
background-color: transparent;
}
.search__input {
padding: 0 10px;
line-height: 32px;
}
.search__btn {
height: 32px;
width: 32px;
}
}
.window__back,
.window__forward {
flex: 0 1 auto;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
font-size: 12px;
color: rgba(black, 0.45);
&:hover {
color: $theme-color;
}
}
.window__path {
white-space: nowrap;
padding: 0 5px;
border-left: 1px solid rgba(black, 0.1);
> a {
display: inline-block;
padding: 0 5px;
line-height: 32px;
font-size: 12px;
cursor: pointer;
color: #607D8B;
&:after {
display: inline-block;
margin-left: 5px;
content: '\f0da';
font-family: 'FontAwesome';
opacity: 0.5;
}
}
}
.side__list {
margin: 0;
padding: 0;
font-size: 18px;
font-weight: 200;
> li {
margin-bottom: 10px;
}
li {
list-style: none;
a {
position: relative;
display: block;
padding: 3px 5px 3px 32px;
border: 1px solid transparent;
color: #546E7A;
transition: all 100ms;
&:hover {
color: #263238;
border-color: rgba(black, 0.1);
background-color: rgba(black, 0.05);
}
}
}
ul {
padding: 0;
font-size: 14px;
li {
> a {
padding-left: 42px;
}
li {
> a {
padding-left: 52px;
}
}
}
}
}
.list__toggle {
display: block;
position: absolute;
left: 0;
top: 0;
height: 32px;
width: 32px;
display: block;
line-height: 32px;
text-align: center;
//background: rgba(red,0.1);
&:hover {
color: #1565C0;
//background-color: rgba(black, 0.05);
}
&:before {
display: block;
content: '\f105';
font-family: 'FontAwesome';
margin-top: 1px;
transform: none;
transition: all 250ms;
}
.side__list--open > a &:before {
transform: rotate(90deg);
}
li li & {
width: 42px;
height: 26px;
line-height: 26px;
&:before {
margin-top: 2px;
}
}
}
.taskbar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 48px;
//background-color: #263238;
box-shadow: 0 -2px 5px rgba(black, 0.15);
//background-image: linear-gradient(to top, rgba(black, 0.25), transparent);
background-color: darken(#263238, 5%);
z-index: 9998;
}
.taskbar__item {
display: inline-block;
margin-right: 4px;
text-align: center;
width: 48px;
height: 48px;
font-size: 22px;
color: white;
border: 1px solid transparent;
transition: all 100ms;
&:hover {
background-color: rgba(#78909C, 0.15);
}
> i {
display: inline-block;
vertical-align: middle;
margin-top: 6px;
width: 32px;
height: 32px;
line-height: 32px;
}
}
.taskbar__item--active {
//background-color: rgba(#78909C, 0.25) !important;
&.taskbar__item--explorer {
background-color: $explorer-color;
}
&.taskbar__item--mail {
background-color: $mail-color;
}
&.taskbar__item--notepad {
background-color: $notepad-color;
}
}
.taskbar__item--open {
//background: red !important;
box-shadow: inset 0 -2px 0 rgba(white, 0.35);
}
.taskbar__item--explorer > i {
//background-color: $explorer-color;
}
.taskbar__item--mail > i {
//background-color: $mail-color;
}
.taskbar__item--notepad > i {
//background-color: $notepad-color;
}
.taskbar__item--start {
color: lighten($theme-color, 10%);
transition: background-color 250ms;
&.start--open {
color: white;
}
}
.taskbar__tray {
color: white;
padding: 0 10px;
float: right;
line-height: 48px;
.time {
cursor: default;
padding: 5px;
&:hover {
background-color: rgba(white,0.1);
}
}
}
.start-menu-fade {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9998;
background-color: rgba(black, 0.5);
}
.start-menu {
display: flex;
opacity: 0;
//overflow: hidden;
position: absolute;
left: 0;
bottom: 48px;
padding: 10px;
height: 85vh;
min-height: 128px * 4;
z-index: 9999;
color: white;
background-color: $theme-color;
}
.start-menu--open {
}
.start--open {
background-color: $theme-color !important;
}
.start-menu__list,
.start-screen {
flex: 0 1 auto;
}
.start-menu__list {
position: relative;
width: 248px;
transform: translate(-100%, 0);
opacity: 0;
transition: all 500ms;
.start-menu--open & {
transform: none;
opacity: 1;
}
}
.user-info {
display: flex;
margin-bottom: 10px;
padding: 10px;
color: white;
transition: all 100ms,
transform 500ms;
&:hover {
background-color: rgba(white, 0.15);
}
.start-menu--open & {
transform: none;
}
}
.user-info__img {
display: block;
width: 40px;
height: 40px;
}
.user-info__name {
font-size: 20px;
font-weight: 200;
align-self: center;
}
.user-info__power {
margin-left: auto;
//line-height: 40px;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 20px;
color: white;
&:hover {
background-color: rgba(white, 0.15);
}
}
.start-menu__label {
display: block;
padding: 10px 20px;
//margin-top: 5px;
font-size: 20px;
}
.start-menu__recent {
// position: relative;
overflow: hidden;
max-height: 65%;
padding: 0;
margin: 0;
transform: translate(-100%, 0);
opacity: 0;
transition: all 500ms 100ms,
opacity 1000ms 250ms;
.start-menu--open & {
transform: none;
opacity: 1;
}
li {
list-style: none;
a {
display: block;
padding: 10px;
color: white;
transition: all 100ms;
&:hover {
background-color: rgba(white, 0.15);
//box-shadow: inset 0 0 0 1px rgba(white, 0.15);
> i {
//box-shadow: none;
}
}
> i {
display: inline-block;
width: 32px;
height: 32px;
margin-right: 6px;
font-size: 20px;
line-height: 32px;
text-align: center;
box-shadow: inset 0 0 0 1px rgba(white, 0.15)
//background-color: $explorer-color;
}
}
&.start-menu__explorer a > i {
//&.start-menu__explorer a:hover {
background-color: $explorer-color;
}
&.start-menu__mail a > i {
//&.start-menu__mail a:hover {
background-color: $mail-color;
}
&.start-menu__notepad a > i {
//&.start-menu__notepad a:hover {
background-color: $notepad-color;
}
}
}
.all-apps {
position: absolute;
right: 0;
bottom: 40px;
display: block;
margin-bottom: 10px;
//float: right;
color: white;
transition: all 100ms;
> i {
margin-left: 5px;
margin-right: 5px;
border: 2px solid white;
border-radius: 100px;
width: 32px;
height: 32px;
line-height: 26px;
text-align: center;
}
&:hover {
> i {
background-color: #37474F;
}
}
}
.search {
position: absolute;
bottom: 0;
width: 100%;
height: 36px;
background-color: white;
}
.search__input {
display: block;
width: 100%;
padding: 10px;
height: 32px;
border: 0;
font-size: 12px;
color: #607D8B;
background-color: transparent;
z-index: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.search__btn {
position: absolute;
right: 0;
top: 0;
width: 36px;
height: 36px;
border: 0;
z-index: 1;
background: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&:before {
display: block;
content: '\f002';
font-family: 'FontAwesome';
font-size: 12px;
color: #607D8B;
}
}
.start-screen-scroll {
max-height: 85vh;
min-height: calc(128px * 3 - 8px);
overflow-y: auto;
overflow-x: hidden;
margin: -8px;
padding: 4px;
margin-left: 4px;
transform: translate(-100%, 0);
transition: transform 500ms,
opacity 1000ms;
opacity: 0;
.start-menu--open & {
transform: none;
opacity: 1;
}
}
.start-screen {
position: relative;
width: 128px * 2;
word-spacing: -1em;
//background-color: green;
@media screen and ( min-width: 700px ) {
min-width: 128px * 3;
}
@media screen and ( min-width: 800px ) {
min-width: 128px * 4;
}
@media screen and ( min-width: 960px ) {
min-width: 128px * 5;
}
}
.start-screen__tile {
position: relative;
display: block;
float: left;
width: 120px;
height: 120px;
word-spacing: normal;
margin: 4px;
color: white;
background-color: #D81B60;
border: 2px solid rgba(white,0.1);
//box-shadow: inset 0 0 0 1px rgba(white, 0.1);
transform: scale(0.5);
transition: all 250ms, transform 0s;
.start-menu--open & {
transform: none;
}
&.ui-sortable-helper {
transform: scale(1.1);
transition: none;
}
&:hover {
//box-shadow: 0 0 0 1px rgba(#455A64, 1)
border-color: rgba(white, 0.5);
}
&:active {
transform: scale(0.9);
}
> i {
font-size: 48px;
position: absolute;
top: calc(50% - 12px);
left: 50%;
margin-top: -24px;
margin-left: -24px;
}
> span {
position: absolute;
left: 12px;
bottom: 4px;
font-size: 12px;
}
}
.start-screen__tile--wide,
.start-screen__tile--large{
width: 248px;
}
.start-screen__tile--large {
height: 248px;
}
.start-screen__tile--small {
width: 56px;
height: 56px;
}
.start-screen__smallgroup {
width: 120px;
height: 120px;
//float: left;
margin: 4px;
//background: white;
> .start-screen__tile {
margin: 0;
&:nth-child(odd) {
margin-right: 8px;
margin-bottom: 8px;
}
}
}
.start-screen__tile--explorer {
background-color: $explorer-color;
}
.start-screen__tile--mail {
background-color: $mail-color;
}
.start-screen__tile--notepad {
background-color: $notepad-color;
}
.full-textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
resize: none;
border: 0;
width: 100%;
height: 100%;
}
.ui-resizable-se {
background-image: url("");
}
.menu-toggle {
position: relative;
}
.menu-toggle--open {
background-color: rgba(black, 0.1);
}
.menu {
//display: none;
position: absolute;
z-index: 10000;
background: white;
box-shadow: 0 2px 4px rgba(black, 0.15);
transition: all 250ms;
> a {
display: block;
width: 200px;
padding: 10px 15px;
font-size: 16px;
color: #455A64;
transition: all 100ms;
&:hover {
background-color: #ECEFF1;
}
}
}
// Folder list
.folders {
> a {
display: inline-block;
padding: 10px;
margin: 5px;
width: 72px;
height: 72px;
text-align: center;
border: 1px solid transparent;
color: #607D8B;
cursor: pointer;
&:hover {
color: $theme-color;
border-color: rgba(black, 0.1);
background-color: rgba(#ECEFF1, 0.5);
}
> i {
display: block;
font-size: 32px;
}
> span {
display: block;
}
}
}
Raw
styles
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://cdn.rawgit.com/desandro/masonry/master/dist/masonry.pkgd.min.js" rel="stylesheet" />
Raw
windows-10.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment