sidebar - vertical align center, color change
This commit is contained in:
@@ -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>
|
||||||
|
19
style.css
19
style.css
@@ -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 {
|
||||||
|
Reference in New Issue
Block a user