scss

resources/scss/_ads.scss

@@ -0,0 +1,23 @@
+.adsbygoogle-container {
+	overflow: hidden;
+
+	.adsbygoogle {
+		display: block;
+		position: relative;
+		background-color: #f8f8f8;
+
+		&[data-adsbygoogle-status="done"] {
+			background-color: transparent;
+		}
+
+		aside.sidebar & {
+			height: 600px;
+		}
+	}
+
+	.note {
+		text-align: center;
+		color: #444;
+		font-size: 0.6rem;
+	}
+}

resources/scss/_body.scss

@@ -0,0 +1,7 @@
+body {
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}

resources/scss/_footer.scss

@@ -0,0 +1,10 @@
+footer {
+	padding: 2rem 0 0.5rem;
+	text-align: center;
+	font-size: 0.8rem;
+
+	.balaton {
+		height: 1.6rem;
+		vertical-align: middle;
+	}
+}

resources/scss/_header.scss

@@ -0,0 +1,13 @@
+header {
+	background-color: #000;
+	padding: 0.5rem 0;
+	text-align: center;
+	margin-bottom: 0.5rem;
+	color: #fff;
+	font-size: 2.2rem;
+
+	.logo {
+		height: 3rem;
+		margin: 0.5rem 0 0.3rem;
+	}
+}

resources/scss/_main.scss

@@ -0,0 +1,57 @@
+section.presets {
+	text-align: center;
+	margin-bottom: 0.5rem;
+
+	.btn {
+		&.btn-outline-dark{
+			&:hover {
+				background-color: #666;
+			}
+		}
+
+		img {
+			height: 1.1rem;
+			vertical-align: text-bottom;
+		}
+	}
+}
+
+main {
+	flex: 1 1 auto;
+
+	.commands {
+		margin-bottom: 1rem;
+	}
+
+	.file {
+		margin-bottom: 2rem;
+
+		.btn-clipboard {
+			font-size: 0;
+			padding: 0.2rem 0.4rem 0.05rem;
+			vertical-align: text-bottom;
+		}
+	}
+
+	.commands,
+	.file .code {
+		overflow-x: auto;
+		font-size: 0.75rem;
+		line-height: 1.25;
+		background-color: #f8f8f8;
+
+		pre {
+			margin-bottom: 0;
+			font-size: inherit;
+
+			code {
+				display: block;
+				padding: 0.6rem;
+				-moz-tab-size: 4;
+				tab-size: 4;
+				overflow: visible;
+				overflow-x: visible;
+			}
+		}
+	}
+}

resources/scss/_sidebar.scss

