Akif9748/akf-forum
Akif9748/akf-forum
1
1
Fork 0
mirror of https://github.com/Akif9748/akf-forum.git synced 2024-11-22 12:00:41 +03:00
Code Issues Projects Releases Packages Wiki Activity

variables for css

Browse source
This commit is contained in:
Akif9748 2022-08-31 18:11:54 +03:00
parent 4b75334072
commit f2e4b174d0
15 changed files with 145 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
public/css/create_thread.css
View file

@ -1,5 +1,5 @@
.title {
color: #4d18e6;
color: var(--main);
font-weight: 700;
}
@ -16,8 +16,8 @@ form {
font-family: inherit;
display: block;
font-weight: 600;
color: #4c4c4c;
color: var(--input-clr);
width: 100%;
margin-bottom: 10px;
border: 2px solid #d9d9d9;
border: 2px solid var(--borders);
}

12
public/css/login.css
View file

@ -1,5 +1,5 @@
.title {
color: #4d18e6;
color: var(--main);
font-weight: 700;
}
@ -9,8 +9,8 @@ form {
flex-direction: column;
max-width: 500px;
margin: 0 auto;
width:100%;
padding:8px;
width: 100%;
padding: 8px;
}
@ -19,8 +19,8 @@ form {
font-family: inherit;
display: block;
font-weight: 600;
color: #4c4c4c;
color: var(--input-clr);
width: 100%;
margin-bottom: 10px;
border: 2px solid #d9d9d9;
}
border: 2px solid var(--borders);
}

37
public/css/navbar.css
View file

