Kilokem/ConnectHub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frindscssOK

Browse Source
This commit is contained in:
Kilokem
2024-09-19 09:09:11 +02:00
parent 7fb4aff83e
commit ef58cba282
1 changed files with 58 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
css/friends.css
View File

@ -1,7 +1,6 @@
/* Base styles */
body {
font-family: Arial, sans-serif;
background-color: #121212;
margin: 0;
padding: 0;
display: flex;
@ -9,6 +8,29 @@ body {
align-items: center;
height: 100vh;
overflow: hidden;
background-color: var(--background-color);
color: var(--text-color);
}
/* Light and dark mode variables */
:root {
--background-color: #121212;
--text-color: #ffffff;
--primary-color: #aa00ff;
--secondary-color: #444;
--card-bg-color: rgba(20, 20, 20, 1);
--card-border-color: rgb(118, 36, 194);
--header-bg-color: #1e1e1e;
}
[data-theme='light'] {
--background-color: #f0f0f0;
--text-color: #000000;
--primary-color: #6200ee;
--secondary-color: #ddd;
--card-bg-color: #ffffff;
--card-border-color: #6200ee;
--header-bg-color: #ffffff;
}
/* Usercontainer styling */
@ -25,7 +47,7 @@ body {
/* Filter container styles */
.filter {
width: 100%; /* Full width of the usercontainer */
background: #1e1e1e;
background: var(--header-bg-color);
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 10px;
@ -58,32 +80,51 @@ body {
padding: 10px 20px;
cursor: pointer;
text-align: center;
background: #333;
background: var(--secondary-color);
border-radius: 8px;
color: #fff;
color: var(--text-color);
transition: background 0.3s, color 0.3s;
}
.input:checked + .label {
background: #aa00ff;
color: #fff;
background: var(--primary-color);
color: var(--text-color);
}
.input:not(:checked) + .label:hover {
background: #444;
background: var(--secondary-color);
}
/* Search input styles */
.search-input {
width: 100%; /* Full width of the filter */
background-color: #1a1a1a;
background-color: var(--header-bg-color);
border: none;
padding: 10px;
border-radius: 10px;
outline: none;
color: white;
color: var(--text-color);
margin-top: 10px; /* Space between the tabs and search input */
box-sizing: border-box;
animation: rotateShadow 2s infinite linear;
}
@keyframes rotateShadow {
0% {
box-shadow: -2px -2px 8px 1px var(--primary-color), 2px 2px 8px 1px #3700ff;
}
25% {
box-shadow: -2px 2px 8px 1px var(--primary-color), 2px -2px 8px 1px #3700ff;
}
50% {
box-shadow: 2px 2px 8px 1px var(--primary-color), -2px -2px 8px 1px #3700ff;
}
75% {
box-shadow: 2px -2px 8px 1px var(--primary-color), -2px 2px 8px 1px #3700ff;
}
100% {
box-shadow: -2px -2px 8px 1px var(--primary-color), 2px 2px 8px 1px #3700ff;
}
}
/* Usercards container */
@ -99,14 +140,15 @@ body {
.usercard {
max-width: 360px;
border-radius: 1rem;
background-color: rgba(20, 20, 20, 1);
background-color: var(--card-bg-color);
padding: 1rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.biocard {
max-width: 460px;
border-radius: 1rem;
background-color: rgb(118, 36, 194);
background-color: var(--card-border-color);
padding: 4rem;
margin-top: 1rem;
}
@ -122,8 +164,8 @@ body {
height: 7rem;
width: 7rem;
border-radius: 0.5rem;
background-color: rgb(118, 36, 194);
background: linear-gradient(to bottom right, rgb(118, 36, 194), rgb(185, 128, 240));
background-color: var(--card-border-color);
background: linear-gradient(to bottom right, var(--card-border-color), rgb(185, 128, 240));
}
.info {
@ -136,7 +178,7 @@ body {
.name {
font-weight: 500;
color: rgba(255, 255, 255, 1);
color: var(--text-color);
}
.userid {
@ -165,7 +207,7 @@ body {
.state-value {
font-weight: 700;
color: rgb(118, 36, 194);
color: var(--card-border-color);
}
.request {
@ -180,6 +222,6 @@ body {
}
.request:hover {
background-color: rgb(118, 36, 194);
background-color: var(--card-border-color);
color: #fff;
}