@charset "UTF-8"; body {color:#666666;} #pcontent {margin-top:10px; position:relative;} .filler {width:100%; box-sizing:border-box; min-height:200px; float:right; margin:0px; margin-bottom:10px; } .fillerOuter { width:100%; padding-left: 420px; box-sizing:border-box; } #pheader {display:block;} #pprofiletop {height:270px; padding:0px; background-color:#1a1a1a; background-position:center right; background-repeat:no-repeat; position:relative; overflow:hidden;} #pprofiletop.communitymain {height:120px; background:#1a1a1a;} #profileschanger {} #profileschanger .psch-l {display:block; position:absolute; top:100px; left:-35px; z-index:100; box-sizing:border-box; width:70px; height:70px; border-radius:50%; background:#333; color:#fff; font-size:46px; padding-left:17px;} #profileschanger .psch-r {display:block; position:absolute; top:100px; right:-35px; z-index:100; box-sizing:border-box; width:70px; height:70px; border-radius:50%; background:#333; color:#fff; font-size:46px; padding-left:25px;} #profileschanger .psch-l:hover,#profileschanger .psch-r:hover {background:#ae0000;transition: all 0.2s;} #up-main-header {text-align: center; height:120px; width:35%; min-width:500px; margin:0 auto; background-image: url('/new/commbg.png'); background-color:#1a1a1a; background-position:left; background-repeat:no-repeat;} #up-main-header h1 {color:#fff; font-size:60px; line-height:60px; margin:30px 20px 0px 0px; padding:0px; letter-spacing:-2px; display: inline-block; vertical-align:middle; text-shadow:0px 0px 8px #000;} #up-main-header h1 a {color:inherit;} #up-main-header .h1register {background:#FC0; border-radius:10px; color:#fff; font-size:26px; line-height:42px; margin:30px 0px 0px 0px; padding:0px 20px; letter-spacing:-2px; display: inline-block; vertical-align: middle; box-shadow:0px 0px 8px #000;} #up-main-header .h1register:hover {background:#ae0000;} #up-main-header span {text-transform:uppercase; display:block;} #pprofiletophead {margin:20px; padding:10px; background:rgba(0,0,0,0.65); width:200px; border:1px solid #666; float:left; z-index:5; position:relative;} #pprofiletopheadinner {width:200px; height:200px; box-sizing:border-box; line-height:200px; text-align:center; font-size:160px; color:#fff; text-transform: uppercase; text-align: center; vertical-align: middle; position:relative;} #pprofiletopheadinner:hover .profileimgoverlay {opacity: 0.7; line-height:20px !important;} .profileimgoverlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #ae0000; } .piotext { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } #pprofiletophead img {width:200px; height:200px;} #pprofiletopinfo {width:50%; position: absolute; bottom: 30px; left:270px; z-index:2;} #pprofiletopinfo h1 {font-size:30px; color:#fc0; line-height:35px; height:35px; padding:0px; padding-top:5px; margin:0px; width:400px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-shadow: 1px 1px 1px #000;} #pprofiletopinfo h2 {font-size:14px; line-height:20px; padding:0px; margin:0px; color:#fff; text-shadow: 1px 1px 1px #000;} #pprofiletopinfo #userisonline {background:lime; width:10px; height:10px; border-radius:50%; display:inline-block; margin-left:5px; margin-bottom:4px; xbox-shadow: 0px 0px 2px 2px lime;} #subscribeuser .subscribebutton{padding:5px 10px; margin:5px 0px; border-radius:5px;} #subscribeuser .subscribebutton:before { font-family: 'epicons' !important; content:"\e927"; font-size:11px; padding-right: 5px;} .profile-icon-usercircle {width:14px; position:relative; padding-right:2px;} .profile-icon-usercircle:before {font-family: 'epicons', sans-serif; font-style:normal; content:"\f2be"; color:#999; font-size:18px;} #aboutmebig {position: absolute; top: 15px; right:20px; width:33%; font-size:30px; line-height: 40px; color:#fff; text-shadow: 1px 1px 1px #000; text-align:right;} #aboutmebig span {background:#000; padding: 2px 15px; box-shadow: 10px 0px 0px #000, -10px 0px 0px #000; box-decoration-break: clone;} #aboutmebig span:empty {display:none;} #pprofiletopbtn {position:absolute; bottom:30px; right:30px; width:33%; text-align:right; float:right; text-align: right; color:#FFF; font-size:12px; font-weight:bold; text-shadow: 1px 1px 1px #000; color:#ccc; z-index:3;} #pprofiletopbtn div {display:inline-block; margin-left:20px;} #pprofiletopbtn div span {display:block; font-size:25px; text-align: right; color:#FFF;} #pprofiletopbtn a {margin-left:20px; line-height:20px;} .hdchannel #pprofiletopbtn {background-image: linear-gradient(to right, rgba(0,0,0,0.0) , rgba(0,0,0,0.8)); right:0px; padding:10px 0px; bottom:20px;} .hdchannel #pprofiletopbtn div {margin-right:0px; padding-right:20px;} .headimgshadow {position:absolute; bottom:0; left:0; height:40px; width:100%; z-index:2; background-image: linear-gradient(to right, rgba(26,26,26,1), transparent); background-image: -webkit-linear-gradient(to top, rgba(0,0,0,0.8), transparent); background-image: -moz-linear-gradient(to top, rgba(0,0,0,0.8), transparent); background-image: -ms-linear-gradient(to top, rgba(0,0,0,0.8), transparent); background-image: -o-linear-gradient(to top, rgba(0,0,0,0.8), transparent); background-image: linear-gradient(to top, rgba(0,0,0,0.8), transparent); } .headimggradient {position:absolute; bottom:0; right:1012px; height:270px; width:700px; background-image: -webkit-linear-gradient(to right, rgba(26,26,26,1), transparent); background-image: -moz-linear-gradient(to right, rgba(26,26,26,1), transparent); background-image: -ms-linear-gradient(to right, rgba(26,26,26,1), transparent); background-image: -o-linear-gradient(to right, rgba(26,26,26,1), transparent); background-image: linear-gradient(to right, rgba(26,26,26,1), transparent); border-left:10px solid #1a1a1a; z-index:1; } #channel-head {border:1px solid #333; background-position:top; width:100%; position:relative; height:330px; background-position: center right; background-repeat: no-repeat;} #channel-head .chlogo {position:absolute; width: 200px; height: 200px; border: 2px solid #ccc; background: #666; margin: 30px; float: left;} #channel-headin {margin-top:270px; border-top:2px solid #000; background:#151515; height:60px;} #channel-headin h1 {float:left; line-height:50px; padding:0px; padding-top:3px; margin:0px; color:#fff; font-size:30px; margin-left:10px;} #channel-headin div {float:right; text-align:center; display:block; width:100px; text-transform:uppercase; color:#666; font-size:14px; font-weight:bold; margin-top:10px;} #channel-headin span {display:block; color:#FFF;} .hdchannel .fillerOuter {/*padding-left:335px;*/padding-left:340px;} .hdchannel #profile_sidebar { width: 320px; border:1px solid #333; padding:9px;} .channelsoc {text-align:center; margin-top:20px;} .channelsoc a {margin:0 10px; color:#ccc;} .channelsoc i.fa {font-size:25px;} .channelsoc .fa-tiktok2 {font-size:22px !important;} #pnavtop {border:1px solid #333; display:block; background:#181818; height:40px;} #pnavtop a {color:#fff;width:150px; border-right:1px solid #333; display:block; float:left; line-height:40px; text-align:center; font-weight:bold; font-size:14px; padding:0px;} #pnavtop a:hover {background:#222;} #pnavtop .pdrops {background:#222; float:right; border-right:0px; border-left:1px solid #333; border-top:1px solid #3d3d3d;} #pnavtop .pdrops:hover {background:#333; color:#FFF;} #middler {width:100%; background: #121212; border-top:2px solid #050505; margin-bottom:20px; line-height: 18px;} .middlerbox {width:32%; box-sizing:border-box; padding:30px 0px 20px 40px; float:left;} .middlerbox strong {color:#ccc; font-weight:bold;} .middlerbox ul {list-style:none; margin:0px; padding:0px;} #toptopbelprof {height:34px; line-height:34px; background-image: linear-gradient(#222326,#000); margin-top:0px; margin-bottom:17px; clear:both; border:1px solid #333;} #toptopbelprof h1 {color:#FFF; font-size:1.7em; line-height:34px; height:34px; margin:0px; padding:0px; padding-left:20px; display:inline-block;float:left;} #toptopbelprof h1 a {color:#FFF; text-decoration:none; padding:0px; } #toptopbelprof h1:before {content:"\e913"; font-family: 'epicons', sans-serif; color:#444; font-size:30px; position:absolute; margin-left:-25px; margin-top:-0px;} #toptopbelprof h2 {color:#FFF; font-size:1.7em; line-height:34px; height:34px; margin:0px; padding:0px; padding-left:20px; display:inline-block;float:left;} #toptopbelprof h2 a {color:#FFF; text-decoration:none; padding:0px; } #toptopbelprof h2:before {content:"\e913"; font-family: 'epicons', sans-serif; color:#444; font-size:30px; position:absolute; margin-left:-25px; margin-top:-0px;} #toptopbelinprof {line-height:34px; height:34px; display:block; color:#FFF; text-align:left; font-weight:bold; float:right;} #toptopbelinprof a {width:100px; background-image: linear-gradient(#000,#222326); text-align:center; float:left; border-left:1px solid #333; border-right:0px; color:#CCC; text-decoration:none;} #toptopbelinprof a:lang(pl) {width:auto; min-width: 80px; padding-left: 10px; padding-right: 10px;} #toptopbelinprof a:hover {color:#C00;} #toptopbelinprof a.active {color:#000; background:#d9a83f;} .toptopbelinsetprof {display:none; line-height: 34px; height: 34px; width:34px; color: #FFF; text-align: left; font-weight: bold; float: right; position:relative; cursor:pointer;} .toptopbelinsetprof:before {font-family: 'epicons', sans-serif; content:"\e992"; margin-right:0px; font-size:14px; position:absolute; top:0px; left:10px;} #toptopbelinprof a {line-height:34px;} #pagediv {border:0px;} #toptopbelinprof {display:block; color:#FFF; text-align:left; font-weight:bold; float:right;} #toptopbelinprof a {line-height:34px; padding-left:15px; padding-right:15px; text-align:center; display:inline-block; border-left:1px solid #333; border-right:0px; color:#CCC; width:auto;} #toptopbelinprof a:hover {background:#000; color:#C00;} #toptopbelinprof.activeMobi {display:none; position:absolute; top:35px; right:25px; width:200px; border:0px; box-shadow: 0px 5px 5px rgba(0,0,0,0.70); z-index:20;} #toptopbelinprof.activeMobi a{width:200px; padding:0px 10px; background-color:#000; background-image:none; border-bottom:1px solid #333;} #cpp-desk-ban {display:block} #cpp-mobi-ban {display:none;} #cpp-mobi-ban .channelsoc {display:none;} .streamevents {} .streameventsday {padding:20px; background:#171717; margin-bottom: 20px;} .streameventsday h3 {} .seheader {font-size: 16px; line-height: 16px; color: #CCC; padding-bottom:9px; border-left:1px solid #ae0000; margin:-20px 20px 20px -19px; padding:20px;} .seheader h2 {font-weight: bold; font-size: 16px; line-height: 16px; margin:0px; margin-right:5px; padding:0px; display:inline-block;} .seheader a h2 {color:#FC0;} .seaction {font-size:12px; color:#FFF;} .sedate {font-size:12px; color:#666; display:block; padding-top:5px;} .setitle { color: #CCC; margin-top: 10px; padding-bottom: 10px;} .profile-icon-calendar {width:14px; position:relative; padding-right:2px;} .profile-icon-calendar:before {font-family: 'epicons', sans-serif; font-style:normal; content:"\f073"; color:#666; font-size:12px;} .wordBreakAll {word-break: break-all;} .UPinfo { margin: auto auto 10px auto; color:#FFF; } .UPinfo a { color:#FC0; } .UPinfoUploadMovie .uploadmovie { color: #FFF; margin: auto auto 10px auto;} .UPinfoUploadMovie { width:100%; color: #FFF; margin: auto auto 10px auto; padding-left: 40%; } .achievement { margin-right: 5px; margin-bottom: 25px; width:32.5%; } .achievementBox { border:1px solid #333; border-radius: 10px; height: 100%; } .achievementBox img {margin: auto; } .pnlleftside {float: left; width: 50%; margin-right: 1%; box-sizing:border-box; padding:10px; min-height:1400px; background:#171717;} .pnlrightside {float: left; width: 49%; box-sizing:border-box; padding:10px; min-height:1400px; background:#171717;} .pnlrightsideinner {margin-left:10px;} .pnlfullsize {box-sizing:border-box; padding:10px; min-height:800px; background:#171717;} .pnlleftside.avatareditpage {width:360px;} .pnlrightside.avatareditpage {width:calc(99% - 360px);} .pbox2 {min-height:200px; border-right:1px solid #333; border-bottom:1px solid #333; margin:0px; margin-bottom:10px; padding:10px; position:relative;} .pbox2:nth-child(2n) {margin-right:0px; border-right:0px;} .pbox3 {min-height:200px; margin-bottom: 0px; float:left; border-right:1px solid #333; border-bottom:1px solid #333; border-top:1px solid #333; margin:0px; margin-bottom:10px; padding:10px; position:relative;} .pbox3:nth-child(3n+2) {margin-right:0px; border-right:0px;} .thumb label img {border:3px solid #000; cursor:pointer;} .thumb input[type="radio"] {visibility:hidden;position: absolute;} .thumb input[type="radio"]:checked+label img {border:3px solid #FF0000} .thumbselected {border:3px solid #F00} #profile_sidebar {box-sizing:border-box; margin-right:20px; float:left; min-height:500px; width:400px;} #profile_sidebar.communitymain {width:375px;} .fillerOuter.communitymain {padding-left:0px !important; float:left; width:calc(100% - 415px - 320px);} .filler.communitymain {} #community-right-sidebar {float:right; width:300px; padding:9px; border:1px solid #333;} .pbox4 {min-height:200px; float:left; border:1px solid #333; border-bottom:0px; box-sizing:border-box; margin:0px; margin-bottom:10px; padding:10px; position:relative;} .pbox4:nth-child(3n+3) {margin-right:0px; border-right:0px;} .plister strong {color:#ccc; font-weight:bold;} .plister {color:#999;} .plister {list-style:none; margin:0px; margin-bottom:10px; padding:0px;} .plister li {border-bottom:1px solid #333; line-height:30px; padding-left:10px;} .plister li:first-child {background:#171717;} .phalful {width:200px !important; float:left; border-right:1px solid #333; margin-right:10px;} .psscrol {height:500px; scrollbar-color: #555 #333;} .pclear {clear:both;} .pbelin {background:#171717; line-height:30px; /* ! */ height:30px; border:1px solid #333; box-sizing:border-box;} .pbelin span {padding-left:10px;} #toptopbel1 {height:35px;} .pbelin.plister h2 {font-size:16px; line-height:30px; margin:0px; margin-left: 7px; padding:0px;} .profile-uploads-search {display:flex; align-items:center; flex:0 1 auto; min-width:0; margin-right:8px;} .profile-uploads-search input[type=text] {flex:0 1 200px; width:200px; min-width:70px; height:24px; padding:0px 8px; background:#222; border:1px solid #333; border-right:0px; color:#eee; box-sizing:border-box;} .profile-uploads-search input[type=text]::placeholder {color:#888;} .profile-uploads-search input[type=text]:focus {outline:none; border-color:#555; box-shadow:0px 0px 0px 2px rgba(174,0,0,0.25);} .profile-uploads-search input[type=submit] {width:28px; height:24px; padding:0px; border:1px solid #333; background:#333; color:#fc0; cursor:pointer; font-family:'epicons',sans-serif; font-size:14px; box-sizing:border-box; transition:background-color 0.2s ease;} .profile-uploads-search input[type=submit]:hover {background:#444;} .profile-uploads-search-info {margin:8px 0px; color:#999;} .profile-uploads-search-info a {display:inline-block; margin-left:8px; padding:3px 8px; background:#ae0000; color:#fff; line-height:18px; border-radius:2px; text-decoration:none;} .profile-uploads-search-info a:hover {background:#c40000; color:#fff; text-decoration:none;} /* playlist header bar */ .pbelin.plister.playlist-head {display:flex; align-items:center; overflow:visible; height:auto; min-height:30px;} .pbelin.plister.playlist-head #playlistlike {order:1; flex:0 0 auto; float:none; width:auto; margin:0px;} /* scoped: style.css:1376's 3px also serves the collection header. Flush is only acceptable because each half keeps its own hover colour — that is what still separates the two click targets. */ .pbelin.plister.playlist-head #playlistlike .likedown {margin-left:0px;} .pbelin.plister.playlist-head h2 {order:2; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0px 12px;} .pbelin.plister.playlist-head > span {order:3; flex:0 0 auto; white-space:nowrap; margin:0px 4px;} .pbelin.plister.playlist-head > span:first-of-type {margin-left:auto;} .pbelin.plister.playlist-head > span:last-of-type {padding-right:4px;} /* trim the 30px trailing pad before the search */ /* Chip, not a .subscribebutton pill (that is this site's "follow a producer" language). Must be a DIV: a would become span:first-of-type and steal the margin-left:auto above. Icon must be a ::before: js/subscribe.js replaces the whole innerHTML on toggle. min-width, not width, so a longer translation grows the chip instead of clipping. */ .pbelin.plister.playlist-head > .playlist-fav {order:4; flex:0 0 auto; position:relative; box-sizing:border-box; height:24px; line-height:24px; margin:0px 0px 0px 10px; padding:0px 12px 0px 31px; min-width:150px; text-align:center; background:#333; color:#fff; cursor:pointer;} .pbelin.plister.playlist-head > .playlist-fav::before {font-family:'epicons', sans-serif; content:"\e922"; font-size:21px; line-height:24px; position:absolute; left:7px; top:-1px;} .pbelin.plister.playlist-head > .playlist-fav:hover::before {color:#FC0;} .pbelin.plister.playlist-head > .playlist-fav.unsubscribe::before {content:"\e920"} /* Count in a ::after, not markup: js/subscribe.js's $(el).html(label) would wipe it on toggle. The .unsubscribe class it toggles picks which of the two counts playlist.php renders. */ .pbelin.plister.playlist-head > .playlist-fav::after {content:" (" attr(data-fav-count) ")"; font-size:11px; color:#bbb;} .pbelin.plister.playlist-head > .playlist-fav.unsubscribe::after {content:" (" attr(data-fav-count-subscribed) ")";} /* nothing directly after the header (no description, and the search form hidden for a playlist you can't see): pull the grid up flush, cancelling the head's 10px bottom margin */ .pbelin.plister.playlist-head + .streamevents {margin-top:-10px;} @media screen and (max-width:1200px) { .pbelin.plister.playlist-head {flex-wrap:wrap;} /* wrapped: reorder to likes/stats bar -> title; likes anchored at the top-left corner (no padding) */ /* wrapped: likes -> chip -> stats -> title. The chip needs an order of its own, so stats and title shift up one. */ .pbelin.plister.playlist-head h2 {order:4; flex:1 1 100%; white-space:normal; overflow:visible; text-overflow:clip; margin:0px 0px 6px 10px;} /* left margin aligns the title with #playlistdescription's 10px padding */ /* 16px unless the chip follows: it is conditional (owner, or a non-public playlist not yet favourited), and without it the stats icon -- a ::before at margin-left:-20px, :393 -- slides under the like pill, which paints over it (position:relative, style.css:1363). */ .pbelin.plister.playlist-head #playlistlike {order:1; margin:0px 16px 6px 0px;} .pbelin.plister.playlist-head.has-fav #playlistlike {margin-right:2px;} .pbelin.plister.playlist-head #playlistlike .likedown {margin-right:0px;} .pbelin.plister.playlist-head > span {order:3; margin:0px 9px 6px 0px;} .pbelin.plister.playlist-head > span:first-of-type {margin-left:0px;} .pbelin.plister.playlist-head > span:last-of-type {margin-right:0px;} /* 28px, not the desktop 24px: wrapped, the search box is hidden and the neighbour is the 28px likes widget */ .pbelin.plister.playlist-head > .playlist-fav {order:2; height:28px; line-height:28px; margin:0px 16px 6px 0px;} /* absolutely positioned: it does NOT follow the box height above without this */ .pbelin.plister.playlist-head > .playlist-fav::before {line-height:28px;} } @media screen and (max-width:850px) { .pbelin.plister.playlist-head #playlistlike #likeclick div {padding:0px 4px 0px 26px;} } .epwhite .profile-uploads-search input[type=text] {background:#fff; border-color:#ccc; color:#222;} .epwhite .profile-uploads-search input[type=text]:focus {border-color:#999;} .epwhite .profile-uploads-search input[type=submit] {background:#eaeaea; border-color:#ccc; color:#555;} .epwhite .profile-uploads-search input[type=submit]:hover {background:#ddd;} .epwhite .profile-uploads-search-info {color:#555;} .epwhite .profile-uploads-search-info a {background:#ae0000; color:#fff;} .epwhite .profile-uploads-search-info a:hover {background:#c40000; color:#fff;} /* playlist search: one form rendered twice (playlist.php), inline in the header on desktop / full-width bar below the description when wrapped. Kept after the .profile-uploads-search rules so these win by source order. */ .pbelin.plister.playlist-head .playlist-search-inline {order:5; flex:0 0 auto; float:none; display:flex; align-items:center; margin:0px 6px;} .pbelin.plister.playlist-head.has-fav .playlist-search-inline {margin-left:2px;} /* hairline only when the chip is actually rendered */ .playlist-search-bar {display:none; margin:0px; width:100%; box-sizing:border-box;} .playlist-search-bar input[type=text] {flex:1 1 auto; width:auto;} .playlist-video-filter-trigger {position:relative; display:flex; align-items:center; justify-content:center; flex:0 0 28px; width:28px; height:28px; margin:0px 0px 0px 4px; padding:0px; border:1px solid #333; border-radius:0px; background:#222; color:#fc0; cursor:pointer; box-sizing:border-box; transition:background-color .2s ease, color .2s ease;} .playlist-video-filter-trigger:hover, .playlist-video-filter-trigger:focus-visible, .playlist-video-filter-trigger.is-open {background:#333; color:#fc0; outline:0;} .playlist-video-filter-trigger:focus-visible {box-shadow:0px 0px 0px 2px rgba(217,147,18,.35);} .playlist-video-filter-icon {display:block; width:18px; height:18px; padding:0px; font-style:normal; line-height:18px; text-align:center;} .playlist-video-filter-icon::before {content:"\e992"; font-family:'epicons',sans-serif; font-size:16px; font-weight:normal;} .playlist-video-filter-badge {position:absolute; top:-6px; right:-6px; min-width:15px; height:15px; padding:0px 3px; border:1px solid #171717; border-radius:8px; background:#ae0000; color:#fff; font-family:Arial,sans-serif; font-size:9px; font-weight:bold; line-height:13px; text-align:center; box-sizing:border-box;} .playlist-video-filter-badge[hidden] {display:none;} /* One fixed popup follows whichever of the two responsive search triggers is visible. Keeping it out of .playlist-head also prevents the legacy .plister span rules from leaking into the filter partial. */ .playlist-video-filter-popup {position:fixed; z-index:1000030; width:400px; max-width:calc(100vw - 20px); max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px); overflow:visible; padding:0px; background:#171717; border:1px solid #333; box-shadow:0px 12px 24px rgba(0,0,0,.55); box-sizing:border-box;} .playlist-video-filter-popup[hidden] {display:none;} .playlist-video-filter-popup::before {content:''; position:absolute; top:-7px; right:10px; width:0px; height:0px; border-style:solid; border-width:0px 7px 7px 7px; border-color:transparent transparent #333 transparent;} .playlist-video-filter-popup::after {content:''; position:absolute; top:-6px; right:10px; width:0px; height:0px; border-style:solid; border-width:0px 7px 7px 7px; border-color:transparent transparent #171717 transparent;} .playlist-video-filter-popup.opens-above::before {top:auto; bottom:-7px; border-width:7px 7px 0px 7px; border-color:#333 transparent transparent transparent;} .playlist-video-filter-popup.opens-above::after {top:auto; bottom:-6px; border-width:7px 7px 0px 7px; border-color:#171717 transparent transparent transparent;} .playlist-video-filter-popup-list {max-height:inherit; overflow-y:auto; overscroll-behavior:contain; list-style:none; margin:0px; padding:0px; scrollbar-width:thin;} .playlist-video-filter-popup .video-filter-panel {list-style:none; margin:0px; padding:14px; border:0px; line-height:normal; box-sizing:border-box;} .playlist-video-filter-popup .video-filter-category-list {max-height:min(330px, 42vh);} .playlist-video-filter-popup .video-filter-actions button, .playlist-video-filter-popup .video-filter-actions a {display:flex; align-items:center; justify-content:center; flex:1 1 0; min-height:34px; box-sizing:border-box; padding:5px 7px; border-radius:4px; font:inherit; font-weight:bold; line-height:16px; text-align:center; cursor:pointer;} /* no-description flush: on desktop the bar is display:none, so pull the grid up THROUGH it to the header; the -10 on the bar itself only bites on wrapped, where the bar shows */ .pbelin.plister.playlist-head + .playlist-search-bar {margin-top:-10px;} .pbelin.plister.playlist-head + .playlist-search-bar + .streamevents {margin-top:-10px;} @media screen and (max-width:1200px) { .pbelin.plister.playlist-head .playlist-search-inline {display:none;} .playlist-search-bar {display:flex;} .pbelin.plister.playlist-head + .playlist-search-bar + .streamevents {margin-top:0px;} /* bar now visible: grid flush to the bar, not to the header */ } @media screen and (max-width:850px) { .playlist-video-filter-popup .video-filter-panel .video-filter-actions {position:static; z-index:auto; right:auto; bottom:auto; left:auto; margin-top:12px; padding:10px 0px 0px; border-top:1px solid #333; background:transparent; box-shadow:none;} .playlist-video-filter-popup .video-filter-panel .video-filter-actions-inner {max-width:none; margin:0px;} } .epwhite .playlist-video-filter-trigger {border-color:#ccc; background:#eaeaea; color:#555;} .epwhite .playlist-video-filter-trigger:hover, .epwhite .playlist-video-filter-trigger:focus-visible, .epwhite .playlist-video-filter-trigger.is-open {background:#ddd; color:#ae0000;} .epwhite .playlist-video-filter-trigger:focus-visible {box-shadow:0px 0px 0px 2px rgba(174,0,0,.25);} .epwhite .playlist-video-filter-badge {border-color:#dedede; background:#ae0000; color:#fff;} .epwhite .playlist-video-filter-popup {background:#f5f5f5; border-color:#ccc; box-shadow:0px 12px 24px rgba(0,0,0,.18);} .epwhite .playlist-video-filter-popup::before {border-color:transparent transparent #ccc transparent;} .epwhite .playlist-video-filter-popup::after {border-color:transparent transparent #f5f5f5 transparent;} .epwhite .playlist-video-filter-popup.opens-above::before {border-color:#ccc transparent transparent transparent;} .epwhite .playlist-video-filter-popup.opens-above::after {border-color:#f5f5f5 transparent transparent transparent;} @media screen and (max-width:850px) { .epwhite .playlist-video-filter-popup .video-filter-panel .video-filter-actions {border-top-color:#ccc; background:transparent; box-shadow:none;} } #playlistdescription {} #playlistdescription span {display:inline-block; min-width:30px;} #playlistdescription p {display:inline-block;} #playlistdescription span:nth-child(1) {padding-left:20px;} #playlistdescription span:nth-child(1)::before {content: "\e914"; font-family: 'epicons',sans-serif; color: #404040; font-size: 14px; position: absolute; margin-left: -20px; margin-top: -1px;} #playlistdescription span:nth-child(2) {padding-left:20px;} #playlistdescription span:nth-child(2)::before {content: "\f0c7"; font-family: 'epicons',sans-serif; color: #404040; font-size: 14px; position: absolute; margin-left: -20px; margin-top: 0px;} .plister h2 {display:inline-block;} .plister span {color:#404040; font-weight:bold; font-size:14px;} .plister span:nth-child(2) {/*padding-left:50px;*/ float:right; padding-right:10px;} .plister span:nth-child(2)::before {content: "\e914"; font-family: 'epicons',sans-serif; color: #404040; font-size: 14px; position: absolute; margin-left: -20px; margin-top:0px; font-weight:normal;} .plister span:nth-child(3) {/*padding-left:30px;*/ float:right;padding-right:30px;} .plister span:nth-child(3)::before {content: "\e924"; font-family: 'epicons',sans-serif; color: #404040; font-size: 14px; position: absolute; margin-left: -20px; margin-top: 0px; font-weight:normal;} #playlistdescription {background: #171717;border: 1px solid #333; padding:10px;margin-top: -11px;} .epwhite #playlistdescription {background: #eaeaea; border:none; border-bottom: 1px solid #ccc;padding:10px;margin-top: -11px;} #collectionmobelin {} #collectionmobdata {} .pinsert {width:100%;} .sidbseeall {float:right; padding-right:15px;} .sidbseeall a {color:#fff; background: #ae0000;padding: 3px 8px;border-radius: 2px;} .epwhite .sidbseeall a {color:#fff; background: #ae0000;padding: 3px 8px;border-radius: 2px;} .sidbseebtn {display:inline-block; vertical-align: top; padding-right:15px; margin-left:20px;} .sidbseebtn a {color:#fff; background: #ae0000;padding: 3px 8px;border-radius: 2px;} .epwhite .sidbseebtn a {color:#fff; background: #ae0000;padding: 3px 8px;border-radius: 2px;} .plexcontainer {display: flex; flex-wrap: wrap; align-content:space-between; border:1px solid #333; border-top:0px; padding:10px; width:100%; box-sizing:border-box; margin-bottom:20px;} .plexcontainer .mb, .plexcontainer .mbphoto {width:49.5% !important; max-width:49.5% !important; display:block !important;} /* Photogrid in stream events: dense packing fills holes from masonry span imbalance. .seheader and .communityshowmore are rendered inside the grid (by class-streamgui.php) — make them span all columns so they act as full-width header/footer rows, not single grid cells. */ .streameventsday.photosgrid {grid-auto-flow: dense;} .streameventsday.photosgrid .seheader, .streameventsday.photosgrid .communityshowmore {grid-column: 1 / -1;} /* Column selector — single class on (set by inline JS in head.php). Each container that wants to participate marks itself with .ep-cols-container class. .mb (videos): float + width override. .photosgrid (photos): CSS Grid grid-template-columns override. .mbphoto width is NOT overridden — stays 100% from base CSS so photos fill grid cells. The min-width:0 on .mbphoto is CRITICAL — without it grid items have min-width:auto preventing shrink. SYNC: breakpoints duplicated in js/profile-settings.js getMaxColumns() */ .ep-cols-1 .ep-cols-container .mb {width:100% !important; max-width:100% !important;} .ep-cols-2 .ep-cols-container .mb {width:49.5% !important; max-width:49.5% !important;} .ep-cols-3 .ep-cols-container .mb {width:32.5% !important; max-width:32.5% !important;} .ep-cols-4 .ep-cols-container .mb {width:24.5% !important; max-width:24.5% !important;} .ep-cols-5 .ep-cols-container .mb {width:19.5% !important; max-width:19.5% !important;} .ep-cols-6 .ep-cols-container .mb {width:16.15% !important; max-width:16.15% !important;} /* Photosgrid — only override grid-template-columns. Keep base grid-gap:10px and margins intact. */ .ep-cols-1 .ep-cols-container .photosgrid .mbphoto, .ep-cols-2 .ep-cols-container .photosgrid .mbphoto, .ep-cols-3 .ep-cols-container .photosgrid .mbphoto, .ep-cols-4 .ep-cols-container .photosgrid .mbphoto, .ep-cols-5 .ep-cols-container .photosgrid .mbphoto, .ep-cols-6 .ep-cols-container .photosgrid .mbphoto {min-width:0; overflow:hidden;} .ep-cols-1 .ep-cols-container .photosgrid {grid-template-columns:1fr !important;} .ep-cols-2 .ep-cols-container .photosgrid {grid-template-columns:repeat(2, 1fr) !important;} .ep-cols-3 .ep-cols-container .photosgrid {grid-template-columns:repeat(3, 1fr) !important;} .ep-cols-4 .ep-cols-container .photosgrid {grid-template-columns:repeat(4, 1fr) !important;} .ep-cols-5 .ep-cols-container .photosgrid {grid-template-columns:repeat(5, 1fr) !important;} .ep-cols-6 .ep-cols-container .photosgrid {grid-template-columns:repeat(6, 1fr) !important;} /* Media query clamps — desktop (>850px). Sidebar + padding ≈ 420px. Each column ≥150px visual. SYNC: these breakpoints are duplicated in js/profile-settings.js getMaxColumns() */ @media (min-width: 851px) and (max-width: 1420px) { .ep-cols-6 .ep-cols-container .mb {width:19.5% !important; max-width:19.5% !important;} .ep-cols-6 .ep-cols-container .photosgrid {grid-template-columns:repeat(5, 1fr) !important;} } /* 6→5 */ @media (min-width: 851px) and (max-width: 1280px) { .ep-cols-5 .ep-cols-container .mb, .ep-cols-6 .ep-cols-container .mb {width:24.5% !important; max-width:24.5% !important;} .ep-cols-5 .ep-cols-container .photosgrid, .ep-cols-6 .ep-cols-container .photosgrid {grid-template-columns:repeat(4, 1fr) !important;} } /* 5→4 */ @media (min-width: 851px) and (max-width: 1000px) { .ep-cols-4 .ep-cols-container .mb, .ep-cols-5 .ep-cols-container .mb, .ep-cols-6 .ep-cols-container .mb {width:32.5% !important; max-width:32.5% !important;} .ep-cols-4 .ep-cols-container .photosgrid, .ep-cols-5 .ep-cols-container .photosgrid, .ep-cols-6 .ep-cols-container .photosgrid {grid-template-columns:repeat(3, 1fr) !important;} } /* 4→3 */ /* Media query clamps — mobile (≤850px). No sidebar. Desktop values (4/5/6) clamped to 3 on mobile, then narrower. */ @media (max-width: 850px) { .ep-cols-4 .ep-cols-container .mb, .ep-cols-5 .ep-cols-container .mb, .ep-cols-6 .ep-cols-container .mb {width:32.5% !important; max-width:32.5% !important;} .ep-cols-4 .ep-cols-container .photosgrid, .ep-cols-5 .ep-cols-container .photosgrid, .ep-cols-6 .ep-cols-container .photosgrid {grid-template-columns:repeat(3, 1fr) !important;} } /* 6/5/4→3 on mobile */ @media (max-width: 515px) { .ep-cols-3 .ep-cols-container .mb, .ep-cols-4 .ep-cols-container .mb, .ep-cols-5 .ep-cols-container .mb, .ep-cols-6 .ep-cols-container .mb {width:49.5% !important; max-width:49.5% !important;} .ep-cols-3 .ep-cols-container .photosgrid, .ep-cols-4 .ep-cols-container .photosgrid, .ep-cols-5 .ep-cols-container .photosgrid, .ep-cols-6 .ep-cols-container .photosgrid {grid-template-columns:repeat(2, 1fr) !important;} } /* 3→2 */ @media (max-width: 355px) { .ep-cols-2 .ep-cols-container .mb, .ep-cols-3 .ep-cols-container .mb, .ep-cols-4 .ep-cols-container .mb, .ep-cols-5 .ep-cols-container .mb, .ep-cols-6 .ep-cols-container .mb {width:100% !important; max-width:100% !important;} .ep-cols-2 .ep-cols-container .photosgrid, .ep-cols-3 .ep-cols-container .photosgrid, .ep-cols-4 .ep-cols-container .photosgrid, .ep-cols-5 .ep-cols-container .photosgrid, .ep-cols-6 .ep-cols-container .photosgrid {grid-template-columns:1fr !important;} } /* 2→1 */ .up-profilebox {float:left; margin:3px 10px 20px 3px; padding:2px; position:relative; width:100px; overflow:hidden;} .up-profilebox .uppbi {width:100px;} .up-profilebox span {display:block;} .up-profilebox a span {color:#FC0;} .cr-slider::-moz-range-track {background: rgb(174, 0, 0) !important;} #panel-edit-tab strong {color:#FFF;} #panel-edit-tab textarea {font-family:inherit; font-size:14px; margin-bottom:0px !important; width:90%;} .txtarecounter {display:block; padding-left:5px; margin-bottom:10px; color:#999; font-size:10px;} #panel-edit-tab input.inp1 {width:310px !important;} #panel-edit-tab .pass-eye-wrap input.inp1 {width:275px !important; margin-right:0 !important;} /* box 275+5+40+2 = 322 = sibling .inp1 (310+5+5+2). margin-right:0 - the base .inp1 20px margin, harmless as a trailing margin on the bare input, becomes real width once wrapped in the inline-block and pushes the field below its label */ #panel-edit-tab #email1.inp1, #panel-edit-tab #email2.inp1 {margin-right:0 !important;} /* the eye-wrapped password field above lost its 20px margin (so it no longer wraps); zero it on the change-email text fields too so all three align side-by-side instead of the emails wrapping below their labels while the password sits beside its own */ #panel-edit-tab select.inp1 {width:322px !important;} #panel-edit-tab select.inp2 {width:100px !important; margin-right:11px; height:auto; margin-bottom: 0px;} #panel-edit-tab label {display:block; margin-bottom:15px;} #panel-edit-tab label strong {width:150px; text-align:right; padding-right: 10px; display:inline-block;} .urgentinfo {padding-left:25px !important;} .urgentinfo:before {font-family: 'epicons', sans-serif; font-style:normal; content: '\f06a'; color:#fff;font-size:18px; margin-left:-20px; position:absolute;} .tdheader {background:#202020; width:100%; box-sizing:border-box; display: block; padding-left: 10px; line-height:30px; margin-bottom:20px; text-transform: uppercase;} #panel-edit-tab .pannelbtnylw {color:#fc0;} .pnlsubmitter {background:rgba(102, 146, 31,0.9); border:0px; padding:10px 40px; cursor:pointer; color:#FFF; border-radius:5px; min-width:160px;} .pnlsubmitter:hover {background:rgba(102, 146, 31,0.7); box-shadow: 0px 0px 10px rgba(102, 146, 31,0.3);} .profile-save {width:14px;} .profile-save:before {font-family: 'epicons', sans-serif; font-style:normal; content:"\f0c7"; color:#fff; margin-right:0px; font-size:16px;} .pnldeleter {background:rgba(174,0,0,0.9); border:0px; padding:10px 40px; margin-top:10px; cursor:pointer; color:#FFF; border-radius:5px; min-width:160px;} .pnldeleter:hover {background:rgba(174,0,0,0.7); box-shadow: 0px 0px 20px rgba(174,0,0,0.3);} #panel-edit-tab input[type="file"] {display: none;} #panel-edit-tab input[type="radio"]{accent-color:#ae0000;} #panel-edit-tab input[type="checkbox"]{accent-color:#ae0000;} .pnluploader {border: 1px solid #999; display: inline-block; padding:12px 12px; cursor: pointer;} .profile-cloud-upload {width:14px; position:relative; padding-right:20px;} .profile-cloud-upload:before {font-family: 'epicons', sans-serif; font-style:normal; content:"\e901"; color:#fff; position:absolute; top:-4px; font-size:16px;} #avatar-image-edit, #headImage-image-edit { display: block; width: 100%; } #save-avatar-button, #save-headImage-button { display:none; } #save-avatar-button input, #save-headImage-button input { display:none; } #save-avatar-button label, #save-headImage-button label { display: inline; } #avatarImagePreview, #headImagePreview { width: 100%; } #avatarImagePreview {max-width:200px;} #avatarsList img { cursor: pointer; } #avatarsList h2 {} #avatarsList header {text-align: center; margin:auto;} #avatarsList .btn-default {width:264px; background:rgba(102, 146, 31,0.9); border:0px; padding:10px 40px; margin-bottom:10px; cursor:pointer; color:#FFF; border-radius:5px;} #avatarsList .btn-default:hover {background:rgba(102, 146, 31,0.7); box-shadow: 0px 0px 10px rgba(102, 146, 31,0.3);} #avatarsList .btn-primary {background:rgba(102, 146, 31,0.9); border:0px; margin-top:20px; padding:10px 40px; cursor:pointer; color:#FFF; border-radius:5px; min-width:165px;} #avatarsList .btn-primary:hover {background:rgba(102, 146, 31,0.7); box-shadow: 0px 0px 10px rgba(102, 146, 31,0.3);} #avatarsList .form-group {display:block; height:30px; line-height:30px; width:100%; margin-bottom:1px;} #avatarsList .form-group .col-sm-3 {width:140px; float:left; margin-bottom:0px;} #avatarsList .form-group .col-sm-9 {width:calc(99% - 140px); float:left;} #avatarsList .form-group .col-sm-9 label {float:left; margin-bottom:0px;} #avatarsList .form-group .col-sm-9 select {width:60%; max-width:75%;} .communityshowmore {clear:both; margin-top:10px; margin-bottom:0px; color:#fff; text-align: center; background: #333; border: 1px solid #444; line-height: 28px; padding: 0 20px 0; color: #ccc; cursor: pointer; border-radius:3px;} .streamloadingmore {display:none; clear:both; padding:12px 0 8px; text-align:center; color:#888;} .streamloadingmore img {display:inline-block; vertical-align:middle; margin-right:8px; width:20px; height:20px;} .streamloadingmore span {display:inline-block; vertical-align:middle;} .streameventsday .mbphoto, .streameventsday .mb { display:block !important; } .streameventsday .mbphoto:nth-of-type(n+8), .streameventsday .mb:nth-of-type(n+8), .streameventsday .commbox:nth-of-type(n+5) { display: none !important; } .streameventsday.showAll .mbphoto:nth-of-type(n+8), .streameventsday.showAll .mb:nth-of-type(n+8), .streameventsday.showAll .commbox:nth-of-type(n+5) { display: block !important; } .tablewrapper-table {} .tablewrapper-table th {padding:5px; background:rgba(0,0,0,0.3)} .tablewrapper-table td {padding:5px;} .tablewrapper-table tr td {border-bottom:1px solid rgba(0,0,0,0.3);} .tablewrapper-table .pnldeleter {margin:0px;} .dmca-view-notice {font-size:1.2em; margin-bottom:20px;} .dmca-view-notice a {text-decoration:underline;} .dmca-view-notice li { padding-top: 0px !important} #counterNoticeDiv {display:none;font-size:1.2em; margin-top:50px; max-width:1000px;} #counterNoticeDiv h3 {border-bottom:1px dotted #ccc; padding-bottom:4px;} #counterNoticeDiv label {margin:40px 0 5px 0; padding-left:3px; font-weight:bold;} #counterNoticeDiv label.toconfirm {margin:0; padding-right:10px; float:left; color:#ae0000;} #dmca-counter-links label {margin:0; font-weight:normal;} .toconfirm {margin:0px; } #counterNoticeDiv .dmca-radiobutton input {display:inline; margin:0; font-weight:normal;} #counterNoticeDiv .dmca-radiobutton label {display:inline; margin:0 0 20px 0; font-weight:normal;} @media screen and (max-width:1200px) { .tablewrapper1, .tablewrapper2{width: 100%; overflow-x: scroll; overflow-y:hidden; scrollbar-color: #b0bac6 rgba(255,255,255,0.5);} ::-webkit-scrollbar:horizontal { height: 12px; } ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .5); border-radius: 10px; border: 2px solid #ffffff; } ::-webkit-scrollbar-track { border-radius: 10px; background-color: #ffffff; } .tablewrapper1{height: 20px; margin-bottom:20px; } .tablewrapper2{height: 100%; padding-bottom:40px;} .twdiv1 {width:1000px; height: 20px; } .twdiv2 {width:1000px; height: 100%; overflow: auto;} } .selectAsText { appearance: none; -webkit-appearance: none; -moz-appearance: none; border: none; /* needed for Firefox: */ overflow:hidden; display: inline; } .EP-yellow {color: #fc0 !important; } @media screen and (max-width:1600px) { #community-right-sidebar {display:none;} .fillerOuter.communitymain {padding-left:0px !important; float:left; width:calc(100% - 395px);} #profileschanger .psch-l {right:120px; top:20px; left: initial; z-index:10;} #profileschanger .psch-r {right:20px; top:20px; z-index:10;} } @media screen and (min-width:850px) and (max-width:1200px) { #profile_sidebar { width:300px; } .fillerOuter { padding-left: 320px; } .plexcontainer .mb, .plexcontainer .mbphoto {width:100% !important; max-width:100% !important; display:block !important;} } /* MOBILE */ @media screen and (max-width:850px) { #up-main-header {width:300px; height:120px;} #up-main-header h1 {font-size:40px; line-height:40px;} #up-main-header .h1register {font-size:16px; line-height:32px; margin:30px 0px 0px 0px; padding:0px 20px; letter-spacing:0px;} #up-main-header span {font-size:20px;} .fillerOuter { padding-left: 0px;} .fillerOuter.communitymain {padding-left:0px !important; float:none; width:100%;;} #profileschanger .psch-l {top:12px; left:10px; width:40px; height:40px; font-size:26px; padding-left: 10px; box-shadow:none;} #profileschanger .psch-r {top:12px; right:10px; width:40px; height:40px; font-size:26px; padding-left: 14px; box-shadow:none;} #pprofiletop {height:265px; /*215*/ overflow:hidden; background-size:100%; background-position: top center; background-color:#222;} #pprofiletopinfo {width:100%; position: absolute; top: 70px; bottom:auto; left:140px;} #pprofiletopinfo h1 {width:350px; height:25px; line-height:25px; font-size: 22px;} #pprofiletopinfo h2 {margin-top:3px;} #pprofiletophead {width:50px; margin:10px;} #pprofiletophead img {width:50px; height:50px;} #pprofiletopheadinner {line-height:90px;font-size:50px;} #pprofiletopinfo .pdrops {display:block; margin-bottom:10px; margin-right:10px; text-align:center; width:200px; line-height:40px; float:right;} #pprofiletophead,#pprofiletopheadinner,#pprofiletophead img {width:90px; height:90px;} #pprofiletopbtn {width:100%; float:none; bottom:10px; right:0px; opacity:0.7; text-align:center;} #pprofiletopbtn div {margin-right:20px;} #pprofiletopbtn div span {font-size:20px; text-align:center;} #aboutmebig {display:none;} #profilemobilespacer {height:65px; width:100%;} #pnavtop {height:120px; /*60*/ background: linear-gradient(180deg, rgba(24,24,24,1) calc(50% - 0px), rgba(100,100,100,1) calc(50%), rgba(24,24,24,1) calc(50% + 1px) );} #pnavtop a {width:24%;line-height:60px;} #pnavtop a:nth-child(4) {border-right:0px !important;} #pnavtop .pdrops {border-top:1px solid #3d3d3d; /*width:24%;*/} #pnavtop .up-edit-profile-btn {position:absolute; top:10px; right:10px; width:120px; line-height:30px;} #middler {padding-bottom:20px;} .middlerbox {width:100%; float:none; padding-left:10px; padding-top:20px; padding-bottom:0px; margin-bottom:0px;} .middlerbox p {display:inline-block; margin:0px; padding:0px;} #profile_sidebar {float:none; width:100%; display:block; margin:20px 0px; min-height:50px;display:none;} #responsive_sidebar {display:none;} .filler {float:none; width:100%; display:block; margin:20px 0px;} #channel-headin {height:110px;} #channel-headin h1 {display: block; clear: both; width: 100%;} #channel-headin div {text-align:left; float:left; margin-left:10px;} .hdchannel .fillerOuter {padding-left:0px;} .hdchannel #profile_sidebar {width:100%;} #cpp-desk-ban {display:none;} #cpp-desk-ban .channelsoc {display:block;} #cpp-mobi-ban {display:block;} #cpp-mobi-ban .channelsoc {display:block;} #collectionmobelin {height:65px;} #collectionmobelin #playlistlike {margin-left:7px;} #collectionmobdata {} .pbox2, .pbox3 {flex-basis:100% !important;} .psscrol br {display: none;} .commboxtime {text-align:left; padding-left: 11px; float:none; margin-bottom:5px;} .pnlleftside {float:none; width:100%; min-height:500px;} .pnlrightside {float:none; width:100%;} .pnlleftside.avatareditpage, .pnlrightside.avatareditpage {width:100%;} #panel-edit-tab textarea {width:95% !important;} #panel-edit-tab label strong {text-align:left;} .birthdatemobile {display:block !important;} .pnlrightsideinner {margin-left:0px;} } @media screen and (max-width:437px) { #pnavtop {height:80px;} #pnavtop a {line-height:40px;} #pprofiletop {height: 240px;} #pprofiletopbtn {bottom:10px;} #pprofiletopbtn div {margin-left:5px; margin-right:5px;} #middler {padding-bottom: 10px; margin-bottom:10px;} .middlerbox {float:left; width:50%; padding-top:10px;} .filler {margin-top:10px;} .streamevents .seheader {margin: -20px 20px 0px -19px;} .streameventsday {padding-bottom:0px;} .streamevents .commbox {display:inline-block; margin-bottom:10px;} } /* profile */ .epwhite #pcontent {margin-top:0px; background: #ccc; padding:20px;} .epwhite #pprofiletop.communitymain {background:#404040;} .epwhite #up-main-header {background-image: url(/new/commbg-white2.png); background-color:#404040;} .epwhite #up-main-header span {color:#ccc;} .epwhite .up-profilebox a span {color:#f5f5f5; background:#404040; padding:3px 3px 3px 6px;} .epwhite #community-right-sidebar {background:#999;} .epwhite .plexcontainer {background:#eaeaea; border:1px solid #ccc; border-top:0px;} .epwhite .pbelin {background: #dedede; border:0px; border-bottom:1px solid #ccc; border-top-left-radius:5px; border-top-right-radius:5px;} .epwhite #pprofiletop {background-color:#404040;} .epwhite #middler {background:#404040; margin-bottom:0px;} .epwhite .headimggradient {border-left: 10px solid #404040; background-image: -webkit-linear-gradient(to right, rgba(64, 64, 64, 1), transparent); background-image: -moz-linear-gradient(to right, rgba(64, 64, 64, 1), transparent); background-image: -ms-linear-gradient(to right, rgba(64, 64, 64, 1), transparent); background-image: -o-linear-gradient(to right, rgba(64, 64, 64, 1), transparent); background-image: linear-gradient(to right, rgba(64, 64, 64, 1), transparent); } .epwhite .headimgshadow { background-image: -webkit-linear-gradient(to top, rgba(64,64,64,0.8), transparent); background-image: -moz-linear-gradient(to top, rgba(64,64,64,0.8), transparent); background-image: -ms-linear-gradient(to top, rgba(64,64,64,0.8), transparent); background-image: -o-linear-gradient(to top, rgba(64,64,64,0.8), transparent); background-image: linear-gradient(to top, rgba(64,64,64,0.8), transparent); } .epwhite #middler .middlerbox {color:#999;} .epwhite .fillerOuter.communitymain {background: #eaeaea; border-top-left-radius:5px; border-top-right-radius:5px;} .epwhite .fillerOuter.profilemain {background:#eaeaea; border-top-left-radius:5px; border-top-right-radius:5px;} .epwhite #toptopbelprof {background:none;background: #dedede; border:0px; border-bottom: 1px solid #ccc;} .epwhite #toptopbelprof h2 {color:#040404;} .epwhite .toptopbelinsetprof {color:#404040;} .epwhite #toptopbelinprof a.active {background:#FFF; color:#ae0000;} .epwhite #toptopbelinprof a {background:#dedede; color:#404040;} .epwhite #toptopbelinprof a:hover {color:#404040; background:#c8c8c8;} .epwhite .urgentinfo:before {color:#414141;} /*.epwhite #categoriesbelin a {background:#cfcfcf; color:#404040; border-left: 1px solid #ccc;} .epwhite #categoriesbelin a.active {background:#FFF; color:#ae0000;} .epwhite #categoriesbelin a:hover {color:#404040; background:#c0c0c0;} .epwhite #categories-list-left span.catname:hover {padding-left:0px;}*/ .epwhite .up-profilebox .uppbi {display:block;} .epwhite {} .epwhite {} .epwhite {} .epwhite {} .epwhite {} .epwhite .pnlfullsize {background:none;} .epwhite .tdheader{background: #dedede;} .epwhite .inp1, .epwhite .inp2 {background:#fff; color:#666;} .epwhite .pnlleftside, .epwhite .pnlrightside {background:none;} .epwhite #panel-edit-tab strong {color:#666 !important;} .epwhite #panel-edit-tab .pannelbtnylw {color:#ae0000;} .epwhite .filler {background: #eaeaea;} .epwhite .streameventsday {background:none; border-bottom: 1px solid #ccc;} .epwhite .communityshowmore {background:#dedede; color:#404040;} .epwhite .streamloadingmore {color:#666;} .epwhite .communityshowmore:hover {background:#d8d8d8; color:#404040;} .epwhite .seheader {border-left: 5px solid #ae0000; margin: -20px 20px 20px -20px;} .epwhite .seheader a h2, .epwhite .seaction, .epwhite .pbelin.plister h2, .epwhite .profile-icon-usercircle:before {color:#404040;} .epwhite .channelsoc i {color:#000;} .photosgrid .boxmessageclosedel { left:auto; right:5px; } .mb-placeholder, .mb-placeholder * { cursor:default !important; } .mb-placeholder .mb-placeholder-img { background:#1a1a1a; width:100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; border:1px solid #333; box-sizing:border-box; } .mb-placeholder .mb-status-label { color:#999; font-size:11px; text-transform:uppercase; } .mb-placeholder.mb-removed .mb-status-label { color:#c33; } .mb-placeholder.mb-failed .mb-status-label { color:#c33; } .mb-placeholder.mb-processing .mb-status-label { color:#888; } .mb-placeholder .mbtit { opacity:0.5; } .mb-placeholder .mbstats { opacity:0.5; } .mb-placeholder .mbtitphoto { opacity:0.5; } .mb-placeholder .mbtimphoto { opacity:0.5; } .mb-placeholder .mbviephoto { opacity:0.5; } /* owner upload processing modal */ .uploaded-videos-owner .js-upload-progress-placeholder, .uploaded-videos-owner .js-upload-progress-placeholder * {cursor:pointer !important;} .uploaded-videos-owner .upload-progress-badge {position:absolute; top:5px; left:69px; z-index:13; display:flex; align-items:center; justify-content:center; width:27px; height:27px; padding:0px; border:1px solid rgba(255,255,255,0.45); border-radius:50%; background:rgba(20,20,20,0.9); box-sizing:border-box; cursor:pointer !important; box-shadow:0px 1px 5px rgba(0,0,0,0.65);} .uploaded-videos-owner .upload-progress-badge:before {content:""; width:13px; height:13px; border:2px solid #777; border-top-color:#fc0; border-radius:50%; box-sizing:border-box; animation:upload-progress-badge-spin 0.9s linear infinite;} .uploaded-videos-owner .upload-progress-badge:hover {background:#ae0000; border-color:#fff;} .uploaded-videos-owner .upload-progress-badge:focus-visible {outline:2px solid #fc0; outline-offset:2px;} @keyframes upload-progress-badge-spin {to {transform:rotate(360deg);}} #EPmodal-container.upload-progress-container {width:calc(100vw - 24px); max-width:760px; margin-top:4vh; max-height:92vh;} .upload-progress-modal {width:100%; max-height:92vh; overflow-y:auto; box-sizing:border-box; background:#202020; color:#ddd; border-radius:7px; box-shadow:0px 18px 55px rgba(0,0,0,0.55); scrollbar-width:thin; scrollbar-color:#ae0000 transparent;} .upload-progress-head {position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 22px; background:#292929; border-bottom:1px solid #3a3a3a;} .upload-progress-head-main {min-width:0;} .upload-progress-head-actions {flex:0 0 auto; display:flex; align-items:center; gap:10px;} .upload-progress-btn.upload-progress-upload-another {display:inline-flex; align-items:center; min-height:40px; padding:8px 12px; box-sizing:border-box; line-height:1.2; white-space:nowrap;} .upload-progress-kickrow {display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px;} .upload-progress-head h2 {margin:3px 0px 0px; color:#fff; font-size:21px; line-height:1.25; overflow-wrap:anywhere;} .upload-progress-kicker {display:block; color:#fc0; font-size:10px; font-weight:bold; letter-spacing:0.1em; text-transform:uppercase;} .upload-progress-chip {display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border:1px solid #555; border-radius:999px; color:#bbb; font-size:10px; font-weight:bold; letter-spacing:0.07em; text-transform:uppercase;} .upload-progress-chip i {flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:currentColor;} .upload-progress-chip.is-processing {color:#e2b93b; border-color:#8a6d1f; background:#332a10;} .upload-progress-chip.is-processing i {animation:upload-progress-pulse 1.4s ease-in-out infinite;} .upload-progress-chip.is-done {color:#b9e8c7; border-color:#285c3a; background:#20392a;} .upload-progress-chip.is-failed {color:#ffd1d1; border-color:#863333; background:#441d1d;} .upload-progress-chip.is-off {color:#aaa; border-color:#555; background:#2a2a2a;} .upload-progress-live {display:inline-flex; align-items:center; gap:5px; color:#888; font-size:10px; letter-spacing:0.05em; text-transform:uppercase;} .upload-progress-live i {flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:#3a9c59; animation:upload-progress-pulse 1.4s ease-in-out infinite;} @keyframes upload-progress-pulse {0%, 100% {opacity:1;} 50% {opacity:0.25;}} .upload-progress-close {flex:0 0 auto; width:34px; height:34px; padding:0px; border:0px; border-radius:50%; background:#3a3a3a; color:#ddd; font-size:26px; line-height:30px; cursor:pointer;} .upload-progress-close:hover {background:#ae0000; color:#fff;} .upload-progress-close:focus-visible, .upload-progress-thumb:focus-visible, .upload-progress-btn:focus-visible {outline:2px solid #fc0; outline-offset:2px;} .upload-progress-body {padding:20px 22px 24px;} .upload-progress-stage {margin:0px 0px 16px; color:#fff; font-size:15px; line-height:1.45;} .upload-progress-error {margin:0px 0px 16px; padding:10px 12px; border:1px solid #863333; border-radius:4px; background:#441d1d; color:#ffd1d1; line-height:1.4;} .upload-progress-net {display:flex; align-items:center; gap:10px; margin:0px 0px 16px; padding:10px 12px; border:1px solid #8a6d1f; border-radius:4px; background:#332a10; color:#ffe9ad; font-size:13px; line-height:1.4;} .upload-progress-spin {flex:0 0 auto; width:14px; height:14px; border:2px solid transparent; border-top-color:currentColor; border-left-color:currentColor; border-radius:50%; animation:upload-progress-badge-spin 0.8s linear infinite;} .upload-progress-result {display:flex; align-items:flex-start; gap:14px; margin:0px 0px 18px; padding:16px; border:1px solid #363636; border-radius:6px;} .upload-progress-result.is-success {background:#20392a; border-color:#285c3a;} .upload-progress-result.is-error {background:#441d1d; border-color:#863333;} .upload-progress-result.is-off {background:#2a2a2a; border-color:#484848;} .upload-progress-result-icon {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:#666; color:#fff; font-size:18px; font-weight:bold;} .upload-progress-result.is-success .upload-progress-result-icon {background:#3a9c59;} .upload-progress-result.is-error .upload-progress-result-icon {background:#c04545;} .upload-progress-result-text {min-width:0;} .upload-progress-result-text h3 {margin:1px 0px 4px; color:#fff; font-size:16px; line-height:1.3;} .upload-progress-result-text p {margin:0px; font-size:13px; line-height:1.5;} .upload-progress-result.is-success h3, .upload-progress-result.is-success p {color:#b9e8c7;} .upload-progress-result.is-error h3, .upload-progress-result.is-error p {color:#ffd1d1;} .upload-progress-result.is-off h3, .upload-progress-result.is-off p {color:#bbb;} .upload-progress-result-warning {margin-top:8px !important; padding-top:8px; border-top:1px dashed #285c3a; color:#ffe9ad !important;} .upload-progress-result-cta {margin-top:12px;} .upload-progress-btn {display:inline-block; padding:8px 16px; border:0px; border-radius:4px; background:#ae0000; color:#fff !important; font-size:13px; font-weight:bold; text-decoration:none; cursor:pointer;} .upload-progress-btn:hover {background:#c60000; text-decoration:none;} .upload-progress-milestones {display:flex; margin:0px 0px 6px; padding:0px; list-style:none;} .upload-progress-milestones li {flex:1; min-width:0; position:relative; padding-top:2px; text-align:center;} .upload-progress-milestones li:before {content:""; position:absolute; top:14px; left:-50%; width:100%; height:2px; background:#3a3a3a;} .upload-progress-milestones li:first-child:before {display:none;} .upload-progress-milestones li.is-done:before {background:#3a9c59;} .upload-progress-milestone-dot {position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:26px; height:26px; margin:0px auto 6px; border:2px solid #555; border-radius:50%; background:#202020; color:#fff; font-size:13px; font-weight:bold; box-sizing:border-box;} .upload-progress-milestones .is-done .upload-progress-milestone-dot {border-color:#3a9c59; background:#3a9c59;} .upload-progress-milestones .is-active .upload-progress-milestone-dot {border-color:#fc0;} .upload-progress-milestones .is-active .upload-progress-milestone-dot:after {content:""; width:10px; height:10px; border-radius:50%; background:#fc0; animation:upload-progress-pulse 1.2s ease-in-out infinite;} .upload-progress-milestone-label {display:block; padding:0px 3px; color:#888; font-size:10px; line-height:1.25;} .upload-progress-milestones .is-done .upload-progress-milestone-label {color:#b9e8c7;} .upload-progress-milestones .is-active .upload-progress-milestone-label {color:#fff; font-weight:bold;} .upload-progress-milestones.has-failure {opacity:0.5;} .upload-progress-section {margin-top:14px; padding:14px; border:1px solid #363636; border-radius:5px; background:#262626;} .upload-progress-section-head {display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; color:#999; font-size:12px;} .upload-progress-section-head strong {display:flex; align-items:center; color:#eee; font-size:13px;} .upload-progress-now {display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px;} .upload-progress-now-task {color:#fff; font-size:14px; font-weight:bold;} .upload-progress-now-task small {color:#999; font-size:11.5px; font-weight:normal;} .upload-progress-now-pct {color:#fff; font-size:20px; font-weight:bold; font-variant-numeric:tabular-nums; white-space:nowrap;} .upload-progress-now-pct small {color:#999; font-size:12px; font-weight:normal;} .upload-progress-bar {height:10px; overflow:hidden; border-radius:20px; background:#111;} .upload-progress-bar span {display:block; height:100%; min-width:2px; border-radius:20px; background:#ae0000; transition:width 0.3s ease;} .upload-progress-bar.is-indeterminate span {background:linear-gradient(90deg, transparent, #d13636, transparent); animation:upload-progress-indeterminate 1.3s ease-in-out infinite alternate;} @keyframes upload-progress-indeterminate {from {transform:translateX(-100%);} to {transform:translateX(280%);}} .upload-progress-qualities {margin:0px; padding:0px; list-style:none;} .upload-progress-qualities li {padding:8px 3px; border-top:1px solid #333;} .upload-progress-qualities li:first-child {border-top:0px;} .upload-progress-quality-row {display:flex; align-items:center; justify-content:space-between; gap:15px;} .upload-progress-qualities strong {color:#eee; font-size:13.5px;} .upload-progress-pill {display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border:1px solid #404040; border-radius:10px; color:#999; font-size:10.5px; font-variant-numeric:tabular-nums;} .upload-progress-pill i {flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:currentColor;} .upload-progress-pill.is-ready {color:#b9e8c7; border-color:#285c3a; background:#20392a;} .upload-progress-pill.is-active {color:#ffe9ad; border-color:#8a6d1f; background:#332a10;} .upload-progress-pill.is-active i {animation:upload-progress-pulse 1.2s ease-in-out infinite;} .upload-progress-pill.is-sync {color:#6ea8dc;} .upload-progress-pill.is-failed {color:#ffd1d1; border-color:#863333; background:#441d1d;} .upload-progress-quality-bar {height:3px; margin-top:7px; overflow:hidden; border-radius:4px; background:#111;} .upload-progress-quality-bar span {display:block; height:100%; border-radius:4px; background:#e2b93b; transition:width 0.3s ease;} .upload-progress-preview {border-color:#285c3a;} .upload-progress-okdot {display:inline-block; flex:0 0 auto; width:8px; height:8px; margin-right:6px; border-radius:50%; background:#3a9c59;} .upload-progress-qpill {padding:2px 8px; border:1px solid #404040; border-radius:10px; color:#ccc; font-size:10.5px;} .upload-progress-preview video {display:block; width:100%; max-height:390px; background:#111; border-radius:4px;} .upload-progress-preview p {margin:10px 0px 0px; color:#aaa; font-size:12.5px; line-height:1.45;} .upload-progress-preview .upload-progress-btn {margin-top:12px;} .upload-progress-thumbs-hint {margin:-4px 0px 10px; color:#888; font-size:11.5px;} .upload-progress-thumbs {display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px;} .upload-progress-thumb {position:relative; min-width:0; padding:0px; overflow:hidden; border:2px solid transparent; border-radius:4px; background:#111; color:#fff; cursor:pointer;} .upload-progress-thumb:hover {border-color:#888;} .upload-progress-thumb:hover img {filter:brightness(1.12);} .upload-progress-thumb.is-selected {border-color:#fc0;} .upload-progress-thumb:disabled {cursor:wait;} .upload-progress-thumb img {display:block; width:100%; aspect-ratio:16/9; object-fit:cover;} .upload-progress-thumb-check {position:absolute; top:4px; right:4px; display:none; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#fc0; color:#161616; font-size:11px; font-weight:bold;} .upload-progress-thumb.is-selected .upload-progress-thumb-check {display:flex;} .upload-progress-thumb-saving {position:absolute; top:0px; right:0px; bottom:0px; left:0px; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.55);} .upload-progress-thumb.is-saving .upload-progress-thumb-saving {display:flex;} .upload-progress-thumb-saving:after {content:""; width:18px; height:18px; border:3px solid transparent; border-top-color:#fff; border-left-color:#fff; border-radius:50%; animation:upload-progress-badge-spin 0.8s linear infinite;} #upload-progress-thumb-message.is-saved {color:#78ca91;} #upload-progress-thumb-message.is-error {color:#ef8585;} .epwhite .upload-progress-modal {background:#f4f4f4; color:#333;} .epwhite .upload-progress-head {background:#e5e5e5; border-bottom-color:#ccc;} .epwhite .upload-progress-head h2, .epwhite .upload-progress-stage, .epwhite .upload-progress-section-head strong, .epwhite .upload-progress-now-task, .epwhite .upload-progress-now-pct, .epwhite .upload-progress-qualities strong {color:#222;} .epwhite .upload-progress-kicker {color:#9a7b00;} .epwhite .upload-progress-close {background:#d5d5d5; color:#444;} .epwhite .upload-progress-close:hover {background:#ae0000; color:#fff;} .epwhite .upload-progress-section {background:#fff; border-color:#d2d2d2;} .epwhite .upload-progress-preview {border-color:#9bc9a9;} .epwhite .upload-progress-chip {border-color:#bbb; color:#666;} .epwhite .upload-progress-chip.is-processing {color:#7a5c10; border-color:#e0c26a; background:#fff6dd;} .epwhite .upload-progress-chip.is-done {color:#22593a; border-color:#9bc9a9; background:#e1f3e7;} .epwhite .upload-progress-chip.is-failed {color:#8f2323; border-color:#e3a5a5; background:#fdecec;} .epwhite .upload-progress-chip.is-off {color:#666; border-color:#bbb; background:#eee;} .epwhite .upload-progress-net {background:#fff6dd; border-color:#e0c26a; color:#7a5c10;} .epwhite .upload-progress-error {background:#fdecec; border-color:#e3a5a5; color:#8f2323;} .epwhite .upload-progress-result.is-success {background:#e1f3e7; border-color:#9bc9a9;} .epwhite .upload-progress-result.is-success h3, .epwhite .upload-progress-result.is-success p {color:#22593a;} .epwhite .upload-progress-result.is-error {background:#fdecec; border-color:#e3a5a5;} .epwhite .upload-progress-result.is-error h3, .epwhite .upload-progress-result.is-error p {color:#8f2323;} .epwhite .upload-progress-result.is-off {background:#eee; border-color:#ccc;} .epwhite .upload-progress-result.is-off h3, .epwhite .upload-progress-result.is-off p {color:#555;} .epwhite .upload-progress-result-warning {border-top-color:#9bc9a9; color:#7a5c10 !important;} .epwhite .upload-progress-milestones li:before {background:#d2d2d2;} .epwhite .upload-progress-milestones li.is-done:before {background:#2e8a4d;} .epwhite .upload-progress-milestone-dot {background:#f4f4f4; border-color:#bbb;} .epwhite .upload-progress-milestones .is-done .upload-progress-milestone-dot {border-color:#2e8a4d; background:#2e8a4d;} .epwhite .upload-progress-milestones .is-active .upload-progress-milestone-dot {border-color:#c79a00;} .epwhite .upload-progress-milestones .is-active .upload-progress-milestone-dot:after {background:#c79a00;} .epwhite .upload-progress-milestone-label {color:#777;} .epwhite .upload-progress-milestones .is-done .upload-progress-milestone-label {color:#22593a;} .epwhite .upload-progress-milestones .is-active .upload-progress-milestone-label {color:#222;} .epwhite .upload-progress-bar, .epwhite .upload-progress-quality-bar {background:#ddd;} .epwhite .upload-progress-qualities li {border-color:#ddd;} .epwhite .upload-progress-pill {border-color:#ccc; color:#777;} .epwhite .upload-progress-pill.is-ready {color:#22593a; border-color:#9bc9a9; background:#e1f3e7;} .epwhite .upload-progress-pill.is-active {color:#7a5c10; border-color:#e0c26a; background:#fff6dd;} .epwhite .upload-progress-pill.is-sync {color:#3d6fa8;} .epwhite .upload-progress-pill.is-failed {color:#8f2323; border-color:#e3a5a5; background:#fdecec;} .epwhite .upload-progress-preview p {color:#666;} .epwhite .upload-progress-qpill {border-color:#ccc; color:#555;} .epwhite .upload-progress-thumbs-hint {color:#777;} .epwhite .upload-progress-thumb.is-selected {border-color:#c79a00;} .epwhite .upload-progress-thumb-check {background:#c79a00; color:#fff;} .epwhite #upload-progress-thumb-message.is-saved {color:#2e8a4d;} .epwhite #upload-progress-thumb-message.is-error {color:#c33;} @media screen and (max-width:700px) { #EPmodal-container.upload-progress-container {width:calc(100vw - 12px); margin-top:1vh; max-height:98vh;} .upload-progress-modal {max-height:98vh;} .upload-progress-head {align-items:flex-start; flex-wrap:wrap; gap:8px; padding:12px 15px;} .upload-progress-head-main {flex:1 1 100%;} .upload-progress-head-actions {width:100%; justify-content:space-between; gap:6px;} .upload-progress-btn.upload-progress-upload-another {padding:7px 9px; font-size:12px;} .upload-progress-head h2 {font-size:18px;} .upload-progress-body {padding:15px;} .upload-progress-milestone-dot {width:22px; height:22px; font-size:11px;} .upload-progress-milestones li:before {top:12px;} .upload-progress-milestone-label {font-size:9px;} .upload-progress-now-pct {font-size:17px;} .upload-progress-thumbs {grid-template-columns:repeat(3, minmax(0, 1fr));} } @media (prefers-reduced-motion: reduce) { .uploaded-videos-owner .upload-progress-badge:before, .upload-progress-chip.is-processing i, .upload-progress-live i, .upload-progress-milestones .is-active .upload-progress-milestone-dot:after, .upload-progress-pill.is-active i, .upload-progress-bar.is-indeterminate span, .upload-progress-spin, .upload-progress-thumb-saving:after {animation:none;} .upload-progress-bar span, .upload-progress-quality-bar span {transition:none;} } /* resend-email control: a submit button (POST+CSRF) that must render like the plain links around it */ .linkbtn {background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;} /* subscriptions panel, playlist section. The two sections above it carry the same jump-link margin and the same two column widths inline; these are the class versions, so the newer section does not add more of what AGENTS.md forbids. .sub-unavailable marks a favourite the profile tab cannot show (playlist went private/empty, or its owner went hidden/banned/removed): the row stays, because this panel is the only place it can be removed from, muted so it reads as an explanation not a broken row */ .vidresultstable td.subs-num {width:30px;} .vidresultstable td.subs-name {width:40ch;} .sub-unavailable {color:#777;} /* the datetime breaks after its hyphens in a narrow column and every row inherits that height; the overflow-x below absorbs the width this costs */ .vidresultstable td.subs-date {white-space:nowrap;} /* on a phone each table scrolls in its own box instead of pushing the whole document sideways. Scoped: `.vidresultstable` is shared with pages laying two tables out side by side */ .subs-section .vidresultstable {overflow-x:auto;} /* width:1% pins the action column to its content instead of letting it absorb the table's slack */ .vidresultstable td.subs-act {width:1%;white-space:nowrap;} /* the button deletes something, so it says so before the confirm box */ .subs-section td.subs-act button:hover,.subs-section td.subs-act button:focus-visible {background:#c8001e;border-color:#c8001e;color:#fff;} /* subscriptions panel pager: `.numlist2` (style.css:667) rescaled from the video listings to these text tables, keeping the BACK/NEXT pseudo-elements and current-page styling. Flex, not inline-block: the bar wraps (even at 900px, next to the sidebar), and spacing must come from `gap` — a margin is kept at the start of a wrapped line, a gap is not, which is what indented the chooser under the numbers */ .numlist2.subs-pager {display:inline-flex;flex-wrap:wrap;align-items:center;column-gap:4px;row-gap:4px;min-width:0;width:auto;height:auto;line-height:1.6;font-size:1.15em;border:0;background:none;padding:0;margin:6px 0 2px;text-align:left;} /* every cell is one box of the same metrics; padding lives on the OUTER box only — padding both the and its inner made the current page narrower than a link and the strip re-flowed under the cursor on every page change */ .numlist2.subs-pager a,.numlist2.subs-pager .nmhere,.numlist2.subs-pager .subs-pager-off,.subs-rowsel a,.subs-rowsel .nmhere,.subs-nav a {display:inline-block;min-width:1.5em;margin-right:4px;padding:2px 6px;line-height:1.6;border-radius:2px;text-align:center;vertical-align:middle;} .numlist2.subs-pager a span,.numlist2.subs-pager .nmhere span,.numlist2.subs-pager .subs-pager-off span,.subs-rowsel a span,.subs-rowsel .nmhere span,.subs-nav a span {padding:0;} /* the end a pager cannot go to: present so the strip keeps its width, visibly inert */ .numlist2.subs-pager .subs-pager-off {background:#1c1c1c;color:#555;cursor:default;} .numlist2.subs-pager .nmhere,.subs-rowsel .nmhere {background:#c8001e;color:#fff;} .numlist2.subs-pager .nmback:before,.numlist2.subs-pager .nmnext:after {font-size:15px;} /* the ellipsis slots: present on every page so the strip keeps its width as the window slides, showing a gap character only where pages are actually skipped */ .numlist2.subs-pager .subs-pager-gap {display:inline-block;min-width:1.2em;margin-right:4px;padding:2px 2px;text-align:center;color:#555;} /* the flex gap owns the spacing; these margins would stack with it. Ties the two rules above on specificity, so ORDER decides — placed before them this rule silently does nothing. Child combinator on purpose: the shared rule also styles `.subs-nav a`, which keeps its margin */ .numlist2.subs-pager > a,.numlist2.subs-pager > .nmhere,.numlist2.subs-pager > .subs-pager-off,.numlist2.subs-pager > .subs-pager-gap {margin-right:0;} /* per-section rows-per-page chooser, styled as one more cell of the pager's family. Scoped through the bar: `.numlist2 span {padding:5px 10px}` (style.css:670) otherwise wins over a bare `.subs-rowsel` */ .numlist2.subs-pager .subs-rowsel {display:inline-block;position:relative;margin-left:0;padding:2px 19px 2px 7px;white-space:nowrap;vertical-align:middle;background:#333;border-radius:2px;color:#888;line-height:1.6;} /* `#panel-edit-tab label {display:block}` lives in this very file and wins on specificity (1,0,1 vs 0,1,1), which put the caption on its own line above the select. The id has to be in the selector. */ #panel-edit-tab .subs-rowsel label {display:inline;vertical-align:middle;font-size:0.7em;text-transform:uppercase;letter-spacing:0.3px;cursor:pointer;pointer-events:none;} /* the invisible select covers the WHOLE cell — sized to its own content it left the caption and caret dead to a click */ .numlist2.subs-pager .subs-rowsel select {position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;opacity:0;border:0;cursor:pointer;font:inherit;} /* padding zeroed: `.numlist2 span` (style.css:670) matches this span too */ .numlist2.subs-pager .subs-rowsel-val {margin-left:5px;padding:0;color:#ccc;} .numlist2.subs-pager .subs-rowsel select option {background:#333;color:#ccc;} .numlist2.subs-pager .subs-rowsel:after {content:'';position:absolute;right:7px;top:50%;margin-top:-2px;border:4px solid transparent;border-top-color:#888;pointer-events:none;} .numlist2.subs-pager .subs-rowsel:hover {color:#aaa;} .numlist2.subs-pager .subs-rowsel:hover:after {border-top-color:#aaa;} /* section nav: borrows the pager's cell metrics (grouped selector above) but is deliberately NOT `.numlist2` — that class drags its own font/padding/border rules from style.css. 18px bottom margin sits between the panel's other two gaps (heading-to-table 15px, section-to-section 24px) */ .subs-nav {margin:0 0 18px;font-size:1.05em;} .subs-nav a {background:#333;color:#999;} .subs-nav a:hover {color:#ccc;} .subs-nav b {margin-left:5px;color:#ccc;font-weight:normal;} .subs-section + .subs-section {margin-top:24px;} /* first section only. Both selectors needed: the nav is not rendered when only one section has rows */ .subs-section:first-child h3,.subs-nav + .subs-section h3 {margin-top:0;} /* filler rows padding a short last page: the hidden button is what holds the real row height */ .vidresultstable tr.subs-filler td {color:transparent;} .vidresultstable tr.subs-filler button {visibility:hidden;} /* below 560px the full nine-cell strip stops fitting: drop the outermost window numbers. Selectors must out-specify `.numlist2.subs-pager a` or they silently do nothing. The PHP side guarantees a hidden number always sits under an ellipsis (subs-pager.php, $pagerDist) */ @media screen and (max-width:560px) { .numlist2.subs-pager .subs-pager-d2,.numlist2.subs-pager .subs-pager-d3 {display:none;} } /* below 400px drop one more pair, so the number run stays whole and only the chooser wraps */ @media screen and (max-width:400px) { .numlist2.subs-pager .subs-pager-d1 {display:none;} } /* /my/edit-preferences/: label left, control flush right, so the checkboxes and the select share one edge in every section and at every width; per-table auto layout gave each section its own column break */ .prefs-rows {width:100%; max-width:500px;} /* over the markup's width="500": on a phone the panel is ~350px and a 500px table pushed the controls off-screen */ .prefs-rows td {padding:3px 0;} .prefs-rows td:first-child {width:100%; padding-right:12px;} .prefs-rows td:last-child {text-align:right; white-space:nowrap;} /* the excluded-categories grid: as many columns as the panel fits (6 on desktop, 2 on a phone) */ .prefs-cats {display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:6px 12px; max-width:1000px;} .prefs-cats label {white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .profile-field-error { display: block; color: #ef8686; font-size: 12px; margin: 4px 0; } .profile-field-error:empty { display: none; } [data-profile-edit] [aria-invalid="true"] { border-color: #ef8686; } [data-profile-counter].is-over-limit { color: #ef8686; } .profile-edit-help { margin-bottom: 12px; } .profile-about-text { white-space: pre-line; } .epwhite .profile-field-error, .epwhite [data-profile-counter].is-over-limit { color: #a71919; } /* profile comments manager */ .profile-comments-tabs {display:flex; flex-wrap:wrap; gap:6px; margin:10px 0;} .profile-comments-tabs a {padding:0 12px; line-height:28px; background:#171717; border:1px solid #333; color:#ccc; text-decoration:none;} .profile-comments-tabs a:hover {color:#FFF;} .profile-comments-tabs a.is-active {color:#000; background:#d9a83f; border-color:#d9a83f;} .comment-reply-to {padding-left:11px; margin-bottom:5px; color:#888; font-size:12px;} .comment-reply-to a {color:#aaa;} /* :has, not a negative margin: at max-width:437px the box is inline-block and its margins do not collapse */ .commbox:has(+ .comment-inline-reply) {margin-bottom:12px;} .comment-inline-reply {margin:0 0 28px 60px; max-width:700px;} .comment-thread {margin-left:20px;} .comment-thread-row[data-depth="2"] {margin-left:20px;} .comment-thread-row[data-depth="3"] {margin-left:40px;} @media (max-width:600px) { .comment-thread-row[data-depth="2"] {margin-left:8px;} .comment-thread-row[data-depth="3"] {margin-left:16px;} } .comment-inline-edit {margin:4px 0 10px;} .comment-inline-reply textarea, .comment-inline-edit textarea {display:block; box-sizing:border-box; width:100%; max-width:700px; height:72px; padding:8px 10px; background:#111; border:1px solid #333; border-radius:4px; color:#ddd; font:inherit; font-size:14px; line-height:1.5; resize:vertical;} .comment-inline-reply textarea:focus, .comment-inline-edit textarea:focus {outline:none; border-color:#d9a83f;} .comment-inline-actions {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; max-width:700px; margin-top:8px;} .comment-inline-actions button {border:0; border-radius:3px; padding:0 16px; line-height:30px; font-size:13px; cursor:pointer;} .comment-inline-actions button[type="submit"] {background:#d9a83f; color:#000; font-weight:bold;} .comment-inline-actions button[type="submit"]:hover {background:#e6b955;} .comment-inline-actions button:disabled {opacity:.6; cursor:default;} .comment-inline-cancel {background:transparent; color:#aaa;} .comment-inline-cancel:hover {color:#fff;} .comment-inline-status {flex:1 1 200px; color:#aaa; font-size:12px;} .comment-inline-status:empty {flex-basis:0;} /* not display:none, which drops the live region */ .epwhite .profile-comments-tabs a {background:#f5f5f5; border-color:#ccc; color:#333;} .epwhite .profile-comments-tabs a.is-active {color:#000; background:#d9a83f; border-color:#d9a83f;} .epwhite .comment-reply-to {color:#666;} .epwhite .comment-reply-to a {color:#404040;} .comeditbtn {color:#FFF; text-decoration:none; margin-left:30px; padding-right:10px; display:inline-block; text-transform:uppercase;} .comeditbtn:before {content:"\e906"; font-size:14px; font-family:"epicons";} .comeditbtn div {font-size:8px; display:inline-block; padding-left:3px; position:absolute; font-weight:bold; padding-top:5px; color:#888 !important;} .epwhite .comment-inline-reply textarea, .epwhite .comment-inline-edit textarea {background:#fff; border-color:#ccc; color:#333;} .epwhite .comment-inline-reply textarea:focus, .epwhite .comment-inline-edit textarea:focus {border-color:#d9a83f;} .epwhite .comment-inline-cancel {color:#555;} .epwhite .comment-inline-cancel:hover {color:#000;} .epwhite .comment-inline-status {color:#555;} /* ========================================================================== Profile pages, 2026-10 (markup: include/functions-profile-ui.php, data/profile.php, data/profile/*). Identity header, section tabs, list switcher, chips, section bars, Home (About card, shelves, activity, checklist), lists, comments, collections, subscriptions, empty and private states, and the notice. Scoped to .hdprofile (#content on /profile/): channel and club pages share #pcontent and .fillerOuter. Layout is final from the server's HTML and this CSS; js/profile-page.js only adds behaviour. ========================================================================== */ .hdprofile { --pf-ink:#f0f0f0; --pf-ink-2:#d2d2d2; --pf-muted:#a9a9a9; --pf-faint:#8d8d8d; --pf-line:#2a2a2a; --pf-line-2:#3a3a3a; --pf-surface:#151515; --pf-surface-2:#1c1c1c; --pf-hover:#242424; --pf-sel-bg:#e8e8e8; --pf-sel-ink:#111; --pf-accent:#ae0000; --pf-accent-hover:#c40000; --pf-link:#fc0; --pf-focus:#d99312; --pf-online:#2bb24c; /* the brand accent where the site puts it (style.css: .ep-nav-pills, .ep-rail-nav, the header's current item): yellow for current and hovered controls on dark, the theme's red on light; selected chips stay neutral */ --pf-brand-line:#d99312; --pf-brand-bg:#2c2612; } /* light theme: muted text #596170 / #5f6672 because #6b7280 is 4.2:1 on the #eef0f3 page */ .epwhite .hdprofile { --pf-ink:#1a1d21; --pf-ink-2:#3d4451; --pf-muted:#596170; --pf-faint:#5f6672; --pf-line:#dfe3e8; --pf-line-2:#c9d0d8; --pf-surface:#fff; --pf-surface-2:#f6f7f9; --pf-hover:#eceef1; --pf-sel-bg:#1a1d21; --pf-sel-ink:#fff; --pf-link:#ae0000; --pf-brand-line:#ae0000; --pf-brand-bg:#fbe9e9; } /* the content column takes the full width: the 400 px teaser sidebar is gone */ .hdprofile #pcontent {margin-top:0;} .hdprofile .fillerOuter.profilemain {padding-left:0;} .hdprofile .filler {float:none; min-height:0; margin:0 0 10px;} .epwhite .hdprofile #pcontent, .epwhite .hdprofile .fillerOuter.profilemain, .epwhite .hdprofile .filler {background:none; padding:0; border-radius:0;} .hdprofile .pf-sr {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;} .hdprofile .pf-ico {flex:none;} /* ---------- identity header ---------- */ .pf-head {margin:14px 0 0; color:var(--pf-ink-2); font-size:12.5px; line-height:18px;} .pf-cover {position:relative; margin:0 0 16px; border-radius:8px; overflow:hidden; aspect-ratio:1712/270; background:var(--pf-surface-2);} .pf-cover img {display:block; width:100%; height:100%; object-fit:cover;} .pf-row {display:grid; grid-template-columns:96px minmax(0,1fr) auto; grid-template-areas:"av id act"; column-gap:20px; align-items:start;} .pf-avatar {grid-area:av; position:relative; width:96px; height:96px;} .pf-avatar > img, .pf-avatar > .pf-letter {display:block; width:96px; height:96px; border-radius:50%; object-fit:cover; box-sizing:border-box;} .hdprofile .pf-letter {display:flex; align-items:center; justify-content:center; color:#fff; font-size:40px; font-weight:bold; line-height:1; text-transform:uppercase; background:#7a3e98;} .hdprofile .pf-c1 {background:#8f3b2f;} .hdprofile .pf-c2 {background:#a4502a;} .hdprofile .pf-c3 {background:#7d6a1f;} .hdprofile .pf-c4 {background:#2f6b45;} .hdprofile .pf-c5 {background:#25627a;} .hdprofile .pf-c6 {background:#3f4d9a;} .hdprofile .pf-c7 {background:#7a3e98;} .hdprofile .pf-c8 {background:#93345f;} .pf-rank {position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); padding:0 7px; border-radius:9px; background:#fc0; border:2px solid #000; color:#111; font-size:11px; font-weight:bold; line-height:16px; white-space:nowrap;} .epwhite .pf-rank {border-color:#eef0f3;} .pf-avatar a.pf-avatar-edit {position:absolute; inset:0; border-radius:50%; display:flex; align-items:flex-end; justify-content:center; padding-bottom:12px; box-sizing:border-box; color:#fff; font-size:10.5px; font-weight:bold; text-decoration:none; background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 60%); opacity:0; transition:opacity .15s;} .pf-avatar:hover a.pf-avatar-edit, .pf-avatar a.pf-avatar-edit:focus-visible {opacity:1;} .pf-id {grid-area:id; min-width:0; padding-top:4px;} .hdprofile h1.pf-name {display:flex; align-items:center; gap:8px; margin:0; padding:0; color:var(--pf-ink); font-size:22px; line-height:28px; font-weight:bold; letter-spacing:0; text-transform:none; overflow-wrap:anywhere;} .pf-online {flex:none; position:relative; width:9px; height:9px; border-radius:50%; background:var(--pf-online); box-shadow:0 0 0 2px #000;} .epwhite .pf-online {box-shadow:0 0 0 2px #eef0f3;} .hdprofile h1.pf-name a {color:inherit; text-decoration:none;} .hdprofile h1.pf-name a:hover {color:var(--pf-link); text-decoration:underline; text-underline-offset:3px;} .pf-meta, .pf-stats {display:flex; flex-wrap:wrap; align-items:center; gap:2px 0; margin:4px 0 0; padding:0; list-style:none; color:var(--pf-muted);} .pf-meta > li, .pf-stats > li {margin:0; padding:0; list-style:none;} .pf-meta > li + li::before, .pf-stats > li + li::before {content:"\00B7"; margin:0 7px; color:var(--pf-faint);} /* gender: a drawn 14px symbol (ep_pf_icon), a step brighter than the muted line so it reads at a glance */ .pf-gender {display:inline-flex; vertical-align:-2px; margin:0 4px 0 0; color:var(--pf-ink-2);} .pf-gender .pf-ico {display:block;} .pf-stats {margin-top:6px;} .pf-stats b {color:var(--pf-ink); font-weight:bold; font-variant-numeric:tabular-nums;} .pf-tagline {margin:8px 0 0; max-width:72ch; color:var(--pf-ink-2); font-size:13px; line-height:19px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere;} .pf-tagline a {color:var(--pf-link);} .pf-actions {grid-area:act; display:flex; align-items:center; gap:8px; padding-top:4px;} /* buttons: 32 px, 40 px on phones; one filled button per header */ .hdprofile .pf-btn {display:inline-flex; align-items:center; justify-content:center; gap:6px; box-sizing:border-box; height:32px; min-width:32px; margin:0; padding:0 14px; border:1px solid transparent; border-radius:4px; background:var(--pf-surface-2); color:var(--pf-ink); font:bold 12.5px/1 Arial, Helvetica, sans-serif; text-decoration:none; text-transform:none; white-space:nowrap; cursor:pointer;} .hdprofile .pf-btn:hover {background:var(--pf-hover); color:var(--pf-ink);} .hdprofile .pf-btn:focus-visible, .hdprofile h1.pf-name a:focus-visible, .pf-tabs a:focus-visible, .hdprofile .pf-chip:focus-visible, .pf-browse a:focus-visible, .pf-see:focus-visible, .pf-act-head a:focus-visible, .pf-menu-list a:focus-visible, .pf-about > summary:focus-visible, .pf-check a:focus-visible, .hdprofile .communityshowmore:focus-visible {outline:2px solid var(--pf-focus); outline-offset:2px;} .hdprofile .pf-btn svg {width:16px; height:16px;} .hdprofile .pf-btn-primary {background:var(--pf-accent); color:#fff;} .hdprofile .pf-btn-primary:hover {background:var(--pf-accent-hover); color:#fff;} .hdprofile .pf-btn-on, .hdprofile .pf-btn-ghost {background:transparent; border-color:var(--pf-line-2); color:var(--pf-ink);} .hdprofile .pf-btn-on:hover, .hdprofile .pf-btn-ghost:hover {background:transparent; border-color:var(--pf-brand-line); color:var(--pf-link);} .hdprofile .pf-btn-icon {width:32px; padding:0;} .hdprofile .pf-subscribe[aria-pressed="false"] svg:not(.pf-sub-ico), .hdprofile .pf-subscribe[aria-pressed="true"] svg.pf-sub-ico {display:none;} .hdprofile .pf-btn[aria-busy="true"] {opacity:.6; cursor:progress;} .pf-menu {position:relative;} .pf-menu > summary {list-style:none;} .pf-menu > summary::-webkit-details-marker {display:none;} .pf-menu-list {position:absolute; right:0; top:38px; z-index:20; min-width:200px; padding:6px 0; border:1px solid var(--pf-line-2); border-radius:6px; background:var(--pf-surface); box-shadow:0 8px 24px rgba(0,0,0,.45);} .epwhite .pf-menu-list {box-shadow:0 8px 24px rgba(0,0,0,.14);} .pf-menu-list a {display:flex; align-items:center; min-height:36px; padding:0 14px; color:var(--pf-ink); font-size:12.5px; text-decoration:none;} .pf-menu-list a:hover {background:var(--pf-hover); color:var(--pf-ink);} /* desktop (2026-10-12): the header is a band. With a cover, the cover lies behind the row on the band's right 76% and fades to near-black on the left (a mask, so the fade needs no colour of its own), as the header did before 2026-10; the band stays dark on the light theme too, as the old #404040 one did. Without a cover the band is a panel lit from the corner the cover would take. The avatar (148 px) breaks out of the band's bottom edge in a ring of the page colour and the tabs start beside it; the band's bottom margin keeps that room when no tabs follow (a private profile). Phones keep the cover as a banner above the row (below). */ @media screen and (min-width:691px) { /* z-index 20: the band's own layer (the cover's negative z-indexes stay inside it) at the level the owner's menu had (.pf-menu-list), so the open menu still covers the page below; the fixed site header stays above */ .pf-head {position:relative; z-index:20; display:flex; align-items:flex-end; min-height:168px; margin-bottom:52px; padding:24px 24px 22px 204px; border-radius:10px; box-sizing:border-box;} .hdprofile .pf-head-cover {--pf-ink:#fff; --pf-ink-2:#ececec; --pf-muted:#d0d0d0; --pf-faint:#a6a6a6; --pf-line-2:rgba(255,255,255,.32); --pf-link:#fc0; --pf-brand-line:#fc0; --pf-hover:rgba(255,255,255,.1);} .pf-head-cover::before {content:""; position:absolute; inset:0; z-index:-3; border-radius:10px; background:#0c0c0c;} .pf-head-cover::after {content:""; position:absolute; inset:0; z-index:-1; border-radius:10px; pointer-events:none; background:linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,0) 62%);} .pf-head-cover .pf-cover {position:absolute; z-index:-2; top:0; right:0; bottom:0; width:76%; margin:0; border-radius:0 10px 10px 0; aspect-ratio:auto; background:none; -webkit-mask-image:linear-gradient(to right, transparent, rgba(0,0,0,.42) 24%, #000 60%); mask-image:linear-gradient(to right, transparent, rgba(0,0,0,.42) 24%, #000 60%);} .pf-head-cover .pf-cover img {object-position:right center;} .pf-head-plain {border:1px solid #262626; background:radial-gradient(120% 150% at 100% 0%, rgba(252,204,0,.11), rgba(252,204,0,0) 55%), linear-gradient(to right, #101010, #1a1a1a);} .epwhite .pf-head-plain {border-color:#dfe3e8; background:radial-gradient(120% 150% at 100% 0%, rgba(174,0,0,.08), rgba(174,0,0,0) 55%), #fff;} .pf-head .pf-row {width:100%; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"id act"; align-items:end;} .pf-head .pf-avatar {position:absolute; z-index:2; left:30px; bottom:-46px; width:148px; height:148px;} .pf-head .pf-avatar > img, .pf-head .pf-avatar > .pf-letter {width:148px; height:148px; box-shadow:0 0 0 5px #000, 0 16px 34px rgba(0,0,0,.6);} .epwhite .pf-head .pf-avatar > img, .epwhite .pf-head .pf-avatar > .pf-letter {box-shadow:0 0 0 5px #eef0f3, 0 16px 34px rgba(0,0,0,.28);} .hdprofile .pf-head .pf-avatar > .pf-letter {font-size:58px;} .pf-head .pf-rank {bottom:-4px; padding:0 9px; font-size:12px; line-height:18px;} .hdprofile .pf-head h1.pf-name {font-size:28px; line-height:34px;} .pf-head-cover h1.pf-name, .pf-head-cover .pf-meta, .pf-head-cover .pf-stats, .pf-head-cover .pf-tagline {text-shadow:0 1px 3px rgba(0,0,0,.9);} .pf-head-cover .pf-online, .epwhite .pf-head-cover .pf-online {box-shadow:0 0 0 2px #0c0c0c;} .pf-head-plain .pf-online {box-shadow:0 0 0 2px #141414;} .epwhite .pf-head-plain .pf-online {box-shadow:0 0 0 2px #fff;} .pf-head .pf-actions {align-self:end;} .hdprofile .pf-head-cover .pf-btn-ghost, .hdprofile .pf-head-cover .pf-btn-on {background:rgba(0,0,0,.5); border-color:rgba(255,255,255,.38); color:#fff;} /* the owner's menu opens out of the band: the theme's own colours again */ .pf-head-cover .pf-menu-list {--pf-ink:#f0f0f0; --pf-line-2:#3a3a3a; --pf-hover:#242424;} .epwhite .pf-head-cover .pf-menu-list {--pf-ink:#1a1d21; --pf-line-2:#c9d0d8; --pf-hover:#eceef1;} .hdprofile .pf-head + .pf-tabs-wrap {--pf-tabs-inset:204px; margin-top:-46px;} } /* tablets: a smaller pop-out */ @media screen and (min-width:691px) and (max-width:1100px) { .pf-head {min-height:150px; margin-bottom:42px; padding-left:156px;} .pf-head .pf-avatar {left:22px; bottom:-36px; width:112px; height:112px;} .pf-head .pf-avatar > img, .pf-head .pf-avatar > .pf-letter {width:112px; height:112px;} .hdprofile .pf-head .pf-avatar > .pf-letter {font-size:44px;} .hdprofile .pf-head h1.pf-name {font-size:24px; line-height:30px;} .hdprofile .pf-head + .pf-tabs-wrap {--pf-tabs-inset:156px; margin-top:-36px;} } /* ---------- section tabs: level 1, underline ---------- */ /* each tab has its icon; the hover shows on both themes (the brand tint, the brand colour and a grey underline: the old #eceef1 background was 1.02:1 on the light page). Tab rules take ".pf-tabs > a": the Browse links are theirs. */ /* The row is a rail (ep_pf_tabs): the wrapper holds its place, the inset beside the avatar and the bottom line; the nav inside is the scroller, so its box is exactly the visible row (js/rails.js measures it). */ .pf-tabs-wrap.ep-rail-wrap {--pf-tabs-inset:0px; clear:none; margin:16px 0 0; padding:0 0 0 var(--pf-tabs-inset); border-bottom:1px solid var(--pf-line);} .pf-tabs {display:flex; align-items:stretch; gap:2px; margin:0; padding:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch;} .pf-tabs::-webkit-scrollbar {display:none;} .pf-tabs > a {flex:none; display:inline-flex; align-items:center; gap:6px; height:44px; margin:0 0 -1px; padding:0 14px 0 12px; border-bottom:3px solid transparent; color:var(--pf-muted); font-size:13px; font-weight:bold; text-decoration:none; white-space:nowrap; box-sizing:border-box;} .pf-tabs > a .pf-ico {color:var(--pf-faint);} .pf-tabs > a:hover {color:var(--pf-link); background:var(--pf-brand-bg); border-bottom-color:var(--pf-line-2); border-radius:6px 6px 0 0;} .pf-tabs > a:hover .pf-ico {color:var(--pf-link);} .pf-tabs > a[aria-current="page"] {color:var(--pf-ink); border-bottom-color:var(--pf-link);} .pf-tabs > a[aria-current="page"] .pf-ico {color:var(--pf-link);} .pf-tabs > a[aria-current="page"]:hover {background:none;} .hdprofile .pf-count {color:var(--pf-faint); font-size:12px; font-weight:normal; font-variant-numeric:tabular-nums;} .pf-tabs > a[aria-current="page"] .pf-count {color:var(--pf-muted);} .pf-browse {flex:none; display:flex; align-items:center; gap:4px; margin-left:auto; padding-left:12px; color:var(--pf-faint); font-size:11.5px;} .pf-browse-label {margin-right:4px; white-space:nowrap;} .pf-browse a {display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; margin:0; padding:0; border:1px solid var(--pf-line-2); border-radius:50%; color:var(--pf-ink); text-decoration:none; box-sizing:border-box;} .pf-browse a:hover {border-color:var(--pf-brand-line); color:var(--pf-link);} .pf-browse svg {width:14px; height:14px;} /* A row that does not fit scrolls sideways (phones, small desktops, tablets beside the avatar). ep_pf_tabs() scrolls the current tab into view; the edges fade where more tabs wait, following the row's scroll position (a scroll-driven animation: Chrome 115+, Safari 26+; elsewhere the cut-off tab is the only cue). With nothing to scroll the timeline is inactive and both fades are 0. The fades are decoration only: the row clips at its own box beside the avatar, with or without them, and they step aside while keyboard focus is in the row, so a focused tab that js/rails.js lines up with an edge shows whole. A mouse also gets the rail's arrows on hover (css/style.css .ep-rail-wrap, kept in step by js/rails.js), 32 px on the row's centre line, the back arrow at the tabs' start. Focus rings are drawn inside: the scroller clips anything outside the tab. */ @property --pf-tabs-l {syntax:''; inherits:false; initial-value:0px;} @property --pf-tabs-r {syntax:''; inherits:false; initial-value:0px;} @keyframes pf-tabs-edges {0% {--pf-tabs-l:0px; --pf-tabs-r:32px;} 10% {--pf-tabs-l:32px;} 90% {--pf-tabs-r:32px;} 100% {--pf-tabs-l:32px; --pf-tabs-r:0px;}} @supports (animation-timeline:scroll()) { .pf-tabs {mask:linear-gradient(to right, transparent, #000 var(--pf-tabs-l), #000 calc(100% - var(--pf-tabs-r)), transparent); animation:pf-tabs-edges linear both; animation-timeline:scroll(self inline);} .pf-tabs:focus-within {mask:none;} } .pf-tabs a:focus-visible {outline-offset:-2px;} .pf-tabs-wrap > .ep-rail-nav-row {left:var(--pf-tabs-inset); padding-top:22px;} .pf-tabs-wrap .ep-rail-nav {width:32px; height:32px;} .pf-tabs-wrap .ep-rail-nav svg {width:16px; height:16px;} /* ---------- level 2a: list switcher (segmented control) ---------- */ .pf-seg {display:inline-flex; align-items:stretch; max-width:100%; margin:14px 0 0; border:1px solid var(--pf-line-2); border-radius:6px; overflow:hidden; box-sizing:border-box;} .pf-seg a {display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 14px; color:var(--pf-ink-2); font-size:12.5px; font-weight:bold; text-decoration:none; white-space:nowrap; background:var(--pf-surface);} .pf-seg a + a {border-left:1px solid var(--pf-line-2);} .pf-seg a:hover {background:var(--pf-brand-bg); color:var(--pf-link);} .pf-seg a[aria-current="page"] {background:var(--pf-sel-bg); color:var(--pf-sel-ink);} .pf-seg a[aria-current="page"] .pf-count {color:inherit; opacity:.75;} .pf-seg a:focus-visible {outline:2px solid var(--pf-focus); outline-offset:-2px;} /* Liked (data/profile/liked.php): who can see the lists, for their owner, under the switcher */ /* ---------- the Library (2026-10): list context, the Library and Shared lists pages, Home's shortcuts ---------- */ /* a list page: where it sits ("Library > Favourites") above its bar; under the bar who can see it (to its owner) and the media control, then the grid */ .pf-crumbs {display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin:14px 0 0; color:var(--pf-muted); font-size:12px; line-height:18px;} .pf-crumbs a {color:var(--pf-link); font-weight:bold; text-decoration:none;} .pf-crumbs a:hover {text-decoration:underline;} .pf-crumbs a:focus-visible, .pf-list-note a:focus-visible {outline:2px solid var(--pf-focus); outline-offset:2px;} .pf-crumbs + .pf-bar {margin-top:6px;} /* one run of text: the icon leads, the link follows the sentence and wraps with it */ .pf-list-note {margin:10px 0 0; color:var(--pf-muted); font-size:12px; line-height:18px;} .pf-list-note .pf-ico {display:inline-block; margin-right:6px; vertical-align:-2px; color:var(--pf-faint);} .pf-list-note a {color:var(--pf-link); text-decoration:none;} .pf-list-note a:hover {text-decoration:underline;} .pf-bar + .pf-list-note {margin-top:0;} .pf-bar + .pf-seg {margin-top:0;} .pf-list-note + .pf-seg {margin-top:10px;} .pf-bar ~ .pf-seg {margin-bottom:12px;} /* an empty first page fills the photo grid's row as it does the video list */ .hdprofile .streameventsday.photosgrid > .pf-empty {grid-column:1 / -1;} /* Library: a card per list (its icon, name and total; what it holds; a chip per media with its count; who can see it) */ .pf-lib-grid {display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px; margin:14px 0 0;} .pf-lib {display:flex; flex-direction:column; gap:8px; min-width:0; margin:0; padding:12px 14px; border:1px solid var(--pf-line); border-radius:8px; background:var(--pf-surface); box-sizing:border-box;} .pf-lib-main {display:flex; align-items:center; gap:10px; min-width:0; color:var(--pf-ink); text-decoration:none;} .pf-lib-main:hover .pf-lib-name {color:var(--pf-link);} .pf-lib-main:focus-visible {outline:2px solid var(--pf-focus); outline-offset:2px; border-radius:6px;} .pf-lib-ico {flex:none; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--pf-surface-2); color:var(--pf-ink-2);} .pf-lib-name {min-width:0; font-size:15px; font-weight:bold; line-height:20px; overflow-wrap:anywhere;} .hdprofile .pf-lib-main .pf-count {margin-left:auto; font-size:12.5px;} .pf-lib-desc {display:flex; align-items:flex-start; gap:6px; margin:0; color:var(--pf-muted); font-size:12px; line-height:17px;} .pf-lib-desc .pf-ico {flex:none; margin-top:1px; color:var(--pf-faint);} .pf-lib-media.pf-chips {margin:0;} .hdprofile .pf-lib-media .pf-chip {height:26px; font-size:12px;} .pf-lib-vis {display:flex; align-items:center; gap:5px; margin:auto 0 0; color:var(--pf-faint); font-size:11.5px; line-height:16px;} .pf-lib-vis .pf-ico {flex:none;} /* Shared lists: a shelf per list under its own bar */ .pf-shared-list > .pf-bar {margin-top:22px;} .pf-shared-list > .pf-lib-desc {margin:0 0 8px;} .pf-shared-list > .pf-lib-media {margin:0 0 10px;} .pf-shared-empty {margin:0 0 12px; padding:16px; border:1px dashed var(--pf-line-2); border-radius:8px; color:var(--pf-muted); font-size:12.5px; line-height:18px; text-align:center;} .pf-shared-links {margin:0 0 10px;} /* owner Home: one row of shortcuts into the Library (chips here, five columns on phones) */ .pf-lib-row {display:flex; flex-wrap:wrap; gap:6px; margin:0;} .hdprofile .pf-lib-q {display:inline-flex; align-items:center; gap:4px; box-sizing:border-box; height:28px; padding:0 12px 0 4px; border:1px solid var(--pf-line-2); border-radius:4px; background:var(--pf-surface-2); color:var(--pf-ink-2); font-size:12.5px; font-weight:bold; line-height:1; text-decoration:none; white-space:nowrap;} .hdprofile .pf-lib-q:hover {border-color:var(--pf-brand-line); background:var(--pf-brand-bg); color:var(--pf-link);} .hdprofile .pf-lib-q:focus-visible {outline:2px solid var(--pf-focus); outline-offset:2px;} .pf-lib-q .pf-lib-ico {width:22px; height:22px; background:none; color:inherit;} .pf-lib-q .pf-lib-ico .pf-ico {width:16px; height:16px;} /* the phone Sections menu (ep_pf_sections_menu()): shown below 691 px, before the scrolling tabs */ .pf-secmenu {display:none;} /* ---------- level 2b: chips (sort, filters, shortcuts) ---------- */ .pf-sub, .pf-chips {display:flex; flex-wrap:wrap; align-items:center; gap:6px;} .pf-sub {margin:14px 0 0;} .hdprofile .pf-chip {display:inline-flex; align-items:center; gap:6px; box-sizing:border-box; height:28px; padding:0 12px; border:1px solid var(--pf-line-2); border-radius:4px; background:var(--pf-surface-2); color:var(--pf-ink-2); font-size:12.5px; font-weight:bold; line-height:1; text-decoration:none; white-space:nowrap;} .hdprofile .pf-chip:hover {border-color:var(--pf-brand-line); background:var(--pf-brand-bg); color:var(--pf-link);} .hdprofile .pf-chip.is-on {background:var(--pf-sel-bg); border-color:var(--pf-sel-bg); color:var(--pf-sel-ink);} .hdprofile .pf-chip .pf-count {font-size:11.5px;} .hdprofile .pf-chip.is-on .pf-count {color:inherit; opacity:.75;} /* ---------- section heading row (the shipped hairline, with count and tools) ---------- */ .pf-bar {display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px 10px; min-height:32px; margin:18px 0 10px; padding:0 0 7px; border-bottom:1px solid var(--pf-line);} .hdprofile .pf-bar-title {display:flex; align-items:baseline; gap:8px; float:none; margin:0; padding:0; height:auto; min-height:0; color:var(--pf-ink); font-size:18px; line-height:24px; font-weight:bold; letter-spacing:0; text-transform:none; background:none;} .hdprofile h3.pf-bar-title {font-size:16px; line-height:22px;} .hdprofile .pf-bar-title .pf-count {font-size:13px;} .pf-bar-title a {color:inherit; text-decoration:none;} /* the title takes the free room of its row, so the tools and then the end group (the link: See all, Manage; then the display settings, ep_pf_bar_close()) end at the right edge; whatever wraps to a row of its own packs to the right edge too (justify-content), and the link and the display settings wrap together */ .hdprofile .pf-bar-title {flex:1 1 auto;} .pf-bar-tools {display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;} .pf-bar-tools:empty {display:none;} .pf-bar-end {flex:none; display:flex; align-items:center; gap:10px;} .pf-see {flex:none; color:var(--pf-muted); font-size:12px; font-weight:bold; text-decoration:none; white-space:nowrap;} .pf-see::after {content:"\203A"; margin-left:5px; font-size:16px; line-height:10px;} .pf-see:hover {color:var(--pf-link);} /* the list pages' search form, restyled inside the bar */ .pf-bar .profile-uploads-search {margin:0;} .pf-bar .profile-uploads-search input[type=text] {height:28px; border-color:var(--pf-line-2); border-radius:4px 0 0 4px; background:var(--pf-surface-2); color:var(--pf-ink);} .pf-bar .profile-uploads-search input[type=submit] {height:28px; border-color:var(--pf-line-2); border-radius:0 4px 4px 0; background:var(--pf-surface-2); color:var(--pf-muted);} .pf-bar .profile-uploads-search input[type=submit]:hover {background:var(--pf-hover); color:var(--pf-ink);} .epwhite .pf-bar .profile-uploads-search input[type=text] {background:#fff; border-color:var(--pf-line-2); color:var(--pf-ink);} .epwhite .pf-bar .profile-uploads-search input[type=submit] {background:var(--pf-surface-2); border-color:var(--pf-line-2); color:var(--pf-muted);} .hdprofile .profile-uploads-search-info {margin:0 0 10px; color:var(--pf-muted);} /* ---------- display settings (the cog): one per page, the last item of its first bar (ep_pf_display_menu()) ---------- */ /* the button is the search button's box; open, it takes the brand colour as a hovered chip does */ .pf-cog {position:relative; flex:none;} .hdprofile .pf-cog-btn {position:relative; display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:28px; height:28px; margin:0; padding:0; border:1px solid var(--pf-line-2); border-radius:4px; background:var(--pf-surface-2); color:var(--pf-muted); cursor:pointer;} .hdprofile .pf-cog-btn:hover {background:var(--pf-hover); color:var(--pf-ink);} .hdprofile .pf-cog.is-open .pf-cog-btn {border-color:var(--pf-brand-line); background:var(--pf-brand-bg); color:var(--pf-link);} .hdprofile .pf-cog-btn:focus-visible {outline:2px solid var(--pf-focus); outline-offset:2px;} /* a dot while a setting is not the default: a column count for this kind of screen (html.ep-cols-N, data/head.php and js/profile-settings.js) or a switch that is on (.is-set) */ .ep-cols-1 .pf-cog-btn::after, .ep-cols-2 .pf-cog-btn::after, .ep-cols-3 .pf-cog-btn::after, .ep-cols-4 .pf-cog-btn::after, .ep-cols-5 .pf-cog-btn::after, .ep-cols-6 .pf-cog-btn::after, .pf-cog.is-set .pf-cog-btn::after {content:""; position:absolute; top:3px; right:3px; width:6px; height:6px; border-radius:50%; background:var(--pf-link);} /* the panel: the header menu's frame (.pf-menu-list), under the button with the right edges aligned; the button is always at the content's right edge, so the panel stays on the screen */ .pf-cog-panel {display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:20; box-sizing:border-box; min-width:250px; max-width:calc(100vw - 20px); padding:4px 0; border:1px solid var(--pf-line-2); border-radius:6px; background:var(--pf-surface); box-shadow:0 8px 24px rgba(0,0,0,.45); text-align:left;} .epwhite .pf-cog-panel {box-shadow:0 8px 24px rgba(0,0,0,.14);} .pf-cog.is-open .pf-cog-panel {display:block;} .hdprofile .pf-cog-h {margin:0; padding:8px 14px 6px; color:var(--pf-muted); font-size:12px; font-weight:bold; line-height:16px;} .pf-cog-row {display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; margin:0; padding:6px 14px; box-sizing:border-box; border-top:1px solid var(--pf-line);} .pf-cog-panel label.pf-cog-row {cursor:pointer;} .pf-cog-label {display:flex; align-items:center; gap:8px; color:var(--pf-ink); font-size:12.5px; font-weight:bold; line-height:18px; white-space:nowrap;} .pf-cog-label .pf-ico {color:var(--pf-muted);} /* Columns: the Settings pages' choice (.pf-choice), Auto first; js/profile-settings.js presses the current one */ .pf-cog-cols {flex:none; display:inline-flex; border:1px solid var(--pf-line-2); border-radius:6px; overflow:hidden;} .hdprofile .pf-cog-cols button {display:flex; align-items:center; justify-content:center; min-width:32px; height:30px; margin:0; padding:0 9px; border:0; border-left:1px solid var(--pf-line-2); border-radius:0; background:none; color:var(--pf-ink-2); font:bold 12.5px/1 Arial, Helvetica, sans-serif; cursor:pointer;} .hdprofile .pf-cog-cols button:first-child {border-left:0;} .hdprofile .pf-cog-cols button:hover {background:var(--pf-brand-bg); color:var(--pf-link);} .hdprofile .pf-cog-cols button[aria-pressed="true"] {background:var(--pf-sel-bg); color:var(--pf-sel-ink);} .hdprofile .pf-cog-cols button:focus-visible {outline:2px solid var(--pf-focus); outline-offset:-2px;} /* up to 850 px the title row keeps the title, the link and the display settings; sort and search take the rows below at full width. The title flows as text (its count follows the last word when it wraps) and gives way down to its longest word; when even then the link and the button do not fit beside it (a long translation on a narrow phone), they take the next row together, at the right edge. */ @media (max-width:850px) { .hdprofile .pf-bar-title {display:block; flex:1 1 0;} .hdprofile .pf-bar-title .pf-count {margin-left:4px;} .pf-bar-list .pf-bar-tools {order:2; flex:1 1 100%;} .pf-bar .profile-uploads-search {flex:1 1 100%;} .pf-bar .profile-uploads-search input[type=text] {flex:1 1 auto; width:auto;} } /* ---------- Home: About card ---------- */ /* About (2026-10-12): the bio at 75 characters a line, the facts as tiles that fill the row (long ones span two columns, last login and views a quiet footer line). Closed, up to three short facts and More preview the card on the right, so a wide screen does not show an empty strip; phones show the chevron only. */ .pf-about {margin:16px 0 4px; border:1px solid var(--pf-line); border-radius:6px; background:var(--pf-surface);} .pf-about > summary {display:flex; align-items:center; gap:12px; min-height:44px; padding:0 14px; color:var(--pf-ink-2); cursor:pointer; list-style:none;} .pf-about > summary::-webkit-details-marker {display:none;} .pf-about-label {flex:none; color:var(--pf-ink); font-weight:bold;} /* the summary line takes the room the label, the facts and More leave (it gives way before the facts do), and is cut only where it does not fit */ .pf-about-snip {flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--pf-muted);} .pf-about-chips {display:flex; gap:6px; min-width:0; margin-left:auto; overflow:hidden;} .pf-about-chip {flex:none; display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border:1px solid var(--pf-line-2); border-radius:12px; color:var(--pf-ink-2); font-size:12px; white-space:nowrap;} .pf-about-chip .pf-ico {color:var(--pf-muted);} .pf-about-more {flex:none; color:var(--pf-link); font-size:12px; font-weight:bold;} .pf-about-label + .pf-about-more, .pf-about-snip + .pf-about-more, .pf-about[open] .pf-about-more {margin-left:auto;} .pf-about-l, .pf-about[open] .pf-about-m, .pf-about[open] .pf-about-snip, .pf-about[open] .pf-about-chips {display:none;} .pf-about[open] .pf-about-l {display:inline;} .pf-about > summary::after {content:""; flex:none; width:7px; height:7px; border-right:2px solid var(--pf-muted); border-bottom:2px solid var(--pf-muted); transform:rotate(45deg) translate(-2px,-2px);} .pf-about[open] > summary::after {transform:rotate(-135deg) translate(-2px,-2px);} .pf-about-body {padding:2px 16px 16px;} .pf-about-text {max-width:75ch; margin:0 0 14px; color:var(--pf-ink); font-size:13.5px; line-height:21px; white-space:pre-line; overflow-wrap:anywhere;} .pf-dl {display:grid; grid-template-columns:max-content minmax(0,1fr); gap:5px 14px; margin:0;} .pf-dl dt {margin:0; color:var(--pf-muted); font-weight:normal;} .pf-dl dd {margin:0; color:var(--pf-ink-2); overflow-wrap:anywhere;} .pf-dl dd a, .pf-about-edit a {color:var(--pf-link);} .pf-about .pf-dl {grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:8px;} .pf-fact {min-width:0; padding:10px 12px; border:1px solid var(--pf-line); border-radius:6px; background:var(--pf-surface-2);} .pf-fact-long {grid-column:span 2;} .pf-about .pf-fact dt {display:flex; align-items:center; gap:6px; color:var(--pf-faint); font-size:11px; line-height:14px; text-transform:uppercase; letter-spacing:.05em;} .pf-about .pf-fact dt .pf-ico {color:var(--pf-muted);} .pf-about .pf-fact dd {margin:4px 0 0; color:var(--pf-ink); font-size:13px; line-height:18px;} .pf-about .pf-fact-meta {grid-column:1 / -1; display:flex; align-items:center; gap:8px; padding:0; border:0; background:none;} .pf-about .pf-fact-meta + .pf-fact-meta {margin-top:-6px;} .pf-about .pf-fact-meta dt, .pf-about .pf-fact-meta dd {margin:0; color:var(--pf-faint); font-size:12px; letter-spacing:0; text-transform:none;} .pf-about-edit {margin:12px 0 0;} /* ---------- shelves: the homepage rail, scoped here (style.css .ep-rail-wrap holds the variables and arrows) ---------- */ .pf-home .ep-rail-wrap {margin:0 0 6px;} .hdprofile .ep-rail-wrap > .vidresults6 {display:flex; flex-wrap:nowrap; align-items:flex-start; gap:0 var(--ep-rail-gap); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none;} .hdprofile .ep-rail-wrap > .vidresults6::-webkit-scrollbar {display:none;} .hdprofile .ep-rail-wrap > .vidresults6 > .mb {flex:0 0 auto; float:none !important; display:block !important; scroll-snap-align:start; width:var(--ep-rail-card) !important; max-width:none !important; margin:0 0 8px !important;} .hdprofile .ep-rail-wrap > .vidresults6 > .mb .mbstats {display:flex; flex-wrap:wrap; align-items:center; gap:3px 10px;} .hdprofile .ep-rail-wrap > .vidresults6 > .mb .mbstats > span {float:none; flex:0 0 auto; width:auto; max-width:none; margin:0; white-space:nowrap;} @media (pointer:fine) { .hdprofile .ep-rail-wrap > .vidresults6 {scroll-snap-type:x proximity;} } @media (prefers-reduced-motion:no-preference) { .hdprofile .ep-rail-wrap > .vidresults6 {scroll-behavior:smooth;} } /* pics and photo collections: portrait tiles, more per row; the masonry spans of the photo grids do not apply in a row */ .hdprofile .ep-rail-wrap[data-pf-rail="photos"] {--ep-rail-n:8; --ep-rail-peek:0.3; --ep-rail-gap:8px; --ep-rail-card:calc((100% - (var(--ep-rail-n) + var(--ep-rail-peek)) * var(--ep-rail-gap)) / (var(--ep-rail-n) + var(--ep-rail-peek)));} .hdprofile .pf-rail-photos > :is(.mbphoto, .mbphoto2) {flex:0 0 auto; float:none !important; display:block !important; grid-row:auto !important; width:var(--ep-rail-card) !important; max-width:none !important; height:auto !important; margin:0 0 8px !important; scroll-snap-align:start;} .hdprofile .pf-rail-photos > :is(.mbphoto, .mbphoto2) img {display:block; width:100% !important; height:auto !important; aspect-ratio:3/4; object-fit:cover;} /* the whole tile: style.css caps photo card links at 150 px (.mbphoto a, the old photo listing), which the list grids lift through .streameventsday; in the rail the cap cut the 3:4 pictures to landscape strips and left the arrows, centred on the full tile, at the strip's bottom edge */ .hdprofile .pf-rail-photos > :is(.mbphoto, .mbphoto2) > a {height:auto;} .hdprofile .ep-rail-wrap[data-pf-rail="photos"] .ep-rail-nav-row {padding-top:calc(var(--ep-rail-card) * 0.6667);} @media screen and (max-width:1600px) { .hdprofile .ep-rail-wrap[data-pf-rail="photos"] {--ep-rail-n:7;} } @media screen and (max-width:1400px) { .hdprofile .ep-rail-wrap[data-pf-rail="photos"] {--ep-rail-n:6;} } @media screen and (max-width:1200px) { .hdprofile .ep-rail-wrap[data-pf-rail="photos"] {--ep-rail-n:5;} } @media screen and (max-width:690px) { .hdprofile .ep-rail-wrap[data-pf-rail="photos"] {--ep-rail-n:3; --ep-rail-gap:6px;} } @media screen and (max-width:358px) { .hdprofile .ep-rail-wrap[data-pf-rail="photos"] {--ep-rail-n:2;} } /* ---------- lists sit on the page, not in #171717 boxes ---------- */ .hdprofile .streameventsday {padding:0; background:none; margin-bottom:0;} /* the grid gap spaces the photo tiles; the tiles' own side margin would push a full-width grid 1px past the screen */ .hdprofile .streameventsday.photosgrid > .mbphoto {margin-left:0; margin-right:0;} .epwhite .hdprofile .streameventsday {border-bottom:0;} .hdprofile .numlist2 {margin:14px 0 4px;} .hdprofile #error {margin:14px 0; border-radius:6px;} /* ---------- activity: one-line group headers over one row of cards ---------- */ .hdprofile .pf-act {margin:0 0 14px; padding:0 0 12px; border-bottom:1px solid var(--pf-line);} .hdprofile .pf-act:last-of-type {border-bottom:0;} .pf-act-head {display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 8px; margin:0 0 8px; color:var(--pf-muted); font-size:12.5px; line-height:18px;} .pf-act-head a.pf-act-who {color:var(--pf-ink); font-size:13px; font-weight:bold; text-decoration:none; overflow-wrap:anywhere;} .pf-act-head a.pf-act-who:hover {color:var(--pf-link);} .pf-act-head .sedate {color:var(--pf-faint); font-size:12px;} .pf-act-head .sedate::before {content:"\00B7"; margin-right:8px;} .hdprofile .pf-act .streameventsday {padding:0; margin:0;} /* the club stream's rule above hides every group's cards from the eighth on (comments from the fifth), which took the eighth photo out of the 8-column row above 1600px with no Show all; the profile groups size their own rows, so they cancel it and only the hide rules below apply (they are more specific) */ .hdprofile .pf-act .streameventsday > .mb:nth-of-type(n+8), .hdprofile .pf-act .streameventsday > .mbphoto:nth-of-type(n+8), .hdprofile .pf-act .streameventsday > .commbox:nth-of-type(n+5) {display:block !important;} /* videos: the site's grid columns (.mb in style.css: 6, 5 at 1600, 4 at 1400, 3 at 1200, 2 at 540, 1 at 358), one row of them */ .hdprofile .pf-act-video .streameventsday:not(.showAll) > .mb:nth-of-type(n+7) {display:none !important;} @media screen and (max-width:1600px) { .hdprofile .pf-act-video .streameventsday:not(.showAll) > .mb:nth-of-type(n+6) {display:none !important;} } @media screen and (max-width:1400px) { .hdprofile .pf-act-video .streameventsday:not(.showAll) > .mb:nth-of-type(n+5) {display:none !important;} } @media screen and (max-width:1200px) { .hdprofile .pf-act-video .streameventsday:not(.showAll) > .mb:nth-of-type(n+4) {display:none !important;} } @media screen and (max-width:540px) { .hdprofile .pf-act-video .streameventsday:not(.showAll) > .mb:nth-of-type(n+3) {display:none !important;} } @media screen and (max-width:358px) { .hdprofile .pf-act-video .streameventsday:not(.showAll) > .mb:nth-of-type(n+2) {display:none !important;} } /* photos: fixed columns (8, 7, 6, 5, 3, 2) with portrait tiles instead of the masonry, one row of them */ .hdprofile .pf-act-photo .streameventsday.photosgrid {--pf-act-cols:8; display:grid !important; grid-template-columns:repeat(var(--pf-act-cols), minmax(0,1fr)) !important; grid-auto-rows:auto !important; grid-auto-flow:row !important; gap:8px !important;} .hdprofile .pf-act-photo .streameventsday.photosgrid > .mbphoto {grid-row:auto !important; grid-column:auto !important; width:auto !important; max-width:none !important; height:auto !important; margin:0 !important;} .hdprofile .pf-act-photo .streameventsday.photosgrid > .mbphoto img {width:100% !important; height:auto !important; aspect-ratio:3/4; object-fit:cover;} .hdprofile .pf-act-photo .streameventsday:not(.showAll) > .mbphoto:nth-of-type(n+9) {display:none !important;} @media screen and (max-width:1600px) { .hdprofile .pf-act-photo .streameventsday.photosgrid {--pf-act-cols:7;} .hdprofile .pf-act-photo .streameventsday:not(.showAll) > .mbphoto:nth-of-type(n+8) {display:none !important;} } @media screen and (max-width:1400px) { .hdprofile .pf-act-photo .streameventsday.photosgrid {--pf-act-cols:6;} .hdprofile .pf-act-photo .streameventsday:not(.showAll) > .mbphoto:nth-of-type(n+7) {display:none !important;} } @media screen and (max-width:1200px) { .hdprofile .pf-act-photo .streameventsday.photosgrid {--pf-act-cols:5;} .hdprofile .pf-act-photo .streameventsday:not(.showAll) > .mbphoto:nth-of-type(n+6) {display:none !important;} } @media screen and (max-width:690px) { .hdprofile .pf-act-photo .streameventsday.photosgrid {--pf-act-cols:3;} .hdprofile .pf-act-photo .streameventsday:not(.showAll) > .mbphoto:nth-of-type(n+4) {display:none !important;} } @media screen and (max-width:358px) { .hdprofile .pf-act-photo .streameventsday.photosgrid {--pf-act-cols:2;} .hdprofile .pf-act-photo .streameventsday:not(.showAll) > .mbphoto:nth-of-type(n+3) {display:none !important;} } /* comments: three */ .hdprofile .pf-act-comment .streameventsday:not(.showAll) > .commbox:nth-of-type(n+4) {display:none !important;} /* "Show all (N)": only where the row hides cards. pf-act-nK is the group's size, capped one past the widest row */ .hdprofile .pf-act .communityshowmore {display:none; width:auto; margin:8px 0 0; padding:0 12px; height:28px; border:1px solid var(--pf-line-2); border-radius:4px; background:var(--pf-surface-2); color:var(--pf-ink-2); font:bold 12px/26px Arial, Helvetica, sans-serif; text-align:center; cursor:pointer;} .hdprofile .pf-act .communityshowmore:hover {background:var(--pf-hover); color:var(--pf-ink);} .hdprofile .streameventsday.photosgrid .communityshowmore {grid-column:1 / -1; justify-self:start;} .hdprofile .pf-act-comment .communityshowmore, .hdprofile .pf-act-video.pf-act-n7 .communityshowmore, .hdprofile .pf-act-photo.pf-act-n9 .communityshowmore {display:block;} @media screen and (max-width:1600px) { .hdprofile .pf-act-video.pf-act-n6 .communityshowmore, .hdprofile .pf-act-photo.pf-act-n8 .communityshowmore {display:block;} } @media screen and (max-width:1400px) { .hdprofile .pf-act-video.pf-act-n5 .communityshowmore, .hdprofile .pf-act-photo.pf-act-n7 .communityshowmore {display:block;} } @media screen and (max-width:1200px) { .hdprofile .pf-act-video.pf-act-n4 .communityshowmore, .hdprofile .pf-act-photo.pf-act-n6 .communityshowmore {display:block;} } @media screen and (max-width:690px) { .hdprofile .pf-act-photo.pf-act-n4 .communityshowmore, .hdprofile .pf-act-photo.pf-act-n5 .communityshowmore {display:block;} } @media screen and (max-width:540px) { .hdprofile .pf-act-video.pf-act-n3 .communityshowmore {display:block;} } @media screen and (max-width:358px) { .hdprofile .pf-act-video.pf-act-n2 .communityshowmore, .hdprofile .pf-act-photo.pf-act-n3 .communityshowmore {display:block;} } .hdprofile .pf-act .streameventsday.showAll .communityshowmore {display:none;} .pf-act-more {display:flex; justify-content:center; margin:6px 0 4px;} /* pages load as this row comes into view (js/profileActivityStream.js): the button shows only after a failed load */ .pf-act-more.pf-act-auto {min-height:1px; margin:0;} .pf-act-more.pf-act-auto [data-pf-more-activity] {display:none;} .hdprofile .pf-activity .streamloadingmore {padding:8px 0;} /* ---------- comment rows (the comments tab and activity groups keep their markup; spacing, sizes, colours) ---------- */ .hdprofile :is(.pf-comments, .pf-act) .commbox {position:relative; margin:0; padding:12px 34px 10px 52px; min-height:40px; border-bottom:1px solid var(--pf-line); background:none; box-sizing:border-box;} .hdprofile :is(.pf-comments, .pf-act) .commbox:last-of-type {border-bottom:0;} .hdprofile :is(.pf-comments, .pf-act) .commbox .commboxprofile {position:absolute; left:0; top:12px; width:40px !important; height:40px !important; margin:0 !important; border-radius:50%; font-size:17px !important; line-height:40px !important; float:none !important;} .hdprofile :is(.pf-comments, .pf-act) .commboxtime {display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; margin:0; color:var(--pf-faint); font-size:12px; line-height:18px;} .hdprofile :is(.pf-comments, .pf-act) .commbox > p {margin:4px 0; color:var(--pf-ink-2); font-size:13.5px; line-height:20px;} .hdprofile :is(.pf-comments, .pf-act, .cx-media-comment) .commboxvotebar {display:flex; align-items:center; flex-wrap:wrap; gap:2px; margin:2px 0 0 -6px; min-height:30px;} .hdprofile :is(.pf-comments, .pf-act, .cx-media-comment) .commboxvote {display:inline-flex; align-items:center; margin:0 4px 0 6px; padding:0; border:0;} .hdprofile :is(.pf-comments, .pf-act, .cx-media-comment) :is(.upvotebtn, .downvotebtn, .repvotebtn) {display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:30px; height:28px; margin:0; padding:0 8px; border-radius:14px; color:var(--pf-muted); text-transform:none; box-sizing:border-box;} .hdprofile :is(.pf-comments, .pf-act, .cx-media-comment) :is(.upvotebtn, .downvotebtn, .repvotebtn):hover {background:var(--pf-hover); color:var(--pf-ink);} .hdprofile :is(.pf-comments, .pf-act, .cx-media-comment) .repvotebtn div {position:static; display:inline; padding:0; font-size:12px; font-weight:bold; color:inherit !important;} /* ---------- collections: six columns at 1366 (the user's column choice, html.ep-cols-N, still wins) ---------- */ .hdprofile .pf-coll .streameventsday.photosgrid {grid-template-columns:repeat(7, minmax(0,1fr));} @media screen and (max-width:1600px) { .hdprofile .pf-coll .streameventsday.photosgrid {grid-template-columns:repeat(6, minmax(0,1fr));} } @media screen and (max-width:1200px) { .hdprofile .pf-coll .streameventsday.photosgrid {grid-template-columns:repeat(4, minmax(0,1fr));} } @media screen and (max-width:690px) { .hdprofile .pf-coll .streameventsday.photosgrid {grid-template-columns:repeat(2, minmax(0,1fr));} } /* ---------- subscriptions: rows with the Subscribed toggle ---------- */ .pf-subs-list {margin:0 0 6px; padding:0; list-style:none;} .pf-subs-row {display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; column-gap:12px; min-height:60px; margin:0; padding:8px 0; border-bottom:1px solid var(--pf-line); list-style:none; box-sizing:border-box;} .pf-subs-row:last-child {border-bottom:0;} .pf-subs-row.subs-filler {border-bottom-color:transparent;} .pf-subs-row.is-off .pf-subs-main {opacity:.55;} .hdprofile .pf-subs-row .pf-sav {width:44px; height:44px; border-radius:50%; font-size:18px;} .hdprofile .pf-subs-row .pf-sav.sq {border-radius:6px;} .pf-subs-main {min-width:0;} .pf-sname {color:var(--pf-ink); font-size:13.5px; font-weight:bold; text-decoration:none; overflow-wrap:anywhere;} a.pf-sname:hover {color:var(--pf-link);} .pf-smeta {display:flex; flex-wrap:wrap; gap:2px 0; margin-top:3px; color:var(--pf-muted); font-size:12px;} .pf-smeta span + span::before {content:"\00B7"; margin:0 6px; color:var(--pf-faint);} .pf-smeta a {color:var(--pf-ink-2);} .pf-smeta .sub-unavailable {color:#d27b7b;} .epwhite .pf-smeta .sub-unavailable {color:#a03030;} .hdprofile .pf-subs.pnlfullsize {min-height:0; padding:0; background:none;} .hdprofile .pf-subs .subs-nav {margin:0 0 4px; padding:0; background:none; border:0; font-size:inherit;} .hdprofile .pf-subs .subs-nav a.pf-chip {min-width:0; margin:0; padding:0 12px; line-height:1;} .hdprofile .pf-subs .subs-section {margin:0;} /* ---------- checklist, empty and private states ---------- */ .pf-empty {display:flex; flex-direction:column; align-items:center; gap:8px; margin:28px auto 8px; max-width:440px; padding:28px 20px; border:1px dashed var(--pf-line-2); border-radius:8px; color:var(--pf-muted); text-align:center; box-sizing:border-box;} .pf-empty svg {color:var(--pf-faint);} .hdprofile .pf-empty-title {margin:0; padding:0; color:var(--pf-ink); font-size:14px; line-height:20px; font-weight:bold; text-transform:none; background:none;} .pf-empty p {margin:0; line-height:19px;} .pf-empty .pf-btn {margin-top:6px;} .pf-check {margin:16px 0 4px; padding:14px 16px; border:1px solid var(--pf-line); border-radius:6px; background:var(--pf-surface);} .pf-check-head {display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px;} .hdprofile .pf-check-head h2 {margin:0; padding:0; color:var(--pf-ink); font-size:14px; line-height:20px; font-weight:bold; text-transform:none; background:none;} .pf-meter {flex:1 1 120px; max-width:220px; height:6px; border:0; border-radius:3px; background:var(--pf-line-2); overflow:hidden; -webkit-appearance:none; appearance:none;} .pf-meter::-webkit-progress-bar {background:var(--pf-line-2); border-radius:3px;} .pf-meter::-webkit-progress-value {background:var(--pf-link); border-radius:3px;} .pf-meter::-moz-progress-bar {background:var(--pf-link); border-radius:3px;} .pf-check-count {color:var(--pf-muted); font-size:12px;} .pf-check ul {display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; padding:0; list-style:none;} .pf-check li {margin:0; padding:0; list-style:none;} .pf-check li.done {display:none;} .pf-check li a {display:flex; align-items:center; gap:10px; min-height:36px; padding:0 12px; border:1px solid var(--pf-line-2); border-radius:6px; color:var(--pf-ink-2); text-decoration:none; box-sizing:border-box;} .pf-check li a:hover {border-color:var(--pf-brand-line); background:var(--pf-brand-bg); color:var(--pf-link);} .pf-check li i {flex:none; width:16px; height:16px; border-radius:50%; border:2px solid var(--pf-line-2); box-sizing:border-box;} .pf-library {margin-top:12px;} .pf-private {display:flex; align-items:flex-start; gap:10px; margin:22px 0 0; padding:14px 16px; border:1px solid var(--pf-line); border-radius:6px; background:var(--pf-surface); color:var(--pf-ink-2);} .pf-private svg {margin-top:1px; color:var(--pf-muted);} .pf-private p {margin:0; line-height:19px;} .pf-private .pf-private-title {color:var(--pf-ink); font-weight:bold;} /* ---------- the notice (js/toast.js) ---------- */ .ep-toast {position:fixed; left:50%; bottom:20px; z-index:10050; display:flex; align-items:center; gap:14px; box-sizing:border-box; max-width:calc(100vw - 32px); min-height:44px; padding:8px 8px 8px 16px; border-radius:6px; background:#2b2b2b; color:#fff; font:13px/18px Arial, Helvetica, sans-serif; box-shadow:0 8px 24px rgba(0,0,0,.45); transform:translateX(-50%);} .ep-toast[hidden] {display:none;} .ep-toast-text {min-width:0;} .ep-toast-action {flex:none; height:32px; margin:0; padding:0 12px; border:0; border-radius:4px; background:none; color:#fc0; font:bold 13px/32px Arial, Helvetica, sans-serif; text-transform:uppercase; cursor:pointer;} .ep-toast-action:hover {background:rgba(255,255,255,.08);} .ep-toast-action:focus-visible {outline:2px solid #d99312; outline-offset:1px;} .epwhite .ep-toast {background:#1a1d21;} /* ---------- tablets ---------- */ @media screen and (max-width:1100px) { .pf-row {grid-template-columns:80px minmax(0,1fr) auto; column-gap:16px;} .pf-avatar, .pf-avatar > img, .pf-avatar > .pf-letter {width:80px; height:80px;} .hdprofile .pf-avatar > .pf-letter {font-size:34px;} } /* ---------- phones ---------- */ @media screen and (max-width:690px) { .pf-head, .pf-bar, .pf-about, .pf-sub, .pf-seg, .pf-crumbs, .pf-list-note, .pf-check, .pf-empty, .pf-private, .pf-subs-list, .pf-act-more, .hdprofile .pf-act, .hdprofile .profile-uploads-search-info, .pf-lib-grid, .pf-lib-row, .pf-shared-list > .pf-lib-desc, .pf-shared-list > .pf-lib-media, .pf-shared-empty, .pf-shared-links {margin-left:10px; margin-right:10px;} .pf-lib-grid {grid-template-columns:minmax(0,1fr); gap:8px;} /* five equal columns, an icon over its label (two lines where a translation needs them) */ .pf-lib-row {display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:0;} /* a long word (Dutch, German) is hyphenated by the page's language (); without a dictionary it breaks */ .hdprofile .pf-lib-q {flex-direction:column; justify-content:flex-start; gap:5px; height:auto; min-height:66px; padding:6px 0; border:0; border-radius:8px; background:none; font-size:11.5px; line-height:14px; text-align:center; white-space:normal; overflow-wrap:anywhere; -webkit-hyphens:auto; hyphens:auto;} .hdprofile .pf-lib-q:hover {background:var(--pf-brand-bg);} .pf-lib-q .pf-lib-ico {width:38px; height:38px; background:var(--pf-surface-2);} .pf-lib-q .pf-lib-ico .pf-ico {width:18px; height:18px;} /* Sections: a labelled button before the tabs, at the page gutter; its list opens under it, over the page */ .pf-tabs-wrap.pf-tabs-menu {display:flex; align-items:center;} .pf-tabs-menu > .pf-tabs {flex:1 1 auto; min-width:0;} .pf-tabs-menu > .ep-rail-nav-row {display:none;} .pf-secmenu {display:block; flex:none; margin:0 4px 0 6px;} .hdprofile .pf-secmenu-btn {display:inline-flex; align-items:center; gap:6px; box-sizing:border-box; height:32px; padding:0 11px 0 9px; border:1px solid var(--pf-line-2); border-radius:16px; background:var(--pf-surface-2); color:var(--pf-ink); font-size:12.5px; font-weight:bold; line-height:1; white-space:nowrap; cursor:pointer;} .hdprofile .pf-secmenu[open] > .pf-secmenu-btn {border-color:var(--pf-brand-line); background:var(--pf-brand-bg); color:var(--pf-link);} .hdprofile .pf-secmenu-btn:focus-visible {outline:2px solid var(--pf-focus); outline-offset:2px;} .pf-secmenu .pf-secmenu-list {left:0; right:auto; top:calc(100% + 6px); width:min(300px, calc(100vw - 28px)); min-width:0; box-sizing:border-box;} .pf-secmenu-list a {gap:10px; min-height:44px; font-size:14px;} .pf-secmenu-list a .pf-ico {flex:none; color:var(--pf-faint);} .pf-secmenu-label {flex:1 1 auto; min-width:0; overflow-wrap:anywhere;} .pf-secmenu-list a[aria-current="page"] {background:var(--pf-brand-bg); color:var(--pf-link); font-weight:bold;} .pf-secmenu-list a[aria-current="page"] .pf-ico {color:var(--pf-link);} .pf-secmenu-here {flex:none; color:var(--pf-muted); font-size:12px; font-weight:normal;} .pf-head {margin-top:10px;} .pf-cover {aspect-ratio:4/1; margin:0 0 12px; border-radius:6px;} /* under a cover the avatar (88 px) overlaps the banner's bottom edge */ .pf-head-cover .pf-cover {margin-bottom:0;} .pf-head-cover .pf-row {grid-template-columns:88px minmax(0,1fr);} .pf-head-cover .pf-avatar {z-index:1; margin-top:-34px;} .pf-head-cover .pf-avatar, .pf-head-cover .pf-avatar > img, .pf-head-cover .pf-avatar > .pf-letter {width:88px; height:88px;} .pf-head-cover .pf-avatar > img, .pf-head-cover .pf-avatar > .pf-letter {box-shadow:0 0 0 4px #000, 0 8px 20px rgba(0,0,0,.5);} .epwhite .pf-head-cover .pf-avatar > img, .epwhite .pf-head-cover .pf-avatar > .pf-letter {box-shadow:0 0 0 4px #eef0f3, 0 8px 20px rgba(0,0,0,.2);} .hdprofile .pf-head-cover .pf-avatar > .pf-letter {font-size:36px;} .hdprofile .pf-head-cover h1.pf-name {margin-top:8px;} .pf-row {grid-template-columns:64px minmax(0,1fr); grid-template-areas:"av name" "av meta" "st st" "tg tg" "act act"; column-gap:12px; row-gap:0;} .pf-id {display:contents;} .pf-avatar, .pf-avatar > img, .pf-avatar > .pf-letter {width:64px; height:64px;} .hdprofile .pf-avatar > .pf-letter {font-size:28px;} .pf-avatar a.pf-avatar-edit {padding-bottom:8px; font-size:9.5px;} .pf-rank {font-size:10px; line-height:14px; padding:0 5px; bottom:-5px;} .hdprofile h1.pf-name {grid-area:name; align-self:end; font-size:20px; line-height:26px;} .pf-meta {grid-area:meta; align-self:start; flex-wrap:nowrap; min-width:0; margin-top:2px; overflow:hidden; white-space:nowrap;} .pf-meta > li {flex:none;} .pf-meta > li:last-child {flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;} .pf-meta > li.pf-m-name, .pf-meta > li.pf-m-joined {display:none;} .pf-meta > li.pf-m-name + li::before {content:none;} /* one row of equal columns, as far as each label's longest word allows: a long word widens its column instead of running into the next (five figures with Profile views, long translations at 320 px); figures on one line */ .pf-stats {grid-area:st; display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px 6px; margin:14px 0 0; text-align:center; font-size:11px; line-height:14px;} .pf-stats > li + li::before {content:none;} .pf-stats > li {flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:2px;} .pf-stats b {font-size:16px; line-height:20px;} .pf-tagline {grid-area:tg; margin-top:12px; -webkit-line-clamp:3;} .pf-actions {grid-area:act; padding:0; margin-top:12px;} .hdprofile .pf-actions .pf-btn {height:40px;} .hdprofile .pf-actions .pf-btn-primary, .hdprofile .pf-actions .pf-btn-on, .hdprofile .pf-actions .pf-grow {flex:1;} .hdprofile .pf-actions .pf-btn-icon {width:40px; flex:none;} .pf-menu-list {top:46px;} .pf-tabs-wrap.ep-rail-wrap {--pf-tabs-inset:4px; margin-top:12px; padding:0 4px;} .pf-tabs > a {padding:0 10px;} .pf-browse {display:none;} .pf-sub {flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-left:0; margin-right:0; padding:0 10px;} /* the subscriptions page keeps the gutter the rest of the page has: its section chips scroll from 10 px in like every chip row (the page's own rule zeroes their padding), its pagers sit in the rows' 10 px margins */ .hdprofile .pf-subs .subs-nav {padding:0 10px;} .hdprofile .pf-subs .subs-pager {margin-left:10px; margin-right:10px;} .pf-sub::-webkit-scrollbar {display:none;} .pf-seg {display:flex; width:max-content; max-width:calc(100% - 20px); overflow-x:auto; scrollbar-width:none;} .pf-seg::-webkit-scrollbar {display:none;} .pf-seg a {height:36px; flex:none;} .hdprofile .pf-chip {height:32px; flex:none;} .pf-bar {margin-top:14px;} .hdprofile .pf-bar-title {font-size:16px; line-height:20px;} .hdprofile h3.pf-bar-title {font-size:15px;} .hdprofile .pf-cog-btn {width:32px; height:32px;} .pf-cog-row {min-height:48px;} .hdprofile .pf-cog-cols button {min-width:40px; height:36px;} /* rails start at the page gutter and scroll to the screen edge */ .hdprofile .ep-rail-wrap > .vidresults6 {padding:0 10px; scroll-padding:0 10px;} .pf-about-chips, .pf-about-more {display:none;} .pf-about > summary::after {margin-left:auto;} .pf-about .pf-dl {grid-template-columns:repeat(2, minmax(0,1fr));} .pf-subs-row {column-gap:10px;} .pf-smeta {gap:2px 10px;} .pf-smeta span + span::before {content:none;} .pf-smeta .pf-sm-opt {display:none;} .hdprofile :is(.pf-comments, .pf-act) .commbox {padding-left:42px;} .hdprofile .pf-comments .commbox {margin-left:10px; margin-right:10px;} .hdprofile :is(.pf-comments, .pf-act) .commbox .commboxprofile {width:32px !important; height:32px !important; line-height:32px !important; font-size:14px !important;} .ep-toast {bottom:12px; width:calc(100vw - 24px); max-width:none;} } /* ========================================================================== Settings, notices, lists and Manage pages, 2026-10 (markup: include/functions-settings-ui.php, data/profile.php frames, data/profile/my/*.php, data/profile/playlist.php and collection.php, data/profile/include/list-dialog.php). Same tokens and breakpoints as the profile above (690 px phones). Layout is final from the server's HTML and this CSS: js/settings.js and js/lists.js only add behaviour; the Save bar of the instant-save forms shows from CSS alone (:default) so those forms work without JavaScript. ========================================================================== */ .hdprofile [hidden] {display:none !important;} .hdprofile .pf-muted {color:var(--pf-muted);} .hdprofile .pf-mono {font-family:Consolas, Menlo, monospace; letter-spacing:.02em;} /* narrow phones: the five Library shortcuts' labels one size down, so the common words fit their column */ @media screen and (max-width:360px) { .hdprofile .pf-lib-q {font-size:11px; line-height:13px;} } /* ---------- compact owner strip (settings, Manage, a list, the thumbnail picker) ---------- */ .pf-strip {display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin:14px 0 0; padding:0 0 12px; border-bottom:1px solid var(--pf-line); color:var(--pf-muted); font-size:12.5px;} .pf-strip-who {display:inline-flex; align-items:center; gap:10px; min-width:0; color:var(--pf-ink); text-decoration:none;} .hdprofile .pf-strip-av {flex:none; width:32px; height:32px; border-radius:50%; object-fit:cover; font-size:14px;} .pf-strip-name {display:flex; flex-direction:column; min-width:0; line-height:16px;} .pf-strip-name b {color:var(--pf-ink); font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .pf-strip-name small {color:var(--pf-muted); font-size:11.5px;} .pf-strip-who:hover b {color:var(--pf-link);} .pf-strip-crumbs {display:inline-flex; align-items:center; gap:8px; min-width:0;} .pf-strip-crumbs a {color:var(--pf-ink-2); font-weight:bold; text-decoration:none;} .pf-strip-crumbs a:hover {color:var(--pf-link);} .hdprofile .pf-strip-act {margin-left:auto;} .pf-strip a:focus-visible {outline:2px solid var(--pf-focus); outline-offset:2px;} /* ---------- settings frame: section list beside the open section ---------- */ .pf-set {display:grid; grid-template-columns:220px minmax(0,1fr); gap:0 32px; align-items:start; margin:18px 0 0;} .pf-set-nav {position:sticky; top:12px; display:flex; flex-direction:column; gap:2px;} .hdprofile .pf-set-title {margin:0 0 8px; padding:0 12px; color:var(--pf-ink); font-size:20px; line-height:26px; font-weight:bold; text-transform:none; background:none;} .pf-set-nav a {display:flex; align-items:center; gap:10px; min-height:38px; padding:0 12px; border-left:3px solid transparent; border-radius:0 6px 6px 0; color:var(--pf-ink-2); font-size:13px; font-weight:bold; text-decoration:none;} .pf-set-nav a:hover {background:var(--pf-hover); color:var(--pf-link);} .pf-set-nav a[aria-current="page"] {border-left-color:var(--pf-brand-line); background:var(--pf-surface-2); color:var(--pf-ink);} .pf-set-nav a:focus-visible {outline:2px solid var(--pf-focus); outline-offset:-2px;} .pf-set-nav .pf-ico {color:var(--pf-muted);} .pf-set-nav a[aria-current="page"] .pf-ico {color:var(--pf-link);} .pf-set-label {flex:1 1 auto; min-width:0;} .pf-set-badge {flex:none; min-width:18px; padding:0 5px; border-radius:9px; background:var(--pf-accent); color:#fff; font-size:11px; line-height:18px; text-align:center;} .pf-set-dot {flex:none; width:8px; height:8px; border-radius:50%; background:var(--pf-link);} .pf-set-main {min-width:0; max-width:760px;} .pf-set-back {display:none;} .pf-set-head {margin:0 0 14px;} .hdprofile .pf-set-h {margin:0; padding:0; color:var(--pf-ink); font-size:22px; line-height:28px; font-weight:bold; text-transform:none; letter-spacing:0; background:none;} .pf-set-head p {margin:4px 0 0; color:var(--pf-muted); font-size:13px; line-height:19px;} .pf-page-head {margin-top:18px;} .pf-set-foot {display:flex; align-items:flex-start; gap:6px; margin:4px 0 12px;} .pf-set-foot .pf-ico {margin-top:2px; flex:none;} .pf-set-value {display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0 0 6px; color:var(--pf-ink); font-size:14px;} /* ---------- cards and fields ---------- */ .pf-card {margin:0 0 14px; padding:16px 18px; border:1px solid var(--pf-line); border-radius:8px; background:var(--pf-surface); color:var(--pf-ink-2);} .hdprofile .pf-card-h {margin:0; padding:0; color:var(--pf-ink); font-size:15px; line-height:21px; font-weight:bold; text-transform:none; background:none;} .pf-card-sub {margin:2px 0 12px; color:var(--pf-muted); font-size:12.5px; line-height:18px;} .hdprofile .pf-card-h + .pf-fields, .hdprofile .pf-card-h + .pf-rows, .hdprofile .pf-card-h + .pf-set-value, .hdprofile .pf-card-h + details, .hdprofile .pf-card-h + .pf-dl {margin-top:12px;} .pf-card-foot {margin:10px 0 0;} .pf-card-list {padding:4px 18px;} .pf-fields {display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 16px;} .pf-field {min-width:0; margin:0; padding:0; border:0;} .pf-field.pf-wide, .pf-fieldset.pf-wide {grid-column:1 / -1;} .pf-field-top {display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:0 0 5px;} .pf-field label, .pf-fieldset legend {color:var(--pf-ink); font-size:12.5px; font-weight:bold;} .pf-fieldset legend {padding:0; margin:0 0 5px;} .pf-opt {color:var(--pf-faint); font-weight:normal;} .hdprofile .pf-input, .hdprofile .pf-select, .hdprofile .pf-textarea {display:block; width:100%; box-sizing:border-box; min-height:36px; margin:0; padding:7px 10px; border:1px solid var(--pf-line-2); border-radius:6px; background:var(--pf-surface-2); color:var(--pf-ink); font:13px/20px Arial, Helvetica, sans-serif;} .hdprofile .pf-textarea {resize:vertical; min-height:72px;} .hdprofile .pf-select {appearance:auto;} .hdprofile .pf-input:focus, .hdprofile .pf-select:focus, .hdprofile .pf-textarea:focus {outline:2px solid var(--pf-focus); outline-offset:0; border-color:transparent;} .hdprofile .pf-input[readonly] {border-style:dashed; color:var(--pf-muted);} .hdprofile .has-error .pf-input, .hdprofile .has-error .pf-select, .hdprofile .has-error .pf-textarea, .hdprofile [aria-invalid="true"] {border-color:#d85c5c;} .pf-help {margin:5px 0 0; color:var(--pf-muted); font-size:12px; line-height:17px;} .pf-error {display:flex; align-items:flex-start; gap:6px; margin:6px 0 0; color:#ff8a80; font-size:12.5px; line-height:17px;} .epwhite .pf-error {color:#b3261e;} .pf-error .pf-ico {margin-top:1px;} .pf-counter {flex:none; color:var(--pf-faint); font-size:11.5px; font-variant-numeric:tabular-nums;} .pf-counter.is-over {color:#ff8a80; font-weight:bold;} .pf-date {display:grid; grid-template-columns:76px minmax(0,1fr) 92px; gap:8px;} .pf-pw {position:relative;} .hdprofile .pf-pw .pf-input {padding-right:42px;} .pf-pw-toggle {position:absolute; top:0; right:0; display:flex; align-items:center; justify-content:center; width:40px; height:100%; margin:0; padding:0; border:0; background:none; color:var(--pf-muted); cursor:pointer;} .pf-pw-toggle:hover, .pf-pw-toggle[aria-pressed="true"] {color:var(--pf-ink);} .pf-pw-toggle:focus-visible {outline:2px solid var(--pf-focus); outline-offset:-4px; border-radius:6px;} .pf-meter-pw {display:flex; align-items:center; gap:4px; margin:8px 0 0;} .pf-meter-pw i {flex:0 0 36px; height:4px; border-radius:2px; background:var(--pf-line-2);} .pf-meter-pw[data-score="0"] i.on {background:#d85c5c;} .pf-meter-pw[data-score="1"] i.on {background:#d99312;} .pf-meter-pw[data-score="2"] i.on, .pf-meter-pw[data-score="3"] i.on {background:#2bb24c;} .pf-meter-pw span {margin-left:6px; color:var(--pf-muted); font-size:12px;} /* ---------- switches and choices ---------- */ .pf-rows {display:flex; flex-direction:column;} .pf-rowset {display:flex; align-items:center; justify-content:space-between; gap:12px 20px; padding:12px 0; border-top:1px solid var(--pf-line);} .pf-rows > .pf-rowset:first-child {border-top:0; padding-top:4px;} .pf-rowset-text {min-width:0;} .pf-rowset-label {display:block; color:var(--pf-ink); font-size:13px; font-weight:bold; line-height:19px;} .pf-rowset-text p {margin:2px 0 0; color:var(--pf-muted); font-size:12.5px; line-height:18px;} .pf-rowset-text p.pf-note {color:var(--pf-link);} .pf-switch {position:relative; flex:none; display:inline-block; width:44px; height:24px;} .pf-switch input[type="checkbox"] {position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1;} .pf-switch-ui {position:absolute; inset:0; border-radius:12px; background:var(--pf-line-2); transition:background .15s;} .pf-switch-ui::after {content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.35);} .pf-switch input:checked + .pf-switch-ui {background:var(--pf-accent);} .pf-switch input:checked + .pf-switch-ui::after {transform:translateX(20px);} .pf-switch input:focus-visible + .pf-switch-ui {outline:2px solid var(--pf-focus); outline-offset:2px;} @media (prefers-reduced-motion:reduce) { .pf-switch-ui, .pf-switch-ui::after {transition:none;} } .pf-choice {flex:none; display:inline-flex; border:1px solid var(--pf-line-2); border-radius:6px; overflow:hidden;} .pf-choice label {position:relative; display:flex; cursor:pointer;} .pf-choice label + label {border-left:1px solid var(--pf-line-2);} .pf-choice input {position:absolute; opacity:0; width:1px; height:1px; margin:0;} .pf-choice span {display:flex; align-items:center; min-height:32px; padding:0 12px; color:var(--pf-ink-2); font-size:12.5px; font-weight:bold; white-space:nowrap;} .pf-choice label:hover span {background:var(--pf-brand-bg); color:var(--pf-link);} .pf-choice input:checked + span {background:var(--pf-sel-bg); color:var(--pf-sel-ink);} .pf-choice input:focus-visible + span {outline:2px solid var(--pf-focus); outline-offset:-2px;} /* ---------- save bar ---------- */ .pf-savebar {display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:4px 0 14px;} .pf-saved, .pf-dirty {color:var(--pf-muted); font-size:12.5px;} .pf-dirty, .pf-discard {display:none !important;} /* text forms: js/settings.js marks a form with unsaved changes; the instant-save forms print their Save bar in a