PairDrop/public/styles/content-moderation.css

211 lines
3.9 KiB
CSS

.content-moderation-warning {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.95);
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 0 20px rgba(255, 0, 0, 0.2);
z-index: 9999;
max-width: 90%;
width: 500px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 0, 0, 0.1);
}
.warning-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.warning-icon {
width: 64px;
height: 64px;
margin-bottom: 1rem;
animation: pulse 2s infinite;
}
/* Estilos específicos para cada tipo de conteúdo */
.warning-icon[data-type="explicit"] {
filter: drop-shadow(0 0 8px rgba(255, 221, 0, 0.4));
}
.warning-icon[data-type="spam"] {
filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.4));
}
.warning-icon[data-type="offensive"] {
filter: drop-shadow(0 0 8px rgba(255, 221, 0, 0.4));
}
.warning-title {
font-size: 1.5rem;
font-weight: bold;
text-align: center;
}
/* Títulos específicos para cada tipo */
.warning-title[data-type="explicit"] {
color: #ffdd00;
text-shadow: 0 0 8px rgba(255, 221, 0, 0.3);
}
.warning-title[data-type="spam"] {
color: #ff0000;
text-shadow: 0 0 8px rgba(255, 0, 0, 0.3);
}
.warning-title[data-type="offensive"] {
color: #ffdd00;
text-shadow: 0 0 8px rgba(255, 221, 0, 0.3);
}
.warning-message {
color: #fff;
text-align: center;
margin-bottom: 1rem;
}
.warning-preview {
width: 100%;
max-height: 300px;
overflow: hidden;
border-radius: 0.5rem;
margin: 1rem 0;
position: relative;
}
.warning-preview.blurred {
filter: blur(20px);
}
.warning-preview img,
.warning-preview video {
width: 100%;
height: 100%;
object-fit: contain;
}
.warning-notice {
padding: 1rem;
border-radius: 0.5rem;
margin: 1rem 0;
text-align: center;
}
/* Avisos específicos para cada tipo */
.warning-notice[data-type="explicit"] {
background: rgba(255, 221, 0, 0.1);
}
.warning-notice[data-type="spam"] {
background: rgba(255, 0, 0, 0.1);
}
.warning-notice[data-type="offensive"] {
background: rgba(255, 221, 0, 0.1);
}
.warning-notice p {
margin: 0;
font-size: 0.9rem;
}
/* Texto do aviso específico para cada tipo */
.warning-notice[data-type="explicit"] p {
color: #ffdd00;
}
.warning-notice[data-type="spam"] p {
color: #ff0000;
}
.warning-notice[data-type="offensive"] p {
color: #ffdd00;
}
.warning-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
margin-top: 1rem;
}
.warning-button {
padding: 0.8rem 1.5rem;
border: none;
border-radius: 0.5rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
min-width: 150px;
}
.warning-button.show {
background: #4CAF50;
color: white;
}
.warning-button.close {
background: #666;
color: white;
}
.warning-button.block {
background: #ffdd00;
color: #000;
}
.warning-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.warning-button.show:hover {
background: #45a049;
}
.warning-button.close:hover {
background: #555;
}
.warning-button.block:hover {
background: #ffd700;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
@media (max-width: 600px) {
.content-moderation-warning {
width: 95%;
padding: 1rem;
}
.warning-title {
font-size: 1.2rem;
}
.warning-button {
width: 100%;
min-width: unset;
}
.warning-buttons {
flex-direction: column;
}
}