<commit_before>@import "../common";

@header-background-color: #3a3a3a;
@header-foreground-color: #d4d2d1;

::selection {
	background: @themeColor;
	color: #fff;
}

* {
	font-family: 'Proxima Nova Reg', "FOT-スーラ Pro M", 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo UI', 'Meiryo', 'メイリオ', sans-serif;
	/*user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	cursor: default;*/
	-webkit-tap-highlight-color: fade(@themeColor, 70%);

	&:focus {
		/*outline: solid 2px @themeColor;*/
		outline: none;
	}

	&::-webkit-scrollbar {
		width: 5px;
		background: transparent;

		&:horizontal {
			height: 5px;
		}
	}

	&::-webkit-scrollbar-button {
		width: 0;
		height: 0;
		background: rgba(0, 0, 0, 0.2);
	}

	&::-webkit-scrollbar-piece {
		background: transparent;

		&:start {
			background: transparent;
		}
	}

	&::-webkit-scrollbar-thumb {
		background: rgba(0, 0, 0, 0.2);

		&:hover {
			background: rgba(0, 0, 0, 0.4);
		}

		&:active {
			background: @themeColor;
		}
	}

	&::-webkit-scrollbar-corner {
		background: rgba(0, 0, 0, 0.2);
	}
}

html, body {
	margin: 0;
	padding: 0;
}

body {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

a {
	text-decoration: none;
	color: @themeColor;
	transition: color 0.1s ease;
	cursor: pointer;

	&:hover {
		color: darken(@themeColor, 10%);
		text-decoration: underline;
	}

	* {
		cursor: pointer;
	}
}

textarea {
	user-select: text;
	-moz-user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
	cursor: auto;
}

/* UI
 * ---------------------------------------------------------------- */
#misskey-post-form-back {
	display: none;
	position: fixed;
	z-index: 127;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	opacity: 0;
}

#misskey-post-form-container {
	display: none;
	position: fixed;
	top: 0;
	z-index: 128;
	width: 100%;
	height: 100%;
}

#misskey-post-form {
	display: block;
	position: absolute;
	top: 20%;
	left: 0;
	right: 0;
	box-sizing: border-box;
	width: 100%;
	max-width: 550px;
	margin: auto;
	padding: 0 32px 24px 32px;
	background: #fff;
	opacity: 0;

	> .close-button {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		width: 42px;
		height: 42px;
		color: #555;
		border: none;
		outline: none;
		background: transparent;
		cursor: pointer;

		&:hover {
			color: #333;
		}

		&:active {
			color: #000;
		}

		* {
			pointer-events: none;
		}
	}

	> #misskey-post-form-tabs {
		> ul {
			display: block;
			margin: 0;
			padding: 0;
			list-style: none;

			&:after {
				content: '';
				display: block;
				clear: both;
			}

			> li {
				display: block;
				margin: 0;
				padding: 0;
				float: left;

				> a {
					display: block;
					padding: 16px;

					> i {
						font-size: 2em;
					}
				}
			}
		}
	}
}

