CanadianBacon/CanvasRefined
1
0
Fork 0
mirror of https://github.com/GuySandler/CanvasRefined.git synced 2026-06-21 01:49:54 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

modules with custom bg

Browse Source
This commit is contained in:
Guy Sandler 2026-05-21 13:43:48 -07:00
parent 25d8e738b9
commit cbdda56e4b
1 changed files with 55 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
js/content.js
View File

@ -479,27 +479,32 @@ function applyCustomBackground() {
#wrapper { #wrapper {
background-image: url('${options.customBackgroundLink}') !important; background-image: url('${options.customBackgroundLink}') !important;
background-size: cover !important; background-size: cover !important;
background-attachment: fixed !important; background-attachment: fixed !important;
} }
.ic-Dashboard-header__layout { .ic-Dashboard-header__layout {
background: none !important; background: none !important;
backdrop-filter: blur(10px) !important; /* backdrop-filter: blur(10px) !important; */
border-radius: 5px; border-radius: 5px;
} }
#right-side-wrapper { #right-side-wrapper {
background: color-mix(in srgb, var(--bcbackground-0) 45%, transparent) !important; background: color-mix(in srgb, var(--bcbackground-0) 45%, transparent) !important;
backdrop-filter: blur(10px) !important; /* backdrop-filter: blur(10px) !important; */
border-radius: 5px; border-radius: 5px;
} }
.header-bar, .header-bar,
.item-group-condensed, .item-group-condensed,
.item-group-container { .item-group-container {
background: transparent !important; background: transparent !important;
background-color: transparent !important; /* backdrop-filter: blur(14px) saturate(120%) !important;
backdrop-filter: blur(14px) saturate(120%) !important; -webkit-backdrop-filter: blur(14px) saturate(120%) !important; */
-webkit-backdrop-filter: blur(14px) saturate(120%) !important;
border-radius: 12px !important; border-radius: 12px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important; border: 1px solid color-mix(in srgb, var(--bcborders) 75%, transparent) !important;
/* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important; */
}
#context_modules_sortable_container {
border: none !important;
background: none !important;
/* backdrop-filter: blur(0) !important; */
} }
.item-group-condensed .ig-header, .item-group-condensed .ig-header,
.item-group-condensed .ig-row, .item-group-condensed .ig-row,
@ -508,38 +513,64 @@ function applyCustomBackground() {
.item-group-condensed .header, .item-group-condensed .header,
.item-group-container .header { .item-group-container .header {
background: transparent !important; background: transparent !important;
background-color: transparent !important; }
backdrop-filter: blur(14px) saturate(120%) !important; .item-group-condensed .ig-header.header,
-webkit-backdrop-filter: blur(14px) saturate(120%) !important; .item-group-container .ig-header.header {
background: none !important;
border: none !important;
border-radius: 0 !important;
}
.item-group-condensed .ig-row.ig-published.no-estimated-duration {
background: color-mix(in srgb, var(--bcbackground-0) 45%, transparent) !important;
color: var(--bctext-1) !important;
border: 1px solid color-mix(in srgb, var(--bcborders) 60%, transparent) !important;
border-radius: 0 !important;
padding: 10px 12px !important;
} }
.item-group-condensed .context_module_item, .item-group-condensed .context_module_item,
.item-group-container .context_module_item { .item-group-container .context_module_item {
background: transparent !important; background: transparent !important;
background-color: transparent !important; /* backdrop-filter: blur(10px) saturate(115%) !important;
backdrop-filter: blur(10px) saturate(115%) !important; -webkit-backdrop-filter: blur(10px) saturate(115%) !important; */
-webkit-backdrop-filter: blur(10px) saturate(115%) !important;
} }
.item-group-condensed .context_module_item:hover, .item-group-condensed .context_module_item:hover,
.item-group-container .context_module_item:hover, .item-group-container .context_module_item:hover,
.item-group-condensed .context_module_item.context_module_item_hover, .item-group-condensed .context_module_item.context_module_item_hover,
.item-group-container .context_module_item.context_module_item_hover { .item-group-container .context_module_item.context_module_item_hover {
background: transparent !important; background: transparent !important;
background-color: transparent !important;
backdrop-filter: blur(16px) saturate(130%) !important;
-webkit-backdrop-filter: blur(16px) saturate(130%) !important;
border-radius: 10px !important; border-radius: 10px !important;
} }
.item-group-container { .item-group-container {
background: transparent !important; background: transparent !important;
background-color: transparent !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-radius: 12px !important; border-radius: 12px !important;
border: 1px solid color-mix(in srgb, var(--bcborders) 75%, transparent) !important; border: 1px solid color-mix(in srgb, var(--bcborders) 75%, transparent) !important;
} }
.bettercanvas-gpa-card {background: var(--bcbackground-0) !important;} .ig-header {
.bettercanvas-gpa {background: var(--bcbackground-0) !important;} /* backdrop-filter: blur(10px) !important; */
.ic-DashboardCard {background: var(--bcbackground-0) !important;}`; // todo: liquid glass? }
.item-group-condensed.context_module,
.item-group-condensed.context_module_item,
.item-group-condensed[class~="context_module"] {
margin-bottom: 10px !important;
padding-bottom: 0 !important;
}
/* Apply backdrop blur only to module panels, not to all headers */
.item-group-condensed.context_module,
.item-group-condensed.context_module_item,
.item-group-condensed.context_module:hover,
.item-group-condensed.context_module_item:hover,
.item-group-condensed.context_module.context_module_item_hover,
.item-group-condensed.context_module_item.context_module_item_hover {
// background: color-mix(in srgb, var(--bcbackground-0) 45%, transparent) !important;
backdrop-filter: blur(5px) !important;
-webkit-backdrop-filter: blur(5px) !important;
}
.bettercanvas-gpa-card,
.bettercanvas-gpa,
.ic-DashboardCard {
background: var(--bcbackground-0) !important;
}`; // TODO: liquid glass?
} }
document.documentElement.appendChild(style); document.documentElement.appendChild(style);