Migration complete
This commit is contained in:
@@ -112,7 +112,7 @@
|
||||
color: var(--rhpz-orange);
|
||||
}
|
||||
|
||||
.activity-tl-dot--news {
|
||||
.activity-tl-dot--news, .activity-tl-dot--review {
|
||||
background-color: rgba(129,199,132,0.1);
|
||||
border-color: rgba(129,199,132,0.4);
|
||||
color: var(--success);
|
||||
@@ -198,7 +198,7 @@
|
||||
border: 1px solid rgba(255,115,0,0.25);
|
||||
}
|
||||
|
||||
.activity-tl-badge--news {
|
||||
.activity-tl-badge--news, .activity-tl-badge--review {
|
||||
background-color: rgba(129,199,132,0.1);
|
||||
color: var(--success);
|
||||
border: 1px solid rgba(129,199,132,0.25);
|
||||
@@ -267,6 +267,32 @@
|
||||
.activity-tl-thumb { display: none; }
|
||||
.activity-day-sep { padding-left: 44px; }
|
||||
.activity-tl-left { width: 44px; }
|
||||
|
||||
.activity-tl-date {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.activity-tl-content-title {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.activity-timeline {
|
||||
padding-left: 50px;
|
||||
}
|
||||
|
||||
.activity-tl-left {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.activity-tl-header {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.activity-tl-date {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.home-section {
|
||||
@@ -478,8 +504,52 @@
|
||||
.featured-entries-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.news-strip { grid-template-columns: repeat(2, 1fr); }
|
||||
.featured-entries-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.news-strip-cover { height: 80px; }
|
||||
@media (max-width: 768px) {
|
||||
.news-strip {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.featured-entries-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.home-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.news-strip-cover {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.featured-entry-title {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.news-strip { grid-template-columns: 1fr; }
|
||||
.featured-entries-grid { grid-template-columns: 1fr; }
|
||||
.news-strip-cover { height: 80px; }
|
||||
|
||||
.news-strip-item {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.news-strip-title {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.featured-entry-title {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.featured-entry-meta {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.home-section-title {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -53,6 +53,155 @@
|
||||
}
|
||||
}
|
||||
|
||||
.topbar-more-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topbar-more-menu {
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
right: 0;
|
||||
background-color: var(--bg2);
|
||||
border: 1px solid var(--border);
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
z-index: 2000;
|
||||
min-width: 180px;
|
||||
max-height: calc(100vh - 60px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.topbar-more-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
color: var(--text2);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
transition: all 0.15s;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg3);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
i {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
flex-grow: 1;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.topbar-more-container {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.topbar-admin-btn,
|
||||
.topbar-mod-btn {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.topbar-more-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.topbar-admin-btn,
|
||||
.topbar-mod-btn {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#topbar {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.topbar-actions {
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
.topbar-actions .btn {
|
||||
padding: 8px 6px;
|
||||
font-size: 0.85rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.topbar-actions i {
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
}
|
||||
|
||||
.topbar-badge {
|
||||
font-size: 0.65rem;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
#topbar {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.topbar-actions {
|
||||
gap: 8px !important;
|
||||
}
|
||||
|
||||
.topbar-actions .btn {
|
||||
padding: 6px 4px;
|
||||
font-size: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.topbar-actions i {
|
||||
width: 14px !important;
|
||||
height: 14px !important;
|
||||
}
|
||||
|
||||
.topbar-badge {
|
||||
font-size: 0.6rem;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-scope-select {
|
||||
background-color: var(--bg2);
|
||||
border: none;
|
||||
border-right: 1px solid var(--border);
|
||||
color: var(--text2);
|
||||
font-size: 0.8rem;
|
||||
padding: 8px 10px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
appearance: none;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.search-scope-select:hover,
|
||||
.search-scope-select:focus {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
#content {
|
||||
flex-grow: 1;
|
||||
padding: 30px;
|
||||
|
||||
@@ -268,36 +268,6 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -381,3 +351,242 @@
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-body {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-body h1, .markdown-body h2, .markdown-body h3,
|
||||
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
margin: 16px 0 8px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.markdown-body h1 { font-size: 1.4rem; }
|
||||
.markdown-body h2 { font-size: 1.2rem; }
|
||||
.markdown-body h3 { font-size: 1.05rem; }
|
||||
|
||||
.markdown-body strong { color: var(--text); font-weight: 700; }
|
||||
.markdown-body em { color: var(--text2); }
|
||||
|
||||
.markdown-body ul, .markdown-body ol {
|
||||
margin: 0 0 12px 20px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.markdown-body li { margin-bottom: 4px; line-height: 1.5; }
|
||||
|
||||
.markdown-body hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border);
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.markdown-body table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 12px 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.markdown-body th, .markdown-body td {
|
||||
border: 1px solid var(--border);
|
||||
padding: 6px 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown-body th {
|
||||
background-color: var(--bg3);
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.markdown-body del {
|
||||
color: var(--text2);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.markdown-body img {
|
||||
max-width: 100%;
|
||||
border: 1px solid var(--border);
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.hack-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.entry-header {
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
gap: 20px;
|
||||
|
||||
.entry-cover {
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
max-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.entry-info {
|
||||
.entry-title {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.entry-authors {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.entry-meta-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.entry-actions {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entry-content {
|
||||
padding: 20px;
|
||||
|
||||
.entry-section-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.entry-gallery {
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-block {
|
||||
gap: 12px;
|
||||
padding: 15px 0;
|
||||
|
||||
.comment-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
.comment-body {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video-thumbnail-wrapper {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.gallery-modal-close {
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.hack-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.entry-header {
|
||||
padding: 15px;
|
||||
gap: 15px;
|
||||
|
||||
.entry-cover {
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.entry-info {
|
||||
.entry-title {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.entry-authors {
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.entry-actions {
|
||||
gap: 8px;
|
||||
|
||||
.btn {
|
||||
padding: 8px 12px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entry-content {
|
||||
padding: 15px;
|
||||
|
||||
.entry-gallery {
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
gap: 8px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-block {
|
||||
padding: 10px 0;
|
||||
|
||||
.comment-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown-body h1 { font-size: 1.15rem; }
|
||||
.markdown-body h2 { font-size: 1rem; }
|
||||
.markdown-body h3 { font-size: 0.95rem; }
|
||||
|
||||
.hack-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -77,6 +77,21 @@
|
||||
color: var(--text);
|
||||
margin-bottom: 12px;
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.6);
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.news-header .news-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.news-header .news-title {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.news-header .news-meta {
|
||||
@@ -298,7 +313,6 @@
|
||||
color: #e57373;
|
||||
}
|
||||
|
||||
/* ── Hero ────────────────────────────────────────────────── */
|
||||
.news-hero {
|
||||
display: block;
|
||||
position: relative;
|
||||
@@ -484,3 +498,106 @@
|
||||
.news-hero-title { font-size: 1.4rem; }
|
||||
.news-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.news-header .news-meta {
|
||||
gap: 12px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.news-layout {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.news-sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.news-content {
|
||||
padding: 25px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.news-body-text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.sidebar-block {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.news-header .news-meta {
|
||||
gap: 8px;
|
||||
font-size: 0.8rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.news-header .meta-item {
|
||||
padding: 3px 8px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.news-layout {
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.news-main-content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.news-content {
|
||||
padding: 15px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.news-body-text {
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.news-body-text p {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.news-sidebar {
|
||||
width: 100%;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.sidebar-block {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.sidebar-block h3 {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.sidebar-block p {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.news-card-title {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
|
||||
.news-header .news-meta {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.news-layout {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.news-content {
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
270
resources/css/layout/responsive.css
Normal file
270
resources/css/layout/responsive.css
Normal file
@@ -0,0 +1,270 @@
|
||||
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
--menu-size: 280px;
|
||||
}
|
||||
|
||||
#menu {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 60px;
|
||||
height: calc(100vh - 60px);
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
z-index: 999;
|
||||
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#menu.mobile-open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#app.menu-open::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.mobile-toggle {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#main-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#topbar {
|
||||
padding: 0 10px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
width: 100%;
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
.search-scope-select {
|
||||
font-size: 0.7rem;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.topbar-actions {
|
||||
gap: 4px;
|
||||
overflow-x: auto;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.topbar-actions .btn {
|
||||
flex-shrink: 0;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.vertical-separator {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
:root {
|
||||
--menu-size: 240px;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#topbar {
|
||||
padding: 0 8px;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
#topbar {
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
max-width: 100%;
|
||||
order: 3;
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.topbar-actions {
|
||||
gap: 2px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.topbar-actions .btn {
|
||||
padding: 4px 6px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.search-scope-select {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
padding: 4px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#menu {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-logo {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.menu-header {
|
||||
padding: 8px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.menu-user-info .username {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
:root {
|
||||
--menu-size: 200px;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
#topbar {
|
||||
padding: 0 6px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.mobile-toggle {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.topbar-actions .btn {
|
||||
padding: 3px 4px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.vertical-separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: 8px 12px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.menu-group-title {
|
||||
padding: 0 12px;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.menu-user-info {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 500px) and (max-width: 768px) {
|
||||
#topbar {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.menu-header {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) and (min-width: 769px) {
|
||||
:root {
|
||||
--menu-size: 240px;
|
||||
}
|
||||
|
||||
#content {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
|
||||
#menu {
|
||||
transform: translateX(0) !important;
|
||||
position: relative !important;
|
||||
top: auto !important;
|
||||
height: auto !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
|
||||
#app.menu-open::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.mobile-toggle {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#main-wrapper {
|
||||
width: calc(100% - var(--menu-size));
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
|
||||
.btn,
|
||||
.menu-item,
|
||||
button {
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
|
||||
.btn {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: var(--bg2);
|
||||
}
|
||||
}
|
||||
156
resources/css/layout/reviews.css
Normal file
156
resources/css/layout/reviews.css
Normal file
@@ -0,0 +1,156 @@
|
||||
.review-section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.review-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.review-avg-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--rhpz-orange);
|
||||
background-color: rgba(255,115,0,.1);
|
||||
border: 1px solid rgba(255,115,0,.3);
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
.review-avg-badge--lg {
|
||||
font-size: 1rem;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.review-avg-count {
|
||||
color: var(--text2);
|
||||
font-weight: 400;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.star-rating-display {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.star-rating-display .star-filled { color: var(--rhpz-orange); fill: var(--rhpz-orange); }
|
||||
.star-rating-display .star-empty { color: var(--border); }
|
||||
|
||||
.review-title {
|
||||
font-size: 0.98rem;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.star-input {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.star-input-icon.star-filled svg { color: var(--rhpz-orange); fill: var(--rhpz-orange); }
|
||||
.star-input-icon.star-empty svg { color: var(--border); }
|
||||
|
||||
.star-input-icon {
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
|
||||
.star-input-icon:hover {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.reviews-page-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.reviews-back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.82rem;
|
||||
color: var(--text2);
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.reviews-back-link:hover { color: var(--rhpz-orange); }
|
||||
|
||||
.reviews-page-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.review-section-header {
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.review-header-right {
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.review-avg-badge {
|
||||
font-size: 0.8rem;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
.review-avg-badge--lg {
|
||||
font-size: 0.95rem;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.reviews-page-header {
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.reviews-page-title {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
|
||||
.review-title {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.review-avg-badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.reviews-page-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.review-title {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.star-rating-display {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.star-input {
|
||||
gap: 3px;
|
||||
}
|
||||
}
|
||||
@@ -289,9 +289,60 @@
|
||||
.submit-rule:last-child { border-bottom: none; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.submit-hero {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 25px 20px;
|
||||
}
|
||||
|
||||
.submit-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.submit-body {
|
||||
padding: 25px 20px;
|
||||
}
|
||||
|
||||
.submit-rules {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.submit-rule {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.submit-hero, .submit-body { padding-left: 20px; padding-right: 20px; }
|
||||
.submit-hero, .submit-body {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.submit-grid { grid-template-columns: 1fr; }
|
||||
.submit-news-row { grid-template-columns: 1fr; }
|
||||
.submit-review-note { max-width: 100%; }
|
||||
|
||||
.submit-hero {
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.submit-body {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.submit-rule {
|
||||
padding: 12px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.submit-hero-title {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.submit-grid > * {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user