103 lines
2.1 KiB
CSS
103 lines
2.1 KiB
CSS
|
:root {
|
||
|
|
--primary-color: #102037; /* Definieren Sie die primäre Farbe */
|
||
|
|
--secondary-color: #f78b47; /* Definieren Sie die sekundäre Farbe */
|
||
|
|
--link-default-color: #ffffff; /* Definieren Sie die Link-Hover-Farbe */
|
||
|
|
--link-hover-color: #ffcc00; /* Definieren Sie die Link-Hover-Farbe */
|
||
|
|
--link-active-color: #ffcc00; /* Definieren Sie die Link-Hover-Farbe */
|
||
|
|
--background-color: #d4c4c4; /* Definieren Sie die Hintergrundfarbe */
|
||
|
|
--nav-background-color: #102037; /* Definieren Sie die Hintergrundfarbe */
|
||
|
|
--box-background-color: #102037;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
color: #ffffff;
|
||
|
|
background-color: var(--background-color);
|
||
|
|
}
|
||
|
|
.light {
|
||
|
|
color: #cdcdcd;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: small;
|
||
|
|
}
|
||
|
|
.sidebar {
|
||
|
|
height: 100%;
|
||
|
|
position: sticky;
|
||
|
|
top: 0;
|
||
|
|
background-color: var(--background-color);
|
||
|
|
}
|
||
|
|
.main-content {
|
||
|
|
background-color: var(--background-color);
|
||
|
|
}
|
||
|
|
.profile-card,
|
||
|
|
.story,
|
||
|
|
.post,
|
||
|
|
.who-to-follow,
|
||
|
|
.news {
|
||
|
|
background-color: var(--box-background-color);
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 15px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||
|
|
}
|
||
|
|
.headbar {
|
||
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||
|
|
}
|
||
|
|
.profile-card img,
|
||
|
|
.who-to-follow img {
|
||
|
|
width: 60px;
|
||
|
|
height: 60px;
|
||
|
|
object-fit: cover;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
.story input {
|
||
|
|
border-radius: 30px;
|
||
|
|
}
|
||
|
|
.story button {
|
||
|
|
border-radius: 20px;
|
||
|
|
}
|
||
|
|
.post img {
|
||
|
|
width: 100%;
|
||
|
|
border-radius: 15px;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
.who-to-follow button {
|
||
|
|
border-radius: 20px;
|
||
|
|
}
|
||
|
|
.navbar {
|
||
|
|
background-color: var(--nav-background-color);
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
.navbar-nav .nav-link {
|
||
|
|
color: var(--link-default-color)
|
||
|
|
}
|
||
|
|
|
||
|
|
.navbar-nav .nav-link:hover {
|
||
|
|
color: var(--link-hover-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.navbar-nav .nav-link.active {
|
||
|
|
color: var(--link-active-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: #ffcc00;
|
||
|
|
}
|
||
|
|
a:hover {
|
||
|
|
color: #c07427;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
display:inline;
|
||
|
|
width: 50px;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
background-color: var(--nav-background-color);
|
||
|
|
padding: 0;
|
||
|
|
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.errormsg {
|
||
|
|
color: red;
|
||
|
|
font-size: 15px;
|
||
|
|
}
|