RHPZAdmin/Romhack-Plaza---WordPress-Theme
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity
Files
master
Romhack-Plaza---WordPress-T…/style.css

2008 lines
35 KiB
CSS
Raw Permalink Normal View History

Start Theme Repo
2026-01-29 19:10:03 +01:00
/**
* Theme Name: RomhackPlaza
* Theme URI: https://example.com
* Description: Based on Treville theme by ThemeZee. Used for the Romhackplaza website.
* Version: 0.0.1c
* Author: Benjamin, Spike (romhacks.org), ThemeZee (Original)
* Text Domain: romhackplaza
* Domain Path: /languages
* Tested up to: 6.8.3
* Requires at least: 6.8
* Requires PHP: 8.5
* License: GNU General Public License v2.0 or later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
/* --- TOC ---
0. NO CATEGORY
I. COLORS
II. FULL LARGE & GENERAL STYLE
III. HEADER
IV. POST CONTENT
A. HORIZONTAL SCROLL GALLERY
B. NEWS POST IMAGES
C. ENTRY STATUS HEADER
V. DOWNLOAD TABLE FROM EXTERNAL SERVER
VI. SIDEBAR
VII. GRIDS
A. BIG GRID & GENERAL ELEMENTS.
B. LIST GRID
C. SMALL GRID
D. DRAFT GRID
VIII. ROLE TAGS
IX. USER PAGE & LISTING
X. SUBMIT PAGE
XI. FOOTER
XII. CONTACT FORM
XIII. INPUT
XIV. FACET WP
A. PAGINATION
B. FILTERS
XV. STICKY ENTRIES
XVI. ANNOUNCEMENTS
XVII. WIDGETS
XVIII. QUICK TOOLS
XIX. HOVER TITLE
XX. REVIEWS
--- TOC --- */
/* ---
0. NO CATEGORY.
--- */
#comments, #reviews {
box-shadow: none;
}
.modifications-wrapper label {
margin: 0;
}
.view-file-content { /* MUST BE MOVED ON FORM PAGES CSS */
color: #000 !important;
text-decoration: none !important;
}
/* ---
I. COLORS
--- */
:root { /* Dark mode */
--header-background-color: #1f1f1f;
--navi-background-color: #282828;
--navi-color: #d2d2d2;
--separator-line: #292a2d;
--separator-line-rgba: #292a2d99;
--page-background-color: #1f1f1f;
--widget-background-color: #1f1f1f;
--widget-title-color: #fff;
--text-color: #d2d2d2;
--title-color: #d2d2d2;
--background: #292a2d;
--grid-background: #545455;
--sticky-text: #d2d2d2;
--post-excerpt: #2e2e2e;
--field-background: #2e2e2e;
--reviews-background: #292a2d;
--reviews-text: #d1d1d1;
--tab-background-active: #c5c5c5;
--tab-background-inactive: #7a7a7a;
--switch-border-radius: 10px 10px 10px 10px;
}
.light-mode {
--header-background-color: #454545;
--navi-color: #454545;
--navi-background-color: #fff;
--separator-line: #e3e3e3;
--separator-line-rgba: #e3e3e399;
--page-background-color: #fff;
--widget-background-color: #fff;
--widget-title-color: #454545;
--text-color: #454545;
--title-color: #1177aa;
--background: #ddd;
--grid-background: #a8a8a8;
--sticky-text: #fff;
--post-excerpt: #cfcfcf;
--field-background: #ffffff;
--reviews-background: #292a2d;
--reviews-text: #d1d1d1;
--tab-background-active: #292a2d;
--tab-background-inactive: #c5c5c5;
--switch-border-radius: 10px 10px 0px 0px;
}
pre {
color: #454545;
}
/* ---
II. FULL LARGE & GENERAL STYLE
--- */
#content, .container {
margin-left: 3%;
margin-right: 3%;
max-width: 94%;
}
button, .meta-categories a, .more-link, input[type="submit"] {
border-radius: 5px !important;
}
/* ---
III. HEADER
--- */
.dark-light {
background-color: transparent;
color: var( --text-color );
margin-left: 1%;
}
#entriesDropdown, #viewModeDropdown {
background-color: transparent;
color: var( --text-color );
margin-left: 0.5%;
border: 0px;
}
#entriesDropdown:hover, #viewModeDropdown:hover {
cursor: pointer;
}
#entriesDropdown option, #viewModeDropdown option {
background-color: var(--page-background-color);
border-color: var( --page-background-color);
}
#rhpz-menu-avatar {
border-radius:50%;object-fit:cover;margin-right:8px;vertical-align:middle;top:50%;left:0;margin-top:-24px;width:auto;height:auto;max-width:48px;position:absolute;min-width:32px;
}
.rhpz-menu-wrapper a{
position:relative;padding-left:54px !important;
}
/* ---
IV. POST CONTENT
--- */
.entry-meta {
margin-bottom: 1.5%;
}
.meta-comments {
margin-right: 1.5em;
}
.entry-author p {
margin: 0px;
}
.post-image {
margin-bottom: 25px;
margin-top: 0;
position: relative;
image-rendering: pixelated;
}
.post-image > a,
.post-image img {
display: block;
margin: auto;
}
.post-details {
margin-left: 5%;
display: flex;
align-items: center;
justify-content: space-between;
width: auto;
}
.post-details .post-image {
flex-shrink: 0;
margin-bottom: 20px;
max-width: 50%;
}
.post-details-content {
display: flex;
flex-grow: 1;
margin-left: 5%;
flex-direction: column;
margin-right: 2%;
}
.edit-button {
font-size: 14px !important;
display: block;
float: right;
padding: 5px;
background-color: rgba( 219, 127, 0, 0.4 );
color: var( --text-color ) !important;
border-radius: 3px;
text-decoration: none;
width: 32px;
text-align: center;
}
.edit-entry-button {
font-size: 16px !important;
display: inline-block;
padding: 6px;
background-color: #db7f00;
color: white !important;
border: none;
border-radius: 5px;
text-decoration: none;
transition: background-color 0.3s ease;
}
.edit-entry-button:hover, .edit-button:hover {
background-color: var( --grid-background );
cursor: pointer;
color: var( --text-color );
}
.edit-entry-button:hover,
.edit-entry-button:focus {
background-color: #db7f00;
color: white !important;
text-decoration: none;
}
.edit-entry-button i {
margin-left: 5px;
font-size: 20px !important;
}
.row {
border-bottom: 1px solid var( --separator-line );
padding: 5px 0;
display: flex;
flex-wrap: wrap;
}
.hashes {
margin-top: 10px;
margin-bottom: 10px;
border-top: 1px solid var( --separator-line );
border-bottom: 1px solid var( --separator-line );
}
.team-info, .external-links {
margin-top: 10px;
margin-bottom: 10px;
border-bottom: 1px solid var( --separator-line );
}
.external-links-new {
margin-top: 10px;
margin-bottom: 10px;
}
.video-container {
max-width: 800px;
margin: 0 auto;
width: 100%;
}
.video-container iframe {
width: 100%;
height: 450px;
border: 0;
}
#shareLink {
display: flex;
justify-content: end;
align-items: end;
}
.file-section > div {
text-align: center;
}
#get-download-links {
display: block;
margin-left: auto;
margin-right: auto;
color: white;
padding: 15px 32px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: all 0.3s;
font-weight: bold;
text-transform: uppercase;
margin-top: 20px;
}
#get-download-links:hover {
background-color: #884f00;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
#get-download-links:active {
background-color: #397d34;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transform: translateY(2px);
}
#get-download-links:before {
content: '\f019';
font-family: 'fontawesome';
padding-right: 8px;
}
.entry-content {
word-wrap: break-word;
}
.entry-excerpt {
word-wrap: break-word;
background-color: var( --post-excerpt );
padding: 3%;
margin: 5%;
margin-right: 8%;
width: 60%;
display: inline-block;
}
.entry-toc {
word-wrap: break-word;
padding: 3%;
padding-top: 0%;
margin: 0% 0% 5% 0%;
width: auto;
display: inline-block;
}
@media screen and ( max-width: 75em ) {
#content {
padding: 0 !important;
padding-top: 1.5em !important;
}
.post-details {
margin-top: 1.5em;
flex-direction: column;
width: 100%;
margin-left: 0;
}
.post-details-content {
margin-left: 0;
margin-right: 0;
}
}
.button-right-widget {
display:block;
float: right;
color: var( --text-color );
cursor: pointer;
}
.entry-content .search-field {
background-color: var( --page-background-color );
color: var( --text-color );
}
::placeholder {
color: var( --text-color ) !important;
opacity: 1;
}
/* ---/---
IV.A. HORIZONTAL SCROLL GALLERY.
---/--- */
.horizontal-scroll-gallery.featured-posts {
overflow-y: hidden;
margin-bottom: 30px;
}
.horizontal-scroll-gallery.featured-posts .thumbnail {
position: relative;
overflow: hidden;
margin-right: 15px;
}
.horizontal-scroll-gallery.featured-posts .thumbnail img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
.horizontal-scroll-gallery.featured-posts .thumbnail .top-info {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
color: white;
display: flex;
justify-content: space-between;
padding: 5px;
font-size: 12px;
}
.horizontal-scroll-gallery.featured-posts .thumbnail .post-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
color: white;
text-align: center;
padding: 5px 0;
font-size: 14px;
}
.horizontal-scroll-gallery.featured-posts .thumbnail a {
display: block;
text-decoration: none;
}
.horizontal-scroll-gallery {
cursor: grab;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* Allows momentum scrolling on iOS devices */
gap: 10px;
padding: 10px 0;
height: 250px;
}
.thumbnail {
flex: 0 0 auto;
position: relative;
display: block;
height: 100%;
width: auto;
}
.thumbnail img {
height: 100%;
width: auto;
object-fit: contain;
display: block;
image-rendering: pixelated;
}
/* Optional: Styling the scrollbar for Webkit browsers */
.horizontal-scroll-gallery::-webkit-scrollbar {
height: 10px;
}
.horizontal-scroll-gallery::-webkit-scrollbar-track {
background: #f1f1f1;
}
.horizontal-scroll-gallery::-webkit-scrollbar-thumb {
background: #888;
}
.horizontal-scroll-gallery::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Style the modal */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1000; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1000; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 90vw; /* viewport width */
max-height: 90vh; /* he viewport height */
min-width: 50vw; /* Minimum width to ensure smaller images are also displayed larger */
min-height: 50vh; /* Minimum height for the same reason */
width: auto; /* auto to maintain the aspect ratio */
height: auto; /* auto to maintain the aspect ratio */
image-rendering: pixelated;
}
@media (max-width: 850px) {
.modal-content {
min-width: 80vw; /* Increase min-width for smaller screens */
min-height: 30vh; /* Decrease min-height for smaller screens */
max-height: 80vh;
}
}
/* Caption of Modal Image */
#caption {
text-align: center;
color: #ccc;
padding: 10px 0;
position: absolute; /* Position relative to the modal */
bottom: 10px; /* Stick to the bottom of the modal, 10px above the bottom edge */
left: 0;
right: 0;
height: auto; /* Let the height be determined by content */
background-color: rgba(0, 0, 0, 0.5); /* Optional: semi-transparent background */
}
/* The Close Button */
.close {
position: absolute;
top: 10px; /* Adjust as necessary */
right: 25px; /* Adjust as necessary */
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* Navigation Arrows */
.prev, .next {
cursor: pointer;
position: fixed; /* Fixed position relative to the viewport */
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px; /* Adjust if the arrows appear too high or too low */
color: white;
font-weight: bold;
font-size: 30px; /* Increase font size for visibility */
transition: 0.6s ease;
user-select: none;
z-index: 2000; /* Ensure arrows are above other elements */
}
/* Style the "Next" arrow */
.next {
right: 20px; /* Adjust distance from the right edge */
}
/* Style the "Previous" arrow */
.prev {
left: 20px; /* Adjust distance from the left edge */
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* END GALLERY */
/* index carousel */
.horizontal-scroll-gallery.featured-posts {
overflow-y: hidden;
margin-bottom: 30px;
}
.horizontal-scroll-gallery.featured-posts .thumbnail {
position: relative; /* Keep relative for absolute positioning of children */
overflow: hidden;
margin-right: 15px;
}
.horizontal-scroll-gallery.featured-posts .thumbnail img {
display: block;
width: 100%;
height: auto; /* Adjust height as needed */
object-fit: cover;
}
.horizontal-scroll-gallery.featured-posts .thumbnail .top-info {
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5); /* Single semi-transparent background for top strip */
color: white;
display: flex;
justify-content: space-between; /* Adjusts children spacing */
padding: 5px;
font-size: 12px; /* Adjust font size as needed */
}
.horizontal-scroll-gallery.featured-posts .thumbnail .post-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
color: white;
text-align: center;
padding: 5px 0;
font-size: 14px;
}
.horizontal-scroll-gallery.featured-posts .thumbnail a {
display: block;
text-decoration: none;
}
/* ---/---
IV.B. NEWS POST IMAGE.
---/--- */
.news-post-images {
display: block;
margin-bottom: 15px;
}
.news-post-image {
display: inline-block;
margin-right: 10px;
}
.external-links-news{
margin-top: 1%;
}
/* ---/---
IV.C. ENTRY STATUS HEADER.
---/--- */
.entry-status-header {
display: flex;
align-items: center;
background-color: rgba(36, 207, 223, 0.4);
margin-left: 17.5%;
margin-right: 17.5%;
margin-bottom: 2%;
padding: 1% 1.5% 1% 1.5%;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: 8px;
}
.entry-status-header.rhpz {
background-color: rgba( 219, 127, 0, 0.4 );
}
.entry-status-header.correct {
background-color: rgba( 60, 159, 101, 0.4 );
}
.entry-status-header.warning {
background-color: rgba( 244, 255, 0, 0.4 );
}
.entry-status-header.danger {
background-color: rgba( 255, 0, 0, 0.4 );
}
.entry-status-header-icon {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 72px;
color: var( --text-color );
}
.entry-status-header-text {
flex: 3;
padding: 35px;
}
.entry-status-header-title {
margin: 0;
font-weight: bold;
font-size: 1.25em;
}
.entry-status-header-content {
margin: 10px 0 0 0;
color: var( --text-color );
}
/* ---
V. DOWNLOAD TABLE FROM EXTERNAL SERVER
--- */
.responsive-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.responsive-table th,
.responsive-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
}
.responsive-table td:last-child,
.responsive-table th:last-child {
text-align: right;
white-space: nowrap;
width: 20%;
}
.responsive-table td:not(:first-child):not(:last-child),
.responsive-table th:not(:first-child):not(:last-child) {
width: 20%;
text-align: right;
white-space: nowrap;
}
@media (max-width: 768px) {
.responsive-table {
overflow-x: auto;
display: block;
}
}
/* ---
VI. SIDEBAR
--- */
.sidebar-post {
margin-top: 10px;
margin-bottom: 10px;
border-bottom: 1px solid var( --separator-line );
display: flex;
align-items: center;
justify-content: space-between;
width: auto;
}
.sidebar-post-content {
display: flex;
flex-grow: 1;
margin-left: 5%;
flex-direction: column;
margin-right: 2%;
}
/* ---
VII. GRIDS
--- */
/* ---/---
VII.A. BIG GRID & GENERAL ELEMENTS.
---/--- */
.posts-biggrid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.posts-biggrid .article-biggrid {
background: var(--page-background-color);
border-radius: 10px;
padding: 10px;
}
@media (max-width: 850px) {
.posts-biggrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5px;
}
}
.posts-biggrid .article-biggrid h2.post-title a {
font-size: 19px;
text-decoration: none;
line-height: 1.3;
}
.posts-biggrid .article-biggrid .post-taxonomies {
font-size: 15px;
}
.posts-biggrid .article-biggrid .post-categories {
font-size: 0.7rem;
}
.posts-biggrid .post-taxonomies dl {
display: flex;
flex-direction: column;
}
.posts .post-image img {
width: 100%;
height: auto;
}
.post {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 30px;
min-height: 500px;
}
.post-categories {
margin-bottom: 9px;
font-size: 0.8rem;
line-height: 120%;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
color: #777;
}
.post-categories a { text-decoration: none; }
.post-categories a:hover { text-decoration: underline; }
.post-title {
/* font-family: 'Merriweather', Georgia, serif; */
font-size: 1.5em;
line-height: 135%;
font-weight: 900;
letter-spacing: -0.01em;
margin: 0;
-ms-word-break: break-word;
word-break: break-word;
}
.post-title a {
display: block;
color: var(--text-color);
}
.post-title a:hover {
color: var(--text-color);
text-decoration: underline;
}
.post-meta {
color: #888;
font-size: 0.9em;
font-weight: 700;
line-height: 120%;
margin: 6px 0 0 0;
}
.post-taxonomies {
margin-top: auto;
word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.post-taxonomies dl {
display: grid;
grid-template-columns: max-content 1fr;
column-gap: 10px;
margin: 10px 0 0;
}
.post-taxonomies dt, .post-taxonomies dd {
margin: 0;
padding: 0px 0;
}
.post-taxonomies dt {
grid-column: 1 / 2;
}
.post-taxonomies dd {
grid-column: 2 / 3;
margin-left: 0;
}
/* ---/---
VII.B. LIST GRID.
---/--- */
.posts-list {
display: flex;
flex-direction: column;
width: 100%;
}
.article-listed {
display: flex;
gap: 10px;
flex-wrap: wrap;
border-radius: 10px;
padding: 15px;
background: var(--page-background-color);
margin: 1% 0;
}
.article-listed > div {
flex: 1;
}
.article-listed > div:first-child {
flex-basis: 100%;
}
.article-listed h2 {
font-size: 16px;
}
.posts-list h2.post-title a {
text-decoration: none;
}
.original-title-list {
font-size: .9em;
display: block;
color: #777;
margin-bottom: 5px;
font-style: italic;
max-width: 90%;
word-wrap: break-word;
}
/* ---/---
VII.C. SMALL GRID.
---/--- */
.posts-smallgrid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
}
@media (max-width: 850px) {
.posts-smallgrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}
.posts-smallgrid dt.hack-status,
.posts-smallgrid dt.language {
display: none;
}
}
.posts-smallgrid .article-smallgrid h2.post-title a {
font-size: 16px;
text-decoration: none;
line-height: 1.3;
}
.posts-smallgrid .article-smallgrid .post-taxonomies {
font-size: 15px;
}
.posts-smallgrid .article-smallgrid .post-categories {
font-size: 0.7rem;
}
.posts-smallgrid .post-taxonomies dl {
display: flex;
flex-direction: column;
}
/* ---/---
VII.D. DRAFT GRID.
---/--- */
.draft-posts-list {
list-style-type: none;
padding: 0;
}
.draft-posts-list li {
margin-bottom: 20px;
border-bottom: 1px solid #ddd;
padding-bottom: 15px;
}
.draft-posts-list h2 {
margin: 0 0 10px 0;
color: #333;
}
.draft-posts-list a {
color: #0073aa;
text-decoration: none;
margin-right: 10px;
}
.draft-posts-list a:hover {
text-decoration: underline;
}
.delete-entry a {
color:red;
}
/* ---
VIII. ROLE TAGS
--- */
.role-tag {
color: #ffffff;
border: none;
margin: 9px auto 2px auto;
border-radius: 3px;
font-size: 11px;
line-height: 14px;
text-align: center;
padding: 1px 5px;
cursor: default;
align-items: center;
justify-content: center;
}
.role-tag.Admin {
background-color: #dd3333;
}
.role-tag.Verified, .role-tag.Verifié {
background-color: #1e73be;
}
.role-tag.Member, .role-tag.Membre {
background-color: #325a15;
}
.role-tag.Mod, .role-tag.Modérateur {
background-color: #dd9933;
}
.role-tag.Read-only, .role-tag.Banni {
background-color: #a8a8a8;
}
.role-tag.Bot {
background-color: #8f53b8;
}
/* ---
IX. USER PAGE & LISTING
--- */
.status-help, .blue-box {
border: 1px solid #007BFF;
background-color: #E9F5FF;
padding: 15px;
margin-bottom: 40px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.status-help strong, .blue-box strong {
display: block;
color: #0056b3;
margin-bottom: 10px;
}
.status-help ul, .blue-box ul {
list-style-type: none;
padding-left: 0;
margin-top: 0;
}
.status-help ul li, .blue-box ul li {
margin-bottom: 5px;
line-height: 1.5;
color: #333;
}
.users-table {
display: table;
width: 100%;
}
.users-table .user-row {
display: table-row;
}
.users-table .user-avatar,
.users-table .user-website,
.users-table .user-role,
.users-table .user-name {
display: table-cell;
padding: 5px;
border-bottom: 1px solid #ddd;
}
.users-table select {
color: #454545;
}
.users-table .user-avatar img {
max-width: 50px;
max-height: auto;
}
/* ---
X. SUBMIT PAGE
--- */
.submit-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
padding: 20px;
margin: auto;
}
.submit-container a {
color: #454545;
text-decoration: none;
}
.submit-container .box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100px;
font-size: 18px;
font-weight: bold;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-decoration: none;
color: #333;
transition: transform 0.3s, box-shadow 0.3s;
cursor: pointer;
overflow: hidden;
}
.submit-container.box.translation { background-color: #e7f4d9; }
.submit-container.box.romhack { background-color: #d5e1fc; }
.submit-container.box.homebrew { background-color: #ffeaf0; }
.submit-container.box.utility { background-color: #fff8d5; }
.submit-container.box.document { background-color: #f3eaff; }
.submit-container.box.news { background-color: #f0f0f0; }
.submit-container.box.lua-script { background-color: #eed6c5; }
.submit-container.box.tutorial { background-color: #d1c9ba; }
.submit-container.box:hover {
transform: translateY(-5px);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}
.submit-container.box:hover::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.3);
z-index: 1;
transition: background-color 0.3s;
}
@media screen and ( max-width: 800px ) {
.submit-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
padding: 20px;
margin: auto;
}
}
/* ---
XI. FOOTER
--- */
.footer-menu {
color: var(--text-color);
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.footer-column {
flex: 1;
min-width: 200px;
margin: 10px;
}
.footer-column h4 {
font-size: 1.2em;
margin-bottom: 10px;
padding-bottom: 10px;
color: #fff;
border-bottom: 2px solid #fff;
}
.footer-column ul {
list-style: none;
padding: 0;
}
.footer-column ul li a {
color: #fff;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-column ul li a:hover {
color: #ddd;
}
/* ---
XII. CONTACT FORM
--- */
.contact-form form {
background-color: var(--background-accent);
color: var(--text-color);
margin: 0 auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgb(0 0 0 / 53%);
}
.contact-form label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: var(--text-color);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select#subject,
.contact-form textarea {
width: 100%;
padding: 8px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
color: #454545;
}
.contact-form textarea {
height: 300px;
resize: vertical;
}
.contact-form input[type="submit"] {
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.contact-form input[type="submit"]:hover {
background-color: #0cb4ea;
}
.contact-form .g-recaptcha {
margin-bottom: 20px;
}
.contact-form .message {
padding: 10px;
margin-bottom: 20px;
text-align: center;
}
.contact-form .success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.contact-form .error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
/* ---
XIII. INPUT.
--- */
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
border: 1px solid;
border-color: var(--medium-border-color);
color: #454545;
}
custom-select {
display: block;
width: 100%;
height: 28px;
outline-color: #444;
background-color: var( --field-background);
color: var( --text-color);
border: 0;
border-radius: 5px;
padding: 5px;
}
.form-field-basic{
background-color:var(--post-excerpt) !important;
color:var(--text-color) !important;
width:100%;
margin-bottom:2%;
border-radius:10px;
}
/* ---
XIV. FACET WP.
--- */
/* ---/---
XIV.A. PAGINATION.
---/--- */
.facetwp-facet-pagination {
margin-top: 20px;
text-align: center;
}
.facetwp-pager a:not(.dots) {
margin: 0 5px;
padding: 5px 10px;
border: 1px solid #ddd;
display: inline-block;
}
.facetwp-pager .facetwp-page {
color: #fff
}
.facetwp-page:not(.active):not(.dots):hover {
background-color: var(--button-color);
color: var(--button-text-color);
}
.facetwp-page:not(.active):not(.dots) {
background-color: var(--button-hover-color);
}
.facetwp-page.active {
background-color: var( --link-color);
}
/* ---/---
XIV.B. FILTERS.
---/--- */
.facet-all {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 20px 0;
padding: 0;
}
.facet-wrap {
flex: 1 1 auto;
width: 200px;
box-sizing: border-box;
}
.facet-label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.facetwp-facet select {
width: 100%;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px 12px;
font-size: 16px;
color: #333;
}
.facetwp-facet input, #custom-search {
width: 100%;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
color: #333;
}
.facetwp-dropdown select {
width: 100%;
}
.fs-label-wrap {
width: 100%;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
background-color: #f0f0f0 !important;
border: 1px solid #ccc !important;
border-radius: 4px;
padding: 4px 4px;
font-size: 16px;
color: #333;
}
.fs-option-label {
color: #333 !important;
}
/* ---
XV. STICKY ENTRIES.
--- */
.sticky-entries-container {
padding: 3% 1.5% !important;
}
.sticky-entries {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
align-content: center;
}
.sticky-entry {
padding: 20% 20%;
background-position: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.sticky-entry a {
color: var( --sticky-text);
text-align: center;
font-weight: 700;
font-size: 18px;
}
.sticky-entry a:hover {
text-decoration: underline;
}
@media screen and ( max-width: 600px ) {
.sticky-entries {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5px;
align-content: center;
}
}
/* ---
XV. ANNOUNCEMENTS
--- */
.home-announce {
border-radius: 5px;
padding: 1% 4% 2% 4%;
color: #000;
margin-bottom: 1%;
}
.news {
background-color: #d68078;
}
.youtube {
background-color: #d6c878;
}
.info {
background-color: #a9d4ec;
}
.home-announce h4 {
font-size: 24px;
text-decoration: underline;
}
/* ---
XVII. WIDGETS
--- */
.widget_hide_show_button {
background-color: var( --widget-background-color );
border-radius: 3px;
font-size: 14px;
padding: 5px;
}
.widget_hide_show_button:hover {
background-color: var( --grid-background );
cursor: pointer;
}
.site_stats_table {
border-collapse: collapse;
text-align: center;
font-size: 14px;
width: 100%;
table-layout: fixed;
}
.site_stats_table td {
justify-content: center;
border: 1px solid var( --separator-line);
padding: 10px;
}
.site_stats_table td i {
display: inline-block;
vertical-align: middle;
line-height: 1;
}
.site_stats_table td > * {
display: block;
text-align: center;
max-width: 100px;
max-height: 100px;
}
.site_stats_table tr:first-child td {
border-top: none;
}
.site_stats_table tr:last-child td {
border-bottom: none;
}
.site_stats_table td:first-child {
border-left: none;
}
.site_stats_table td:last-child {
border-right: none;
}
.site_stats_table .icon {
color: var( --text-color );
font-size: 36px;
}
.site_stats_table .title {
font-weight: 900;
font-size: 16px;
}
/* ---
XVIII. QUICK TOOLS
--- */
.single-quick-tools {
padding: 5px 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 5px;
text-decoration: none !important;
}
.single-quick-tools.left-side {
justify-content: flex-start;
}
.single-quick-tools a {
text-decoration: none;
color: var( --text-color ) !important;
}
.single-quick-tools-button {
background-color: var( --widget-background-color );
border-radius: 3px;
font-size: 14px;
padding: 5px;
width: 32px;
text-align: center;
}
.single-quick-tools-button.correct {
background-color: rgba( 60, 159, 101, 0.4 );
}
.single-quick-tools-button.warning {
background-color: rgba( 244, 255, 0, 0.4 );
color: #454545;
}
.single-quick-tools-button.danger {
background-color: rgba( 255, 0, 0, 0.4 );
}
.single-quick-tools-button.rhpz {
background-color: rgba( 219, 127, 0, 0.4 );
}
.single-quick-tools-button:hover, .single-quick-tools-button.danger:hover {
background-color: var( --grid-background );
cursor: pointer;
color: var( --text-color );
}
/* ---
XIX. HOVER TITLE.
--- */
.hv_title {
position: relative;
cursor: help;
}
.hv_title::after {
content: attr(data-hv-title);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background-color: var( --separator-line-rgba );
color: var( --text-color);
padding: 5px 8px;
border-radius: 4px;
font-size: 0.7rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
white-space: nowrap;
text-transform: none !important;
font-variant-caps: normal !important;
}
.hv_title:hover::after {
opacity: 1;
}
/* ---
XX. REVIEWS
--- */
.reviews_container {
max-width: inherit;
margin: 0px 20px 20px 20px;
padding: 20px;
border-radius: 10px;
background-color: var( --reviews-background );
color: var( --reviews-text );
font-style: normal;
}
.reviews_title {
padding-top: 8px;
padding-bottom: 16px;
}
.reviews_float_right, .float_right {
float: right;
}
.reviews_float_left, .float_left {
float: left;
}
.reviews_bottom_bar, .bottom_bar {
border-bottom: 1px solid var( --separator-line );
}
.reviews_post_box {
background-color: var( --page-background-color );
padding: 10px;
margin-top: 15px;
border-radius: 10px;
overflow: auto;
}
.reviews_post_title {
color: var( --text-color );
font-size: 1.4em;
font-weight: 700;
margin-bottom: 0;
letter-spacing: -0.01em;
word-break: break-word;
display: block;
text-align: center;
}
.reviews_post_details {
font-size: 0.7em;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
color: #777;
display: block;
text-align: center;
margin-bottom: 5px;
margin-top: 3px;
}
.reviews_post_parent_details {
display: flex;
align-items: center;
}
.reviews_parent_title {
font-size: 0.7em;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
color: #777;
display: inline-block;
margin-left: 5px;
text-align: left;
text-decoration: underline;
}
.reviews_rating {
color: yellow;
display: block;
font-size: 22px;
text-align: center;
margin-bottom: 20px;
}
.reviews_actions {
display: block;
float: right;
}
.reviews_form_label {
margin-top: 15px;
margin-bottom: 15px;
display: block;
}
.reviews_switch {
display: inline-block;
border-radius: var( --switch-border-radius );
padding: 20px;
color: var( --separator-line );
margin-right: 6px;
}
.active_switch {
background-color: var( --tab-background-active );
text-decoration: underline;
}
.inactive_switch {
background-color: var( --tab-background-inactive );
}
.inactive_switch:hover {
text-decoration: underline;
cursor: pointer;
}
#review-post-text {
color: var( --text-color );
text-indent: 0.5cm;
}
#comments-reviews-switch {
display: block;
margin: 40px 6px 0 40px;
}
#review-write-title {
width: 100%;
}
#review-write-parent, #review-write-title:focus {
color: #454545;
}
#review-write-submit {
display: block;
margin-top: 15px;
margin-bottom: 15px;
background-color: #3498DB;
font-size: 16px;
color: #fff !important;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s;
text-decoration: none;
}
#review-write-submit:hover {
background-color: #2980B9;
}
Reference in New Issue Copy Permalink