RHPZAdmin/RomhackPlaza
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Releases 1 Activity

A lot of things.

Browse Source
This commit is contained in:
Benjamin
2026-05-27 21:24:38 +02:00
parent b361f07954
commit d02baa89d6
43 changed files with 1340 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
resources/css/app.css
View File

@@ -15,6 +15,7 @@
@import './components/database.css';
@import './components/hovercard.css';
@import './components/notifications.css';
@import './components/settings.css';
@import './components/easymde.css';

26
resources/css/base/variables.css
View File

@@ -29,3 +29,29 @@
--menu-size: 260px;
--menu-user-avatar-bg: #555;
}
.light-mode {
/* RHPZ color */
--rhpz-orange: #ff7300;
--rhpz-orange-hover: #e56700;
/* Background colors */
--bg: #f0f0f0;
--bg2: #ffffff;
--bg3: #e8e8e8;
--bg4: #dcdcdc;
/* Text */
--text: #454545;
--text2: #737373;
--text3: #111111;
/* Elements */
--border: #d0d0d0;
--error: #e57373;
--info: #1976d2;
--success: #81c784;
--success2: #388e3c;
}

7
resources/css/components/common.css
View File

@@ -64,6 +64,13 @@
border-bottom: 1px solid var(--border);
padding-bottom: 10px;
}
.block-success {
background-color: var(--success);
border: 1px solid var(--success);
color: var(--text);
padding: 20px;
margin-bottom: 20px;
}
.block-error {
background-color: var(--error);
border: 1px solid var(--error);

156
resources/css/components/settings.css Normal file
View File

@@ -0,0 +1,156 @@
.settings-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 240px;
background-color: var(--bg2);
border: 1px solid var(--border);
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
z-index: 2000;
}
.settings-header {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
background-color: var(--bg3);
font-weight: 600;
font-size: 0.9rem;
color: var(--text);
}
.settings-section {
padding: 12px 16px;
}
.settings-section-title {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.7px;
color: var(--text2);
margin-bottom: 10px;
}
.settings-separator {
border-top: 1px solid var(--border);
}
.settings-themes {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.settings-theme-btn {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text);
transition: transform 0.15s, border-color 0.15s;
padding: 0;
&:hover {
transform: scale(1.15);
}
.active {
border-color: var(--text);
transform: scale(1.1);
}
}
.settings-theme-toggle {
width: 100%;
background-color: var(--bg3);
border: 1px solid var(--border);
color: var(--text);
padding: 8px 12px;
cursor: pointer;
font-family: var(--typography);
font-size: 0.88rem;
transition: background-color 0.1s;
text-align: left;
&:hover {
background-color: var(--bg4);
}
}
.settings-theme-toggle-inner {
display: flex;
align-items: center;
gap: 8px;
}
.settings-theme-toggle-badge {
margin-left: auto;
background-color: var(--rhpz-orange);
color: #111;
font-size: 0.65rem;
font-weight: 700;
padding: 2px 6px;
}
.settings-perpage {
display: flex;
gap: 6px;
}
.settings-perpage-btn {
flex: 1;
padding: 6px 4px;
background-color: var(--bg3);
border: 1px solid var(--border);
color: var(--text2);
font-size: 0.85rem;
cursor: pointer;
font-family: var(--typography);
transition: all 0.1s;
&:hover {
background-color: var(--bg4);
color: var(--text);
}
.active {
background-color: var(--rhpz-orange);
border-color: var(--rhpz-orange);
color: var(--text3);
font-weight: 600;
}
}
.settings-link {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 10px;
color: var(--text);
text-decoration: none;
font-size: 0.88rem;
transition: background-color 0.1s;
border: 1px solid transparent;
&:hover {
background-color: var(--bg3);
border-color: var(--border);
text-decoration: none;
}
}
.settings-link--danger {
color: var(--error);
&:hover {
background-color: rgba(229, 115, 115, 0.08);
border-color: rgba(229, 115, 115, 0.3);
}
}

111
resources/css/layout/entry.css
View File

@@ -1,4 +1,4 @@
#entry-container {
#entry-container, #comments-section, #reviews-section {
background-color: var(--bg2);
border: 1px solid var(--border);
display: flex;
@@ -128,3 +128,112 @@
text-align: center;
color: var( --text2 );
}
.comment-block {
display: flex;
gap: 16px;
padding: 20px 0;
border-bottom: 1px solid var(--border);
&:last-child {
border-bottom: none;
}
.comment-avatar {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
background-color: var(--bg4);
border: 1px solid var(--border);
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
.comment-content {
flex: 1;
min-width: 0;
.comment-meta {
font-size: 0.88rem;
color: var(--text2);
margin-bottom: 6px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
.comment-author {
font-weight: 600;
color: var(--text);
text-decoration: none;
transition: color 0.2s;
&:hover {
color: var(--rhpz-orange);
}
}
.comment-date {
color: var(--text2);
}
.comment-separator {
color: var(--border);
user-select: none;
}
}
.comment-body {
font-size: 0.95rem;
color: var(--text);
line-height: 1.5;
word-wrap: break-word;
p {
margin-bottom: 10px;
&:last-child { margin-bottom: 0; }
}
a {
color: var(--rhpz-orange);
&:hover {
color: var(--rhpz-orange-hover);
text-decoration: underline;
}
}
blockquote, .bbCodeBlock-blockquote {
background-color: var(--bg);
border-left: 3px solid var(--info);
padding: 12px 16px;
margin: 12px 0;
font-style: italic;
color: var(--text2);
}
code {
font-family: monospace;
background-color: var(--bg3);
border: 1px solid var(--border);
padding: 2px 5px;
font-size: 0.9rem;
}
}
}
}
.comments-empty {
text-align: center;
padding: 40px 20px;
color: var(--text2);
font-style: italic;
background-color: var(--bg);
border: 1px dashed var(--border);
}