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

Club System

Browse Source
This commit is contained in:
Benjamin
2026-06-02 20:54:10 +02:00
parent c68c4d18b5
commit 0b18d289ef
38 changed files with 1464 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
resources/css/app.css
View File

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

2
resources/css/base/reset.css
View File

@@ -35,3 +35,5 @@ ul {
margin-bottom: 20px;
list-style-type: square;
}
[x-cloak] {display: none !important;}

69
resources/css/components/forms.css
View File

@@ -459,3 +459,72 @@
color: var(--text2);
white-space: nowrap;
}
.upload-item-actions {
display: flex;
flex-direction: row;
gap: 15px;
}
.file-state-icon { width: 18px; height: 18px; }
.file-state-icon--public { color: var(--success); }
.file-state-icon--private { color: var(--text2); }
.file-state-icon--archived { color: var(--error); }
.upload-item-state { display: flex; align-items: center; gap: 8px; }
.author-search { position: relative; }
.author-search-input {
display: flex;
align-items: center;
gap: 8px;
background-color: var(--bg);
border: 1px solid var(--border);
padding: 8px 12px;
}
.author-search-input .form-input {
border: none;
padding: 0;
background: none;
flex: 1;
}
.author-search-selected {
display: flex;
align-items: center;
gap: 5px;
color: var(--success);
font-size: 0.85rem;
white-space: nowrap;
}
.author-search-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--bg2);
border: 1px solid var(--border);
border-top: none;
z-index: 100;
max-height: 200px;
overflow-y: auto;
}
.author-search-item {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 9px 12px;
background: none;
border: none;
color: var(--text);
font-size: 0.88rem;
cursor: pointer;
text-align: left;
font-family: var(--typography);
transition: background-color 0.1s;
}
.author-search-item:hover { background-color: var(--bg3); }

187
resources/css/components/queue.css Normal file
View File

@@ -0,0 +1,187 @@
.queue-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
padding: 80px 20px;
color: var(--text2);
font-size: 0.95rem;
}
.queue-item {
background-color: var(--bg2);
border: 1px solid var(--border);
border-left-width: 4px;
margin-bottom: 20px;
padding: 20px;
}
.queue-item--pending {
border-left-color: var(--rhpz-orange);
}
.queue-item--rejected {
position: relative;
overflow: hidden;
border-left-color: var(--error);
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background-color: var(--error);
width: var(--reject-progress, 100%);
opacity: 0.5;
transition: width 0.3s;
}
}
.queue-item-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 15px;
margin-bottom: 20px;
}
.queue-item-title {
font-size: 1.15rem;
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
}
.queue-item-meta {
font-size: 0.85rem;
color: var(--text2);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.queue-item-actions-header {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.timeline-container {
padding: 15px 20px;
background-color: var(--bg);
border: 1px solid var(--border);
margin-bottom: 20px;
}
.timeline {
display: flex;
justify-content: space-between;
position: relative;
&::before {
content: '';
position: absolute;
top: 15px;
left: 30px;
right: 30px;
height: 2px;
background-color: var(--border);
z-index: 0;
}
}
.timeline-step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
width: 100px;
}
.timeline-dot {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--bg);
border: 2px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
color: var(--text2);
margin-bottom: 10px;
transition: all 0.2s;
}
.timeline-step--active .timeline-dot {
border-color: var(--rhpz-orange);
background-color: var(--rhpz-orange);
color: #111;
}
.timeline-step--validated .timeline-dot {
border-color: var(--success);
background-color: var(--success);
color: #111;
}
.timeline-step--rejected .timeline-dot {
border-color: var(--error);
background-color: var(--error);
color: #fff;
}
.timeline-label {
font-size: 0.78rem;
text-align: center;
color: var(--text2);
font-weight: 500;
}
.timeline-step--active .timeline-label { color: var(--rhpz-orange); font-weight: 600; }
.timeline-step--validated .timeline-label { color: var(--success); }
.timeline-step--rejected .timeline-label { color: var(--error); }
.queue-reject-reason {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 12px 15px;
background-color: rgba(229, 115, 115, 0.08);
border-left: 2px solid var(--error);
color: var(--text);
font-size: 0.88rem;
margin-bottom: 15px;
line-height: 1.5;
}
.queue-mod-zone {
border-top: 1px solid var(--border);
padding-top: 15px;
margin-top: 5px;
display: flex;
flex-direction: column;
gap: 15px;
}
.queue-mod-separator {
border-top: 1px solid var(--border);
}
.queue-mod-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 10px;
}
.queue-reject-form {
margin-top: 12px;
padding: 15px;
background-color: var(--bg3);
border: 1px solid var(--border);
}

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

@@ -106,6 +106,7 @@
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 15px;
margin-bottom: 30px;
}
.entry-gallery-item {
@@ -116,10 +117,81 @@
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
transition: border-color 0.2s;
&:hover {
border-color: var(--rhpz-orange);
img {
transform: scale(1.05);
}
}
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
}
}
.gallery-modal {
position: fixed;
z-index: 3000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
display: flex;
align-items: center;
justify-content: center;
.gallery-modal-content {
max-width: 90%;
max-height: 90%;
position: relative;
img {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
border: 2px solid var(--border);
background-color: var(--bg);
box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}
}
.gallery-modal-close {
position: absolute;
top: 20px;
right: 30px;
color: #fff;
font-size: 40px;
font-weight: bold;
cursor: pointer;
user-select: none;
&:hover {
color: var(--rhpz-orange);
}
}
.gallery-modal-video {
width: 90%;
max-width: 960px;
aspect-ratio: 16/9;
box-shadow: 0 10px 30px rgba(0,0,0,0.6);
border: 1px solid var(--border);
background-color: #000;
iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
}
}
@@ -237,3 +309,74 @@
background-color: var(--bg);
border: 1px dashed var(--border);
}
.entry-video-section {
margin-bottom: 30px;
}
.video-thumbnail-wrapper {
position: relative;
width: 100%;
max-width: 500px;
aspect-ratio: 16/9;
background-color: #000;
border: 1px solid var(--border);
cursor: pointer;
overflow: hidden;
border-radius: 4px;
img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.play-trigger {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 65px;
height: 65px;
background-color: rgba(0, 0, 0, 0.7);
border: 2px solid #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.5rem;
transition: background-color 0.2s, transform 0.2s ease-out;
i { margin-left: 4px; }
}
&:hover {
img {
transform: scale(1.03);
opacity: 1;
}
.play-trigger {
background-color: var(--rhpz-orange);
border-color: var(--rhpz-orange);
transform: translate(-50%, -50%) scale(1.1);
box-shadow: 0 0 15px rgba(255, 115, 0, 0.5);
}
}
}
.entry-submission-byline {
font-size: 0.85rem;
color: var(--text2);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 15px;
i {
vertical-align: middle;
margin-right: 4px;
}
}