Maketank Theme migration

templates/Maketank/src/scss/components/_alert.scss

@@ -0,0 +1,7 @@
+.alert {
+	@extend .shadow-sm;
+
+	p:last-of-type {
+		margin-bottom: 0;
+	}
+}

templates/Maketank/src/scss/components/_card.scss

@@ -0,0 +1,24 @@
+.card {
+	@extend .shadow-sm;
+	margin-bottom: $spacer * 1.5;
+
+	.card-header {
+		border-bottom: $border-color solid 1px;
+		font-weight: bold;
+	}
+
+	.card-body {
+		p {
+			@extend .card-text;
+		}
+	}
+
+	&.deactivated {
+		@extend .text-muted;
+		background: lighten($light-bg, 3%);
+
+		i {
+			@extend .text-muted;
+		}
+	}
+}

templates/Maketank/src/scss/components/_dropdown.scss

@@ -0,0 +1,12 @@
+.dropdown {
+	.dropdown-menu {
+		.dropdown-item {
+			i {
+				width: 1rem;
+				margin-right: 1rem;
+				text-align: center;
+				color: $text-muted;
+			}
+		}
+	}
+}

templates/Maketank/src/scss/components/_footer.scss

@@ -0,0 +1,13 @@
+footer {
+	@extend .small;
+
+	a {
+		@extend .text-muted;
+		@extend .text-decoration-none;
+	}
+
+	.footer-link:not(:last-child):after {
+		content: ' •';
+		padding: 0 0.25rem;
+	}
+}

templates/Maketank/src/scss/components/_form.scss

@@ -0,0 +1 @@
+// wip

templates/Maketank/src/scss/components/_generic.scss

@@ -0,0 +1,89 @@
+// Fontawesome
+@import "~@fortawesome/fontawesome-free/scss/fontawesome";
+@import "~@fortawesome/fontawesome-free/css/all";
+
+// Generic
+.header-logo {
+	height: 24px;
+}
+
+.form-control-plaintext {
+	outline: none;
+}
+
+.form-control[readonly] {
+	background: rgba(0, 0, 0, .15);
+}
+
+.page-header {
+	margin-bottom: 2rem;
+
+	&:after {
+		margin-top: .5rem;
+		display: block;
+		height: 3px;
+		width: 100px;
+		background: $froxlor-800;
+		border-radius: 3px;
+		content: ' ';
+	}
+}
+
+.alert-icon {
+	padding: .5rem;
+	background: rgba(0, 0, 0, .15);
+	text-align: center;
+	border-radius: $border-radius;
+	margin-right: .75rem;
+}
+
+.max-w-420 {
+	max-width: 420px;
+}
+
+.max-w-xs {
+	max-width: 575.98px;
+}
+
+.max-w-lg {
+	max-width: 991.98px;
+}
+
+.rounded-tl-bl {
+	border-radius: $border-radius 0 $border-radius 0;
+}
+
+.progress-thin {
+	height: .5rem;
+}
+
+.logcontent {
+	width: 100%;
+}
+
+.formfield {
+	padding: 1rem $spacer;
+	border-bottom: $border-color solid 1px;
+
+	&:last-child {
+		border-bottom: none;
+	}
+}
+
+.focus-none {
+	outline: none !important;
+	box-shadow: none !important;
+}
+
+.field-image-preview {
+	max-height: 5em;
+}
+
+#phpinfotable {
+	table-layout: fixed;
+	word-wrap: break-word;
+}
+
+a {
+	text-decoration: none;
+}

templates/Maketank/src/scss/components/_heading.scss

@@ -0,0 +1,13 @@
+.heading {
+	color: $heading-color;
+	background-color: $heading-bg;
+	border-top: $heading-border-color solid 1px;
+}
+
+.heading h5 {
+	color: $heading-color;
+}
+
+.heading span {
+
+}

templates/Maketank/src/scss/components/_navbar.scss

