Age Warning PRO Who did download do this to make it look clean. or download the updated one from me.
Make it look nicer so do this..
1. Go to settings and select Color schema for pop-up "Standard" <--- important to set it at Standard
2. Go to Plugins Folder.. eighteen/CSS/eig.css
replace everything in eig.css with this code and make it look awesome.
Make it look nicer so do this..
1. Go to settings and select Color schema for pop-up "Standard" <--- important to set it at Standard
2. Go to Plugins Folder.. eighteen/CSS/eig.css
replace everything in eig.css with this code and make it look awesome.
Code:
/* Using CSS variables for easy theming */
:root {
--primary-color: #d64040; /* A modern red */
--primary-color-dark: #b52c2c;
--text-color-dark: #333;
--text-color-light: #fff;
--border-color-medium: #b4b4b4;
--border-color-light: #ddd;
--background-light: #fff;
--background-overlay: rgba(255, 255, 255, 0.95);
--box-shadow-light: 0 10px 20px rgba(0, 0, 0, 0.1);
--box-shadow-dark: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.eighteen {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
color: var(--text-color-dark);
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 999999;
background-color: var(--background-overlay);
display: flex; /* Modern layout */
justify-content: center;
align-items: center;
overflow-y: auto;
box-sizing: border-box;
animation: fadeIn 0.4s ease-in-out;
}
/* Modal container */
.eighteen .window {
width: clamp(300px, 90vw, 600px); /* Responsive width with clamp() */
background: var(--background-light);
border-radius: 8px;
border: 1px solid var(--border-color-medium);
box-shadow: var(--box-shadow-dark);
transform: translateY(20px);
animation: slideInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
padding: 1rem;
}
.eighteen .window .inter {
border: 1px solid var(--border-color-medium); /* Lighter border for a cleaner look */
height: 100%;
padding: 1.5rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem; /* Consistent spacing */
}
.eighteen .window .image {
width: 100%;
max-height: 180px; /* Use max-height to let it be responsive */
border: 1px solid var(--border-color-light);
box-sizing: border-box;
overflow: hidden;
border-radius: 4px;
}
.eighteen .window .image img {
width: 100%;
height: 100%;
object-fit: cover; /* Ensure image covers the area without distortion */
}
.eighteen .window .info_content {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--border-color-light);
padding: 1.25rem;
font-size: 1rem;
font-weight: 600;
text-align: center;
line-height: 1.4;
flex-grow: 1; /* Allow content to grow */
border-radius: 4px;
}
.eighteen .window .accept {
width: 100%;
text-align: center;
padding-top: 1rem;
}
.eighteen .window .accept a {
text-decoration: none;
border-radius: 6px;
font-weight: 700;
padding: 0.8rem 1.5rem;
transition: all 0.3s ease;
min-width: 150px;
}
.eighteen .window a.nott {
color: var(--primary-color-dark);
border: 1px solid var(--primary-color-dark);
background-color: transparent;
margin-right: 1rem;
}
.eighteen .window a.nott:hover {
background-color: var(--primary-color-dark);
color: var(--text-color-light);
transform: translateY(-2px);
}
.eighteen .window a.click_accept {
color: var(--text-color-light);
border: 1px solid var(--primary-color-dark);
background-color: var(--primary-color);
margin-left: 1rem;
}
.eighteen .window a.click_accept:hover {
background-color: var(--primary-color-dark);
transform: translateY(-2px);
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideInUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* Mobile responsive adjustments */
@media (max-width: 625px) {
.eighteen .window {
width: 95%;
margin: 1rem;
height: auto;
}
.eighteen .window .inter {
padding: 1rem;
gap: 1rem;
}
.eighteen .window .accept {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding-top: 0.5rem;
}
.eighteen .window .accept a {
margin: 0 !important; /* Override margins for better mobile stacking */
width: 100%;
}
}