diff --git a/prototype/magico-pracownik/assets/css/style.css b/prototype/magico-pracownik/assets/css/style.css index cbdc5d0..ba123b3 100644 --- a/prototype/magico-pracownik/assets/css/style.css +++ b/prototype/magico-pracownik/assets/css/style.css @@ -295,3 +295,48 @@ html { color: #8592a3 !important; } +/* Custom Nav Pills */ +.nav-pills .nav-link { + background-color: var(--white); + color: var(--text-muted); + transition: all 0.2s ease-in-out; +} +.nav-pills .nav-link.active, .nav-pills .show > .nav-link { + background-color: var(--primary-color) !important; + color: var(--white) !important; + box-shadow: 0 0.125rem 0.25rem rgba(105, 108, 255, 0.4) !important; +} + +/* Floating Action Button (FAB) */ +.fab-wrapper { + position: fixed; + bottom: 30px; + left: 50%; + transform: translateX(-50%); + width: 100%; + max-width: 500px; /* same as body max-width */ + display: flex; + justify-content: flex-end; + padding-right: 20px; + z-index: 1050; + pointer-events: none; /* Allows clicking through the wrapper */ +} + +.fab-btn { + pointer-events: auto; + width: 60px; + height: 60px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 2rem; + box-shadow: 0 0.5rem 1rem rgba(105, 108, 255, 0.4); + transition: transform 0.2s ease, box-shadow 0.2s ease; + padding: 0; +} + +.fab-btn:active { + transform: scale(0.92); +} + diff --git a/prototype/magico-pracownik/home.php b/prototype/magico-pracownik/home.php index e8d4744..3149796 100644 --- a/prototype/magico-pracownik/home.php +++ b/prototype/magico-pracownik/home.php @@ -5,14 +5,67 @@ include 'header.php';
-