css/navbar.css
/* ========
	NAVBAR
   ======== */

/* Building the navbar structure */
#navbar {
	/* Positioning */
	position: fixed;
	top: 20px;
	left: 0;
	z-index: 1000;

	/* Box-model */
	width: 100%;
	height: 40px;
	overflow: visible;

	/* Typography */
	color: white;
}

/* --------------
	Navbar items
   -------------- */
/* Items on the left */
#navbar .nav-item { float: left; }

#navbar .nav-item:not(#recent),
#recent-button,
#more-button {
	/* Misc */
	transition: background-color 0.1s ease;
}

#navbar .nav-item:not(#recent):hover,
#recent-button:hover,
#more-button:hover {
	/* Visual */
	background-color: #143d7a;
}

#navbar .nav-item:not(#recent):active,
#recent-button:active,
#more-button:active {
	/* Visual */
	background-color: #103365;

	/* Misc */
	transition: none;
}

.nav-icon,
#more {
	/* Box-model */
	width: 40px;
	height: 100%;

	/* Typography */
	color: #fff;
	line-height: 40px;
	text-align: center;
}

/* Navbar "More" button is on the right and has a slight space on its right, like the "New" button */
#more { float: right; }

/* Navbar icons */
.nav-icon {
	/* Box-model */
	float: left;

	/* Misc */
	transition: padding-left .1s ease;
}

/* Navbar labels (only on big screens) */
.nav-label {
	/* Box-model */
	width: 55px;
	height: 40px;
	overflow: hidden;

	/* Typography */
	font-size: 0.9em;
	line-height: 40px;

	/* Misc */
	transition: width .1s ease, opacity .3s ease;
}

.nav-label.hidden {
	/* Box-model */
	width: 0px;

	/* Misc */
	opacity: 0;
	transition: none;
}

/* "RECENT" LIST */
/* Setting the "Recent" button's positioning to relative */
#recent { position: relative; }

/* The recent files displayer hides or shows the actual drop-down list of recent files */
#recent-files-displayer {
	/* Positioning */
	position: absolute;
	top: 40px;
	left: 0px; /* With the padding-left, it seems like it begins at 40 pixels from the left */

	/* Box-model */
	width: 200px;

	/* Misc */
	-webkit-transform-origin: 20px 1px;
	transition: all .15s ease-out;
}

#recent-files-displayer.hidden {
	/* Misc */
	-webkit-transform: scale(0);
}

/* The arrow is a gray corner for the container */
#recent-files-arrow {
	/* Positioning */
	position: relative; /* For the Z-index */
	margin: 1px 0 0 16px;
	z-index: 1600;

	/* Box-model */
	width: 0;
	height: 0;

	/* Visual */
	border-color: transparent transparent #fff transparent;
	border-style: solid;
	border-width: 0 4px 4px 4px;
}

/* The recent files container is a list of all the recent files */
#recent-files-container {
	/* Box-model */
	width: 200px;
	overflow: hidden;

	/* Typography */
	font-size: 0.8em;
	color: #4a4942;

	/* Visual */
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 0 15px rgba(0,0,0,.2);

	/* Misc */
	transition: height .1s ease;
}

/* The list item that contains the name of a recent file */
.recent-file {
	/* Box-model */
	width: 100%;
	height: 40px;
	padding: 0 5px;

	/* Misc */
	cursor: pointer;
	transition: all .1s ease-out;
}

.recent-file:hover {
	/* Typography */
	color: #1a1a1a;

	/* Visual */
	background-color: #fafafa;
}

/* List item in deletion */
.recent-file.deleted {
	/* Box-model */
	height: 0;
	padding: 0 15px 0 0;

	/* Visual */
	border-top: none;

	/* Misc */
	pointer-events: none;
}

/* Wrapped part inside the list item */
.recent-file-wrapped {
	/* Positioning */
	position: relative;

	/* Box-model */
	width: 100%;
	height: 100%;
	padding: 5px 15px 5px 0;
	overflow: hidden;

	/* Typography */
	font-weight: bold;
	line-height: 25px; /* For vertical centering of the text (see .recent-file-wrapped > p below) */
}

.recent-file-wrapped > p {
	/* Box-model */
	display: inline-block;

	/* Typography */
	line-height: 1.2em;
	vertical-align: middle;
}

/* Slight margin on top of the first recent file */
.recent-file:first-of-type { margin-top: 5px; }

/* Separation between the recent files */
.recent-file:not(:first-of-type) .recent-file-wrapped { border-top: 1px solid #fafafa; }

/* Deletion button for each list item */
.delete-recent-button {
	/* Positioning */
	position: absolute;
	top: 50%;
	right: 5px;
	margin: -10px 0 0;

	/* Box-model */
	width: 20px;
	height: 20px;

	/* Typography */
	color: #4a4942;
	text-align: center;
	line-height: 20px;

	/* Misc */
	cursor: pointer;
}

.delete-recent-button:hover { color: #c01a1a; }

.recent-file.deleted .delete-recent-button { pointer-events: none; } /* Prevent pointer events on the button itself during deletion animation */

/* Information down the list of recent documents */
#recent-files-info {
	/* Box-model */
	width: 100%;
	height: 40px;
	padding: 0 5px;

	/* Typography */
	font-weight: bold;
	line-height: 40px;
	text-align: center;

	/* Visual */
	background-color: #fff;

	/* Misc */
	transition: all .1s ease-out;
}

#recent-files-info.clear-all .icon-recent-clear {
	/* Positioning */
	display: inline;

	/* Typography */
	line-height: 32px;
	vertical-align: middle;
}

#recent-files-info.clear-all .clear-all-text {
	line-height: 16px;
	vertical-align: middle;
}

