From 06d3c9ca5d6a6ef999709623bbadb924e3c0c5d5 Mon Sep 17 00:00:00 2001
From: SEBASTIAN JN <sebastianjnuwu@gmail.com>
Date: Sat, 24 Aug 2024 18:14:10 -0300
Subject: [PATCH] update cdn/css/navbar.css

---
 cdn/css/navbar.css | 188 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 188 insertions(+)

diff --git a/cdn/css/navbar.css b/cdn/css/navbar.css
index e69de29..975778e 100644
--- a/cdn/css/navbar.css
+++ b/cdn/css/navbar.css
@@ -0,0 +1,188 @@
+
+/*
+ * # Navbar Standing
+ *
+ * @description
+ * Estilo para a barra de navegação principal, responsiva para telas de computador.
+ * Inclui configurações de layout, animações e interações de usuário.
+*/
+ 
+#navbar-standing {
+	position: relative;
+	display: flex;
+	padding: 10px;
+	justify-content: space-between;
+	z-index: 10;
+	align-items: center;
+	background: linear-gradient(to bottom, var(--layout), var(--layout-dark));
+}
+#navbar-standing:after {
+	content: '';
+	position: absolute;
+	bottom: -10px;
+	left: 0;
+	right: 0;
+	height: 20px;
+	background: linear-gradient(to bottom, var(--layout-dark), var(--layout));
+	border-radius: 55%;
+}
+#navbar-standing .status {
+	padding: 5px;
+	color: var(--text-color);
+	border-bottom: 1px solid #ccc;
+	cursor: pointer;
+	border-radius: 100px;
+	background-color: var(--layout-dark);
+	transition:
+		background-color 0.3s ease,
+		transform 0.1s ease;
+}
+#navbar-standing .status:hover,
+#navbar-standing .status:active {
+	transform: scale(0.95);
+}
+#navbar-standing .status span {
+	font-size: 12px;
+
+	color: var(--text-color);
+}
+#navbar-standing input[type='checkbox'] {
+	display: none;
+}
+#navbar-standing .menu-bt {
+	z-index: 999;
+	cursor: pointer;
+	position: relative;
+}
+#navbar-standing .menu-bt:before {
+	content: '\ef5b';
+	font-family: 'boxicons';
+	display: block;
+	line-height: initial;
+	width: 25px;
+	height: 25px;
+	font-size: 25px;
+	font-weight: normal;
+	transition: 0.5s;
+	color: var(--text-color);
+}
+#navbar-standing .menu-bt.right:before {
+	content: '\eb5f';
+	font-family: 'boxicons';
+}
+#navbar-standing [id*='menu-']:checked + .menu-bt:before {
+	color: var(--text-color);
+	transform: rotate(180deg);
+}
+#navbar-standing [id*='menu-']:checked ~ .nav-menu {
+	box-shadow:
+		0 0 12px rgba(0, 0, 0, 0.1),
+		0 0 32px rgba(0, 0, 0, 0.2);
+	transform: translate(0);
+}
+#navbar-standing .nav-menu {
+	position: fixed;
+	top: 0;
+	z-index: 998;
+	height: 100vh;
+	width: 80%;
+	max-width: 320px;
+	transition: 0.5s;
+	box-shadow:
+		0 0 12px rgba(0, 0, 0, 0),
+		0 0 32px rgba(0, 0, 0, 0);
+}
+#navbar-standing .nav-menu.right {
+	right: 0;
+	background: #222;
+	transform: translate(100%);
+}
+#navbar-standing .nav-menu h2 {
+	color: rgba(255, 255, 255, 0.5);
+	font-size: 0.85em;
+	margin: 0;
+	text-transform: uppercase;
+	padding: 32px 24px 14px 24px;
+}
+#navbar-standing .nav-menu h2:after {
+	content: '';
+	display: block;
+	width: 3em;
+	margin-top: 5px;
+	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+#navbar-standing .nav-menu a {
+	display: block;
+	color: var(--text-color);
+	padding: 14px 8px 14px 58px;
+	text-decoration: none;
+	position: relative;
+	border-radius: 3px;
+}
+#navbar-standing .nav-menu a:before {
+	margin-right: 14px;
+	font-size: 24px;
+	left: 20px;
+	top: 9px;
+	position: absolute;
+}
+#navbar-standing .nav-menu a:hover {
+	background-color: var(--layout-dark);
+}
+#navbar-standing .nav-menu .menu-scroll {
+	height: calc(100vh - 72px);
+	overflow-y: auto;
+	padding: 0 8px 24px 8px;
+	width: 100%;
+	margin-right: 8px;
+}
+#navbar-standing button {
+	padding: 8px;
+	border-radius: 14px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	font-size: 1rem;
+	font-weight: bold;
+	color: var(--text-color);
+	border: 1px solid var(--layout);
+	background: transparent;
+	cursor: pointer;
+	transition: all 0.6s ease;
+}
+#navbar-standing button:hover {
+	color: var(--layout-dark);
+	border-color: var(--layout-dark);
+}
+
+@media only screen and (min-width: 1024px) {
+	#navbar-standing {
+		padding: 15px 20px;
+		justify-content: space-between;
+	}
+	#navbar-standing .status {
+		padding: 10px 15px;
+		border-bottom: 2px solid #ccc;
+	}
+	#navbar-standing .status span {
+		font-size: 14px;
+	}
+	#navbar-standing .menu-bt:before {
+		width: 30px;
+		height: 30px;
+		font-size: 30px;
+	}
+	#navbar-standing .nav-menu {
+		width: 300px;
+		max-width: 400px;
+	}
+	#navbar-standing .nav-menu a {
+		padding: 20px 10px 20px 70px;
+		font-size: 1.2rem;
+	}
+	#navbar-standing button {
+		padding: 10px 15px;
+		font-size: 1.1rem;
+	}
+}