@@ -0,0 +1,142 @@
+aside.options {
+	.card {
+		background-color: #f8f8f8;
+
+		& + .card {
+			margin-top: 1rem;
+		}
+
+		.card-body {
+			padding: 0.25rem 0.5rem 0.5rem;
+			font-size: 0.9rem;
+
+			.form-group {
+				margin-bottom: 0.5rem;
+
+				&:last-child {
+					margin-bottom: 0;
+				}
+			}
+
+			.form-subgroup {
+				margin-left: 0.35rem;
+				border-left: 2px solid #ced4da;
+				padding-left: 0.5rem;
+
+				.form-subgroup {
+					margin-left: 0;
+					border-left: 1px solid #d7e0ea;
+					padding-left: 0.4rem;
+				}
+
+				.form-check + .form-subgroup {
+					margin-left: 5.5px;
+				}
+			}
+
+			.form-label {
+				margin-bottom: 0.15rem;
+				margin-left: 0.15rem;
+			}
+
+			.form-control {
+				&.domain {
+					&::placeholder {
+						color: #000;
+					}
+
+					&:placeholder-shown {
+						border-color: #3131ff;
+					}
+				}
+
+				&[type="text"],
+				&[type="email"] {
+					&:placeholder-shown {
+						background-color: #fefefe;
+					}
+				}
+			}
+
+			.form-check-label {
+				cursor: pointer;
+				-webkit-user-select: none;
+				-moz-user-select: none;
+				-ms-user-select: none;
+				user-select: none;
+			}
+
+			.row {
+				&.no-gutters {
+					& + .no-gutters {
+						margin-top: 0.5rem;
+					}
+
+					.col-md-6 {
+						&:first-child {
+							padding-right: 3px;
+						}
+
+						&:last-child {
+							padding-left: 3px;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+aside.sidebar {
+	@include media-breakpoint-up(lg) {
+		margin-top: -2.4rem;
+	}
+
+	.github-link {
+		text-align: center;
+		font-size: 1rem;
+		margin-bottom: 0.5rem;
+
+		small {
+			font-size: 90%;
+		}
+
+		img {
+			height: 1.2rem;
+			vertical-align: -4px;
+		}
+	}
+
+	.github-star {
+		width: 132px;
+		height: 30px;
+		display: block;
+		border: 0;
+		overflow: hidden;
+		margin: 0 auto 0.25rem;
+	}
+
+	.buttons {
+		text-align: center;
+		margin-top: 1.5rem;
+
+		.btn {
+			&.btn-download {
+				margin-bottom: 0.25rem;
+
+				img {
+					vertical-align: -2px;
+					margin-right: 0.1rem;
+					height: 1rem;
+				}
+			}
+
+			&.btn-reset {
+				img {
+					vertical-align: -3px;
+					height: 0.9rem;
+				}
+			}
+		}
+	}
+}

resources/scss/_typography.scss

@@ -0,0 +1,6 @@
+@import 'https://fonts.googleapis.com/css?family=Quicksand:400,700';
+
+body {
+	font-family: 'Quicksand', sans-serif;
+	font-display: swap;
+}

resources/scss/_utilities.scss

@@ -0,0 +1,25 @@
+[ng-cloak] {
+	display: none;
+}
+
+.clipboard-success {
+	font-size: 0.8rem;
+	color: #28a745;
+	font-weight: 700;
+}
+
+tooltip {
+	tip {
+		min-width: 150px;
+		padding: 4px 12px;
+	}
+
+	tip-tip {
+		line-height: 1.1;
+		display: block;
+
+		&._small {
+			font-size: 0.9rem;
+		}
+	}
+}

resources/scss/app.scss

@@ -0,0 +1,16 @@
+@import 'vendor/bootstrap';
+@import 'vendor/highlight-js';
+@import 'vendor/angular-tooltips';
+
+@import 'typography';
+
+@import 'body';
+@import 'header';
+@import 'main';
+@import 'sidebar';
+@import 'footer';
+
+@import 'utilities';
+@import 'tooltips';
+@import 'ads';
+

resources/scss/vendor/_angular-tooltips.scss

@@ -0,0 +1 @@
+@import '../../../node_modules/angular-tooltips/lib/angular-tooltips';

resources/scss/vendor/_bootstrap.scss

@@ -0,0 +1,35 @@
+@import '../../../node_modules/bootstrap/scss/functions';
+@import '../../../node_modules/bootstrap/scss/variables';
+@import '../../../node_modules/bootstrap/scss/mixins';
+// @import '../../../node_modules/bootstrap/scss/root';
+@import '../../../node_modules/bootstrap/scss/reboot';
+// @import '../../../node_modules/bootstrap/scss/type';
+// @import '../../../node_modules/bootstrap/scss/images';
+@import '../../../node_modules/bootstrap/scss/code';
+@import '../../../node_modules/bootstrap/scss/grid';
+// @import '../../../node_modules/bootstrap/scss/tables';
+@import '../../../node_modules/bootstrap/scss/forms';
+@import '../../../node_modules/bootstrap/scss/buttons';
+// @import '../../../node_modules/bootstrap/scss/transitions';
+// @import '../../../node_modules/bootstrap/scss/dropdown';
+// @import '../../../node_modules/bootstrap/scss/button-group';
+@import '../../../node_modules/bootstrap/scss/input-group';
+@import '../../../node_modules/bootstrap/scss/custom-forms';
+// @import '../../../node_modules/bootstrap/scss/nav';
+// @import '../../../node_modules/bootstrap/scss/navbar';
+@import '../../../node_modules/bootstrap/scss/card';
+// @import '../../../node_modules/bootstrap/scss/breadcrumb';
+// @import '../../../node_modules/bootstrap/scss/pagination';
+// @import '../../../node_modules/bootstrap/scss/badge';
+// @import '../../../node_modules/bootstrap/scss/jumbotron';
+// @import '../../../node_modules/bootstrap/scss/alert';
+// @import '../../../node_modules/bootstrap/scss/progress';
+// @import '../../../node_modules/bootstrap/scss/media';
+// @import '../../../node_modules/bootstrap/scss/list-group';
+// @import '../../../node_modules/bootstrap/scss/close';
+// @import '../../../node_modules/bootstrap/scss/modal';
+// @import '../../../node_modules/bootstrap/scss/tooltip';
+// @import '../../../node_modules/bootstrap/scss/popover';
+// @import '../../../node_modules/bootstrap/scss/carousel';
+// @import '../../../node_modules/bootstrap/scss/utilities';
+// @import '../../../node_modules/bootstrap/scss/print';

resources/scss/vendor/_highlight-js.scss

@@ -0,0 +1 @@
+@import '../../../node_modules/highlight.js/styles/github';