/* ==============================================
MAUVE DARK THEME — by GlobalChat
Performance-first: Font loaded via
in the HTML , NOT via @import (faster FCP).
============================================== */
/* --- FONTS --- */
/* Salsa font: add these tags to your in head_load.php once:
*/
body,
input,
textarea,
button,
select,
.font_text,
.text_reg,
.username,
.user_item_name {
font-family: 'Salsa', cursive, system-ui, sans-serif;
}
/* --- SCROLLBARS --- */
* {
scrollbar-width: thin;
scrollbar-color: #5b5d618f rgba(0, 0, 0, 0.2);
}
*::-webkit-scrollbar {
width: 6px;
}
*::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
}
*::-webkit-scrollbar-thumb {
background-color: #554c53;
border-radius: 10px;
}
/* --- ANIMATIONS (GPU-accelerated, no layout reflow) --- */
@keyframes off-on {
from {
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.65));
}
to {
filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.6));
}
}
@keyframes shadow-pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
}
100% {
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
}
}
@keyframes bounceInUp {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, -20px, 0);
}
75% {
transform: translate3d(0, 10px, 0);
}
90% {
transform: translate3d(0, -5px, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
.head_logo img,
.chat_head_logo img {
animation: off-on 2s ease-in-out infinite alternate;
}
.bnotify,
.foot_notify,
.head_notify {
animation: shadow-pulse 1.5s infinite;
}
.my_mood,
.list_mood {
animation: bounceInUp 1s both;
}
/* --- MODAL OVERLAY --- */
.small_modal_out,
.large_modal_out,
.over_modal_out,
.over_emodal_out,
.top_modal_out {
background-color: rgba(0, 0, 0, 0.85);
}
/* ==============================================
GENERAL COLORS
============================================== */
a {
color: #aaa;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
transition: color 0.3s ease, text-shadow 0.3s ease;
}
a:hover {
color: #fff;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}
body {
background: #1f1d1d;
color: #fff;
}
button {
background: transparent;
color: #fff;
transition: background 0.3s ease;
}
input,
textarea,
.post_input_container {
background: #2f2e34;
border: 1px solid #534c4c;
color: #e6dfdf;
border-radius: 10px;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
transition: border-color 0.3s ease;
}
input:focus,
textarea:focus {
border-color: #888;
}
.setdef {
color: #e6dfdf;
}
/* cookie box */
.cookie_wrap {
background: #1c1b1b;
color: #fff;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
/* hover states */
.bback {
background: rgba(255, 255, 255, 0.05);
}
.bbackb {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
}
.bhover:hover {
background: rgba(255, 255, 255, 0.06);
}
.bbackhover {
background: rgba(255, 255, 255, 0.05);
}
.bbackhover:hover {
background: rgba(255, 255, 255, 0.08);
}
.bbackhoverb {
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
}
.bbackhoverb:hover {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/* menus, separators */
.blisting,
.blist,
.bmenu,
.submenu,
.avitem {
border-bottom: 1px solid #333;
}
.blisting:hover {
background: rgba(255, 255, 255, 0.04);
border-left: 2px solid #554c53;
}
.bmenu:hover,
.submenu:hover,
.avitem:hover {
background: rgba(255, 255, 255, 0.05);
}
.card_menu .avitem:last-child {
border-bottom: none;
}
/* private panel top */
.back_ptop {
background: linear-gradient(#050405, #433f44);
color: #fff;
border-radius: 12px 12px 0 0;
}
.bpmenu:hover {
background: rgba(255, 255, 255, 0.05);
}
.bsub {
background: #111;
}
.bsub:hover {
background: rgba(255, 255, 255, 0.05);
}
/* shadows & selection */
.bshadow,
.page_element,
.float_menu,
.btnshadow,
.pboxed {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
border-radius: 12px;
}
.bselected,
.rselected {
background: rgba(255, 255, 255, 0.08);
border-radius: 6px;
}
.cselected,
.liked {
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
}
/* pagination & tags */
.pag_btn {
background: rgba(255, 255, 255, 0.05);
border-radius: 5px;
}
.pagselected,
.pag_btn:hover {
background: rgba(255, 255, 255, 0.1);
}
.gtag {
background: #554c53;
border: 1px solid #333;
border-radius: 4px;
display: inline-block;
vertical-align: middle;
}
/* borders */
.bborder {
border-bottom: 1px solid #333;
}
.tborder {
border-top: 1px solid #333;
}
.lborder,
.ppanel {
border-left: 1px solid #333;
}
.rborder {
border-right: 1px solid #333;
}
.fborder {
border: 1px solid #333;
}
.float_top,
.float_ctop {
border-bottom: 1px solid #333;
}
/* headers, footers, panels */
.bhead {
background: linear-gradient(#050405, #433f44);
color: #fff;
}
.bsidebar {
background: linear-gradient(to right, #050405, #433f44);
color: #fff;
}
.modal_top {
background: linear-gradient(#000, #353136);
color: #fff;
border-radius: 12px 12px 0 0;
}
.pro_top {
background: linear-gradient(#000, #353136);
color: #fff;
border-radius: 12px 12px 0 0;
}
.bfoot {
background: linear-gradient(to top, #050405, #433f44);
color: #fff;
}
.foot {
background: linear-gradient(to top, #000, #353136);
color: #fff;
}
/* backgrounds */
.backglob {
background: #1f1d1d;
}
.back_chat {
background: #1f1d1d;
min-height: 400px;
position: relative;
}
/* boxes & modals */
.back_priv,
.back_box,
.back_modal,
.page_element,
.back_quote {
background: #1c1b1b;
border: 1px solid #333;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}
.back_priv {
box-shadow: inset 0 0 10px #000;
}
.back_panel {
background: #282525;
border-radius: 10px;
}
.back_menu,
.back_pmenu {
background: #0d0a07;
border: 1px solid #333;
border-radius: 10px;
}
.back_input {
background: linear-gradient(to top, #050405, #433f44);
border-top: 1px solid #333;
border-radius: 0 0 12px 12px;
}
/* login page */
#intro_top {
background: none;
}
#intro_top .bcell_mid {
width: 100%;
}
#intro_top::before {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.25;
background: url('images/background.jpg') center center / cover no-repeat;
}
.intro_login_btn {
background: linear-gradient(#554c53, #1f1d1d 20%);
color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
border-radius: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.intro_login_btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
}
.intro_guest_btn {
background: linear-gradient(#3c3c3c, #000 20%);
color: #fff;
border-radius: 20px;
}
/* theme colors */
.theme_color {
color: #554c53;
}
.default_color {
color: #aaa;
}
.error {
color: #cc0000;
}
.success {
color: #74b20e;
}
.warn {
color: orange;
}
/* buttons */
.theme_btn,
.back_theme {
background: #554c53;
color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
transition: background 0.3s ease;
}
.theme_btn:hover {
background: #6b6068;
}
.default_btn,
.back_default {
background: #3e3a3d;
color: #fff;
border-radius: 8px;
}
.defaultd_btn {
background: #282525;
color: #fff;
border-radius: 8px;
}
.ok_btn {
background: #74b20e;
color: #fff;
border-radius: 8px;
}
.warn_btn {
background: orange;
color: #fff;
border-radius: 8px;
}
.delete_btn {
background: #cc0000;
color: #fff;
border-radius: 8px;
}
.send_btn {
color: #f6f6f6;
}
/* text & icons */
.user {
color: #fff;
}
.chat_system {
color: #aaa;
}
.menui,
.subi {
color: #fff;
}
/* offline users */
.offline {
opacity: 0.4;
filter: grayscale(100%);
}
/* wall & input */
.reply_item {
background: #1c1b1b;
border-radius: 8px;
}
.main_post_item {
color: rgba(255, 255, 255, 0.5);
}
.input_item {
color: #aaa;
}
/* chat bubbles */
.mbubble {
color: #fff;
background: #2b2b2b;
border-radius: 12px 12px 12px 2px;
padding: 8px 12px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
}
.topic_log {
background: linear-gradient(to right, #282525, #1c1b1b);
color: #e6dfdf;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
border-radius: 8px;
}
/* private bubbles */
.target_private,
.hunt_quote {
color: #fff;
background: #333;
border-radius: 12px 12px 2px 12px;
padding: 8px;
}
.hunter_private,
.targ_quote {
color: #fff;
background: #1c1b1b;
border-radius: 12px 12px 12px 2px;
padding: 8px;
}
/* quote */
.cquote {
background: #282525;
color: #fff;
border-left: 3px solid #554c53;
border-radius: 4px;
padding-left: 8px;
}
/* tabs */
.tab_menu {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
border-radius: 10px 10px 0 0;
}
.tab_selected {
background: rgba(255, 255, 255, 0.05);
border-bottom: 2px solid #554c53;
}
/* modal menu */
.modal_mback {
background: rgba(0, 0, 0, 0.3);
}
.modal_mborder {
border-bottom: 1px solid #333;
}
.modal_selected {
background: rgba(255, 255, 255, 0.08);
border-left: 3px solid #554c53;
}
.modal_back {
background-color: rgba(0, 0, 0, 0.85);
}
/* progress & notify */
.bprogress {
background: #74b20e;
color: #fff;
border-radius: 10px;
}
.bnotify {
background: red;
color: #fff;
border-radius: 50%;
}
/* dates */
.sub_date,
.sub_text,
.list_mood {
color: #888;
}
.sub_chat,
.sub_priv {
color: #aaa;
}
/* profile likes & level numbers */
.plikes,
.level_number,
.level_count {
background-color: rgba(100, 100, 100, 0.2);
color: #fff;
border-radius: 8px;
padding: 2px 6px;
display: inline-block;
vertical-align: middle;
line-height: normal;
}
/* special items */
.my_notice {
color: #fff;
background: linear-gradient(to top, #312f2f, #1f1d1f);
border: 1px solid #000;
border-radius: 8px;
}
.system_text {
background: rgba(255, 255, 255, 0.05);
color: #aaa;
border-radius: 5px;
}
.back_page {
background: #554c53;
color: #fff;
}
.post_video {
background: #000;
border-radius: 8px;
}
/* slider */
.boom_slider .ui-widget-content {
background: #1c1b1b;
}
.boom_slider .ui-state-default {
background: #554c53 !important;
border-radius: 50%;
}
.boom_slider .ui-state-active {
background: #554c53 !important;
}
.boom_slider .ui-slider-range {
background: #aaa;
}
/* select dropdown */
.selectboxit-list,
.selectboxit-btn {
background-color: #2f2e34;
border: 1px solid #534c4c;
color: #e6dfdf;
border-radius: 8px;
transition: background 0.3s ease;
}
.selectboxit-list .selectboxit-focus .selectboxit-option-anchor {
background-color: #3e3a3d;
color: #e6dfdf;
}
.selectboxit-default-arrow {
border-top: 4px solid #aaa;
}
.selectboxit-btn.selectboxit-enabled:hover,
.selectboxit-btn.selectboxit-enabled:focus,
.selectboxit-btn.selectboxit-enabled:active {
background: #2f2e34;
color: #e6dfdf;
}
.selectboxit-options {
background: #1c1b1b;
color: #e6dfdf;
border: 1px solid #333;
border-radius: 8px;
}
.selectboxit-list .selectboxit-option-anchor {
color: #aaa;
text-shadow: none;
}
/* user list items */
.user_item {
background-image:
linear-gradient(374deg, transparent 0%, transparent 50%, rgba(159, 159, 159, 0.08) 50%, rgba(159, 159, 159, 0.07) 77%, transparent 77%, transparent 100%),
linear-gradient(329deg, transparent 0%, transparent 91%, rgba(159, 159, 159, 0.07) 91%, rgba(159, 159, 159, 0.07) 99%, transparent 99%, transparent 100%),
linear-gradient(329deg, #000, #000);
border: 1px solid #333;
border-radius: 12px;
margin-bottom: 6px;
transition: filter 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.user_item:hover {
filter: brightness(1.2);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
/* misc */
.modal_in {
border: 1px solid #333;
border-radius: 8px;
}
.page_drop {
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
}
.sp_icon {
background: linear-gradient(#554c53, #1f1d1d);
}
.panel_bar {
display: table;
width: 100%;
table-layout: fixed;
height: 40px;
background: linear-gradient(#050405, #433f44);
}
.fa-plus,
.fa-regular,
.fa-microphone {
color: #fff;
}
/* --- CHAT LOG ROWS --- */
.chat_log {
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
margin: 0;
padding: 10px 14px;
transition: background-color 0.2s ease;
}
.chat_log:nth-child(odd) {
background: rgba(255, 255, 255, 0.015);
}
.chat_log:nth-child(even) {
background: rgba(0, 0, 0, 0.22);
}
.chat_log:hover {
background: rgba(255, 255, 255, 0.04);
}
/* responsive */
@media screen and (max-width: 576px) {
.back_chat::before {
background-position: left 38% center;
opacity: 0.4;
}
.cleft2,
.cright2 {
background: #1c1b1b;
}
.user_item {
border-radius: 8px;
}
}
/* --- BACK CHAT & SLIDESHOW CONTAINER --- */
.backglob {
background: #1f1d1d;
}
.back_chat {
background: #1f1d1d;
min-height: 400px;
position: relative;
}
/* ==============================================
CHAT BACKGROUND — MATCH OLD SITE
============================================== */
.back_chat {
position: relative;
background: #1f1d1d;
isolation: isolate;
}
/* Same background treatment as the old site:
image at 40% opacity, no extra black color overlay */
.back_chat::before {
content: '';
position: absolute;
inset: 0;
background: url('images/background.jpg');
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
opacity: 0.4;
box-shadow: inset 0 0 60px #000;
pointer-events: none;
z-index: -1;
}
/* Keep chat content above the background */
.back_chat > *,
.back_chat .chat_log {
position: relative;
z-index: 1;
}