/* When there are items in the list */
#recent-files-info.clear-all {
	/* Visual */
	background-color: #f0f0f0;

	/* Misc */
	cursor: pointer;
	transition: background-color .1s ease;
}

#recent-files-info.clear-all:hover {
	/* Typography */
	line-height: 38px;

	/* Visual */
	background-color: #f9f9f9;
	border-bottom: 2px solid #e0e0e0;
}

#recent-files-info.clear-all:active {
	/* Typography */
	line-height: 38px;

	/* Visual */
	background-color: #f0f0f0;
	border-bottom: none;
	border-top: 2px solid #e0e0e0;

	/* Misc */
	transition: none;
}

/* ---------------
	Navbar switch
   --------------- */
#view-switch {
	/* Positioning */
	/* Absolute centering, found on http://codepen.io/shshaw/full/gEiDt */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;

	/* Box-model */
	width: 220px;
	height: 26px;

	/* Misc */
	transition: width .3s ease;
}

.switch-button {
	/* Box-model */
	height: 100%;
	padding: 0 5px;
	overflow: hidden;

	/* Typography */
	font-size: 0.8em;
	line-height: 26px;
	text-align: center;

	/* Visual */
	background-color: #143d7a;
	border-color: #103365; /* Prevents buggy color transition */

	/* Misc */
	cursor: pointer;
	transition: width .3s ease;
}

/* The first and the third switch buttons ("Markdown" & "HTML") */
.switch-button:nth-of-type(2n-1) { width: 90px; }

/* The second switch button ("Both") */
.switch-button:nth-of-type(2) {
	/* Positioning */
	/* Absolute centering, found on http://codepen.io/shshaw/full/gEiDt */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;

	/* Box-model */
	width: 40px;
}

/* The switch button on the left ("Markdown") */
.switch-button:first-of-type { border-radius: 3px 0 0 3px; }

/* The switch button on the right ("HTML") */
.switch-button:last-of-type {
	/* Positioning */
	position: absolute;
	top: 0;
	right: 0;

	/* Visual */
	border-radius: 0 3px 3px 0;
}

/* When the user hovers a switch button that is not activated already */
.switch-button:not(.activated):hover {
	/* Typography */
	line-height: 24px;

	/* Visual */
	background-color: #194584;
	border-bottom: 2px solid #103365;

	/* Misc */
	transition: all .2s ease;
}

.switch-button.activated {
	/* Typography */
	line-height: 24px;

	/* Visual */
	background-color: #103365;
	border-top: 2px solid #0c2a54;

	/* Misc */
	cursor: default; /* This makes the button visually not clickable */
}

/* The switch cursor is a triangle showing which display mode is on */
#switch-cursor {
	/* Positioning */
	position: absolute;
	left: 50%;
	bottom: 0;
	margin-left: -4px;
	z-index: 1500;

	/* Box-model */
	width: 0;
	height: 0;

	/* Visual */
	border-color: transparent transparent #fafafa;
	border-style: solid;
	border-width: 0 4px 4px;

	/* Misc */
	transition: margin-left .15s ease-out;
}

/* Switch cursor's position when in normal mode */
#switch-cursor.normal { margin-left: -4px; }

/* Switch cursor's position when in markdown view */
#switch-cursor.markdown-view { margin-left: -69px; }

/* Switch cursor's position when in HTML view */
#switch-cursor.conversion-view { margin-left: 61px; }

/* ----------------
	"More" options
   ---------------- */
/* Setting the "More" button's positioning to relative */
#more { position: relative; }

/* The "More" displayer hides or shows the actual drop-down list of options */
#more-displayer {
	/* Positioning */
	position: absolute;
	top: 40px;
	right: 5px;

	/* Box-model */
	width: 120px;

	/* Misc */
	-webkit-transform-origin: 105px 1px;
	transition: all .15s ease-out;
}

#more-displayer.hidden {
	/* Misc */
	-webkit-transform: scale(0);
}

/* The arrow is a gray corner for the container */
#more-arrow {
	/* Positioning */
	position: relative; /* For the Z-index */
	margin: 1px 0 0 101px;
	z-index: 1500;

	/* Box-model */
	width: 0;
	height: 0;

	/* Visual */
	border-color: transparent transparent #fff transparent;
	border-style: solid;
	border-width: 0 4px 4px 4px;
}

/* The "More" container is a list of all the options */
#more-container {
	/* Box-model */
	width: 120px;
	overflow: hidden;

	/* Typography */
	color: #4a4942;
	font-size: 0.8em;
	text-align: left;

	/* Visual */
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 0 15px rgba(0,0,0,.2);

	/* Misc */
	transition: height .1s ease;
}

/* The list item that contains the name of an option */
.more-option {
	/* Box-model */
	width: 100%;
	height: 40px;
	padding: 0 5px;

	/* Misc */
	cursor: pointer;
	transition: all .1s ease-out;
}

.more-option:hover {
	/* Typography */
	color: #1a1a1a;

	/* Visual */
	background-color: #fafafa;
}

/* Wrapped part inside the list item */
.more-option-wrapped {
	/* Box-model */
	width: 100%;
	height: 100%;
	padding: 5px 0;
	overflow: hidden;

	/* Typography */
	font-weight: bold;
	line-height: 25px; /* For vertical centering of the text (see .recent-file-wrapped > p below) */
}

.more-option-wrapped > p {
	/* Box-model */
	display: inline-block;

	/* Typography */
	line-height: 1.2em;
	vertical-align: middle;
}

/* Slight margin on top of the first option */
.more-option:first-of-type { margin-top: 5px; }

/* Separation between the options */
.more-option:not(:first-of-type) .more-option-wrapped { border-top: 1px solid #fafafa; }

/* Slight margin under the last option */
.more-option:last-of-type { margin-bottom: 5px; }
