sidebar - vertical align center, color change

This commit is contained in:
2025-08-05 15:23:16 +00:00
parent 63ec0ebaa8
commit d7147b6c81
2 changed files with 17 additions and 6 deletions

View File

@@ -6,11 +6,11 @@
<title>Safebox</title> <title>Safebox</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Switzer:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap"/> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Switzer:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
<link rel="stylesheet" href="style.css?t=1" /> <link rel="stylesheet" href="style.css?t=4" />
</head> </head>
<body> <body>
<div class="sidebar"> <div class="sidebar">
<div> <div class="sidebar-top">
<div id="logo" class="logo"> <div id="logo" class="logo">
<img src="/img/logo.png" alt="Safebox"/> <img src="/img/logo.png" alt="Safebox"/>
<span>Safebox</span> <span>Safebox</span>

View File

@@ -1,5 +1,5 @@
:root { :root {
--highlight-color: #F9DB54; --highlight-color: #FFB806;
} }
body { body {
@@ -96,16 +96,24 @@
background-color: #101214; background-color: #101214;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/*height: 100vh;*/
justify-content: space-between; justify-content: space-between;
padding: 20px 0;
margin: 20px; margin: 20px;
border-radius: 20px; border-radius: 20px;
transition: width 0.3s; transition: width 0.3s;
} }
.sidebar-top {
padding: 20px 0;
overflow-y: auto;
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center; /* ez teszi középre függőlegesen a menüt */
}
.logo { .logo {
text-align: center; text-align: center;
margin-bottom: 40px;
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
display: flex; display: flex;
@@ -121,6 +129,8 @@
.menu { .menu {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; /* középre igazít függőlegesen */
flex-grow: 1;
gap: 5px; gap: 5px;
padding: 0 10px; padding: 0 10px;
} }
@@ -277,13 +287,14 @@
} }
.yellow-row { .yellow-row {
flex-shrink: 0;
max-width:250px; max-width:250px;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
box-sizing: border-box; box-sizing: border-box;
margin: 0px; margin: 0px;
width: 100%; width: 100%;
padding: 0 20px; padding: 0px 20px 20px 20px;
} }
.yellow-box { .yellow-box {