Skip to content

Update/Fix +pstream.mov.css #2352

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sameerasw merged 2 commits into from
Feb 12, 2026
Merged

Update/Fix +pstream.mov.css #2352

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
be7b8b0
FIX: +pstream.mov.css
DRKCTRLDEV Jan 20, 2026
90a07e3
update: +pstream.mov.css
DRKCTRLDEV Jan 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
242 changes: 134 additions & 108 deletions websites/+pstream.mov.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/* pstream-transparency $ Apply transparent backgrounds to main containers. Recommended: enable the site's grey theme for best contrast. */
/* pstream-transparency $ Apply transparent backgrounds to the pages main containers */
html,
body,
#root,
.flex.min-h-screen.flex-col > .bg-background-main {
.flex.min-h-screen.flex-col>.bg-background-main {
background-color: transparent !important;
background: transparent !important;
background-image: none !important;
Expand Down Expand Up @@ -31,37 +31,36 @@ body,
}

/* pstream-no footer $ Removes the footer section from page layout */
.flex.min-h-screen.flex-col > footer {
.flex.min-h-screen.flex-col>footer {
display: none !important;
}

/* pstream-no ads $ Removes sponsored content and advertisements from the page */
.w-fit:not(relative my-4 w-fit max-w-[\25rem]\ w-full) {
/* pstream-no adverts $ Removes the advertisements popup at the top of the page */
.w-fit.max-w-\[32rem\].mx-auto.relative.group.pb-4 {
display: none !important;
}

/* pstream-no top shadow $ Removes the header shadow overlay element */
.flex.min-h-screen.flex-col > div > .top-content.fixed.z-\[20\] {
/* pstream-no top shadow $ Removes the shadow overlay at the top of the page */
.top-content.fixed.z-\[20\].pointer-events-none.left-0.right-0.top-0.min-h-\[150px\] {
display: none !important;
}

/* pstream-no lightbar $ Removes the decorative lightbar element from the UI */
.h-\[88px\],
.lightbar {
/* pstream-no top lightbar $ Removes the decorative "lightbar" element at the top of the page */
.absolute.inset-x-0.top-0.flex.h-\[88px\].items-center.justify-center {
display: none !important;
}

/* pstream-no flare light $ Removes decorative flare lighting effects for cleaner appearance */
/* pstream-no flare light $ Removes the decorative flare effects (mouse hover/trail effects) for cleaner appearance */
.flare-light {
display: none !important;
}

/* pstream-no backtotop $ Removes the back-to-top floating button */
div.fixed:nth-child(4) {
/* pstream-no backtotop btn $ Removes the "back to top" button at the bottom of the page */
.fixed.bottom-9.md\:bottom-4.transform.-translate-x-1\/2.z-50.left-12.md\:left-1\/2 {
display: none !important;
}

/* pstream-uniform cards $ Prevents card text wrapping for consistent single-line display */
/* pstream-uniform titles $ Prevents card text wrapping for consistent single-line display — disable when using minimal cards */
.relative.mt-4.group.cursor-pointer.user-select-none,
.line-clamp-3 {
display: block !important;
Expand All @@ -72,154 +71,181 @@ div.fixed:nth-child(4) {
user-select: none !important;
}

/* pstream-brighten text $ Increases visibility of secondary text elements for better readability */
:root {
--colors-buttons-secondaryText: 162 183 196 !important;
--colors-type-text: 144 144 144 !important;
--colors-type-secondary: 127 127 127 !important;
--colors-mediaCard-badgeText: 127 127 127 !important;
--colors-dropdown-text: 144 144 144 !important;
.relative.mt-4.group.cursor-pointer.user-select-none a.block>div {
height: 21.3rem !important;
}

@media (max-width: 640px) {
.relative.mt-4.group.cursor-pointer.user-select-none a.block>div {
height: 19.05rem !important;
}
}

/* pstream-brighten text $ Increases visibility of text elements and overrides theme text configuration */
* {
/* Text/icon - neutral (grey / white / black or close) */
--colors-type-text: 200 200 200 !important;
--colors-dropdown-text: 175 175 175 !important;
--colors-type-secondary: 170 170 170 !important;
--colors-type-dimmed: 160 160 160 !important;
--colors-search-placeholder: 164 164 164 !important;
--colors-search-icon: 164 164 164 !important;
--colors-settings-sidebar-type-inactive: 164 164 164 !important;
--colors-settings-sidebar-type-icon: 164 164 164 !important;
--colors-settings-sidebar-type-secondary: 164 164 164 !important;
--colors-mediaCard-badgeText: 164 164 164 !important;
}

/* pstream-bg opacity $ Sets background opacity levels for containers, buttons, and UI elements */
.bg-buttons-purple,
.bg-buttons-cancel,
.bg-buttons-toggle,
.bg-buttons-toggleDisabled,
.bg-search-hoverBackground,
.bg-video-context-buttonFocus:not(.bg-opacity-0),
.bg-dropdown-background {
--tw-bg-opacity: 0.6 !important;
.bg-background-secondary\/50 {
background-color: rgb(var(--colors-background-secondary) / .3) !important;
}

div.flex:nth-child(9) > div:nth-child(2) .bg-video-context-buttonFocus {
background: none !important;
.max-h-\[900px\] {
background-color: rgb(var(--colors-mediaCard-hoverBackground) / .8);
}

.bg-dropdown-altBackground,
.bg-search-background,
.bg-pill-background {
-webkit-backdrop-filter: blur(18px) !important;
backdrop-filter: blur(16px) !important;
--tw-bg-opacity: 0.7 !important;
border: none !important;
background: rgb(var(--colors-pill-activeBackground) / var(--tw-bg-opacity, 1)) !important;
.bg-black\/80 {
background-color: rgba(0, 0, 0, 0.3) !important;
}

.bg-background-main,
.bg-background-secondary,
.bg-mediaCard-hoverBackground,
button.relative:nth-child(1),
.hover\:bg-dropdown-hoverBackground,
.bg-settings-sidebar-activeLink,
.bg-largeCard-background,
.bg-settings-card-background,
.bg-settings-card-altBackground,
.bg-settings-sidebar-badge,
.bg-background-secondaryHover,
.bg-video-context-inputBg,
.text-search-text,
.bg-dropdown-contentBackground {
.bg-black {
--tw-bg-opacity: 0.2 !important;
border: none !important;
}

.relative.mt-4.group.cursor-pointer.user-select-none .bg-background-main,
div.mx-auto:nth-child(5) .bg-background-main {
--tw-bg-opacity: 0.05 !important;
.bg-background-main,
.bg-mediaCard-hoverBackground,
.bg-dropdown-contentBackground,
.bg-background-secondaryHover {
--tw-bg-opacity: 0.4 !important;
}

.relative.mt-4.group.cursor-pointer.user-select-none .bg-background-main:hover,
div.mx-auto:nth-child(5) .bg-background-main:hover {
--tw-bg-opacity: 0.1 !important;
.bg-mediaCard-badge,
.bg-dropdown-background,
.bg-video-context-inputBg,
.bg-buttons-toggleDisabled,
.bg-video-context-buttonFocus:not(.bg-opacity-0),
.bg-settings-sidebar-badge,
.bg-largeCard-background,
.bg-authentication-inputBg,
.dropdown-contentBackground {
--tw-bg-opacity: 0.6 !important;
}

/* pstream-general fixes $ Corrects padding, borders, and layout issues across various elements */
div.pt-4:nth-child(4),
div.pt-4:nth-child(2) {
padding-left: 0 !important;
border: none !important;
.border-dropdown-background {
--tw-border-opacity: 0.4 !important;
}

#headlessui-listbox-button-\:r58\:,
#headlessui-listbox-button-\:r2\: {
padding-top: 0.75rem !important;
padding-bottom: 0.75rem !important;
.border-settings-card-border,
.border-background-secondary {
--tw-border-opacity: 0 !important;
}

.bg-search-hoverBackground,
.bg-pill-background,
.bg-buttons-cancel,
.bg-settings-sidebar-activeLink,
.bg-buttons-purple,
.bg-dropdown-altBackground,
.bg-buttons-toggle,
.bg-buttons-danger {
--tw-bg-opacity: 0.7 !important;
}

/* pstream-unified header $ Creates a fixed unified header layout with search bar integration */
div.h-20:nth-child(2) > div:nth-child(1) > div:nth-child(1),
.w-\[600px\] > div:nth-child(1):not(.space-y-16) {
div.h-20:nth-child(2).relative.h-20.z-30,
.w-\[600px\]>div:nth-child(1):not(.space-y-16) {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
z-index: 25 !important;
padding: 1.25rem 11.5rem 0 20.25rem !important;
padding: 1.25rem 11.75rem 1.25rem 20.5rem !important;
margin: 0 !important;
}

.top-content.fixed.pointer-events-none .relative.pointer-events-auto .w-\[1\.5rem\] {
height: 1.8rem !important;
width: 1.8rem !important;
transform: translateX(-6px) !important;
body:not( :has(.top-content.fixed.pointer-events-none .relative.pointer-events-auto .w-\[1\.5rem\])) div.h-20:nth-child(2).relative.h-20.z-30,
body:not( :has(.top-content.fixed.pointer-events-none .relative.pointer-events-auto .w-\[1\.5rem\])) .w-\[600px\]>div:nth-child(1):not(.space-y-16) {
padding: 1.25rem 7.5rem 1.25rem 20.5rem !important;
}

div.h-20:nth-child(2),
.mb-16,
div.h-20:nth-child(2) > div:nth-child(1) {
margin: 0 !important;
height: auto !important;
div.h-20:nth-child(2).relative.h-20.z-30>div,
div.h-20:nth-child(2).relative.h-20.z-30>div>div {
position: relative !important;
min-height: unset !important;
padding: 0 !important;
margin: 0 !important;
transform: unset !important;
}

.bg-search-background,
.hover\:flare-enabled > div:nth-child(1),
.hover\:flare-enabled > div:nth-child(1) > div:nth-child(1) {
border-radius: 20px !important;
}

.top-content .bg-pill-background,
.hover\:flare-enabled input.w-full {
height: 40px !important;
.bg-search-background {
border-radius: 1.25rem !important;
}

.hover\:flare-enabled input.w-full {
padding: 0 2.5rem !important;
.bg-search-background input.w-full {
padding: 1rem 2.5rem !important;
height: 2.5rem !important;
}

.bg-pill-background {
transform: unset !important;
.bg-search-background .flare-light,
a.gap-3:nth-child(1),
hr.border-0:nth-child(2),
div.my-4:nth-child(9),
hr.border-0:nth-child(8) {
display: none !important;
}

.bg-search-background:hover,
.top-content .bg-pill-background:hover {
--tw-bg-opacity: 0.6 !important;
--tw-bg-opacity: 0.7 !important;
background: rgb(var(--colors-pill-backgroundHover) / var(--tw-bg-opacity, 1)) !important;
}

.hover\:flare-enabled .cursor-pointer.absolute {
.bg-search-background,
.top-content .bg-pill-background,
.bg-dropdown-altBackground {
--tw-bg-opacity: 0.6 !important;
background: rgb(var(--colors-pill-background) / var(--tw-bg-opacity, 1)) !important;
backdrop-filter: blur(8px) !important;
}

.top-content .bg-pill-background {
border: none !important;
height: 2.5rem !important;
transform: unset !important;
}

.top-content.fixed.pointer-events-none .relative.pointer-events-auto .w-\[1\.5rem\] {
height: 1.7rem !important;
width: 1.7rem !important;
transform: translateX(-5px) !important;
}

.top-content.fixed.pointer-events-none .relative.pointer-events-auto .w-\[1\.5rem\] span svg {
height: 1.25rem !important;
width: 1.25rem !important;
}

.bg-search-background .cursor-pointer.absolute {
right: 0 !important;
width: 40px !important;
height: 40px !important;
display: flex !important;
height: 2.5rem !important;
aspect-ratio: 1 / 1 !important;
justify-content: center !important;
border-radius: 20px !important;
border-radius: 50% !important;
color: rgb(var(--colors-type-text)) !important;
transform: unset !important;
margin: unset !important;
}

.hover\:flare-enabled .cursor-pointer.absolute:hover {
--tw-bg-opacity: 0.15 !important;
background: rgb(var(--colors-pill-backgroundHover) / var(--tw-bg-opacity, 1)) !important;
}

.hover\:flare-enabled > .flex-1 > div.bottom-0:nth-child(1) {
.bg-search-background .bottom-0:first-child {
left: 0 !important;
}

@media (max-width: 768px) {
div.h-20:nth-child(2) > div:nth-child(1) > div:nth-child(1),
.w-\[600px\] > div:nth-child(1):not(.space-y-16) {
@media (max-width: 1024px) {

div.h-20:nth-child(2).relative.h-20.z-30,
.w-\[600px\]>div:nth-child(1):not(.space-y-16) {
padding: 4.25rem 1.75rem 0 1.75rem !important;
}
}