@@ -0,0 +1,60 @@
+.navbar {
+	z-index: 20;
+}
+
+.navbar-brand {
+	padding: 1rem 0;
+}
+
+@include media-breakpoint-up(md) {
+	.navbar {
+		background: $navbar-bg;
+
+		.navbar-brand {
+			background: $dark;
+			width: $sidebar-width;
+			margin-right: 0;
+			flex-shrink: 0;
+		}
+	}
+}
+
+@include media-breakpoint-down(md) {
+	.navbar {
+		background: $navbar-bg-mobile;
+
+		.navbar-nav {
+			flex-direction: row;
+			gap: .75rem;
+
+			.nav-link {
+				color: $white;
+
+				&:hover {
+					color: rgba(255,255,255,.45);
+				}
+			}
+
+			.dropdown-menu {
+				position: absolute;
+			}
+		}
+
+		#collapseSearch {
+			border-top: solid 1px $dark;
+
+			#search {
+				margin-bottom: 1.125rem;
+			}
+		}
+	}
+
+	.navbar-light {
+		.navbar-toggler {
+			border-color: transparent;
+		}
+		.navbar-toggler-icon {
+			background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+		}
+	}
+}

templates/Maketank/src/scss/components/_search.scss

@@ -0,0 +1,34 @@
+#search {
+	display: flex;
+	position: relative;
+
+	i {
+		margin-right: .5rem;
+	}
+
+	.search-input {
+		color: $body-color;
+		outline: none;
+		border: none;
+		background: transparent;
+	}
+
+	.search-results-box {
+		position: absolute;
+		top: 2.75rem;
+		z-index: 50;
+		width: 70vh;
+		max-height: 50vh;
+
+		background: $search-bg;
+		border: $border-color solid 1px;
+		border-radius: 0 0 $border-radius $border-radius;
+
+		.search-results {
+			width: 100%; /** same as .search-results-box **/
+			max-height: calc(50vh - 1.25em); /** same as .search-results-box - border (top/bottom) **/
+			overflow: auto;
+			border-radius: $border-radius;
+		}
+	}
+}

templates/Maketank/src/scss/components/_sidebar.scss

@@ -0,0 +1,50 @@
+.sidebar, .sub-sidebar {
+	width: $sidebar-width;
+	z-index: 10;
+}
+
+.sidebar {
+	@extend .shadow;
+	width: $sidebar-width;
+
+	&.collapsing {
+		transition: none;
+	}
+
+	.user-info {
+		background: darken($dark, 2);
+	}
+
+	> .nav {
+		> .nav-item {
+			> .nav-link {
+				i {
+					margin-right: 1rem;
+					width: 1rem;
+					text-align: center;
+					opacity: .5;
+				}
+
+				&:not(.collapsed) {
+					background: darken($dark, 4);
+					border-left: $primary solid 3px;
+					padding-left: calc(1rem - 3px);
+				}
+			}
+
+			> .collapse, > .collapsing {
+				background: darken($dark, 2);
+
+				a {
+					opacity: .78;
+					margin-left: 1rem;
+				}
+			}
+		}
+	}
+}
+
+.sub-sidebar {
+	@extend .shadow-sm;
+	background: $white;
+}

templates/Maketank/src/scss/dark.scss

@@ -0,0 +1,35 @@
+@charset "UTF-8";
+
+// Bootstrap
+@import "variables/dark";
+@import "~bootstrap/scss/bootstrap";
+
+// Theme
+@import "components/generic";
+@import "components/alert";
+@import "components/card";
+@import "components/dropdown";
+@import "components/footer";
+@import "components/form";
+@import "components/heading";
+@import "components/navbar";
+@import "components/sidebar";
+@import "components/search";
+
+.navbar-light {
+	.navbar-toggler {
+		border-color: transparent;
+	}
+	.navbar-toggler-icon {
+		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+	}
+}
+
+tr.bg-info td,
+tr.bg-warning td {
+	color: $dark-bg !important;
+}
+
+.badge.bg-secondary {
+	color: $gray-700;
+}

templates/Maketank/src/scss/main.scss

@@ -0,0 +1,17 @@
+@charset "UTF-8";
+
+// Bootstrap
+@import "variables/main";
+@import "~bootstrap/scss/bootstrap";
+
+// Theme
+@import "components/generic";
+@import "components/alert";
+@import "components/card";
+@import "components/dropdown";
+@import "components/footer";
+@import "components/form";
+@import "components/heading";
+@import "components/navbar";
+@import "components/sidebar";
+@import "components/search";