@ -24,12 +24,12 @@ a {
.logo {
padding: 10px;
font-size: 28px;
color: #4d18e6;
color: var(--main);
font-weight: 900;
}
.logo>span {
color: #606060;
color: var(--second);
}
.buttons {
@ -39,18 +39,18 @@ a {
}
.btn-primary {
color: #e8e8e8;
background-color: #4d18e6;
color: var(--btn-clr-1);
background-color: var(--main);
padding: 10px 20px 10px 20px;
border-radius: 4px;
font-weight: 700;
margin: 10px;
cursor: pointer;
border: 2px solid #4d18e6;
border: 2px solid var(--main);
}
.btn-danger {
color: #e8e8e8;
color: var(--btn-clr-1);
background-color: #ff0000;
padding: 0px 10px 0px 10px;
@ -63,26 +63,26 @@ a {
.btn-outline-primary {
color: #4d18e6;
color: var(--main);
padding: 10px 20px 10px 20px;
border-radius: 4px;
font-weight: 700;
margin: 10px;
cursor: pointer;
border: 2px solid #e2e2e2;
border: 2px solid var(--borders);
}
.btn-primary:hover {
color: #4d18e6;
color: var(--main);
background-color: rgba(0, 0, 0, 0);
border: 2px solid #4d18e6;
border: 2px solid var(--main);
}
.btn-outline-primary:hover {
border: 2px solid #4d18e6;
border: 2px solid var(--main);
}
.btn-danger:hover {
@ -101,8 +101,9 @@ a {
.menu-item {
padding: 10px;
font-weight: 700;
background-color: #606060;
color: #ffffff;
background-color: var(--second);
color: var(--menu-item);
border-radius: 5px;
width: 100%;
text-align: center;
@ -112,7 +113,7 @@ a {
}
.active-menu {
background-color: #4d18e6;
background-color: var(--main);
}
body {
@ -123,13 +124,13 @@ body {
.menu-item:hover {
background-color: #4d18e6;
background-color: var(--main);
}
.admin-bar {
font-size: 15px;
color: #ffffff;
background: #4d18e6;
color: var(--menu-item);
background: var(--main);
text-align: center;
}
@ -150,7 +151,7 @@ div.avatar {
justify-content: center;
font-size: 18px;
font-weight: 700;
color: #4d18e6;
color: var(--main);
}
@media (max-width: 992px) {

12
public/css/themes/black.css Normal file
View file

@ -0,0 +1,12 @@
:root {
--main: #4d18e6;
--btn-clr-1: #e8e8e8;
--menu-item: #ffffff;
--borders: #d9d9d9;
--input-clr: #414141;
--box-shadow: #c3c3c3;
--second: #747474;
--reaction-hover: #151515;
--t-username: #555;
background-color: #ffffff;
}

12
public/css/themes/default.css Normal file
View file

@ -0,0 +1,12 @@
:root {
--main: #4d18e6;
--btn-clr-1: #e8e8e8;
--menu-item: #ffffff;
--borders: #d9d9d9;
--input-clr: #414141;
--box-shadow: #c3c3c3;
--second: #747474;
--reaction-hover: #151515;
--t-username: #555;
background-color: #ffffff;
}

137
public/css/thread.css
View file

@ -1,16 +1,16 @@
.title {
color: #414141;
color: var(--input-clr);
font-weight: 700;
font-size: 36px;
}
.date {
color: gray;
color: var(--second);
}
.message {
max-width: 800px;
box-shadow: 0 0 5px 0 #c3c3c3;
box-shadow: 0 0 5px 0 var(--box-shadow);
margin: 10px auto;
padding: 20px;
display: flex;
@ -20,7 +20,7 @@
.message .left {
text-align: center;
border-right: 2px solid #d9d9d9;
border-right: 2px solid var(--borders);
}
.message .left img {
@ -31,7 +31,7 @@
}
.message .left .username {
color: #555;
color: var(--t-username);
}
.content {
@ -52,13 +52,13 @@
align-items: center;
gap: 5px;
padding: 4px;
color: #747474;
color: var(--second);
cursor: pointer;
transition: color 0.3s ease;
}
.reactions div:hover {
color: #151515;
color: var(--reaction-hover);
}
@ -68,7 +68,7 @@
.pagination {
box-shadow: 0 0 5px 0 #c3c3c3;
box-shadow: 0 0 5px 0 var(--box-shadow);
margin: 10px auto;
padding: 8px;
display: flex;
@ -81,7 +81,7 @@
.pagination .back,
.pagination .after {
color: #747474;
color: var(--second);
font-size: 26px;
cursor: pointer;
}
@ -94,9 +94,9 @@
}
.pagination .number {
color: #747474;
color: var(--second);
font-size: 22px;
border: 0 0 5px #747474;
border: 0 0 5px var(--second);
padding: 8px;
border-radius: 2px;
font-weight: 600;
@ -105,7 +105,7 @@
}
.pagination .number.active {
color: #4d18e6;
color: var(--main);
font-weight: 700;
}
@ -115,7 +115,7 @@
right: 20px;
font-size: 22px;
top: 10px;
color: #747474;
color: var(--second);
cursor: pointer;
}
@ -123,7 +123,7 @@
position: absolute;
top: 50px;
right: 0;
background-color: #e6e6e6;
background-color: var(--btn-clr-1);
width: 100px;
text-align: center;
display: none;
@ -138,69 +138,82 @@
margin: 8px;
cursor: pointer;
}
.dots-menu a:hover:nth-child(1){
color:#e70000}
.dots-menu a:hover:nth-child(2){
color:#4d18e6}
.dots-menu a:hover:nth-child(1) {
color: #e70000
}
.dots-menu a:hover:nth-child(2) {
color: var(--main);
}
/* Media Query */
@media(max-width:980px){
.message{
margin: 10px 20px;
max-width: 100%;
flex-direction:column;
position:relative;
@media(max-width:980px) {
.message {
margin: 10px 20px;
max-width: 100%;
flex-direction: column;
position: relative;
}
.message .left{
padding: 40px;
border:none;
border-bottom: 2px solid #d9d9d9;
.message .left {
padding: 40px;
border: none;
border-bottom: 2px solid var(--borders);
}
.message .left img{
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 5px;
position: absolute;
left: 20px;
top: 20px;
.message .left img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 5px;
position: absolute;
left: 20px;
top: 20px;
}
.message .left .username{
.message .left .username {
position: absolute;
top: 20px;
left: 80px;
}
.message .date:nth-of-type(3){
.message .date:nth-of-type(3) {
position: absolute;
right: 20px;
top: 20px;
}
.message .date:nth-of-type(2){
position: absolute;
right: 20px;
top: 40px;
right: 20px;
top: 20px;
}
.dots{
position: absolute;
right: auto;
top: 70px;
left: 40px;
.message .date:nth-of-type(2) {
position: absolute;
right: 20px;
top: 40px;
}
.dots-menu{
position: absolute;
left: 70px;
top: 60px;
width: 120px;
.dots {
position: absolute;
right: auto;
top: 70px;
left: 40px;
}
.dots-menu.active{
display:flex;
.dots-menu {
position: absolute;
left: 70px;
top: 60px;
width: 120px;
}
.content{
width:50%;
}
}
.dots-menu.active {
display: flex;
}
.content {
width: 50%;
}
}

4
public/css/threads.css
View file

@ -6,7 +6,7 @@
.threads-box {
width: 100%;
padding: 8px;
box-shadow: 0 0 5px 0 #cbcbcb;
box-shadow: 0 0 5px 0 var(--box-shadow);
display: flex;
justify-content: space-between;
margin: 0px 0px 8px 0px;
@ -15,7 +15,7 @@
}
.threads-box:hover {
background-color: #e2e2e2;
background-color: var(--borders);
}
.thread-box-title {

8
public/css/user.css
View file

@ -1,12 +1,12 @@
.title {
color: #4d18e6;
color: var(--main);
font-weight: 700;
}
.content {
display: flex;
flex-direction: column;
box-shadow: 0 0 5px 0 #bebebe;
box-shadow: 0 0 5px 0 var(--box-shadow);
max-width: 900px;
margin: 0 auto;
padding: 10px;
@ -22,10 +22,10 @@
}
.box-title{
color: #4d18e6;
color: var(--main);
font-weight: 300;
}
.box-value {
color: #606060;
color: var(--second);
font-weight: 300;
}

2
public/css/users.css
View file

@ -12,7 +12,7 @@
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 0 5px 0 #beb9b9;
box-shadow: 0 0 5px 0 var(--box-shadow);
max-width:500px;
}

4
views/admin.ejs
View file

@ -25,12 +25,12 @@
</style>
<div>
<h1 style="color: #4d18e6;">Welcome to the admin panel of the forum, <%= user.name %>!</h1>
<h1 style="color: var(--main);">Welcome to the admin panel of the forum, <%= user.name %>!</h1>
<a class="btn-primary" onclick="ban();">IP BAN</a>
<a class="btn-outline-primary" onclick="unban();">REMOVE IP BAN</a>
<h2 style="color: #606060;">Banned users:</h2>
<h2 style="color: var(--second);">Banned users:</h2>
<table >
<tr>

4
views/create_thread.ejs
View file

@ -15,11 +15,11 @@
<h2 class="title" style="align-self: baseline;">Title:</h2>
<input name="title" class="input"></input>
<hr>
<h2 class="title" style="align-self: baseline;">Content:</h2>
<textarea rows="4" cols="50" name="content" class="input"></textarea>
<hr>
<button class="btn-primary" style="width:100%" type="submit">Create Thread!</button>
</form>

4
views/error.ejs
View file

@ -7,8 +7,8 @@
<body style="text-align: center;">
<%- include("extra/navbar") %>
<h1 style="color: #4d18e6;"><%= type %></h1>
<h2 style="color: #606060;"><%= error %></h2>
<h1 style="color: var(--main);"><%= type %></h1>
<h2 style="color: var(--second);"><%= error %></h2>
</body>

2
views/extra/footer.ejs
View file

@ -2,7 +2,7 @@
.footer {
width: 100%;
background-color: #f5f5f5;
color: #606060;
color: var(--second);
text-align: center;
}
</style>

1
views/extra/meta.ejs
View file

@ -5,4 +5,5 @@
<meta name="description" content="Akf-forum!">
<meta name="author" content="Akif9748">
<link rel="icon" type="image/x-icon" href="/images/favicon.jpg">
<link rel="stylesheet" href="/css/themes/<%= theme %>.css" />
</head>

6
views/index.ejs
View file

@ -13,7 +13,7 @@
<div class="content">
<% if (user) { %>
<h2 style="color: #4d18e6;"><div class="box-username">Welcome, <%= user.name %>
<h2 style="color: var(--main);"><div class="box-username">Welcome, <%= user.name %>
<div class="avatar"><img src="<%=user.avatar %>"></div>
</div>
@ -24,13 +24,13 @@
<a href="/login" class="btn-outline-primary">LOGOUT</a>
<br>
<% } else { %>
<h2 style="color: #4d18e6;">Welcome, Guest!<br>You can press the button to register:
<h2 style="color: var(--main);">Welcome, Guest!<br>You can press the button to register:
<a href="/register" class="btn-outline-primary">REGISTER</a>
</h2>
<% } %>
<h2 style="color: #606060;">Statistics:</h2>
<h2 style="color: var(--second);">Statistics:</h2>
<div class="box">
<h2 class="box-title">Message count:</h2>