@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
/* New Header Styles */
/* New Header Styles */
.site-header { margin: 0; padding: 0; width: 100%; height: auto; min-height: 46px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; box-sizing: border-box; backdrop-filter: blur(10px); background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0px, rgba(0,0,0,0.8) 12px, rgba(0,0,0,0) 36px), repeating-linear-gradient(45deg, transparent 0px, transparent 6px, rgba(0,0,0,0.5) 6px, rgba(0,0,0,0.5) 12px), linear-gradient(to bottom, var(--sh1, rgba(17,17,17,0.7)) 0px, var(--sh1, rgba(17,17,17,0.7)) 16px, var(--sh2, rgba(43,43,43,0.7)) 42px, var(--sh3, rgba(22,22,22,0.7)) 42px, var(--sh3, rgba(22,22,22,0.7)) 100%); box-shadow: 0 2px 8px rgba(0,0,0,0.6); position: relative; z-index: 500; }
.header-inner { display: flex; align-items: stretch; width: 100%; max-width: 1920px; margin: 0 auto; height: 46px; }
.brand { display: flex; align-items: center; padding: 0 10px 0 15px; text-decoration: none; }
.site-logo { height: 21px; width: auto; display: block; filter: none; margin-right: 0; }
/* On bright profile themes, darken the logo so its text
reads clearly against lighter header backgrounds. */
body.profile-theme-active.profile-theme-bright .site-logo {
filter: brightness(0.25) contrast(1.3);
}
.main-nav { display: flex; align-items: stretch; margin: 0; padding: 0; border: none; box-shadow: inset 0 1px 2px rgba(0,0,0,0.8); background: none; box-shadow: none; list-style: none; flex-grow: 1; }
.main-nav a { display: flex; align-items: center; padding: 0 18px; text-decoration: none; font-size: 15px; font-weight: normal; color: #d6e2eb; font-family: 'Poppins', sans-serif; border-right: none; border-left: none; text-shadow: 0 -1px 0 #000; transition: background 0.2s, color 0.2s; box-sizing: border-box; }
.main-nav a:hover { background: rgba(0,0,0,0.3); color: #fff; }
.main-nav a.active { color: #fff; background: rgba(0,0,0,0.65); box-shadow: none; }
.main-nav a.nav-disabled {
opacity: 0.45;
cursor: default;
/* ensure disabled nav links do not receive pointer events */
pointer-events: none;
}
.main-nav a[aria-disabled="true"],
.main-nav a[data-feature-disabled],
.main-nav a.disabled {
opacity: 0.45;
cursor: default;
pointer-events: none;
}
.main-nav a.nav-disabled:hover {
background: none;
color: #d6e2eb;
}
.header-nav-btn { display: flex; align-items: center; padding: 0 18px; text-decoration: none; font-size: 15px; font-weight: normal; color: #d6e2eb; font-family: 'Poppins', sans-serif; border-right: none; border-left: none; text-shadow: 0 -1px 0 #000; transition: background 0.2s, color 0.2s; box-sizing: border-box; height: 46px; background: transparent; cursor: pointer; outline: none; border-top: none; border-bottom: none; }
.header-nav-btn:hover { background: rgba(0,0,0,0.3); color: #fff; }
.header-user.logged-out { border-left: none; box-shadow: none; }
.header-user.logged-out .header-nav-btn:first-child { border-left: none; }
.header-user { display: flex; align-items: center; gap: 10px; margin-left: auto; padding: 0 7px 0 20px; border-left: none; box-shadow: none; }
.username { color: #fff; text-decoration: none; font-size: 14px; font-family: 'Poppins', sans-serif; text-shadow: 0 -1px 0 #000; }
.avatar-link { display: flex; align-items: center; justify-content: center; }
.avatar-link img { display: none; }
.avatar-ph { width: 30px; height: 30px; background: linear-gradient(to bottom, #ccc 0%, #999 100%); border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); }
* {
box-sizing: border-box;
}
body { margin: 0; min-height: 100vh; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background: #000000; color: #dce6f1; overflow-x: hidden; overflow-y: scroll; }
body:not(:has(.profile-page)) {
background-image: linear-gradient(to bottom, #000 0%, #000 200px, transparent 350px, transparent calc(80vh - 150px), #000 80vh), url("../assets/Milo%20BG.png"), url("../assets/Kolten%20BG.png");
background-position: left top, right calc(50vw + 480px) top, left calc(50vw + 481px) top;
background-repeat: no-repeat, no-repeat, no-repeat;
background-attachment: scroll, scroll, scroll;
background-size: 100% 100%, auto 80vh, auto 80vh;
}
.site-shell {
width: 100%; min-height: 100vh; margin: 0 auto;
display: flex; flex-direction: column;
position: relative; z-index: 1; background: transparent;
}
main {
position: relative;
}
main::before {
content: '';
position: absolute;
top: 0; bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
pointer-events: none;
z-index: 10;
background: linear-gradient(to right,
#000 0%,
rgba(0,0,0,0) calc(50vw - 600px),
rgba(0,0,0,0) calc(50vw + 600px),
#000 100%
);
}
/* Constrain internal content wrapper holding aside and main */
.content-wrapper,
.header-inner,
.sub-header-bar,
.footer-bottom-inner,
.footer-columns,
.yt-2012-watch-layout,
.global-audio-main,
.page-container {
max-width: 1920px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
body.profile-bg-fade::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background: linear-gradient(
to right,
rgba(0, 0, 0, 0.97) 0%,
rgba(0, 0, 0, 0.88) 10%,
rgba(0, 0, 0, 0.58) 18%,
rgba(0, 0, 0, 0.2) 28%,
rgba(0, 0, 0, 0) 38%,
rgba(0, 0, 0, 0) 62%,
rgba(0, 0, 0, 0.2) 72%,
rgba(0, 0, 0, 0.58) 82%,
rgba(0, 0, 0, 0.88) 90%,
rgba(0, 0, 0, 0.97) 100%
);
}
.brand-row {
display: flex;
align-items: center;
gap: 14px;
}
.header-actions {
margin-left: auto;
display: flex;
gap: 10px;
align-items: center;
}
.header-upload-btn { padding: 8px 16px; border: 1px solid #0d4a68; border-radius: 4px; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 10px, transparent 10px, transparent 20px), linear-gradient(to bottom, #3eb8e5 0%, #2092c4 50%, #1078a6 51%, #085d85 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.5); color: #ffffff; font-weight: bold; font-size: 13px; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); cursor: pointer; }
.header-upload-btn:hover { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 10px, transparent 10px, transparent 20px), linear-gradient(to bottom, #52c4ed 0%, #32a2d1 50%, #1d88b5 51%, #106b94 100%); }
.header-signin { padding: 8px 16px; border: 1px solid #0d4a68; border-radius: 4px; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 10px, transparent 10px, transparent 20px), linear-gradient(to bottom, #3eb8e5 0%, #2092c4 50%, #1078a6 51%, #085d85 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.5); color: #ffffff; font-weight: bold; font-size: 13px; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); }
.header-signin:hover { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 10px, transparent 10px, transparent 20px), linear-gradient(to bottom, #52c4ed 0%, #32a2d1 50%, #1d88b5 51%, #106b94 100%); }
.status {
margin: 0;
font-size: 11px;
letter-spacing: 1.8px;
color: #70e0ff;
}
.site-header h1 {
margin: 6px 0 2px;
font-size: 38px;
letter-spacing: 1px;
color: #f2f8ff;
}
.tagline {
margin: 0;
color: #95a6bd;
}
.main-nav a::after {
content: none;
}
.main-nav a:hover { background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.main-nav a.active { color: #fff !important; }
.main-content {
flex: 1;
padding: 16px;
background: transparent;
max-width: 1000px;
width: 100%;
box-sizing: border-box;
margin: 0 auto;
}
.hero-panel { padding: 30px; border: 1px solid #000; border-radius: 6px; background: url("../assets/hero-bg.jpg") center/cover no-repeat, linear-gradient(to bottom, #2a3a50 0%, #1a2536 100%); background-blend-mode: overlay; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.3); text-align: center; }
.hero-panel h2 { margin: 0 0 15px; color: #fff; font-size: 32px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); }
.hero-panel p { margin: 0 0 20px; color: #dce6f1; font-size: 16px; line-height: 1.5; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.hero-panel button { margin-top: 12px; padding: 10px 18px; border: 1px solid #0d4a68; border-radius: 4px; background: linear-gradient(to bottom, #3eb8e5 0%, #2092c4 50%, #1078a6 51%, #085d85 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.5); color: #ffffff; font-weight: bold; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); cursor: pointer; }
.grid-panels { margin-top: 20px; display: grid; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.panel-card { padding: 20px; border: 1px solid #000; border-radius: 6px; background: linear-gradient(to bottom, #2a2a2a 0%, #111111 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 5px rgba(0, 0, 0, 0.5); text-align: center; transition: transform 0.2s, box-shadow 0.2s; }
.panel-card h3 { margin: 0 0 10px; color: #3eb8e5; font-size: 18px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.notification-banner {
padding: 15px;
margin-bottom: 20px;
border: 1px solid #000;
border-radius: 6px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.3);
}
.notification-banner p {
margin: 0;
font-size: 14px;
font-weight: bold;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.notification-banner button {
padding: 6px 12px;
border: 1px solid #000;
border-radius: 4px;
background: linear-gradient(to bottom, #4a5a6a 0%, #2a3a4a 100%);
color: #fff;
cursor: pointer;
font-size: 12px;
font-weight: bold;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.notification-banner button:hover {
background: linear-gradient(to bottom, #5a6a7a 0%, #3a4a5a 100%);
}
.notification-banner.info {
background: linear-gradient(to bottom, #2980b9 0%, #2c3e50 100%);
border-color: #2980b9;
}
.notification-banner.warning {
background: linear-gradient(to bottom, #d35400 0%, #e67e22 100%);
border-color: #d35400;
}
.notification-banner.error {
background: linear-gradient(to bottom, #c0392b 0%, #e74c3c 100%);
border-color: #c0392b;
}
.home-content-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
.home-section {
background: linear-gradient(to bottom, #1a2433 0%, #101622 100%);
border: 1px solid #000;
border-radius: 6px;
padding: 15px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 5px rgba(0, 0, 0, 0.5);
}
.home-section h3 {
margin: 0 0 15px;
color: #3eb8e5;
font-size: 20px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
border-bottom: 1px solid #000;
padding-bottom: 10px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}
.top-content-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.top-content-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid #000;
border-radius: 4px;
text-decoration: none;
color: #dce6f1;
transition: background 0.2s;
}
.top-content-item:hover {
background: rgba(255, 255, 255, 0.05);
}
.top-content-rank {
font-size: 24px;
font-weight: bold;
color: #70e0ff;
width: 30px;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.top-content-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.top-content-title {
font-weight: bold;
font-size: 14px;
}
.top-content-author {
font-size: 12px;
color: #95a6bd;
}
.top-content-stats {
font-size: 12px;
color: #f2ae00;
font-weight: bold;
}
.panel-card p { margin: 0 0 15px; color: #b8cde3; font-size: 14px; }
.panel-action { display: inline-block; margin-top: 12px; padding: 8px 14px; border: 1px solid #0d4a68; border-radius: 4px; background: linear-gradient(to bottom, #3eb8e5 0%, #2092c4 50%, #1078a6 51%, #085d85 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.5); color: #ffffff; font-weight: bold; font-size: 13px; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); text-align: center; }
.panel-action:hover { background: linear-gradient(to bottom, #52c4ed 0%, #32a2d1 50%, #1d88b5 51%, #106b94 100%); }
.home-show-btn { margin-top: 15px; padding: 8px 16px; font-size: 13px; }
.demo-block { margin-top: 14px; padding: 15px; border: 1px solid #000; border-radius: 5px; background: linear-gradient(to bottom, #2a2a2a 0%, #111111 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.4); }
.demo-block h3 {
margin: 0 0 10px;
color: #ffffff;
font-size: 18px;
}
.demo-player, .demo-video, .tutorial-card, .profile-demo { border: 1px solid #000; border-radius: 4px; background: #0b131f; padding: 10px; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.05); }
.demo-label {
margin: 0 0 8px;
color: #b4c8df;
font-size: 13px;
}
.description-box { margin-top: 10px; padding: 10px; border: 1px solid #000; border-radius: 4px; background: #131b28; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.description-box .demo-label {
margin: 0;
}
.comments-block h3 {
margin: 0 0 10px;
color: #ffffff;
}
.comment-form {
display: grid;
gap: 8px;
}
.comment-form input, .comment-form textarea { width: 100%; padding: 8px; border: 1px solid #000; border-radius: 3px; background: #1a2433; color: #e0e0e0; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.1); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.comment-form textarea {
resize: vertical;
}
.signin-actions {
margin-top: 2px;
display: flex;
justify-content: space-between;
gap: 10px;
}
.signin-actions a { color: #3eb8e5; font-size: 12px; text-decoration: none; font-weight: bold; }
.signin-actions a:hover { color: #52c4ed; text-decoration: underline; }
.auth-status {
margin: 2px 0 0;
min-height: 16px;
color: #8ec9e5;
font-size: 12px;
}
.auth-status-success {
color: #4caf50;
font-weight: bold;
}
.auth-status-error {
color: #ffb4b4;
}
.profile-settings-actions {
display: flex;
gap: 8px;
align-items: center;
}
.profile-color-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
}
.profile-color-field {
display: grid;
gap: 6px;
font-size: 12px;
color: #9fb6cd;
}
.profile-color-field input[type='color'] { width: 100%; height: 30px; padding: 0; border: 1px solid #000; border-radius: 3px; background: #1a2433; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6); }
.profile-upload-field {
display: grid;
gap: 6px;
font-size: 12px;
color: #9fb6cd;
}
.profile-settings-help {
margin: 0;
color: #9db5cd;
font-size: 12px;
}
.profile-media-grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.profile-media-card { border: 1px solid #000; border-radius: 4px; background: linear-gradient(to bottom, #2a2a2a 0%, #111111 100%); padding: 10px; display: grid; gap: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.4); }
.profile-media-card h4 {
margin: 0;
color: #d8ecff;
font-size: 13px;
}
.profile-alt-url {
border-top: 1px solid #213246;
padding-top: 7px;
}
.profile-alt-url summary {
cursor: pointer;
color: #88cdeb;
font-size: 12px;
}
.profile-alt-url input {
margin-top: 8px;
width: 100%;
border: 1px solid #2c3f59;
background: #0a111c;
color: #d7e6f7;
padding: 8px;
font-family: Tahoma, Arial, sans-serif;
font-size: 13px;
}
.profile-upload-field input[type='file'] {
width: 100%;
border: 1px solid #2c3f59;
background: #0a111c;
color: #d7e6f7;
padding: 6px 8px;
font-family: Tahoma, Arial, sans-serif;
font-size: 12px;
}
.custom-file-upload {
display: flex;
align-items: center;
gap: 10px;
border: 1px solid #2c3f59;
background: #0a111c;
padding: 4px;
border-radius: 3px;
}
.shiny-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border: 1px solid #0d4a68;
border-radius: 3px;
background: linear-gradient(to bottom, #3eb8e5 0%, #2092c4 50%, #1078a6 51%, #085d85 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.5);
color: #ffffff;
font-weight: bold;
font-size: 12px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
cursor: pointer;
}
.shiny-btn::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
}
.shiny-btn:hover {
background: linear-gradient(to bottom, #52c4ed 0%, #32a2d1 50%, #1d88b5 51%, #106b94 100%);
}
.file-name {
color: #d7e6f7;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal[hidden] {
display: none !important;
}
.modal[hidden] {
display: none;
}
.modal-content {
background: #101b2b;
border: 1px solid #2c3f59;
border-radius: 6px;
padding: 20px;
width: 90%;
max-width: 640px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.modal-content h3 {
margin-top: 0;
color: #d8ecff;
}
.crop-container {
max-height: 400px;
overflow: hidden;
margin-bottom: 15px;
background: #000;
}
.crop-container img {
max-width: 100%;
display: block;
}
.modal-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
@media (max-width: 900px) {
.profile-media-grid {
grid-template-columns: 1fr;
}
}
.comments-list {
margin-top: 10px;
display: grid;
gap: 8px;
}
.comment-item { border: 1px solid #000; border-radius: 4px; background: linear-gradient(to bottom, #2a2a2a 0%, #111111 100%); padding: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.4); }
.comment-head {
margin: 0 0 6px;
color: #dff0ff;
font-size: 13px;
font-weight: bold;
}
.comment-head span {
margin-left: 6px;
color: #85a1bc;
font-weight: normal;
}
.comment-body { margin: 0; color: #b8cde3; font-size: 13px; line-height: 1.4; }
.media-player {
width: 100%;
display: block;
}
.video-player-container {
position: relative;
width: 100%;
background: #000;
border-radius: 4px;
overflow: hidden;
border: 1px solid #2b425e;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.video-player-container .custom-media-controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-top: 0;
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0;
background: linear-gradient(to bottom, rgba(34, 45, 61, 0.85) 0%, rgba(19, 27, 40, 0.95) 100%);
backdrop-filter: blur(4px);
padding: 10px 15px;
opacity: 0;
transition: opacity 0.3s ease;
}
.video-player-container:hover .custom-media-controls,
.video-player-container:focus-within .custom-media-controls {
opacity: 1;
}
.custom-media-controls { margin-top: 8px; padding: 12px 15px; border: 1px solid #000; border-radius: 4px; background: linear-gradient(to bottom, #2a2a2a 0%, #111111 100%); display: grid; grid-template-columns: auto auto 1fr auto 100px; align-items: center; gap: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.4); }
.custom-media-btn { padding: 8px 16px; border: 1px solid #0d4a68; border-radius: 4px; background: linear-gradient(to bottom, #3eb8e5 0%, #2092c4 50%, #1078a6 51%, #085d85 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.5); color: #ffffff; font-weight: bold; font-size: 13px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); cursor: pointer; transition: all 0.2s ease; }
.custom-media-btn:hover { background: linear-gradient(to bottom, #52c4ed 0%, #32a2d1 50%, #1d88b5 51%, #106b94 100%); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 4px rgba(0, 0, 0, 0.6); }
.custom-media-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }
.custom-media-time {
color: #b8d0e7;
font-size: 13px;
min-width: 85px;
font-family: monospace;
}
.custom-media-seek,
.custom-media-volume {
-webkit-appearance: none;
appearance: none;
width: 100%;
accent-color: #1ca7df;
border-radius: 4px;
--range-progress: 0%;
height: 8px;
border: 0;
background: linear-gradient(
to right,
#22b7ee 0,
#22b7ee var(--range-progress),
#131b28 var(--range-progress),
#131b28 100%
);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
cursor: pointer;
}
.custom-media-seek::-webkit-slider-runnable-track,
.custom-media-volume::-webkit-slider-runnable-track {
height: 8px;
border-radius: 4px;
background: transparent;
border: none;
}
.custom-media-seek::-webkit-slider-thumb,
.custom-media-volume::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 8px;
height: 14px;
border-radius: 2px;
background: #3eb8e5;
border: 1px solid #0d4a68;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 2px rgba(0,0,0,0.5);
margin-top: -3px;
cursor: pointer;
}
.custom-media-seek::-moz-range-track,
.custom-media-volume::-moz-range-track {
height: 8px;
border-radius: 4px;
background: transparent;
border: none;
}
.custom-media-seek::-moz-range-progress,
.custom-media-volume::-moz-range-progress {
height: 8px;
border-radius: 4px;
background: #22b7ee;
}
.custom-media-seek::-moz-range-thumb,
.custom-media-volume::-moz-range-thumb {
width: 8px;
height: 14px;
border-radius: 2px;
background: #3eb8e5;
border: 1px solid #0d4a68;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 2px rgba(0,0,0,0.5);
cursor: pointer;
}
.custom-media-volume-wrap {
color: #9cb5cd;
font-size: 13px;
}
.media-video {
width: 100%;
max-width: 1920px;
aspect-ratio: 16 / 9;
max-height: 1080px;
height: auto;
margin: 0 auto;
background: #000;
border: none;
}
.progress-track {
height: 10px;
border: 1px solid #2d415b;
background: #060c14;
}
.progress-fill {
display: block;
height: 100%;
background: linear-gradient(90deg, #1ea7e0, #5ad3ff);
}
.p-58 {
width: 58%;
}
.p-34 {
width: 34%;
}
.demo-controls {
margin-top: 8px;
display: flex;
gap: 6px;
}
.demo-controls button { padding: 6px 12px; border: 1px solid #0d4a68; border-radius: 4px; background: linear-gradient(to bottom, #3eb8e5 0%, #2092c4 50%, #1078a6 51%, #085d85 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.5); color: #ffffff; font-weight: bold; font-size: 12px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); cursor: pointer; }
.video-picker {
display: grid;
gap: 8px;
}
.tutorial-picker {
display: grid;
gap: 8px;
}
.tutorials-search input {
padding: 6px 10px;
border-radius: 3px;
border: 1px solid #000;
background: #0b111b;
color: #dce6f1;
font-size: 13px;
min-width: 220px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
}
.tutorials-search input::placeholder {
color: #7c8fa6;
}
.tutorial-pick { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; text-align: left; border: 1px solid #000; border-radius: 4px; background: linear-gradient(to bottom, #2a2a2a 0%, #111111 100%); color: #d4e4f7; padding: 15px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.4); }
/* Profile theme integration: use CSS variables set by profile script */
:root {
--profile-theme-accent: #3eb8e5;
--profile-theme-accent-bright: #52c4ed;
--profile-theme-panel: #101b2b;
--profile-theme-text: #b6c7db;
--profile-theme-accent-text: #ffffff;
}
body.profile-theme-active {
color: var(--profile-theme-text, #b6c7db);
}
.panel-card, .yt-box, .home-section, .modal-content {
background: linear-gradient(to bottom, var(--profile-theme-panel, #2a2a2a) 0%, #0f1418 100%);
border-color: var(--profile-theme-panel, #101b2b);
}
.panel-card h3, .home-section h3 {
color: var(--profile-theme-accent, #3eb8e5);
}
.panel-action, .shiny-btn, .header-upload-btn, .header-signin, .custom-media-btn {
background: linear-gradient(to bottom, var(--profile-theme-accent, #3eb8e5) 0%, color-mix(in srgb, var(--profile-theme-accent, #3eb8e5) 60%, #000 40%) 100%);
border-color: color-mix(in srgb, var(--profile-theme-accent, #3eb8e5) 40%, #000 60%);
color: var(--profile-theme-accent-text, #ffffff);
}
.custom-media-seek::-webkit-slider-thumb, .custom-media-volume::-webkit-slider-thumb,
.custom-media-seek::-moz-range-thumb, .custom-media-volume::-moz-range-thumb {
background: var(--profile-theme-accent, #3eb8e5);
border-color: color-mix(in srgb, var(--profile-theme-accent, #3eb8e5) 30%, #000 70%);
}
.main-nav a.active {
background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.1));
color: var(--profile-theme-accent, #3eb8e5) !important;
}
.profile-theme-active .site-logo {
filter: none;
}
.tutorial-pick:hover { border-color: #000; background: linear-gradient(to bottom, #2a3a50 0%, #1a2536 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 4px rgba(0, 0, 0, 0.6); }
.tutorial-snippet {
display: block;
padding: 7px 8px;
border: 1px solid #2b4564;
background: #0a111c;
color: #84d9ff;
font-family: Consolas, monospace;
font-size: 12px;
}
.video-pick { display: grid; grid-template-columns: 160px 1fr; gap: 10px; align-items: start; text-align: left; border: 1px solid #000; border-radius: 4px; background: linear-gradient(to bottom, #2a2a2a 0%, #111111 100%); color: #d4e4f7; padding: 10px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.4); }
.video-pick:hover { border-color: #000; background: linear-gradient(to bottom, #2a3a50 0%, #1a2536 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 4px rgba(0, 0, 0, 0.6); }
.video-thumb { height: 90px; border: 1px solid #000; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; letter-spacing: 0.5px; color: #e7f5ff; background: linear-gradient(to bottom, #1a2536 0%, #0d1420 100%); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5); }
.video-info { display: grid; gap: 6px; }
.video-title { font-size: 16px; font-weight: bold; color: #3eb8e5; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.video-desc,
.video-meta,
.video-stats { font-size: 12px; color: #8da6bf; display: flex; align-items: center; gap: 4px; }
.video-stats { font-size: 12px; color: #8da6bf; display: flex; align-items: center; gap: 4px; }
.stat-icon {
width: 14px;
height: 14px;
object-fit: contain;
vertical-align: text-bottom;
}
.stats-sep {
color: #6f87a3;
}
#video-player-panel {
margin-top: 10px;
}
.demo-list { margin-top: 10px; border: 1px solid #000; border-radius: 4px; background: #131b28; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); overflow: hidden; }
.demo-list p { margin: 0; padding: 10px; border-top: none; color: #9fb4cb; font-size: 13px; }
.demo-list p:first-child {
border-top: 0;
}
.album-track-btn { width: 100%; text-align: left; border: 0; border-top: 1px solid #000; background: transparent; color: #9fb4cb; padding: 10px; cursor: pointer; }
.album-track-btn:first-child {
border-top: 0;
}
.album-track-btn:hover { background: linear-gradient(to bottom, #2a3a50 0%, #1a2536 100%); color: #fff; }
.forum-list { margin-top: 15px; display: grid; gap: 12px; }
.forum-head-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 10px; border-bottom: 1px solid #000; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05); margin-bottom: 15px; }
.forum-head-row h3 {
margin: 0;
}
.forum-create-btn {
margin-top: 0;
}
.site-dialog-backdrop {
position: fixed;
inset: 0;
display: grid;
place-items: center;
background: rgba(3, 7, 12, 0.78);
z-index: 1000;
}
.site-dialog-backdrop[hidden] {
display: none;
}
.site-dialog { width: min(600px, calc(100% - 24px)); padding: 0; border: 1px solid #111; border-radius: 2px; background: #222222; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 28px rgba(0, 0, 0, 0.9); overflow: hidden; }
.site-dialog h3 {
margin: 0;
padding: 0 0 0 20px;
height: 48px;
display: flex;
align-items: center;
color: #eee;
font-size: 18px;
font-weight: normal;
background: linear-gradient(to bottom, rgba(0,0,0,1) 0px, rgba(0,0,0,1) 12px, rgba(0,0,0,0) 36px), repeating-linear-gradient(45deg, transparent 0px, transparent 6px, rgba(0,0,0,0.5) 6px, rgba(0,0,0,0.5) 12px), linear-gradient(to bottom, #111 0px, #111 16px, #2b2b2b 42px, #161616 42px, #161616 100%);
border-bottom: 2px solid #000;
position: relative;
text-shadow: 1px 1px 2px #000;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.site-dialog h3::after {
content: '\00d7';
position: absolute;
right: 0;
top: 0;
height: 48px;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #888;
cursor: pointer;
font-weight: 300;
border-left: 1px solid #000;
box-shadow: inset 1px 0 0 rgba(255,255,255,0.05);
}
.site-dialog h3:hover::after {
color: #fff;
}
.site-dialog form {
padding: 18px;
margin: 0;
}
.site-dialog .dialog-body {
padding: 18px;
background: #222222;
}
.site-dialog .comment-form input, .site-dialog .comment-form textarea {
background: #2a2a2a !important;
border: 1px solid #111 !important;
color: #fff !important;
border-radius: 2px !important;
box-shadow: inset 0 2px 5px rgba(0,0,0,0.8) !important;
padding: 12px !important;
font-size: 15px !important;
margin-bottom: 12px !important;
}
.dialog-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 15px;
}
.forum-card { display: grid; grid-template-columns: 118px 1fr; gap: 10px; padding: 10px; border: 1px solid #000; border-radius: 4px; text-decoration: none; background: linear-gradient(to bottom, #2a2a2a 0%, #111111 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.4); }
.forum-card:hover { border-color: #000; background: linear-gradient(to bottom, #2a3a50 0%, #1a2536 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 4px rgba(0, 0, 0, 0.6); }
.forum-thumb { height: 72px; border: 1px solid #000; border-radius: 3px; background: linear-gradient(to top, rgba(5, 9, 16, 0.85), rgba(5, 9, 16, 0.3)), linear-gradient(135deg, #2e4f74, #1f2f46); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5); }
.forum-info h4 { margin: 0 0 6px; font-size: 16px; color: #3eb8e5; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.forum-info p { margin: 0 0 8px; font-size: 13px; color: #b8cde3; line-height: 1.4; }
.forum-meta { margin: 0; color: #8da6bf; font-size: 12px; font-weight: bold; }
.album-grid { display: grid; gap: 15px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.album-card { display: grid; gap: 8px; text-decoration: none; border: 1px solid #000; border-radius: 6px; background: linear-gradient(to bottom, #2a2a2a 0%, #111111 100%); padding: 15px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 5px rgba(0, 0, 0, 0.5); text-align: center; transition: transform 0.2s, box-shadow 0.2s; }
.album-card:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 8px rgba(0, 0, 0, 0.6); }
.album-cover { display: block; width: 100%; aspect-ratio: 1 / 1; border: 1px solid #000; border-radius: 3px; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5); }
.album-cover-1 { background: linear-gradient(135deg, #2c80b3, #12324c); }
.album-cover-2 { background: linear-gradient(135deg, #6f4bb2, #202b5b); }
.album-cover-3 { background: linear-gradient(135deg, #2b8b83, #183d4f); }
.album-cover-4 { background: linear-gradient(135deg, #3f61a6, #1c2e50); }
.album-cover-5 { background: linear-gradient(135deg, #7a5a3b, #3b2d24); }
.album-cover-6 { background: linear-gradient(135deg, #5a4ca9, #251f4f); }
.album-artist { color: #b8cde3; font-size: 13px; margin-top: 5px; }
.album-name { color: #3eb8e5; font-weight: bold; font-size: 16px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.album-detail-layout {
margin-top: 10px;
display: grid;
gap: 12px;
grid-template-columns: 220px 1fr;
align-items: start;
}
.album-cover-large {
max-width: 220px;
}
.album-detail-title {
margin: 0 0 6px;
color: #e6f3ff;
}
.album-detail-artist {
margin: 0 0 10px;
color: #9eb6cf;
font-size: 14px;
}
.forum-reddit-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 260px;
gap: 10px;
}
.reddit-feed-col {
min-width: 0;
}
.reddit-side-col {
display: grid;
gap: 10px;
align-content: start;
}
.reddit-side-block h3 {
margin: 0 0 8px;
}
.reddit-side-meta {
margin: 0;
font-size: 13px;
color: #a8bfd7;
}
.reddit-side-meta + .reddit-side-meta {
margin-top: 5px;
}
.forum-jump-link { display: block; padding: 10px; border-top: 1px solid #000; color: #9fb4cb; font-size: 13px; text-decoration: none; }
.forum-jump-link:first-child {
border-top: 0;
}
.forum-jump-link:hover { background: linear-gradient(to bottom, #2a3a50 0%, #1a2536 100%); color: #fff; }
.reddit-feed {
margin-top: 10px;
display: grid;
gap: 8px;
}
.reddit-post { display: grid; grid-template-columns: 1fr; border: 1px solid #000; border-radius: 4px; background: linear-gradient(to bottom, #2a2a2a 0%, #111111 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.4); }
.reddit-post-main {
padding: 8px 10px;
}
.reddit-post-title-link {
text-decoration: none;
}
.reddit-post-title {
margin: 0 0 5px;
color: #e6f3ff;
font-size: 14px;
}
.reddit-post-title-link:hover .reddit-post-title {
text-decoration: underline;
}
.reddit-post-meta {
margin: 0;
color: #90a8c1;
font-size: 12px;
}
.reddit-post-actions {
margin-top: 8px;
display: flex;
gap: 6px;
}
.reddit-react-btn { padding: 6px 12px; border: 1px solid #000; border-radius: 4px; background: linear-gradient(to bottom, #2a3a50 0%, #1a2536 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.5); color: #ffffff; font-weight: bold; font-size: 12px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); cursor: pointer; }
.reddit-react-btn span {
color: #eaf5ff;
font-weight: bold;
}
.reddit-react-btn:hover { background: linear-gradient(to bottom, #3a4a5a 0%, #202a38 100%); }
.reddit-post-body { margin: 10px 0 0; color: #b8cde3; font-size: 13px; line-height: 1.4; }
.reddit-post-single .reddit-post-title {
font-size: 18px;
}
.video-screen { height: 170px; display: flex; align-items: center; justify-content: center; border: 1px solid #000; border-radius: 4px; margin-bottom: 8px; color: #bcd3ea; background: radial-gradient(circle at center, #1f3552, #0a121e 70%); font-size: 14px; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5); }
.art-grid { display: grid; gap: 15px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.art-tile { height: 150px; border: 1px solid #000; border-radius: 6px; display: flex; align-items: flex-end; padding: 15px; text-decoration: none; color: #fff; font-size: 16px; font-weight: bold; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); background: linear-gradient(to top, rgba(5, 9, 16, 0.9), rgba(5, 9, 16, 0.2)), linear-gradient(135deg, #2e4f74, #1f2f46); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5); transition: transform 0.2s, box-shadow 0.2s; }
.art-tile:hover { transform: translateY(-2px); border-color: #000; filter: brightness(1.15); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.6); }
.tutorial-card h4 {
margin: 0 0 8px;
color: #e4f2ff;
}
.tutorial-card ol {
margin: 0;
padding-left: 18px;
color: #aac0d6;
}
.tutorial-card li {
margin-bottom: 4px;
}
.demo-code { margin: 8px 0 0; padding: 8px 10px; border: 1px solid #000; border-radius: 3px; background: #08101a; color: #73d7ff; font-family: Consolas, monospace; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6); }
.profile-demo {
display: grid;
grid-template-columns: 76px 1fr;
gap: 10px;
align-items: start;
}
.avatar-box {
width: 76px;
height: 76px;
border: 1px solid #315071;
display: flex;
align-items: center;
justify-content: center;
color: #eff8ff;
font-weight: bold;
background: linear-gradient(#1f85b2, #124a68);
}
.profile-meta {
margin: 0 0 8px;
color: #86a1bc;
font-size: 13px;
}
.profile-page {
--profile-accent: #2f435e;
--profile-panel: #101b2b;
background: color-mix(in srgb, var(--profile-theme-panel-dark, #050910) 80%, transparent);
color: #d3e4f8;
}
.main-content.profile-page { background: color-mix(in srgb, var(--profile-theme-panel-dark, #050910) 80%, transparent); }
.profile-page .channel-header { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; padding: 15px; border: 1px solid #000; border-radius: 6px; background: linear-gradient(to bottom, var(--profile-theme-nav-top, #2a3a50) 0%, var(--profile-theme-nav-bottom, #1a2536) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.3); }
.profile-page .channel-avatar { width: 96px; height: 96px; border: 2px solid #fff; border-image: var(--profile-pfp-border, none) 24 round; border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 30px; font-weight: bold; color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6); }
.profile-page .channel-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.profile-page .channel-avatar.has-avatar-image {
background: var(--profile-theme-panel-dark, #1b2b41);
}
.profile-page .channel-head-copy h2 {
margin: 0;
font-size: 30px;
color: #e7f3ff;
}
.profile-page .channel-head-copy p {
margin: 4px 0 0;
color: #a8bfd7;
}
.profile-page .channel-meta {
font-size: 12px;
color: #8da6bf;
}
.profile-page .subscribe-btn { border: 1px solid #8a1a1a; border-radius: 4px; background: linear-gradient(to bottom, #e53e3e 0%, #c42020 50%, #a61010 51%, #850808 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.5); color: #ffffff; font-weight: bold; padding: 8px 16px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); cursor: pointer; }
.profile-page .channel-tabs { display: flex; flex-wrap: wrap; margin-top: 15px; border: 1px solid #000; border-radius: 4px 4px 0 0; background: linear-gradient(to bottom, var(--profile-theme-nav-top, #2a3444) 0%, var(--profile-theme-nav-bottom, #161d28) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.profile-page .channel-tabs a { padding: 10px 15px; border-right: 1px solid #000; border-left: 1px solid rgba(255, 255, 255, 0.05); text-decoration: none; color: #c0d0e0; font-size: 13px; font-weight: bold; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8); }
.profile-page .channel-tabs a.active { background: linear-gradient(to bottom, var(--profile-theme-panel, #1a2433) 0%, var(--profile-theme-panel-dark, #101622) 100%); color: #ffffff; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5); }
.profile-page .channel-panel[hidden] {
display: none;
}
.profile-page .channel-layout {
margin-top: 10px;
display: grid;
grid-template-columns: 290px 1fr;
gap: 10px;
}
.profile-page .channel-col {
display: grid;
gap: 10px;
align-content: start;
}
.profile-page .yt-box { border: 1px solid var(--profile-theme-border-dark, #000); border-radius: 4px; background: var(--profile-theme-panel, #131b28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.4); overflow: hidden; }
.profile-page .yt-box h3 { margin: 0; padding: 10px 15px; font-size: 15px; font-weight: normal; color: #eee; border-bottom: 2px solid #000; background: linear-gradient(to bottom, rgba(0,0,0,1) 0px, rgba(0,0,0,1) 12px, rgba(0,0,0,0) 36px), repeating-linear-gradient(45deg, transparent 0px, transparent 6px, rgba(0,0,0,0.5) 6px, rgba(0,0,0,0.5) 12px), linear-gradient(to bottom, #111 0px, #111 16px, #2b2b2b 42px, #161616 42px, #161616 100%); text-shadow: 1px 1px 2px #000; }
/* When profile theme is active, make site header and panels opaque red */
/* header styling remains driven by profile theme variables further below */
.profile-page .yt-box p,
.profile-page .yt-box li {
margin: 0;
padding: 9px 10px;
color: #a8bfd7;
font-size: 13px;
}
.profile-page .yt-box ul {
margin: 0;
padding: 0;
list-style: none;
}
.profile-page .yt-box li {
border-top: 1px solid #243750;
}
.profile-page .featured-video-card {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 10px;
}
.profile-page .featured-thumb {
width: 228px;
height: 129px; /* enforce exact 16:9 box */
max-width: 100%; /* handle small screens */
flex-shrink: 0;
border: 1px solid #000;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
color: #e7f5ff;
background: linear-gradient(to bottom, var(--profile-theme-panel, #1a2536) 0%, var(--profile-theme-panel-dark, #0d1420) 100%);
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}
.profile-page .featured-title {
padding: 0;
margin: 0 0 5px;
font-size: 15px;
color: #e4f2ff;
font-weight: bold;
}
.profile-page .featured-desc {
padding: 0;
margin: 0;
color: #9eb6cf;
}
.profile-page .activity-list p {
border-top: 1px solid #243750;
}
.profile-page .activity-list p:first-child {
border-top: 0;
}
/* For bright profile themes, keep a brighter fade/stripe treatment so
the header still has definition on light colors. */
body.profile-theme-active .site-header h1 {
color: var(--profile-theme-text-strong, #f2f8ff);
text-shadow: none;
}
body.profile-theme-active .tagline {
color: var(--profile-theme-text, #95a6bd);
}
body.profile-theme-active .header-signin { margin-left: auto; padding: 8px 16px; border: 1px solid var(--profile-theme-border-dark, #0d4a68); border-radius: 4px; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 10px, transparent 10px, transparent 20px), linear-gradient(to bottom, var(--profile-theme-accent-bright, #3eb8e5) 0%, var(--profile-theme-accent-light, #2092c4) 50%, var(--profile-theme-accent, #1078a6) 51%, var(--profile-theme-accent-dark, #085d85) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.5); color: var(--profile-theme-accent-text, #ffffff); font-weight: bold; font-size: 13px; text-decoration: none; text-shadow: none; }
body.profile-theme-active .header-signin:hover {
background: repeating-linear-gradient(45deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 10px, transparent 10px, transparent 20px), linear-gradient(to bottom, #52c4ed 0%, #32a2d1 50%, #1d88b5 51%, #106b94 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 2px rgba(0, 0, 0, 0.5);
}
body.profile-theme-active .header-signin, body.profile-theme-active .main-nav a {
transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease, color 180ms ease;
}
body.profile-theme-active .main-nav a:hover {
background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
body.profile-theme-active .main-nav a.active { background: linear-gradient(to bottom, var(--profile-theme-panel, #1a2433) 0%, var(--profile-theme-panel-dark, #101622) 100%); color: var(--profile-theme-text-strong, #ffffff); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5); text-shadow: none; }
body.profile-theme-active .profile-page {
color: var(--profile-theme-text, #d3e4f8);
background: color-mix(in srgb, var(--profile-theme-panel-dark, #050910) 80%, transparent);
}
body.profile-theme-active .main-content.profile-page { background: color-mix(in srgb, var(--profile-theme-panel-dark, #050910) 80%, transparent); }
body.profile-theme-active .profile-page .channel-header { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; padding: 15px; border: 1px solid #000; border-radius: 6px; background: linear-gradient(to bottom, color-mix(in srgb, var(--profile-theme-nav-top, #2a3a50) 70%, transparent) 0%, color-mix(in srgb, var(--profile-theme-nav-bottom, #1a2536) 70%, transparent) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.3); }
body.profile-theme-active .profile-page .channel-head-copy h2,
body.profile-theme-active .profile-page .yt-box h3,
body.profile-theme-active .profile-page .featured-title {
color: var(--profile-theme-nav-text, #e7f3ff);
text-shadow: none;
}
body.profile-theme-active .profile-page .channel-head-copy p,
body.profile-theme-active .profile-page .channel-meta {
color: var(--profile-theme-nav-text-muted, #a8bfd7);
text-shadow: none;
}
body.profile-theme-active .profile-page .yt-box p,
body.profile-theme-active .profile-page .yt-box li,
body.profile-theme-active .profile-page .featured-desc,
body.profile-theme-active .profile-page .reddit-side-meta {
color: var(--profile-theme-text-muted, #a8bfd7);
text-shadow: none;
}
body.profile-theme-active .profile-page .subscribe-btn { border: 1px solid #8a1a1a; border-radius: 4px; background: linear-gradient(to bottom, #e53e3e 0%, #c42020 50%, #a61010 51%, #850808 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.5); color: #ffffff; font-weight: bold; padding: 8px 16px; text-shadow: none; cursor: pointer; }
body.profile-theme-active .profile-page .channel-tabs { display: flex; flex-wrap: wrap; margin-top: 15px; border: 1px solid var(--profile-theme-border-dark, #000); border-radius: 4px 4px 0 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--profile-theme-nav-top, #2a3444) 70%, transparent) 0%, color-mix(in srgb, var(--profile-theme-nav-bottom, #161d28) 70%, transparent) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }
body.profile-theme-active .profile-page .channel-tabs a { padding: 10px 15px; border-right: 1px solid var(--profile-theme-border-dark, #000); border-left: 1px solid rgba(255, 255, 255, 0.05); text-decoration: none; color: var(--profile-theme-text-muted, #c0d0e0); font-size: 13px; font-weight: bold; text-shadow: none; }
body.profile-theme-active .profile-page .channel-tabs a.active { background: linear-gradient(to bottom, var(--profile-theme-panel, #1a2433) 0%, var(--profile-theme-panel-dark, #101622) 100%); color: var(--profile-theme-text-strong, #ffffff); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5); text-shadow: none; }
body.profile-theme-active .profile-page .yt-box { border: 1px solid var(--profile-theme-border-dark, #000); border-radius: 4px; background: color-mix(in srgb, var(--profile-theme-panel, #131b28) 70%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 3px rgba(0, 0, 0, 0.4); overflow: hidden; }
body.profile-theme-active .profile-page .yt-box h3 { margin: 0; padding: 10px 12px; font-size: 14px; font-weight: bold; color: var(--profile-theme-nav-text, #e7f3ff); border-bottom: 1px solid var(--profile-theme-border-main, #000); background: linear-gradient(to bottom, color-mix(in srgb, var(--profile-theme-nav-top, #2a3a50) 70%, transparent) 0%, color-mix(in srgb, var(--profile-theme-nav-bottom, #1a2536) 70%, transparent) 100%); box-shadow: inset 0 1px 0 var(--profile-theme-border-highlight, rgba(255, 255, 255, 0.1)); text-shadow: var(--profile-theme-shadow, 0 -1px 0 rgba(0, 0, 0, 0.8)); }
body.profile-theme-active .profile-page .featured-thumb { height: 124px; border: 1px solid var(--profile-theme-border-dark, #000); border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; color: var(--profile-theme-text-strong, #e7f5ff); background: linear-gradient(to bottom, color-mix(in srgb, var(--profile-theme-panel, #1a2536) 70%, transparent) 0%, color-mix(in srgb, var(--profile-theme-panel-dark, #0d1420) 70%, transparent) 100%); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5); text-shadow: none; }
body.profile-theme-active .profile-page .channel-avatar { width: 96px; height: 96px; border: 2px solid var(--profile-theme-text-strong, #fff); border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 30px; font-weight: bold; color: var(--profile-theme-text-strong, #fff); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6); text-shadow: none; }
body.profile-theme-active .profile-page .channel-avatar.has-avatar-image {
background: var(--profile-theme-panel-dark, #1b2b41);
}
body.profile-theme-active .profile-page .yt-box li {
border-top: 1px solid var(--profile-theme-border-dark, #243750);
}
body.profile-theme-active .profile-page .activity-list p {
border-top: 1px solid var(--profile-theme-border-dark, #243750);
}
body.profile-theme-active .profile-page .activity-list p:first-child {
border-top: 0;
}
.site-footer {
margin-top: auto;
padding: 20px 20px 0 20px;
font-size: 12px;
color: #888;
border-top: 1px solid #1a3b7c;
background: radial-gradient(circle at 50% 0%, #1e488f 0%, #0a1b3f 50%, #020513 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
text-shadow: 0 -1px 0 #000;
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
}
body.profile-theme-active .site-footer {
border-top: 1px solid var(--profile-theme-accent, #1a3b7c);
}
.footer-columns {
display: flex;
justify-content: flex-start;
gap: 40px;
flex-wrap: wrap;
max-width: 1920px;
margin: 0 auto;
width: 100%;
position: relative;
z-index: 10;
padding: 0 20px;
}\n\n.footer-column {
flex: 0 1 auto;
min-width: 150px;
}
.footer-column h4 {
color: #e6f3ff;
font-size: 14px;
margin-bottom: 10px;
font-weight: bold;
text-align: left;
border-bottom: 1px solid #1a3b7c;
padding-bottom: 5px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
max-width: 180px;
}
.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.footer-column li a {
display: block;
color: #b8cde3;
text-decoration: none;
padding: 5px 10px;
background: linear-gradient(to bottom, #1a2a40 0%, #0a1526 100%);
border: 1px solid #1a3b7c;
border-radius: 3px;
font-size: 11px;
text-transform: uppercase;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.5);
transition: all 0.2s ease;
text-align: left;
max-width: 180px;
opacity: var(--profile-footer-button-opacity, 1);
}
.footer-column li a:hover {
color: #fff;
background: linear-gradient(to bottom, #2a4060 0%, #152540 100%);
border-color: #3eb8e5;
}
.footer-ps2-image {
position: absolute;
right: 10px;
bottom: -20px;
height: 320px;
width: auto;
opacity: 1;
pointer-events: none;
z-index: 10;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px calc(max(20px, 50% - 960px + 20px));
flex-wrap: wrap;
gap: 10px;
width: 100%;
position: relative;
z-index: 2;
background: transparent;
}
/* Opaque footer ribbon overlay */
.footer-bottom::before {
content: '';
position: absolute;
inset: 0;
background: var(--profile-theme-panel, #101b2b);
opacity: var(--profile-ribbon-opacity, 1);
z-index: -1;
}
.footer-bottom p {
margin: 0;
}
@media (max-width: 768px) {
.footer-columns {
flex-direction: column;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
}
.global-audio-main {
display: flex;
align-items: center;
width: 100%;
}
.global-audio-info {
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 25px;
min-width: 100px;
}
.global-audio-title {
color: #fff;
font-size: 14px;
font-family: sans-serif;
margin-bottom: 2px;
}
.global-audio-subtitle {
color: #aaa;
font-size: 12px;
font-family: sans-serif;
}
.global-audio-controls {
display: flex;
align-items: center;
margin-right: 20px;
}
.global-audio-nav, .global-audio-play, .global-audio-btn {
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
}
.global-audio-nav svg, .global-audio-play svg {
fill: #e0e0e0;
}
.global-audio-play {
margin: 0 10px;
}
.global-audio-icons {
display: flex;
align-items: center;
margin-right: 15px;
}
.global-audio-time {
color: #fff;
font-size: 12px;
font-family: sans-serif;
margin-right: 15px;
}
.global-audio-seek {
flex-grow: 1;
margin: 0 15px;
-webkit-appearance: none;
appearance: none;
}
.global-audio-seek::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
background: transparent;
border: none;
}
.global-audio-seek::-moz-range-track {
width: 100%;
height: 8px;
background: transparent;
border: none;
}
.global-audio-seek::-moz-range-progress {
height: 8px;
border-radius: 4px;
background: #1db954;
}
.global-audio-seek::-webkit-slider-thumb {
-webkit-appearance: none;
box-sizing: border-box;
height: 16px;
width: 16px;
background: linear-gradient(to bottom, #fcfcfc 0%, #c8c8c8 100%);
}
.global-audio-player {
background-color: #000;
display: flex;
align-items: center;
padding: 5px 15px;
position: relative;
z-index: 10;
color: #fff;
overflow: hidden;
max-height: 200px;
transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
}
.global-audio-player.is-hidden {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
pointer-events: none;
margin: 0;
border: none;
}
.home-panel {
margin-bottom: 20px;
}
.home-panel-header {
height: 46px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
background: linear-gradient(to bottom, rgba(0,0,0,1) 0px, rgba(0,0,0,1) 12px, rgba(0,0,0,0) 36px), repeating-linear-gradient(45deg, transparent 0px, transparent 6px, rgba(0,0,0,0.5) 6px, rgba(0,0,0,0.5) 12px), linear-gradient(to bottom, #111 0px, #111 16px, #2b2b2b 42px, #161616 42px, #161616 100%);
border: 1px solid #000;
border-bottom: 2px solid #000;
border-radius: 5px 5px 0 0;
position: relative;
}
.home-panel-header h2 {
margin: 0;
color: #fff;
font-size: 18px;
font-family: 'Poppins', sans-serif;
text-shadow: 1px 1px 2px #000;
position: relative;
z-index: 2;
font-weight: bold;
}
.home-panel-header .panel-icon {
position: absolute;
top: -5px;
z-index: 1; transform: scale(1.15);
}
.carousel-dots {
display: flex;
gap: 8px;
padding: 10px 0 12px 0;
}
.carousel-dots .dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #666;
box-shadow: inset 1px 1px 3px rgba(0,0,0,0.8);
}
.carousel-dots .dot.active {
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.featured-video-panel {
background: #fff;
margin: 0;
height: 213px;
padding: 10px;
box-sizing: border-box;
border-radius: 2px;
display: flex;
gap: 15px;
box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.featured-thumb {
height: auto;
aspect-ratio: 16 / 9;
max-height: 480px;
position: relative;
border: 1px solid #ccc;
background: #000;
display: flex;
align-items: center;
justify-content: center;
}
.featured-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.featured-info {
flex: 1;
color: #333;
}
.featured-info h2 {
margin: 0 0 5px;
font-size: 18px;
color: #000;
}
.featured-meta {
font-size: 12px;
color: #888;
margin-bottom: 2px;
}
.featured-info h4 {
font-size: 11px;
margin: 15px 0 5px;
color: #000;
}
.featured-info p {
font-size: 12px;
line-height: 1.4;
margin: 0 0 15px;
}
.btn-green {
display: inline-block;
background: linear-gradient(to bottom, #119911 0%, #0a770a 100%);
color: #fff;
padding: 6px 12px;
font-size: 11px;
text-decoration: none;
border-radius: 2px;
border: 1px solid #054405;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-green:hover {
background: linear-gradient(to bottom, #14a814 0%, #0c8c0c 100%);
}
.alert-banner {
margin-bottom: 20px;
background: linear-gradient(to bottom, rgba(140,0,0,1) 0px, rgba(140,0,0,1) 30%, rgba(0,0,0,0) 80%), repeating-linear-gradient(45deg, transparent 0px, transparent 6px, rgba(0,0,0,0.5) 6px, rgba(0,0,0,0.5) 12px), linear-gradient(to bottom, #4a0000 0px, #4a0000 50%, #9e0000 calc(100% - 4px), #5c0000 calc(100% - 4px), #5c0000 100%);
border: 1px solid #000;
border-bottom: 2px solid #000;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.8);
min-height: 46px;
display: flex;
position: relative;
overflow: hidden;
box-sizing: border-box;
}
.alert-inner {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
padding: 8px 15px;
gap: 10px;
color: #fff;
font-weight: bold;
font-size: 13px;
text-shadow: 1px 1px 2px #000;
background: transparent;
position: relative;
z-index: 2;
}
.feature-offline-message {
padding: 40px 20px;
border: 1px solid #000;
border-radius: 5px;
background: linear-gradient(to bottom, #141c2a 0%, #0b101a 100%);
box-shadow: 0 4px 10px rgba(0,0,0,0.8);
text-align: center;
}
.feature-offline-message h2 {
margin-top: 0;
margin-bottom: 10px;
font-size: 20px;
color: #ffb347;
}
.feature-offline-message p {
margin: 0;
font-size: 14px;
color: #c0d0e0;
}
.home-grid-2x2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.home-grid-2x2 .home-panel {
margin-bottom: 0;
min-height: 250px;
display: flex;
flex-direction: column;
}
.home-panel-body {
padding: 15px;
flex: 1;
background: #111;
border-radius: 0 0 5px 5px;
}
$args[0].Value -replace '14px', '22px'
.global-audio-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 15px;
background: #111;
border-bottom: 1px solid #000;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 5px rgba(0,0,0,0.5);
height: 40px;
box-sizing: border-box;
}
.login-header {
height: 46px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
background: linear-gradient(to bottom, rgba(0,0,0,1) 0px, rgba(0,0,0,1) 12px, rgba(0,0,0,0) 36px), repeating-linear-gradient(45deg, transparent 0px, transparent 6px, rgba(0,0,0,0.5) 6px, rgba(0,0,0,0.5) 12px), linear-gradient(to bottom, #111 0px, #111 16px, #2b2b2b 42px, #161616 42px, #161616 100%);
border-bottom: 2px solid #000;
border-radius: 5px 5px 0 0;
}
input[type="text"],
input[type="password"],
textarea {
width: 100%;
padding: 8px;
background: #0a0a0a;
border: 1px solid #333;
color: #fff;
border-radius: 3px;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
border-color: #0078d7;
outline: none;
}
.login-wrapper {
display: flex;
justify-content: center;
align-items: center;
padding: 40px 20px;
min-height: calc(100vh - 200px);
}
.login-box {
width: 100%;
max-width: 640px;
background: #1e1e1e;
border: 1px solid #000;
border-radius: 5px;
box-shadow: 0 4px 10px rgba(0,0,0,0.8);
}
.login-header .key-icon {
width: 20px;
height: 20px;
fill: #fff;
}
.login-content {
display: flex;
padding: 20px 30px;
gap: 20px;
background: #b2e617;
border-radius: 0 0 5px 5px;
position: relative;
}
.login-left {
flex: 1;
max-width: 380px;
}
.login-left h2 {
font-size: 16px;
color: #000;
margin-top: 0;
margin-bottom: 10px;
text-shadow: none;
font-weight: bold;
}
.login-left p {
font-size: 13px;
color: #111;
margin-bottom: 20px;
line-height: 1.4;
}
.login-field {
margin-bottom: 15px;
}
.login-field label {
display: block;
font-size: 13px;
font-weight: bold;
color: #fff;
background: #627221;
padding: 4px 8px;
margin-bottom: 0;
text-transform: none;
border-radius: 0;
border: none;
}
.login-links {
display: flex;
gap: 15px;
font-size: 13px;
}
.login-links a {
color: #000;
text-decoration: underline;
}
.login-links a:hover {
text-decoration: underline;
}
.gamecube-img {
width: 290px;
height: auto;
position: absolute;
right: -25px;
bottom: -20px;
z-index: 10;
pointer-events: none;
}
.login-box input[type="text"],.login-box input[type="password"],.login-box input[type="email"],.login-box input[type="date"] {
background: #e6efff;
color: #000;
border: 1px solid #e6efff; /* Invisible border to match height of focus or a standard look */
border-radius: 0 !important;
padding: 8px 10px;
margin-bottom: 0;
width: 100%;
box-sizing: border-box;
}
.login-box input[type="text"]:focus,.login-box input[type="password"]:focus,.login-box input[type="email"]:focus,.login-box input[type="date"]:focus {
border: 2px solid #000;
outline: none;
padding: 6px 8px; /* Offset the 2px border so it doesn't jump */
}
.login-header .title {
color: #ccc;
font-size: 14px;
font-weight: normal;
font-family: 'Poppins', sans-serif;
}
.announcement-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 15px;
margin-bottom: 20px;
background: linear-gradient(to bottom, rgba(0,0,0,1) 0px, rgba(0,0,0,1) 12px, rgba(0,0,0,0) 36px), repeating-linear-gradient(45deg, transparent 0px, transparent 6px, rgba(0,0,0,0.5) 6px, rgba(0,0,0,0.5) 12px), linear-gradient(to bottom, #111 0px, #111 16px, #2b2b2b 42px, #161616 42px, #161616 100%);
border: 1px solid #000;
border-bottom: 2px solid #000;
border-radius: 5px;
font-family: 'Poppins', sans-serif;
font-size: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.8);
}
.announcement-bar svg {
color: #ccc;
}
.announcement-bar span {
color: #3eb8e5;
text-shadow: 1px 1px 0px #000;
}
body.profile-theme-active .footer-column li a {
background: linear-gradient(to bottom, var(--profile-theme-panel), var(--profile-theme-panel-dark));
color: var(--profile-theme-text);
border-color: var(--profile-theme-border-dark);
}
body.profile-theme-active .footer-column li a:hover {
background: linear-gradient(to bottom, var(--profile-theme-hover-top), var(--profile-theme-hover-bottom));
color: var(--profile-theme-text-strong);
border-color: var(--profile-theme-accent-bright);
}
body.profile-theme-active .site-footer {
border-top-color: var(--profile-theme-accent);
}
body.profile-theme-active .footer-column h4 {
border-bottom-color: var(--profile-theme-border);
color: var(--profile-theme-text-strong);
}
body.profile-theme-active .footer-bottom {
border-top-color: var(--profile-theme-border);
border-bottom-color: var(--profile-theme-accent-bright);
}
body.profile-theme-active .status { color: #ffffff; opacity: 0.7; }
body.profile-theme-active .site-footer { color: var(--profile-theme-text-strong, #ffffff); opacity: 0.8; }
body.profile-theme-active .footer-bottom p { color: #ffffff; opacity: 0.7; }
body.profile-theme-active .footer-bottom .tagline { color: #ffffff; opacity: 0.9; }
body.profile-theme-active .copyright { color: #ffffff; opacity: 0.7; }
body.profile-theme-active .footer-bottom { color: #ffffff; }
body.profile-theme-active .site-footer { background: radial-gradient(circle at 50% 0%, var(--profile-theme-accent, #1e488f) 0%, var(--profile-theme-panel, #020513) 100%); text-shadow: none; }
body.profile-theme-active .main-nav a,
body.profile-theme-active .header-nav-btn,
body.profile-theme-active .username {
color: var(--profile-theme-text-strong, #ffffff) !important;
text-shadow: none !important;
font-family: inherit !important;
}
body.profile-theme-active .site-logo { filter: none !important; }
.user-dropdown-menu { position: absolute; top: 100%; right: -5px; background: linear-gradient(to bottom, #1e1e1e 0%, #111 100%); border: 1px solid #000; box-shadow: 0 4px 8px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.1); border-radius: 4px; display: none; flex-direction: column; min-width: 160px; z-index: 100; padding: 5px 0; }
.user-dropdown-menu.show { display: flex; }
.user-dropdown-item { padding: 8px 15px; color: #d6e2eb; text-decoration: none; font-size: 13px; text-shadow: 0 -1px 0 #000; transition: background 0.2s, color 0.2s; display: block; }
.user-dropdown-item:hover { background: rgba(255,255,255,0.1); color: #fff; }
body.profile-theme-active .user-dropdown-menu { background: var(--profile-theme-panel-dark, #101622); border-color: var(--profile-theme-border, #1a3b7c); }
body.profile-theme-active .user-dropdown-item { color: var(--profile-theme-panel-dark-text, #d3e4f8); text-shadow: none; }
body.profile-theme-active .user-dropdown-item:hover { background: rgba(255,255,255,0.1); color: var(--profile-theme-panel-dark-text, #fff); }
body.profile-bg-fade::before { z-index: -1; }
body.profile-theme-active .site-shell { z-index: 10; }
body.profile-theme-active .site-footer { z-index: 10; }
.conversation-list-item { padding: 15px; border-bottom: 1px solid #000; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background 0.2s; color: #dce6f1; }
.conversation-list-item:hover, .conversation-list-item.active { background: linear-gradient(to bottom, #2a3a50 0%, #1a2536 100%); }
/* Custom Scrolling Date Picker */
.scroll-picker-wrap {
display: flex;
position: relative;
background: #eaeaea;
color: #111;
height: 102px;
width: 100%;
max-width: 380px;
box-sizing: border-box;
font-family: inherit;
font-weight: 700;
box-shadow: inset 0 0 4px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.3);
border-radius: 0;
border: 1px solid #111;
}
.picker-wheel {
flex: 1;
height: 100px;
overflow-y: scroll;
scroll-snap-type: y mandatory;
scrollbar-width: none;
-ms-overflow-style: none; /* IE */
text-align: center;
border-right: 1px solid rgba(0,0,0,0.4);
}
.picker-wheel:last-child {
border-right: none;
}
.picker-wheel::-webkit-scrollbar { display: none; }
.picker-pad {
height: 34px;
scroll-snap-align: none;
}
.picker-item {
height: 34px;
line-height: 34px;
scroll-snap-align: center;
font-size: 17px;
user-select: none;
text-shadow: 0px 1px 0px rgba(255,255,255,0.9);
}
.picker-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.2) 100%);
border-radius: 0;
z-index: 2;
}
.picker-highlight {
position: absolute;
top: 33px;
left: 0; right: 0;
height: 34px;
background: rgba(255, 255, 255, 0.15);
border-top: 2px solid rgba(0,0,0,0.6);
border-bottom: 2px solid rgba(0,0,0,0.6);
box-shadow: 0 4px 6px rgba(0,0,0,0.4), 0 -4px 6px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.7);
pointer-events: none;
box-sizing: border-box;
z-index: 1;
}
.password-wrapper {
position: relative;
display: block;
}
.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
padding-right: 32px !important;
}
.toggle-password {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
z-index: 10;
display: flex !important;
align-items: center;
justify-content: center;
outline: none;
}
.toggle-password svg {
width: 16px;
height: 16px;
fill: #333;
opacity: 0.6;
transition: opacity 0.2s;
}
.toggle-password:hover svg {
opacity: 1;
}
/* Modal Settings styling */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(5px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
}
.modal-overlay[hidden] {
display: none !important;
}
.modal-content.profile-settings-modal {
background: #151515;
width: 600px;
max-width: 95vw;
color: #fff;
border-radius: 4px;
box-shadow: 0 10px 25px rgba(0,0,0,0.9);
border: 1px solid #222;
padding: 0;
/* overflow: hidden; */
font-family: 'Poppins', sans-serif;
}
.profile-settings-modal .modal-header {
background: linear-gradient(to bottom, rgba(0,0,0,1) 0px, rgba(0,0,0,1) 12px, rgba(0,0,0,0) 36px), repeating-linear-gradient(45deg, transparent 0px, transparent 6px, rgba(0,0,0,0.5) 6px, rgba(0,0,0,0.5) 12px), linear-gradient(to bottom, #111 0px, #111 16px, #2b2b2b 42px, #161616 42px, #161616 100%);
border-bottom: 2px solid #000;
height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0 0 20px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.profile-settings-modal .modal-header h3 {
font-size: 18px;
margin: 0;
font-weight: normal;
color: #eee;
text-shadow: 1px 1px 2px #000;
}
.profile-settings-modal .modal-close {
background: none;
border: none;
border-left: 1px solid #000;
color: #888;
font-size: 28px;
font-weight: 300;
cursor: pointer;
height: 100%;
padding: 0 18px;
transition: background 0.2s, color 0.2s;
box-shadow: inset 1px 0 0 #222;
}
.profile-settings-modal .modal-close:hover {
background: rgba(255,255,255,0.05);
color: #fff;
}
.profile-settings-modal .modal-body {
padding: 25px;
overflow-y: auto;
max-height: 80vh;
}
.profile-settings-modal .settings-section {
margin-bottom: 30px;
}
.profile-settings-modal .settings-section h4 {
font-size: 18px;
margin: 0 0 20px 0;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px #000;
}
.profile-settings-modal .media-upload-grid {
display: flex;
justify-content: flex-start;
align-items: flex-end;
gap: 15px;
margin-bottom: 25px;
}
.profile-settings-modal .media-upload-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
font-size: 11px;
color: #aaa;
cursor: pointer;
transition: filter 0.2s;
}
.profile-settings-modal .media-upload-box:hover {
filter: brightness(1.2);
}
.profile-settings-modal .upload-preview {
background: linear-gradient(to bottom, #333, #222);
border: 1px solid #111;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.05);
width: 90px;
height: 90px;
border-radius: 2px;
}
.profile-settings-modal .upload-preview.banner-wide {
width: 140px;
height: 90px;
}
.profile-settings-modal .upload-preview.footer-bg-small {
width: 120px;
height: 50px;
}
.profile-settings-modal .color-font-row {
display: flex;
gap: 20px;
align-items: flex-end;
}
.profile-settings-modal .color-picker-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
font-size: 11px;
color: #aaa;
position: relative;
}
.profile-settings-modal .color-box {
width: 64px;
height: 64px;
cursor: pointer;
border: 1px solid #000;
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
display: block;
}
.profile-settings-modal .font-picker-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
font-size: 11px;
color: #aaa;
margin-left: 10px;
}
.profile-settings-modal .font-select-wrap {
display: flex;
position: relative;
}
.profile-settings-modal .font-picker-wrap select {
background: linear-gradient(to bottom, #444, #2a2a2a);
border: 1px solid #000;
color: #eee;
padding: 8px 30px 8px 10px;
width: 180px;
font-size: 14px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.4);
appearance: none;
-webkit-appearance: none;
cursor: pointer;
border-radius: 2px;
}
.profile-settings-modal .font-select-wrap::after {
content: '▼';
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: #fff;
font-size: 10px;
}
.profile-settings-modal .settings-section label {
display: flex;
flex-direction: column;
font-size: 12px;
color: #ddd;
gap: 6px;
margin-bottom: 12px;
}
.profile-settings-modal .settings-section input[type="email"],
.profile-settings-modal .settings-section input[type="password"],
.profile-settings-modal .settings-section input[type="text"],
.profile-settings-modal .settings-section input[type="date"],
.profile-settings-modal .settings-section textarea {
background: linear-gradient(to bottom, #2b2b2b, #1d1d1d);
border: 1px solid #000;
color: #ccc;
padding: 10px 12px;
border-radius: 2px;
font-size: 14px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.05);
font-family: inherit;
resize: vertical;
}
.profile-settings-modal .settings-section input::placeholder,
.profile-settings-modal .settings-section textarea::placeholder {
color: #777;
}
.profile-settings-modal .modal-footer {
display: flex;
justify-content: flex-end;
padding-top: 15px;
}
.profile-settings-modal .save-btn {
background: #00A6FF;
color: #fff;
border: none;
padding: 10px 36px;
font-size: 14px;
cursor: pointer;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0,0,0,0.4);
transition: background 0.2s;
}
.profile-settings-modal .save-btn:hover {
background: #33b8ff;
}
/* Custom Scrolling Date Picker */
.scroll-picker-wrap {
display: flex;
position: relative;
background: #eaeaea;
color: #111;
height: 102px;
width: 100%;
max-width: 380px;
box-sizing: border-box;
font-family: inherit;
font-weight: 700;
box-shadow: inset 0 0 4px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.3);
border-radius: 0;
border: 1px solid #111;
}
.picker-wheel {
flex: 1;
height: 100px;
overflow-y: scroll;
scroll-snap-type: y mandatory;
scrollbar-width: none;
-ms-overflow-style: none; /* IE */
text-align: center;
border-right: 1px solid rgba(0,0,0,0.4);
}
.picker-wheel:last-child {
border-right: none;
}
.picker-wheel::-webkit-scrollbar { display: none; }
.picker-pad {
height: 34px;
scroll-snap-align: none;
}
.picker-item {
height: 34px;
line-height: 34px;
scroll-snap-align: center;
font-size: 17px;
user-select: none;
text-shadow: 0px 1px 0px rgba(255,255,255,0.9);
}
.picker-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.2) 100%);
border-radius: 0;
z-index: 2;
}
.picker-highlight {
position: absolute;
top: 33px;
left: 0; right: 0;
height: 34px;
background: rgba(255, 255, 255, 0.15);
border-top: 2px solid rgba(0,0,0,0.6);
border-bottom: 2px solid rgba(0,0,0,0.6);
box-shadow: 0 4px 6px rgba(0,0,0,0.4), 0 -4px 6px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.7);
pointer-events: none;
box-sizing: border-box;
z-index: 1;
}
.password-wrapper {
position: relative;
display: block;
}
.password-wrapper input[type="password"],
.password-wrapper input[type="text"] {
padding-right: 32px !important;
}
.toggle-password {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
z-index: 10;
display: flex !important;
align-items: center;
justify-content: center;
outline: none;
}
.toggle-password svg {
width: 16px;
height: 16px;
fill: #333;
opacity: 0.6;
transition: opacity 0.2s;
}
.toggle-password:hover svg {
opacity: 1;
}
/* Fix cropper z-index to appear above profile settings */
#crop-modal { z-index: 10001 !important; }
.custom-slider { -webkit-appearance: none; width: 100%; height: 8px; outline: none; background: linear-gradient(to right, var(--profile-theme-accent, #00c8ff) var(--val, 50%), #222 var(--val, 50%)); border-radius: 0; padding: 0; margin: 0; }
.custom-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 24px; background: #ffffff; cursor: pointer; border-radius: 0; border: none; }
.custom-slider::-moz-range-thumb { width: 16px; height: 24px; background: #ffffff; cursor: pointer; border-radius: 0; border: none; }
/* Universal Title Bars to match .modal-header */
.home-panel-header,
.login-header,
.yt-2012-comments-header,
.yt-2012-up-next-header {
background: linear-gradient(to bottom, rgba(0,0,0,1) 0px, rgba(0,0,0,1) 12px, rgba(0,0,0,0) 36px), repeating-linear-gradient(45deg, transparent 0px, transparent 6px, rgba(0,0,0,0.5) 6px, rgba(0,0,0,0.5) 12px), linear-gradient(to bottom, var(--ht1, #111) 0px, var(--ht1, #111) 16px, var(--ht2, #2b2b2b) 42px, var(--ht3, #161616) 42px, var(--ht3, #161616) 100%) !important;
border-bottom: 2px solid #000 !important;
height: 48px !important;
display: flex !important;
align-items: center !important;
}
.home-panel-header h2,
.login-header .title {
font-family: 'Poppins', sans-serif !important;
font-size: 18px !important;
margin: 0 !important;
font-weight: normal !important;
color: #eee !important;
text-shadow: 1px 1px 2px #000 !important;
}
/* Tints for home panels */
.home-panel-header:has(img[src*="videos.png"]) { --ht1: #05131a; --ht2: #0c2b3a; --ht3: #071821; }
.home-panel-header:has(img[src*="chat.png"]) { --ht1: #051a13; --ht2: #0c3a2b; --ht3: #072118; }
.home-panel-header:has(img[src*="music.png"]) { --ht1: #1a051a; --ht2: #3a0c3a; --ht3: #210721; }
.home-panel-header:has(img[src*="tutorials.png"]) { --ht1: #0d1a05; --ht2: #203a0c; --ht3: #102107; }
.home-panel-header:has(img[src*="controller.png"]) { --ht1: #1a1005; --ht2: #3a250c; --ht3: #211507; }
.home-panel-header:has(img[src*="person.png"]) { --ht1: #1a0505; --ht2: #3a0c0c; --ht3: #210707; }
body.profile-theme-active .site-header {
--sh1: color-mix(in srgb, var(--profile-theme-nav-top, rgba(17,17,17,1)) 70%, transparent);
--sh2: color-mix(in srgb, var(--profile-theme-accent, rgba(43,43,43,1)) 70%, transparent);
--sh3: color-mix(in srgb, var(--profile-theme-nav-bottom, rgba(22,22,22,1)) 70%, transparent);
}
/* Hide main fade when user disables profile bg fade */
body.no-profile-bg-fade main.main-content.profile-page::before { display: none !important; }
body.profile-theme-active.profile-theme-bright .site-header { background: linear-gradient(to bottom, var(--profile-theme-accent-bright, rgba(0,0,0,0.8)) 0px, var(--profile-theme-accent-bright, rgba(0,0,0,0.8)) 12px, rgba(0,0,0,0) 36px), repeating-linear-gradient(45deg, transparent 0px, transparent 6px, rgba(0,0,0,0.5) 6px, rgba(0,0,0,0.5) 12px), linear-gradient(to bottom, var(--sh1, rgba(17,17,17,0.7)) 0px, var(--sh1, rgba(17,17,17,0.7)) 16px, var(--sh2, rgba(43,43,43,0.7)) 42px, var(--sh3, rgba(22,22,22,0.7)) 42px, var(--sh3, rgba(22,22,22,0.7)) 100%); }
/* Apply profile font globally on profile page */
.profile-theme-active,
.profile-theme-active body,
.profile-theme-active .site-shell,
.profile-theme-active .site-header,
.profile-theme-active .site-footer,
.profile-theme-active .main-content.profile-page,
.profile-theme-active h1,
.profile-theme-active h2,
.profile-theme-active h3,
.profile-theme-active p,
.profile-theme-active span,
.profile-theme-active div,
.profile-theme-active a,
.profile-theme-active button,
.profile-theme-active input,
.profile-theme-active textarea {
font-family: var(--profile-font, "Poppins", sans-serif) !important;
}
/* Pin of Shame custom retro scrollbar */
#pin-of-shame-container::-webkit-scrollbar {
height: 14px;
}
#pin-of-shame-container::-webkit-scrollbar-track {
background: repeating-linear-gradient(-45deg, #2a2a2a, #2a2a2a 4px, #1f1f1f 4px, #1f1f1f 8px);
border: 1px solid #111;
}
#pin-of-shame-container::-webkit-scrollbar-thumb {
background: #333;
border: 1px solid #000;
}
#pin-of-shame-container::-webkit-scrollbar-button:single-button {
background-color: #000;
display: block;
width: 14px;
border: 1px solid #111;
background-position: center;
background-repeat: no-repeat;
}
#pin-of-shame-container::-webkit-scrollbar-button:single-button:horizontal:decrement {
background-image: url('data:image/svg+xml;utf8,');
}
#pin-of-shame-container::-webkit-scrollbar-button:single-button:horizontal:increment {
background-image: url('data:image/svg+xml;utf8,');
}