templates/Maketank/src/scss/variables/_dark.scss

@@ -0,0 +1,66 @@
+@import "main";
+
+// Color
+$primary: $froxlor-700;
+$secondary: $gray-500;
+$info: $froxlor-800;
+
+// Body
+$body-bg: $gray-900;
+$body-color: $gray-100;
+
+// Borders
+$border-color: $gray-900;
+$border-color-translucent: $gray-900;
+
+// Link
+$link-color: $froxlor-500;
+$nav-link-color: $body-color;
+
+// List groups
+$list-group-bg: $gray-800;
+$list-group-color: $body-color;
+$list-group-hover-bg: $gray-700;
+$list-group-action-color: $body-color;
+
+// Navbar
+$navbar-bg: $gray-800;
+$navbar-bg-mobile: $navbar-bg;
+$navbar-light-color: $gray-200;
+$navbar-light-hover-color: $gray-500;
+$navbar-light-active-color: $gray-500;
+
+// Sidebar
+
+// Card
+$card-bg: $gray-800;
+$card-border-color: $gray-600;
+
+// Heading
+$heading-bg: $gray-800;
+$heading-color: $body-color;
+$heading-border-color: rgba(0,0,0,0.15);
+
+// Dropdown
+$dropdown-bg: $gray-800;
+$dropdown-color: $gray-100;
+$dropdown-link-color: $gray-100;
+$dropdown-link-hover-bg: $gray-900;
+
+// Modal
+$modal-content-bg: $gray-800;
+
+// Form control
+$input-bg: $gray-900;
+$input-border-color: $black;
+$input-group-addon-bg: $gray-800;
+
+// Progress bar
+$progress-bg: $gray-900;
+
+// Search
+$search-bg: $gray-800;
+
+// Popover
+$popover-bg: $gray-800;
+$popover-body-color: $gray-100;

templates/Maketank/src/scss/variables/_main.scss

@@ -0,0 +1,86 @@
+// CI
+$froxlor-50: #e1f4fa;
+$froxlor-100: #b3e3f1;
+$froxlor-200: #84d0e9;
+$froxlor-300: #5abde0;
+$froxlor-400: #3eb0db;
+$froxlor-500: #29a2d6;
+$froxlor-600: #2395c8;
+$froxlor-700: #1a83b6;
+$froxlor-800: #1872a2;
+$froxlor-900: #0e5380;
+
+// Gray
+$white:    #fff;
+$gray-100: #f8f9fa;
+$gray-200: #e9ecef;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #6c757d;
+$gray-700: #495057;
+$gray-800: #343a40;
+$gray-900: #212529;
+$black:    #000;
+
+// Colors
+$light: $gray-100;
+$primary: $froxlor-800;
+$secondary: $gray-600;
+$info: $froxlor-900;
+$warning: #FBBF24;
+$danger: #BE123C;
+$success: #059669;
+
+// Body
+$light-bg: $gray-100;
+$dark-bg: $gray-800;
+
+// Typography
+$light-font-color: $gray-800;
+$dark-font-color: $gray-100;
+
+$alert-bg-scale: 0;
+$alert-color-scale: 0;
+$alert-border-width: 0;
+
+$list-group-item-color-scale: 0;
+$list-group-item-bg-scale: 0;
+
+$input-bg: lighten($light-bg, 5%);
+
+$font-size-root: 16px;
+
+// Spacing
+$spacer: 1.25rem;
+$enable-negative-margins: true;
+
+// Body
+$body-bg: $light-bg;
+$body-color: $light-font-color;
+
+// Borders
+// $border-radius: 0.5rem;
+
+// Links
+$link-color: $froxlor-800;
+
+// Navbar
+$navbar-bg: $white;
+$navbar-bg-mobile: $gray-900;
+
+// Sidebar
+$sidebar-width: 256px;
+
+// Card
+$card-cap-bg: none;
+$card-cap-padding-y: $spacer;
+$card-border-width: 0;
+
+// Heading
+$heading-bg: $navbar-bg;
+$heading-color: $body-color;
+$heading-border-color: #dee2e6;
+
+// Search
+$search-bg: $navbar-bg;