#misskey-main-header {
	position: fixed;
	top: 0;
	z-index: 1024;
	width: 100%;
	//box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
	> .donate {
		margin: 0;
		padding: 4px 16px;
		font-size: 0.8em;
		color: #000;
		background: #cef1df;
	}

	> .env-development-info {
		margin: 0;
		padding: 4px 16px;
		font-size: 0.8em;
		color: #fff;
		background: rgba(0, 0, 0, 0.9);

		.go-production-channel {
			margin-left: 4px;

			i {
				margin-right: 2px;
			}
		}
	}

	> .info {
		display: block;
		width: 100%;
		margin: 0;
		padding: 2px 0;
		text-align: center;
		font-size: 0.8em;
		color: #000;
		background: orange;
	}

	> .main {
		//max-height: 3rem;
		margin: 0;
		padding: 0;
		background-color: @header-background-color;
		background-image: url("/resources/common/images/misskey.dark.svg");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: auto 24px;
		//box-shadow: 0 2px 2px -2px rgba(0,0,0,0.5);
		//border-top: solid 3px @themeColor;
		//border-bottom: solid 3px rgba(0, 0, 0, 0.1);
		//box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
		background-clip: content-box;
		font-size: 0.9rem;

		&, * {
			user-select: none;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: default;
		}

		&:after {
			content: "";
			display: block;
			clear: both;
		}

		> .main-contents-container {
			width: 100%;
			max-width: 1300px;
			margin: 0 auto;

			> .left {
				float: left;
				height: 3rem;

				> nav {
					> .main-nav {
						display: inline-block;
						margin: 0;
						padding: 0;
						line-height: 3rem;
						vertical-align: top;

						> .misskey {
							-webkit-appearance: none;
							-moz-appearance: none;
							appearance: none;
							display: none;
							vertical-align: top;
							margin: 0 10px;
							padding: 0;
							line-height: 3rem;
							font-size: 1.5em;
							color: rgba(0, 0, 0, 0.5);
							border: none;
							outline: none;
							background: transparent;
							transition: all 0.2s ease;

							&:hover {
								color: @themeColor;
							}
						}

						> ul {
							display: inline-block;
							margin: 0;
							padding: 0;
							vertical-align: top;
							line-height: 3rem;
							list-style: none;

							> li {
								display: inline-block;
								vertical-align: top;
								height: 48px;
								line-height: 48px;
								background-clip: padding-box !important;

								&.active {
									background: @themeColor;

									> a {
										color: contrast(@themeColor, #000, #fff, 70%) !important;
										border-bottom: none !important;

										&:hover {
											border-bottom: none !important;
										}
									}
								}

								> a {
									display: inline-block;
									box-sizing: border-box;
									z-index: 1;
									height: 100%;
									padding: 0 24px;
									font-size: 1em;
									font-variant: small-caps;
									color: @header-foreground-color;
									text-decoration: none;
									border-bottom: solid 0px rgba(255, 255, 255, 0.3);
									transition: all 0.1s linear;

									* {
										pointer-events: none;
									}

									&:hover {
										color: @themeColor;
										border-bottom: solid 4px rgba(255, 255, 255, 0.3);
									}

									&:active {
										color: darken(@themeColor, 10%);
									}

									> i {
										margin-right: 8px;
									}

									> p {
										display: inline;
										margin: 0;
									}

									> .unreadCount {
										display: inline;
										margin-left: 8px;
										padding: 2px 4px;
										font-size: 0.8em;
										color: contrast(@themeColor, #000, #fff, 70%);
										background: @themeColor;
										border-radius: 2px;
									}
								}
							}
						}
					}

					> .misskey-menu {
						display: inline-block;
						vertical-align: top;

						> .dropdown {
							display: inline-block;
							position: relative;
							overflow: visible;
							float: right;

							&[data-active='true'] {
								background: #232221;

								> .dropdown-header {
								}

								> .dropdown-content {
									visibility: visible;
								}
							}

							> .dropdown-header {
								cursor: pointer;

								* {
									cursor: pointer;
								}

								&:hover {
									background: rgba(0, 0, 0, 0.1);

									> p > i {
										color: #fff;
									}
								}

								&:active {
									background: rgba(0, 0, 0, 0.2);

									> p > i {
										color: #fff;
									}
								}

								&:after {
									content: "";
									display: block;
									clear: both;
								}

								> p {
									display: block;
									margin: 0 16px;
									line-height: 48px;

									> i {
										color: @header-foreground-color;
									}
								}
							}

							> .dropdown-content {
								visibility: hidden;
								display: block;
								position: absolute;
								top: auto;
								left: 0;
								z-index: 3;
								width: 270px;
								margin: 0;
								padding: 0;
								background: #232221;

								> ul {
									margin: 0;
									padding: 0;
									list-style: none;
									font-size: 1em;
									border-bottom: solid 1px #1b1b1a;

									&:last-child {
										border-bottom: none;
									}

									> li {
										display: inline-block;
										width: 100%;

										> a {
											display: inline-block;
											z-index: 1;
											box-sizing: border-box;
											vertical-align: top;
											width: 100%;
											padding: 12px 20px;
											text-decoration: none;
											color: @header-foreground-color;
											background-image: url("/resources/common/images/arrow-white.svg");
											background-repeat: no-repeat;
											background-position: calc(100% - 8px) center;
											transition: none;

											&:hover {
												color: #fff;
												background-color: @themeColor;
											}

											&:active {
												color: #fff;
												background-color: darken(@themeColor, 10%);
											}

											> i {
												width: 2em;
												text-align: center;
											}
										}
									}
								}
							}
						}
					}
				}
			}

			> .right {
				float: right;
				height: 48px;

				> .search {
					display: inline-block;
					position: relative;
					vertical-align: top;

					> input {
						-webkit-appearance: none;
						-moz-appearance: none;
						appearance: none;
						user-select: text;
						-moz-user-select: text;
						-webkit-user-select: text;
						-ms-user-select: text;
						cursor: auto;
						box-sizing: border-box;
						margin: 0;
						padding: 6px 18px;
						width: 14em;
						height: 48px;
						font-size: 1em;
						line-height: ~"calc(48px - 12px)";
						color: #fff;
						background: transparent;
						outline: none;
						//border: solid 1px #ddd;
						border: none;
						border-radius: 0;
						box-shadow: none;
						transition: color 0.5s ease, border 0.5s ease;
						font-family: FontAwesome, 'Helvetica','Arial','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Meiryo UI','Meiryo, メイリオ','sans-serif';

						&:hover {
							background: rgba(0, 0, 0, 0.1);
						}

						&:focus {
							color: @themeColor;
							background: rgba(0, 0, 0, 0.2);
						}

						&[data-active='true'] {
							background: #111111;
						}

						&::-webkit-input-placeholder,
						&:-ms-input-placeholder,
						&:-moz-placeholder {
							color: @header-foreground-color;
						}
					}

					> .result {
						display: block;
						position: absolute;
						top: auto;
						right: 0;
						z-index: 3;
						width: 340px;
						margin: 0;
						padding: 0;
						background: #111111;

						> ol.users {
							margin: 0;
							padding: 0;
							list-style: none;

							li {
								a {
									display: inline-block;
									z-index: 1;
									box-sizing: border-box;
									width: 100%;
									padding: 8px 22px;
									vertical-align: top;
									white-space: nowrap;
									overflow: hidden;
									color: @header-foreground-color;
									transition: none;

									&:hover {
										color: #fff;
										background: @themeColor;

										.name {
											color: #fff;
										}

										.screen-name {
											color: #fff;
										}
									}

									&:active {
										color: #fff;
										background: darken(@themeColor, 10%);

										.name {
											color: #fff;
										}

										.screen-name {
											color: #fff;
										}
									}

									.icon {
										vertical-align: middle;
										min-width: 32px;
										min-height: 32px;
										max-width: 32px;
										max-height: 32px;
										margin: 0 8px 0 0;
										border-radius: 6px;
									}

									.name {
										margin: 0 8px 0 0;
										/*font-weight: bold;*/
										font-weight: normal;
										color: rgba(255, 255, 255, 0.8);
									}

									.screen-name {
										font-weight: normal;
										color: rgba(255, 255, 255, 0.3);
									}
								}
							}
						}
					}
				}
				/*
				> .notice {
					display: inline-block;
					vertical-align: top;
					height: 100%;

					> .dropdown {
						display: inline-block;
						position: relative;
						overflow: visible;
						clear: both;
						float: right;
						height: 100%;

						&:hover {
							> .i {
								background: #eee;
							}

							> .dropdownContainer {
								visibility: visible;
								opacity: 1;
								transform: scale(1);
								transition: opacity 0.1s linear;
							}
						}

						> .i {
							display: inline-block;
							box-sizing: border-box;
							min-width: 48px;
							height: 100%;
							padding: 0 8px;
							text-align: center;

							> i {
								display: inline-block;
								font-size: 1.2em;
								line-height: 48px;
								color: rgba(0,0,0,0.5);
							}
						}

						> .dropdownContainer {
							visibility: hidden;
							opacity: 0;
							display: block;
							position: absolute;
							top: ~"calc(48px + 16px)";
							right: -8px;
							z-index: 3;
							margin: 0;
							padding: 16px;
							background: #fff;
							box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
							transform: scale(0.9);
							transition: visibility 0s linear 0.5s, opacity 0.1s linear 0.4s, transform 0.2s ease-out 0.4s;

							&:before {
								content: "";
								display: block;
								position: absolute;
								top: -32px;
								right: 16px;
								width: 0;
								height: 0;
								border-top: solid 16px transparent;
								border-right: solid 16px transparent;
								border-bottom: solid 16px #fff;
								border-left: solid 16px transparent;
							}

							> .allDeleteButton {
								-webkit-appearance: none;
								-moz-appearance: none;
								appearance: none;
								display: block;
								position: absolute;
								top: 0;
								left: 0;
								z-index: 1;
								margin: 0;
								padding: 0;
								cursor: pointer;
								outline: none;
								border: none;
								border-radius: 0;
								box-shadow: none;
								background: transparent;

								&:hover {
									background: @themeColor;
								}

								&:active {
									background: darken(@themeColor, 10%);
								}

								> i {
									padding: 8px;
									font-size: 1rem;
									cursor: pointer;
									color: rgba(0, 0, 0, 0.5);
								}
							}

							> .dropdownContent {
								box-sizing: border-box;
								width: 350px;
								height: 450px;
								overflow-x: auto;
								overflow-y: scroll;
								font-size: 1rem;

								> .empty {
									display: inline-block;
									box-sizing: border-box;
									width: 100%;
									margin: 0;
									padding: 24px;
									text-align: center;
									color: rgba(0, 0, 0, 0.5);
								}

								> ol {
									margin: 0;
									padding: 0;
									list-style: none;
									font-size: 1.2em;

									> li {
										display: block;
										position: relative;
										box-sizing: border-box;
										width: 100%;
										padding: 24px 16px;
										background: #fff;
										border-bottom: solid 1px #eee;

										&:hover {
											> .deleteButton {
												display: block;
											}
										}

										> time {
											position: absolute;
											top: 0;
											left: 0;
											padding: 8px;
											font-size: 0.5em;
											color: rgba(0, 0, 0, 0.5);
										}

										> .appName {
											position: absolute;
											bottom: 0;
											right: 0;
											padding: 8px;
											font-size: 0.5em;
											color: rgba(0, 0, 0, 0.5);
										}

										> .deleteButton {
											-webkit-appearance: none;
											-moz-appearance: none;
											appearance: none;
											display: none;
											position: absolute;
											top: 6px;
											right: 6px;
											margin: 0;
											padding: 0;
											cursor: pointer;
											outline: none;
											border: none;
											border-radius: 0;
											box-shadow: none;
											background: transparent;

											> img {
												vertical-align: bottom;
												width: 16px;
												height: 16px;
												cursor: pointer;
											}
										}

										> .content {
											font-size: 0.8em;
										}
									}
								}
							}
						}
					}
				}
				*/
				> .account {
					display: inline-block;
					vertical-align: top;

					> .dropdown {
						display: inline-block;
						position: relative;
						overflow: visible;
						clear: both;
						float: right;

						&[data-active='true'] {
							background: #232221;

							> .dropdown-header {
								> .icon {
									filter: saturate(200%);
									-webkit-filter: saturate(200%);
									-moz-filter: saturate(200%);
									-o-filter: saturate(200%);
									-ms-filter: saturate(200%);
								}
							}

							> .dropdown-content {
								visibility: visible;
							}
						}

						> .dropdown-header {
							cursor: pointer;

							* {
								cursor: pointer;
							}

							&:hover {
								background: rgba(0, 0, 0, 0.1);

								> .screen-name {
									color: #fff;
								}

								> .icon {
									filter: saturate(150%);
									-webkit-filter: saturate(150%);
									-moz-filter: saturate(150%);
									-o-filter: saturate(150%);
									-ms-filter: saturate(150%);
								}
							}

							&:active {
								background: rgba(0, 0, 0, 0.2);

								> .screen-name {
									color: #fff;
								}

								> .icon {
									filter: saturate(200%);
									-webkit-filter: saturate(200%);
									-moz-filter: saturate(200%);
									-o-filter: saturate(200%);
									-ms-filter: saturate(200%);
								}
							}

							&:after {
								content: "";
								display: block;
								clear: both;
							}

							> .screen-name {
								display: block;
								float: left;
								margin: 0 12px 0 16px;
								max-width: 16em;
								line-height: 48px;
								font-weight: bold;
								text-decoration: none;
								color: @header-foreground-color;

								i {
									margin-left: 8px;
								}
							}

							> .icon {
								display: block;
								float: left;
								box-sizing: border-box;
								min-width: 32px;
								max-width: 32px;
								min-height: 32px;
								max-height: 32px;
								margin: 8px 8px 8px 0;
								border-radius: 4px;
							}
						}

						> .dropdown-content {
							visibility: hidden;
							display: block;
							position: absolute;
							top: auto;
							right: 0;
							z-index: 3;
							width: 270px;
							margin: 0;
							padding: 0;
							background: #232221;

							> ul {
								margin: 0;
								padding: 0;
								list-style: none;
								font-size: 1em;
								border-bottom: solid 1px #1b1b1a;

								&:last-child {
									border-bottom: none;
								}

								> li {
									display: inline-block;
									width: 100%;

									> a {
										display: inline-block;
										z-index: 1;
										box-sizing: border-box;
										vertical-align: top;
										width: 100%;
										padding: 12px 20px;
										text-decoration: none;
										color: @header-foreground-color;
										background-image: url("/resources/common/images/arrow-white.svg");
										background-repeat: no-repeat;
										background-position: calc(100% - 8px) center;
										transition: none;

										&:hover {
											color: #fff;
											background-color: @themeColor;
										}

										&:active {
											color: #fff;
											background-color: darken(@themeColor, 10%);
										}

										> i {
											width: 2em;
											text-align: center;
										}
									}
								}
							}
						}
					}
				}

				> .notices {
					display: inline-block;
					vertical-align: top;

					> .dropdown {
						display: inline-block;
						position: relative;
						overflow: visible;
						clear: both;

						&[data-active='true'] {
							background: #111111;

							> .dropdown-content {
								visibility: visible;
							}
						}

						> .dropdown-header {
							cursor: pointer;

							* {
								cursor: pointer;
							}

							&:hover {
								background: rgba(0, 0, 0, 0.1);

								> p > i {
									color: #fff;
								}
							}

							&:active {
								background: rgba(0, 0, 0, 0.2);

								> p > i {
									color: #fff;
								}
							}

							&:after {
								content: "";
								display: block;
								clear: both;
							}

							> p {
								display: block;
								margin: 0 16px;
								line-height: 48px;

								> i {
									color: @header-foreground-color;
								}

								> .unread-count {
									color: contrast(@themeColor, #000, #fff, 70%) !important;
									display: inline-block;
									position: relative;
									z-index: 1;
									padding: 1px 2px;
									margin-right: -1em;
									margin-left: -0.5em;
									vertical-align: super;
									font-size: 0.7em;
									line-height: 1em;
									background: @themeColor;
									border-radius: 2px;
								}
							}
						}

						> .dropdown-content {
							visibility: hidden;
							display: block;
							position: absolute;
							top: auto;
							right: 0;
							z-index: 3;
							min-width: 300px;
							width: 300px;
							margin: 0;
							padding: 0;
							background: #111111;

							> .nav {
								display: none;
								height: 32px;
								position: fixed;
								top: inherit;
								left: inherit;
								width: 300px;
								z-index: 1;
								color: #fff;
								background: #111;
								border-bottom: solid 1px #232323;

								&:after {
									content: "";
									display: block;
									clear: both;
								}

								.filter-type {
									-webkit-appearance: none;
									-moz-appearance: none;
									appearance: none;
									display: block;
									float: left;
									box-sizing: border-box;
									margin: 0;
									padding: 0 8px;
									height: 32px;
									color: #fff;
									border: none;
									border-radius: 0;
									background: transparent;
									transition: border 0.1s ease;

									&:hover {
										background: rgba(255, 255, 255, 0.1);
									}

									option {
										background: #000;
									}
								}

								.delete-all-button {
									-webkit-appearance: none;
									-moz-appearance: none;
									appearance: none;
									display: block;
									float: right;
									box-sizing: border-box;
									margin: 0;
									padding: 0;
									width: 32px;
									height: 32px;
									color: #fff;
									border: none;
									outline: none;
									background: transparent;
									cursor: pointer;

									&:hover {
										background: rgba(255, 255, 255, 0.1);
									}

									&:active {
										background: rgba(255, 255, 255, 0.2);
									}

									* {
										pointer-events: none;
									}
								}
							}

							> .main {
								position: relative;
								min-height: 128px;
								max-height: 512px;
								overflow: auto;

								> .loading {
									display: block;
									position: absolute;
									top: 0;
									right: 0;
									bottom: 0;
									left: 0;
									margin: auto;
								}

								> .notice-empty {
									display: block;
									box-sizing: border-box;
									margin: 0;
									padding: 32px 16px;
									text-align: center;
									color: rgba(255, 255, 255, 0.7);
								}

								> .notices {
									display: block;
									margin: 0;
									padding: 0;
									list-style: none;

									> .notice {
										display: block;
										position: relative;
										margin: 0;
										padding: 16px;
										font-size: 0.9em;
										color: #fff;
										border-bottom: solid 1px rgba(0, 0, 0, 0.2);
										transform-origin: center bottom;
										transform: perspective(4096px);
										opacity: 1;

										&:last-child {
											border-bottom: none;
										}

										&:after {
											content: "";
											display: block;
											clear: both;
										}

										> time {
											display: inline;
											position: absolute;
											top: 16px;
											right: 12px;
											vertical-align: top;
											color: rgba(255, 255, 255, 0.5);
											font-size: small;
										}

										> .main {
											word-wrap: break-word;
										}

										&.application {
											.icon-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
														color: #55ACEE;
													}
												}
											}
										}

										&.install-app {
											.icon-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
														color: #55ACEE;
													}
												}
											}
										}

										&.uninstall-app {
											.icon-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
														color: #FF2604;
													}
												}
											}
										}

										&.follow {
											.icon-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
														color: #55ACEE;
													}
												}
											}
										}

										&.status-favorite, &.status-repost {
											.icon-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
													}
												}

												.status-preview {
													color: #fff;

													&:before {
														content: "\f10d";
														font-family: FontAwesome;
														font-size: 1em;
														font-weight: normal;
														font-style: normal;
														display: inline-block;
														margin-right: 3px;
													}

													&:after {
														content: "\f10e";
														font-family: FontAwesome;
														font-size: 1em;
														font-weight: normal;
														font-style: normal;
														display: inline-block;
														margin-left: 3px;
													}
												}
											}
										}

										&.status-favorite {
											.text p i {
												color: #FFAC33;
											}
										}

										&.status-repost {
											.text p i {
												color: #77B255;
											}
										}

										&.bbs-thread-post {
											.icon-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
													}
												}

												.post-preview {
													color: #fff;

													&:before {
														content: "\f10d";
														font-family: FontAwesome;
														font-size: 1em;
														font-weight: normal;
														font-style: normal;
														display: inline-block;
														margin-right: 3px;
													}

													&:after {
														content: "\f10e";
														font-family: FontAwesome;
														font-size: 1em;
														font-weight: normal;
														font-style: normal;
														display: inline-block;
														margin-left: 3px;
													}
												}
											}
										}
									}
								}
							}
						}
					}
				}

				> .post {
					display: inline-block;
					box-sizing: border-box;
					padding: 8px;
					height: 100%;
					vertical-align: top;

					> button {
						-webkit-appearance: none;
						-moz-appearance: none;
						appearance: none;
						display: inline-block;
						box-sizing: border-box;
						margin: 0;
						padding: 0 10px;
						height: 100%;
						font-size: 1.2em;
						font-weight: normal;
						text-decoration: none;
						color: contrast(@themeColor, #000, #fff, 70%);
						background: @themeColor !important;
						outline: none;
						border: none;
						border-radius: 2px;
						box-shadow: none;
						transition: background 0.1s ease;

						&, * {
							cursor: pointer;
						}

						&:hover {
							background: lighten(@themeColor, 10%) !important;
						}

						&:active {
							background: darken(@themeColor, 10%) !important;
							transition: background 0s ease;
						}
					}
				}

				> .time {
					display: inline-block;

					> .dropdown {
						display: inline-block;
						position: relative;
						overflow: visible;

						> .dropdown-header {
							padding: 0 12px;
							text-align: center;
							font-size: 0.5em;

							&:hover {
								background: #111111;

								& + .dropdown-content {
									visibility: visible;
								}

								> time {
									color: #fff !important;

									* {
										color: #fff !important;
									}
								}
							}

							&:after {
								content: "";
								display: block;
								clear: both;
							}

							> time {
								display: table-cell;
								vertical-align: middle;
								height: 48px;
								color: @header-foreground-color;

								> .yyyymmdd {
									color: rgba(255,255,255,0.5);
								}
							}
						}

						> .dropdown-content {
							visibility: hidden;
							display: block;
							position: absolute;
							top: auto;
							right: 0;
							z-index: 3;
							margin: 0;
							padding: 0;
							background: #111111;

							> .clock {
								display: block;
								width: 256px;
								height: 256px;
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 1100px) {
	#misskey-main-header {
		> .main {
			> .main-contents-container {
				> .left {
					> nav {
						> .main-nav {
							> ul {
								> li {
									> a {
										> i {
											margin-right: 0;
										}

										> p {
											display: none;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 900px) {
	#misskey-main-header {
		> .main {
			> .main-contents-container {
				> .right {
					> .account {
						> .dropdown {
							> .dropdown-header {
								> .screen-name {
									display: none;
								}

								> .icon {
									margin: 8px;
								}
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 800px) {
	#misskey-main-header {
		> .main {
			> .main-contents-container {
				> .right {
					> .search {
						display: none;
					}
				}
			}
		}
	}
}

@media (max-width: 600px) {
	#misskey-main-header {
		> .main {
			> .main-contents-container {
				> .right {
					> .time {
						display: none;
					}
				}
			}
		}
	}
}

@media (max-width: 500px) {
	#misskey-main-header {
		> .main {
			> .main-contents-container {
				> .left {
					> nav {
						> .main-nav {
							> ul {
								> li {
									> a {
										padding: 0 16px;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

/* General UI
 * ---------------------------------------------------------------- */

.ui-input-text,
.ui-input-email,
.ui-input-password,
.ui-textarea,
.ui-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	user-select: text;
	-moz-user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
	box-sizing: border-box;
	cursor: auto;
	margin: 0;
	padding: 8px 16px;
	width: 20em;
	font-size: 1em;
	line-height: 24px;
	color: #444;
	outline: none;
	border: solid 1px #ddd;
	border-radius: 0;
	box-shadow: none;
	transition: color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;

	&:hover {
		border-color: @themeColor;
		//box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1) inset;
		transition: border 0.2s ease, box-shadow 0.2s ease;
	}

	&:focus {
		color: darken(@themeColor, 20%);
		border-color: @themeColor;
		//box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
		transition: color 0, border 0.5s ease, box-shadow 0.05s ease;
	}

	&::-webkit-input-placeholder {
		color: #ddd;
	}

	&:-ms-input-placeholder {
		color: #ddd;
	}

	&:-moz-placeholder {
		color: #ddd;
	}
}

.ui-radio,
.ui-checkbox {
}

.ui-radio-label,
.ui-checkbox-label {
	transition: all 0.2s ease;

	&:hover {
		color: darken(@themeColor, 20%);
	}
}

.ui-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-block;
	box-sizing: border-box;
	margin: 0;
	padding: 10px 10px;
	line-height: 1.1em;
	font-size: 1.1em;
	font-weight: normal;
	text-decoration: none;
	color: #95856e;
	background: transparent;
	outline: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	transition: color 0.1s ease;

	* {
		pointer-events: none;
	}

	i {
		margin: 0 0.375em;
	}

	&:hover {
		color: @themeColor;
	}

	&:active {
		color: darken(@themeColor, 10%);
		transition: color 0s ease;
	}
}

.ui-textarea {
	height: 6em;
	width: 100%;
	max-width: 100%;
}

.ui-dialog {
	display: block;
	position: fixed;
	z-index: 1024;
	top: 0;
	left: 0;
	right: 0;
	width: 512px;
	max-width: 100%;
	margin: 0 auto;
	padding: 20px;
	color: #fff;
	background: rgba(0, 0, 0, 0.8);
	transition: top 1s ease;

	p {
		margin: 0;
		text-align: center;
	}
}

.ui-user-icon {
	display: inline-block;
	position: relative;

	.icon {
		min-width: 32px;
		max-width: 32px;
		min-height: 32px;
		max-height: 32px;
		vertical-align: bottom;
	}

	.balloon {
		display: inline-block;
		pointer-events: none;
		position: absolute;
		top: -2.5em;
		left: 0;
		z-index: 1;
		margin: 0;
		padding: 6px 12px;
		line-height: 1em;
		white-space: nowrap;
		font-size: 0.9em;
		color: #fff;
		background: rgba(0, 0, 0, 0.7);
		border-radius: 4px;
		opacity: 0;
		transition: opacity 0.1s linear;

		&:before {
			content: "";
			position: absolute;
			bottom: -8px;
			left: ~"calc(50% - 4px)";
			border-top: solid 4px rgba(0, 0, 0, 0.7);
			border-right: solid 4px transparent;
			border-bottom: solid 4px transparent;
			border-left: solid 4px transparent;
		}
	}

	&:hover .balloon {
		opacity: 1;
	}
}

.ui-message {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2048;
	width: 600px;
	margin: 0 auto;
	padding: 16px 32px;
	text-align: center;
	word-wrap: break-word;
	color: #fff;
	background: rgba(0, 0, 0, 0.8);
	transform-origin: center top;
	transform: perspective(1024px) rotateX(90deg);
	opacity: 0;
}

/* Window
 * ---------------------------------------------------------------- */
.window {
	position: fixed;
	z-index: 4096;
	bottom: 0;
	right: 0;
	width: auto;
	height: auto;
	overflow: hidden;
	background: #fff;
	box-shadow: 0px 0px 16px -6px @themeColor;
	/*border: solid 1px rgba(0, 0, 0, 0.2);*/
	border: solid 1px @themeColor;
	opacity: 0;
	/*transform: scale(0.8);*/
	transform-origin: 50% 100%;

	> header {
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		width: 100%;
		height: 32px;
		cursor: move;
		background: #fff;
		border-bottom: solid 1px #eee;

		h1, i {
			user-select: none;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: move;
		}

		> h1 {
			display: inline-block;
			overflow: hidden;
			margin: 0 0 0 8px;
			line-height: 32px;
			max-width: ~"calc(100% - 73px)";
			font-size: 1em;
			font-weight: bold;
			color: #777;
			white-space: nowrap;
			text-overflow: ellipsis;

			i {
				margin: 0 8px;
			}
		}

		> .buttons {
			float: right;
			font-size: 0;

			> button {
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				display: inline-block;
				vertical-align: bottom;
				padding: 0;
				background: transparent;
				border: none;
				outline: none;
				cursor: pointer;

				&:hover {
					background: #eee;
					outline: none;
				}

				&:focus {
					background: #ddd;
					outline: none;
				}

				&:active {
					background: #ddd;
					outline: none;
				}

				img {
					pointer-events: none;
					min-width: 32px;
					max-width: 32px;
					min-height: 32px;
					max-height: 32px;
					vertical-align: bottom;
				}
			}

			> .close {
			}
		}
	}

	> .content {
		display: block;
		margin: 0;
		padding: 0;
		width: 100%;
		height: ~"calc(100% - 32px)";
		overflow: hidden;
		background: #fff;

		> iframe {
			width: 100%;
			height: 100%;
			border: none;
		}
	}
}

/* Tooltip
 * ---------------------------------------------------------------- */
.ui-tooltip {
	pointer-events: none;
	display: block;
	position: absolute;
	z-index: 128;
	margin: 0;
	padding: 4px 8px;
	white-space: nowrap;
	font-size: 0.8em;
	color: #fff;
	background: rgba(0, 0, 0, 0.8);
	border-radius: 4px;

	&:before {
		content: "";
		display: block;
		position: absolute;
		bottom: -8px;
		left: ~"calc(50% - 4px)";
		border-top: solid 4px rgba(0, 0, 0, 0.8);
		border-right: solid 4px transparent;
		border-bottom: solid 4px transparent;
		border-left: solid 4px transparent;
	}
}

/* Tag input
 * ---------------------------------------------------------------- */
input.tagit-hidden-field {
	display: none;
}

.ui-taginput {
	user-select: text;
	-moz-user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
	display: block;
	float: left;
	overflow: auto;
	padding: 1px 5px;
	margin-left: inherit; /* usually we don't want the regular ul margins. */
	margin-right: inherit;
	cursor: text;
	list-style: none;

	li {
		user-select: text;
		-moz-user-select: text;
		-webkit-user-select: text;
		-ms-user-select: text;
		display: block;
		float: left;
		margin: 2px 5px 2px 0;
		cursor: text;
	}

	li.tagit-choice {
		position: relative;
		line-height: inherit;
	}

	li.tagit-choice-read-only {
		padding: 0;
	}

	li.tagit-choice-editable {
		padding: 0 18px 0 0;
	}

	li.tagit-new {
		padding: 0;
	}

	li.tagit-choice a.tagit-label {
		cursor: pointer;
		text-decoration: none;
	}

	li.tagit-choice .tagit-close {
		cursor: pointer;
		position: absolute;
		right: .1em;
		top: 50%;
		margin-top: -8px;
		line-height: 17px;
	}
	/* used for some custom themes that don't need image icons */
	li.tagit-choice .tagit-close .text-icon {
		display: none;
	}

	li.tagit-choice input {
		user-select: text;
		-moz-user-select: text;
		-webkit-user-select: text;
		-ms-user-select: text;
		display: block;
		float: left;
		margin: 2px 5px 2px 0;
		cursor: text;
	}

	input[type="text"] {
		user-select: text;
		-moz-user-select: text;
		-webkit-user-select: text;
		-ms-user-select: text;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		border: none;
		margin: 0;
		padding: 4px;
		width: inherit;
		cursor: text;
		background-color: inherit;
		outline: none;
	}
}
<commit_msg>commit<commit_after>@import "../common";

@header-background-color: #3a3a3a;
@header-foreground-color: #d4d2d1;

::selection {
	background: @themeColor;
	color: #fff;
}

* {
	font-family: 'Proxima Nova Reg', "FOT-スーラ Pro M", 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo UI', 'Meiryo', 'メイリオ', sans-serif;
	/*user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	cursor: default;*/
	-webkit-tap-highlight-color: fade(@themeColor, 70%);

	&:focus {
		/*outline: solid 2px @themeColor;*/
		outline: none;
	}

	&::-webkit-scrollbar {
		width: 5px;
		background: transparent;

		&:horizontal {
			height: 5px;
		}
	}

	&::-webkit-scrollbar-button {
		width: 0;
		height: 0;
		background: rgba(0, 0, 0, 0.2);
	}

	&::-webkit-scrollbar-piece {
		background: transparent;

		&:start {
			background: transparent;
		}
	}

	&::-webkit-scrollbar-thumb {
		background: rgba(0, 0, 0, 0.2);

		&:hover {
			background: rgba(0, 0, 0, 0.4);
		}

		&:active {
			background: @themeColor;
		}
	}

	&::-webkit-scrollbar-corner {
		background: rgba(0, 0, 0, 0.2);
	}
}

html, body {
	margin: 0;
	padding: 0;
}

body {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

a {
	text-decoration: none;
	color: @themeColor;
	transition: color 0.1s ease;
	cursor: pointer;

	&:hover {
		color: darken(@themeColor, 10%);
		text-decoration: underline;
	}

	* {
		cursor: pointer;
	}
}

textarea {
	user-select: text;
	-moz-user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
	cursor: auto;
}

/* UI
 * ---------------------------------------------------------------- */
#misskey-post-form-back {
	display: none;
	position: fixed;
	z-index: 127;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	opacity: 0;
}

#misskey-post-form-container {
	display: none;
	position: fixed;
	top: 0;
	z-index: 128;
	width: 100%;
	height: 100%;
}

#misskey-post-form {
	display: block;
	position: absolute;
	top: 20%;
	left: 0;
	right: 0;
	box-sizing: border-box;
	width: 100%;
	max-width: 550px;
	margin: auto;
	padding: 0 32px 24px 32px;
	background: #fff;
	opacity: 0;

	> .close-button {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		width: 42px;
		height: 42px;
		color: #555;
		border: none;
		outline: none;
		background: transparent;
		cursor: pointer;

		&:hover {
			color: #333;
		}

		&:active {
			color: #000;
		}

		* {
			pointer-events: none;
		}
	}

	> #misskey-post-form-tabs {
		> ul {
			display: block;
			margin: 0;
			padding: 0;
			list-style: none;

			&:after {
				content: '';
				display: block;
				clear: both;
			}

			> li {
				display: block;
				margin: 0;
				padding: 0;
				float: left;

				&.active {
					> a {
						color: @themeColor;
					}
				}

				> a {
					display: block;
					padding: 16px;
					color: #DAD1CC;

					> i {
						font-size: 2em;
					}
				}
			}
		}
	}
}

#misskey-main-header {
	position: fixed;
	top: 0;
	z-index: 1024;
	width: 100%;
	//box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
	> .donate {
		margin: 0;
		padding: 4px 16px;
		font-size: 0.8em;
		color: #000;
		background: #cef1df;
	}

	> .env-development-info {
		margin: 0;
		padding: 4px 16px;
		font-size: 0.8em;
		color: #fff;
		background: rgba(0, 0, 0, 0.9);

		.go-production-channel {
			margin-left: 4px;

			i {
				margin-right: 2px;
			}
		}
	}

	> .info {
		display: block;
		width: 100%;
		margin: 0;
		padding: 2px 0;
		text-align: center;
		font-size: 0.8em;
		color: #000;
		background: orange;
	}

	> .main {
		//max-height: 3rem;
		margin: 0;
		padding: 0;
		background-color: @header-background-color;
		background-image: url("/resources/common/images/misskey.dark.svg");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: auto 24px;
		//box-shadow: 0 2px 2px -2px rgba(0,0,0,0.5);
		//border-top: solid 3px @themeColor;
		//border-bottom: solid 3px rgba(0, 0, 0, 0.1);
		//box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
		background-clip: content-box;
		font-size: 0.9rem;

		&, * {
			user-select: none;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: default;
		}

		&:after {
			content: "";
			display: block;
			clear: both;
		}

		> .main-contents-container {
			width: 100%;
			max-width: 1300px;
			margin: 0 auto;

			> .left {
				float: left;
				height: 3rem;

				> nav {
					> .main-nav {
						display: inline-block;
						margin: 0;
						padding: 0;
						line-height: 3rem;
						vertical-align: top;

						> .misskey {
							-webkit-appearance: none;
							-moz-appearance: none;
							appearance: none;
							display: none;
							vertical-align: top;
							margin: 0 10px;
							padding: 0;
							line-height: 3rem;
							font-size: 1.5em;
							color: rgba(0, 0, 0, 0.5);
							border: none;
							outline: none;
							background: transparent;
							transition: all 0.2s ease;

							&:hover {
								color: @themeColor;
							}
						}

						> ul {
							display: inline-block;
							margin: 0;
							padding: 0;
							vertical-align: top;
							line-height: 3rem;
							list-style: none;

							> li {
								display: inline-block;
								vertical-align: top;
								height: 48px;
								line-height: 48px;
								background-clip: padding-box !important;

								&.active {
									background: @themeColor;

									> a {
										color: contrast(@themeColor, #000, #fff, 70%) !important;
										border-bottom: none !important;

										&:hover {
											border-bottom: none !important;
										}
									}
								}

								> a {
									display: inline-block;
									box-sizing: border-box;
									z-index: 1;
									height: 100%;
									padding: 0 24px;
									font-size: 1em;
									font-variant: small-caps;
									color: @header-foreground-color;
									text-decoration: none;
									border-bottom: solid 0px rgba(255, 255, 255, 0.3);
									transition: all 0.1s linear;

									* {
										pointer-events: none;
									}

									&:hover {
										color: @themeColor;
										border-bottom: solid 4px rgba(255, 255, 255, 0.3);
									}

									&:active {
										color: darken(@themeColor, 10%);
									}

									> i {
										margin-right: 8px;
									}

									> p {
										display: inline;
										margin: 0;
									}

									> .unreadCount {
										display: inline;
										margin-left: 8px;
										padding: 2px 4px;
										font-size: 0.8em;
										color: contrast(@themeColor, #000, #fff, 70%);
										background: @themeColor;
										border-radius: 2px;
									}
								}
							}
						}
					}

					> .misskey-menu {
						display: inline-block;
						vertical-align: top;

						> .dropdown {
							display: inline-block;
							position: relative;
							overflow: visible;
							float: right;

							&[data-active='true'] {
								background: #232221;

								> .dropdown-header {
								}

								> .dropdown-content {
									visibility: visible;
								}
							}

							> .dropdown-header {
								cursor: pointer;

								* {
									cursor: pointer;
								}

								&:hover {
									background: rgba(0, 0, 0, 0.1);

									> p > i {
										color: #fff;
									}
								}

								&:active {
									background: rgba(0, 0, 0, 0.2);

									> p > i {
										color: #fff;
									}
								}

								&:after {
									content: "";
									display: block;
									clear: both;
								}

								> p {
									display: block;
									margin: 0 16px;
									line-height: 48px;

									> i {
										color: @header-foreground-color;
									}
								}
							}

							> .dropdown-content {
								visibility: hidden;
								display: block;
								position: absolute;
								top: auto;
								left: 0;
								z-index: 3;
								width: 270px;
								margin: 0;
								padding: 0;
								background: #232221;

								> ul {
									margin: 0;
									padding: 0;
									list-style: none;
									font-size: 1em;
									border-bottom: solid 1px #1b1b1a;

									&:last-child {
										border-bottom: none;
									}

									> li {
										display: inline-block;
										width: 100%;

										> a {
											display: inline-block;
											z-index: 1;
											box-sizing: border-box;
											vertical-align: top;
											width: 100%;
											padding: 12px 20px;
											text-decoration: none;
											color: @header-foreground-color;
											background-image: url("/resources/common/images/arrow-white.svg");
											background-repeat: no-repeat;
											background-position: calc(100% - 8px) center;
											transition: none;

											&:hover {
												color: #fff;
												background-color: @themeColor;
											}

											&:active {
												color: #fff;
												background-color: darken(@themeColor, 10%);
											}

											> i {
												width: 2em;
												text-align: center;
											}
										}
									}
								}
							}
						}
					}
				}
			}

			> .right {
				float: right;
				height: 48px;

				> .search {
					display: inline-block;
					position: relative;
					vertical-align: top;

					> input {
						-webkit-appearance: none;
						-moz-appearance: none;
						appearance: none;
						user-select: text;
						-moz-user-select: text;
						-webkit-user-select: text;
						-ms-user-select: text;
						cursor: auto;
						box-sizing: border-box;
						margin: 0;
						padding: 6px 18px;
						width: 14em;
						height: 48px;
						font-size: 1em;
						line-height: ~"calc(48px - 12px)";
						color: #fff;
						background: transparent;
						outline: none;
						//border: solid 1px #ddd;
						border: none;
						border-radius: 0;
						box-shadow: none;
						transition: color 0.5s ease, border 0.5s ease;
						font-family: FontAwesome, 'Helvetica','Arial','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Meiryo UI','Meiryo, メイリオ','sans-serif';

						&:hover {
							background: rgba(0, 0, 0, 0.1);
						}

						&:focus {
							color: @themeColor;
							background: rgba(0, 0, 0, 0.2);
						}

						&[data-active='true'] {
							background: #111111;
						}

						&::-webkit-input-placeholder,
						&:-ms-input-placeholder,
						&:-moz-placeholder {
							color: @header-foreground-color;
						}
					}

					> .result {
						display: block;
						position: absolute;
						top: auto;
						right: 0;
						z-index: 3;
						width: 340px;
						margin: 0;
						padding: 0;
						background: #111111;

						> ol.users {
							margin: 0;
							padding: 0;
							list-style: none;

							li {
								a {
									display: inline-block;
									z-index: 1;
									box-sizing: border-box;
									width: 100%;
									padding: 8px 22px;
									vertical-align: top;
									white-space: nowrap;
									overflow: hidden;
									color: @header-foreground-color;
									transition: none;

									&:hover {
										color: #fff;
										background: @themeColor;

										.name {
											color: #fff;
										}

										.screen-name {
											color: #fff;
										}
									}

									&:active {
										color: #fff;
										background: darken(@themeColor, 10%);

										.name {
											color: #fff;
										}

										.screen-name {
											color: #fff;
										}
									}

									.icon {
										vertical-align: middle;
										min-width: 32px;
										min-height: 32px;
										max-width: 32px;
										max-height: 32px;
										margin: 0 8px 0 0;
										border-radius: 6px;
									}

									.name {
										margin: 0 8px 0 0;
										/*font-weight: bold;*/
										font-weight: normal;
										color: rgba(255, 255, 255, 0.8);
									}

									.screen-name {
										font-weight: normal;
										color: rgba(255, 255, 255, 0.3);
									}
								}
							}
						}
					}
				}
				/*
				> .notice {
					display: inline-block;
					vertical-align: top;
					height: 100%;

					> .dropdown {
						display: inline-block;
						position: relative;
						overflow: visible;
						clear: both;
						float: right;
						height: 100%;

						&:hover {
							> .i {
								background: #eee;
							}

							> .dropdownContainer {
								visibility: visible;
								opacity: 1;
								transform: scale(1);
								transition: opacity 0.1s linear;
							}
						}

						> .i {
							display: inline-block;
							box-sizing: border-box;
							min-width: 48px;
							height: 100%;
							padding: 0 8px;
							text-align: center;

							> i {
								display: inline-block;
								font-size: 1.2em;
								line-height: 48px;
								color: rgba(0,0,0,0.5);
							}
						}

						> .dropdownContainer {
							visibility: hidden;
							opacity: 0;
							display: block;
							position: absolute;
							top: ~"calc(48px + 16px)";
							right: -8px;
							z-index: 3;
							margin: 0;
							padding: 16px;
							background: #fff;
							box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
							transform: scale(0.9);
							transition: visibility 0s linear 0.5s, opacity 0.1s linear 0.4s, transform 0.2s ease-out 0.4s;

							&:before {
								content: "";
								display: block;
								position: absolute;
								top: -32px;
								right: 16px;
								width: 0;
								height: 0;
								border-top: solid 16px transparent;
								border-right: solid 16px transparent;
								border-bottom: solid 16px #fff;
								border-left: solid 16px transparent;
							}

							> .allDeleteButton {
								-webkit-appearance: none;
								-moz-appearance: none;
								appearance: none;
								display: block;
								position: absolute;
								top: 0;
								left: 0;
								z-index: 1;
								margin: 0;
								padding: 0;
								cursor: pointer;
								outline: none;
								border: none;
								border-radius: 0;
								box-shadow: none;
								background: transparent;

								&:hover {
									background: @themeColor;
								}

								&:active {
									background: darken(@themeColor, 10%);
								}

								> i {
									padding: 8px;
									font-size: 1rem;
									cursor: pointer;
									color: rgba(0, 0, 0, 0.5);
								}
							}

							> .dropdownContent {
								box-sizing: border-box;
								width: 350px;
								height: 450px;
								overflow-x: auto;
								overflow-y: scroll;
								font-size: 1rem;

								> .empty {
									display: inline-block;
									box-sizing: border-box;
									width: 100%;
									margin: 0;
									padding: 24px;
									text-align: center;
									color: rgba(0, 0, 0, 0.5);
								}

								> ol {
									margin: 0;
									padding: 0;
									list-style: none;
									font-size: 1.2em;

									> li {
										display: block;
										position: relative;
										box-sizing: border-box;
										width: 100%;
										padding: 24px 16px;
										background: #fff;
										border-bottom: solid 1px #eee;

										&:hover {
											> .deleteButton {
												display: block;
											}
										}

										> time {
											position: absolute;
											top: 0;
											left: 0;
											padding: 8px;
											font-size: 0.5em;
											color: rgba(0, 0, 0, 0.5);
										}

										> .appName {
											position: absolute;
											bottom: 0;
											right: 0;
											padding: 8px;
											font-size: 0.5em;
											color: rgba(0, 0, 0, 0.5);
										}

										> .deleteButton {
											-webkit-appearance: none;
											-moz-appearance: none;
											appearance: none;
											display: none;
											position: absolute;
											top: 6px;
											right: 6px;
											margin: 0;
											padding: 0;
											cursor: pointer;
											outline: none;
											border: none;
											border-radius: 0;
											box-shadow: none;
											background: transparent;

											> img {
												vertical-align: bottom;
												width: 16px;
												height: 16px;
												cursor: pointer;
											}
										}

										> .content {
											font-size: 0.8em;
										}
									}
								}
							}
						}
					}
				}
				*/
				> .account {
					display: inline-block;
					vertical-align: top;

					> .dropdown {
						display: inline-block;
						position: relative;
						overflow: visible;
						clear: both;
						float: right;

						&[data-active='true'] {
							background: #232221;

							> .dropdown-header {
								> .icon {
									filter: saturate(200%);
									-webkit-filter: saturate(200%);
									-moz-filter: saturate(200%);
									-o-filter: saturate(200%);
									-ms-filter: saturate(200%);
								}
							}

							> .dropdown-content {
								visibility: visible;
							}
						}

						> .dropdown-header {
							cursor: pointer;

							* {
								cursor: pointer;
							}

							&:hover {
								background: rgba(0, 0, 0, 0.1);

								> .screen-name {
									color: #fff;
								}

								> .icon {
									filter: saturate(150%);
									-webkit-filter: saturate(150%);
									-moz-filter: saturate(150%);
									-o-filter: saturate(150%);
									-ms-filter: saturate(150%);
								}
							}

							&:active {
								background: rgba(0, 0, 0, 0.2);

								> .screen-name {
									color: #fff;
								}

								> .icon {
									filter: saturate(200%);
									-webkit-filter: saturate(200%);
									-moz-filter: saturate(200%);
									-o-filter: saturate(200%);
									-ms-filter: saturate(200%);
								}
							}

							&:after {
								content: "";
								display: block;
								clear: both;
							}

							> .screen-name {
								display: block;
								float: left;
								margin: 0 12px 0 16px;
								max-width: 16em;
								line-height: 48px;
								font-weight: bold;
								text-decoration: none;
								color: @header-foreground-color;

								i {
									margin-left: 8px;
								}
							}

							> .icon {
								display: block;
								float: left;
								box-sizing: border-box;
								min-width: 32px;
								max-width: 32px;
								min-height: 32px;
								max-height: 32px;
								margin: 8px 8px 8px 0;
								border-radius: 4px;
							}
						}

						> .dropdown-content {
							visibility: hidden;
							display: block;
							position: absolute;
							top: auto;
							right: 0;
							z-index: 3;
							width: 270px;
							margin: 0;
							padding: 0;
							background: #232221;

							> ul {
								margin: 0;
								padding: 0;
								list-style: none;
								font-size: 1em;
								border-bottom: solid 1px #1b1b1a;

								&:last-child {
									border-bottom: none;
								}

								> li {
									display: inline-block;
									width: 100%;

									> a {
										display: inline-block;
										z-index: 1;
										box-sizing: border-box;
										vertical-align: top;
										width: 100%;
										padding: 12px 20px;
										text-decoration: none;
										color: @header-foreground-color;
										background-image: url("/resources/common/images/arrow-white.svg");
										background-repeat: no-repeat;
										background-position: calc(100% - 8px) center;
										transition: none;

										&:hover {
											color: #fff;
											background-color: @themeColor;
										}

										&:active {
											color: #fff;
											background-color: darken(@themeColor, 10%);
										}

										> i {
											width: 2em;
											text-align: center;
										}
									}
								}
							}
						}
					}
				}

				> .notices {
					display: inline-block;
					vertical-align: top;

					> .dropdown {
						display: inline-block;
						position: relative;
						overflow: visible;
						clear: both;

						&[data-active='true'] {
							background: #111111;

							> .dropdown-content {
								visibility: visible;
							}
						}

						> .dropdown-header {
							cursor: pointer;

							* {
								cursor: pointer;
							}

							&:hover {
								background: rgba(0, 0, 0, 0.1);

								> p > i {
									color: #fff;
								}
							}

							&:active {
								background: rgba(0, 0, 0, 0.2);

								> p > i {
									color: #fff;
								}
							}

							&:after {
								content: "";
								display: block;
								clear: both;
							}

							> p {
								display: block;
								margin: 0 16px;
								line-height: 48px;

								> i {
									color: @header-foreground-color;
								}

								> .unread-count {
									color: contrast(@themeColor, #000, #fff, 70%) !important;
									display: inline-block;
									position: relative;
									z-index: 1;
									padding: 1px 2px;
									margin-right: -1em;
									margin-left: -0.5em;
									vertical-align: super;
									font-size: 0.7em;
									line-height: 1em;
									background: @themeColor;
									border-radius: 2px;
								}
							}
						}

						> .dropdown-content {
							visibility: hidden;
							display: block;
							position: absolute;
							top: auto;
							right: 0;
							z-index: 3;
							min-width: 300px;
							width: 300px;
							margin: 0;
							padding: 0;
							background: #111111;

							> .nav {
								display: none;
								height: 32px;
								position: fixed;
								top: inherit;
								left: inherit;
								width: 300px;
								z-index: 1;
								color: #fff;
								background: #111;
								border-bottom: solid 1px #232323;

								&:after {
									content: "";
									display: block;
									clear: both;
								}

								.filter-type {
									-webkit-appearance: none;
									-moz-appearance: none;
									appearance: none;
									display: block;
									float: left;
									box-sizing: border-box;
									margin: 0;
									padding: 0 8px;
									height: 32px;
									color: #fff;
									border: none;
									border-radius: 0;
									background: transparent;
									transition: border 0.1s ease;

									&:hover {
										background: rgba(255, 255, 255, 0.1);
									}

									option {
										background: #000;
									}
								}

								.delete-all-button {
									-webkit-appearance: none;
									-moz-appearance: none;
									appearance: none;
									display: block;
									float: right;
									box-sizing: border-box;
									margin: 0;
									padding: 0;
									width: 32px;
									height: 32px;
									color: #fff;
									border: none;
									outline: none;
									background: transparent;
									cursor: pointer;

									&:hover {
										background: rgba(255, 255, 255, 0.1);
									}

									&:active {
										background: rgba(255, 255, 255, 0.2);
									}

									* {
										pointer-events: none;
									}
								}
							}

							> .main {
								position: relative;
								min-height: 128px;
								max-height: 512px;
								overflow: auto;

								> .loading {
									display: block;
									position: absolute;
									top: 0;
									right: 0;
									bottom: 0;
									left: 0;
									margin: auto;
								}

								> .notice-empty {
									display: block;
									box-sizing: border-box;
									margin: 0;
									padding: 32px 16px;
									text-align: center;
									color: rgba(255, 255, 255, 0.7);
								}

								> .notices {
									display: block;
									margin: 0;
									padding: 0;
									list-style: none;

									> .notice {
										display: block;
										position: relative;
										margin: 0;
										padding: 16px;
										font-size: 0.9em;
										color: #fff;
										border-bottom: solid 1px rgba(0, 0, 0, 0.2);
										transform-origin: center bottom;
										transform: perspective(4096px);
										opacity: 1;

										&:last-child {
											border-bottom: none;
										}

										&:after {
											content: "";
											display: block;
											clear: both;
										}

										> time {
											display: inline;
											position: absolute;
											top: 16px;
											right: 12px;
											vertical-align: top;
											color: rgba(255, 255, 255, 0.5);
											font-size: small;
										}

										> .main {
											word-wrap: break-word;
										}

										&.application {
											.icon-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
														color: #55ACEE;
													}
												}
											}
										}

										&.install-app {
											.icon-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
														color: #55ACEE;
													}
												}
											}
										}

										&.uninstall-app {
											.icon-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
														color: #FF2604;
													}
												}
											}
										}

										&.follow {
											.icon-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
														color: #55ACEE;
													}
												}
											}
										}

										&.status-favorite, &.status-repost {
											.icon-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
													}
												}

												.status-preview {
													color: #fff;

													&:before {
														content: "\f10d";
														font-family: FontAwesome;
														font-size: 1em;
														font-weight: normal;
														font-style: normal;
														display: inline-block;
														margin-right: 3px;
													}

													&:after {
														content: "\f10e";
														font-family: FontAwesome;
														font-size: 1em;
														font-weight: normal;
														font-style: normal;
														display: inline-block;
														margin-left: 3px;
													}
												}
											}
										}

										&.status-favorite {
											.text p i {
												color: #FFAC33;
											}
										}

										&.status-repost {
											.text p i {
												color: #77B255;
											}
										}

										&.bbs-thread-post {
											.icon-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
													}
												}

												.post-preview {
													color: #fff;

													&:before {
														content: "\f10d";
														font-family: FontAwesome;
														font-size: 1em;
														font-weight: normal;
														font-style: normal;
														display: inline-block;
														margin-right: 3px;
													}

													&:after {
														content: "\f10e";
														font-family: FontAwesome;
														font-size: 1em;
														font-weight: normal;
														font-style: normal;
														display: inline-block;
														margin-left: 3px;
													}
												}
											}
										}
									}
								}
							}
						}
					}
				}

				> .post {
					display: inline-block;
					box-sizing: border-box;
					padding: 8px;
					height: 100%;
					vertical-align: top;

					> button {
						-webkit-appearance: none;
						-moz-appearance: none;
						appearance: none;
						display: inline-block;
						box-sizing: border-box;
						margin: 0;
						padding: 0 10px;
						height: 100%;
						font-size: 1.2em;
						font-weight: normal;
						text-decoration: none;
						color: contrast(@themeColor, #000, #fff, 70%);
						background: @themeColor !important;
						outline: none;
						border: none;
						border-radius: 2px;
						box-shadow: none;
						transition: background 0.1s ease;

						&, * {
							cursor: pointer;
						}

						&:hover {
							background: lighten(@themeColor, 10%) !important;
						}

						&:active {
							background: darken(@themeColor, 10%) !important;
							transition: background 0s ease;
						}
					}
				}

				> .time {
					display: inline-block;

					> .dropdown {
						display: inline-block;
						position: relative;
						overflow: visible;

						> .dropdown-header {
							padding: 0 12px;
							text-align: center;
							font-size: 0.5em;

							&:hover {
								background: #111111;

								& + .dropdown-content {
									visibility: visible;
								}

								> time {
									color: #fff !important;

									* {
										color: #fff !important;
									}
								}
							}

							&:after {
								content: "";
								display: block;
								clear: both;
							}

							> time {
								display: table-cell;
								vertical-align: middle;
								height: 48px;
								color: @header-foreground-color;

								> .yyyymmdd {
									color: rgba(255,255,255,0.5);
								}
							}
						}

						> .dropdown-content {
							visibility: hidden;
							display: block;
							position: absolute;
							top: auto;
							right: 0;
							z-index: 3;
							margin: 0;
							padding: 0;
							background: #111111;

							> .clock {
								display: block;
								width: 256px;
								height: 256px;
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 1100px) {
	#misskey-main-header {
		> .main {
			> .main-contents-container {
				> .left {
					> nav {
						> .main-nav {
							> ul {
								> li {
									> a {
										> i {
											margin-right: 0;
										}

										> p {
											display: none;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 900px) {
	#misskey-main-header {
		> .main {
			> .main-contents-container {
				> .right {
					> .account {
						> .dropdown {
							> .dropdown-header {
								> .screen-name {
									display: none;
								}

								> .icon {
									margin: 8px;
								}
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 800px) {
	#misskey-main-header {
		> .main {
			> .main-contents-container {
				> .right {
					> .search {
						display: none;
					}
				}
			}
		}
	}
}

@media (max-width: 600px) {
	#misskey-main-header {
		> .main {
			> .main-contents-container {
				> .right {
					> .time {
						display: none;
					}
				}
			}
		}
	}
}

@media (max-width: 500px) {
	#misskey-main-header {
		> .main {
			> .main-contents-container {
				> .left {
					> nav {
						> .main-nav {
							> ul {
								> li {
									> a {
										padding: 0 16px;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

/* General UI
 * ---------------------------------------------------------------- */

.ui-input-text,
.ui-input-email,
.ui-input-password,
.ui-textarea,
.ui-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	user-select: text;
	-moz-user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
	box-sizing: border-box;
	cursor: auto;
	margin: 0;
	padding: 8px 16px;
	width: 20em;
	font-size: 1em;
	line-height: 24px;
	color: #444;
	outline: none;
	border: solid 1px #ddd;
	border-radius: 0;
	box-shadow: none;
	transition: color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;

	&:hover {
		border-color: @themeColor;
		//box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1) inset;
		transition: border 0.2s ease, box-shadow 0.2s ease;
	}

	&:focus {
		color: darken(@themeColor, 20%);
		border-color: @themeColor;
		//box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
		transition: color 0, border 0.5s ease, box-shadow 0.05s ease;
	}

	&::-webkit-input-placeholder {
		color: #ddd;
	}

	&:-ms-input-placeholder {
		color: #ddd;
	}

	&:-moz-placeholder {
		color: #ddd;
	}
}

.ui-radio,
.ui-checkbox {
}

.ui-radio-label,
.ui-checkbox-label {
	transition: all 0.2s ease;

	&:hover {
		color: darken(@themeColor, 20%);
	}
}

.ui-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-block;
	box-sizing: border-box;
	margin: 0;
	padding: 10px 10px;
	line-height: 1.1em;
	font-size: 1.1em;
	font-weight: normal;
	text-decoration: none;
	color: #95856e;
	background: transparent;
	outline: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	transition: color 0.1s ease;

	* {
		pointer-events: none;
	}

	i {
		margin: 0 0.375em;
	}

	&:hover {
		color: @themeColor;
	}

	&:active {
		color: darken(@themeColor, 10%);
		transition: color 0s ease;
	}
}

.ui-textarea {
	height: 6em;
	width: 100%;
	max-width: 100%;
}

.ui-dialog {
	display: block;
	position: fixed;
	z-index: 1024;
	top: 0;
	left: 0;
	right: 0;
	width: 512px;
	max-width: 100%;
	margin: 0 auto;
	padding: 20px;
	color: #fff;
	background: rgba(0, 0, 0, 0.8);
	transition: top 1s ease;

	p {
		margin: 0;
		text-align: center;
	}
}

.ui-user-icon {
	display: inline-block;
	position: relative;

	.icon {
		min-width: 32px;
		max-width: 32px;
		min-height: 32px;
		max-height: 32px;
		vertical-align: bottom;
	}

	.balloon {
		display: inline-block;
		pointer-events: none;
		position: absolute;
		top: -2.5em;
		left: 0;
		z-index: 1;
		margin: 0;
		padding: 6px 12px;
		line-height: 1em;
		white-space: nowrap;
		font-size: 0.9em;
		color: #fff;
		background: rgba(0, 0, 0, 0.7);
		border-radius: 4px;
		opacity: 0;
		transition: opacity 0.1s linear;

		&:before {
			content: "";
			position: absolute;
			bottom: -8px;
			left: ~"calc(50% - 4px)";
			border-top: solid 4px rgba(0, 0, 0, 0.7);
			border-right: solid 4px transparent;
			border-bottom: solid 4px transparent;
			border-left: solid 4px transparent;
		}
	}

	&:hover .balloon {
		opacity: 1;
	}
}

.ui-message {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2048;
	width: 600px;
	margin: 0 auto;
	padding: 16px 32px;
	text-align: center;
	word-wrap: break-word;
	color: #fff;
	background: rgba(0, 0, 0, 0.8);
	transform-origin: center top;
	transform: perspective(1024px) rotateX(90deg);
	opacity: 0;
}

/* Window
 * ---------------------------------------------------------------- */
.window {
	position: fixed;
	z-index: 4096;
	bottom: 0;
	right: 0;
	width: auto;
	height: auto;
	overflow: hidden;
	background: #fff;
	box-shadow: 0px 0px 16px -6px @themeColor;
	/*border: solid 1px rgba(0, 0, 0, 0.2);*/
	border: solid 1px @themeColor;
	opacity: 0;
	/*transform: scale(0.8);*/
	transform-origin: 50% 100%;

	> header {
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		width: 100%;
		height: 32px;
		cursor: move;
		background: #fff;
		border-bottom: solid 1px #eee;

		h1, i {
			user-select: none;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: move;
		}

		> h1 {
			display: inline-block;
			overflow: hidden;
			margin: 0 0 0 8px;
			line-height: 32px;
			max-width: ~"calc(100% - 73px)";
			font-size: 1em;
			font-weight: bold;
			color: #777;
			white-space: nowrap;
			text-overflow: ellipsis;

			i {
				margin: 0 8px;
			}
		}

		> .buttons {
			float: right;
			font-size: 0;

			> button {
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				display: inline-block;
				vertical-align: bottom;
				padding: 0;
				background: transparent;
				border: none;
				outline: none;
				cursor: pointer;

				&:hover {
					background: #eee;
					outline: none;
				}

				&:focus {
					background: #ddd;
					outline: none;
				}

				&:active {
					background: #ddd;
					outline: none;
				}

				img {
					pointer-events: none;
					min-width: 32px;
					max-width: 32px;
					min-height: 32px;
					max-height: 32px;
					vertical-align: bottom;
				}
			}

			> .close {
			}
		}
	}

	> .content {
		display: block;
		margin: 0;
		padding: 0;
		width: 100%;
		height: ~"calc(100% - 32px)";
		overflow: hidden;
		background: #fff;

		> iframe {
			width: 100%;
			height: 100%;
			border: none;
		}
	}
}

/* Tooltip
 * ---------------------------------------------------------------- */
.ui-tooltip {
	pointer-events: none;
	display: block;
	position: absolute;
	z-index: 128;
	margin: 0;
	padding: 4px 8px;
	white-space: nowrap;
	font-size: 0.8em;
	color: #fff;
	background: rgba(0, 0, 0, 0.8);
	border-radius: 4px;

	&:before {
		content: "";
		display: block;
		position: absolute;
		bottom: -8px;
		left: ~"calc(50% - 4px)";
		border-top: solid 4px rgba(0, 0, 0, 0.8);
		border-right: solid 4px transparent;
		border-bottom: solid 4px transparent;
		border-left: solid 4px transparent;
	}
}

/* Tag input
 * ---------------------------------------------------------------- */
input.tagit-hidden-field {
	display: none;
}

.ui-taginput {
	user-select: text;
	-moz-user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
	display: block;
	float: left;
	overflow: auto;
	padding: 1px 5px;
	margin-left: inherit; /* usually we don't want the regular ul margins. */
	margin-right: inherit;
	cursor: text;
	list-style: none;

	li {
		user-select: text;
		-moz-user-select: text;
		-webkit-user-select: text;
		-ms-user-select: text;
		display: block;
		float: left;
		margin: 2px 5px 2px 0;
		cursor: text;
	}

	li.tagit-choice {
		position: relative;
		line-height: inherit;
	}

	li.tagit-choice-read-only {
		padding: 0;
	}

	li.tagit-choice-editable {
		padding: 0 18px 0 0;
	}

	li.tagit-new {
		padding: 0;
	}

	li.tagit-choice a.tagit-label {
		cursor: pointer;
		text-decoration: none;
	}

	li.tagit-choice .tagit-close {
		cursor: pointer;
		position: absolute;
		right: .1em;
		top: 50%;
		margin-top: -8px;
		line-height: 17px;
	}
	/* used for some custom themes that don't need image icons */
	li.tagit-choice .tagit-close .text-icon {
		display: none;
	}

	li.tagit-choice input {
		user-select: text;
		-moz-user-select: text;
		-webkit-user-select: text;
		-ms-user-select: text;
		display: block;
		float: left;
		margin: 2px 5px 2px 0;
		cursor: text;
	}

	input[type="text"] {
		user-select: text;
		-moz-user-select: text;
		-webkit-user-select: text;
		-ms-user-select: text;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		border: none;
		margin: 0;
		padding: 4px;
		width: inherit;
		cursor: text;
		background-color: inherit;
		outline: none;
	}
}

{'fraction_non_alphanumeric': 0.1379569046096325, 'fraction_numerical': 0.03481822206916908, 'mean_word_length': 1.364939937756319, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 304, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3825830', 'n_tokens_mistral': 49378, 'n_tokens_neox': 27709, 'n_words': 6146}