mirror of
https://github.com/zen-browser/theme-store.git
synced 2025-07-08 01:10:01 +02:00
Merge pull request #1491 from RobotoSkunk/main
This commit is contained in:
commit
b1901cc958
4 changed files with 125 additions and 95 deletions
|
@ -1,95 +1,105 @@
|
|||
|
||||
:root {
|
||||
--better-findbar-transform-translateY: 150px;
|
||||
--better-findbar-transform-translateX: -50%;
|
||||
--better-findbar-position-top: auto;
|
||||
--better-findbar-position-bottom: 15px;
|
||||
--better-findbar-position-left: 50%;
|
||||
--better-findbar-position-right: auto;
|
||||
}
|
||||
.browserContainer {
|
||||
overflow: clip
|
||||
}
|
||||
|
||||
findbar {
|
||||
display: flex !important;
|
||||
display: flex !important;
|
||||
|
||||
border-radius: var(--zen-border-radius) !important;
|
||||
margin: 0px !important;
|
||||
border-radius: var(--zen-border-radius) !important;
|
||||
margin: 0px !important;
|
||||
|
||||
width: 90% !important;
|
||||
max-width: 800px;
|
||||
width: 90% !important;
|
||||
max-width: 800px;
|
||||
|
||||
height: auto !important;
|
||||
height: auto !important;
|
||||
|
||||
position: absolute !important;
|
||||
top: 15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
position: absolute !important;
|
||||
top: var(--better-findbar-position-top);
|
||||
bottom: var(--better-findbar-position-bottom);
|
||||
left: var(--better-findbar-position-left);
|
||||
right: var(--better-findbar-position-right);
|
||||
transform: translateX(var(--better-findbar-transform-translateX)) translateY(0);
|
||||
|
||||
overflow: unset !important;
|
||||
box-shadow: var(--box-shadow-10);
|
||||
overflow: unset !important;
|
||||
box-shadow: var(--box-shadow-10);
|
||||
|
||||
background: var(--zen-colors-tertiary) !important;
|
||||
border: 1px solid var(--zen-colors-border) !important;
|
||||
background: var(--zen-colors-tertiary) !important;
|
||||
border: 1px solid var(--zen-colors-border) !important;
|
||||
|
||||
transition:
|
||||
top 0.35s ease,
|
||||
bottom 0.35s ease !important;
|
||||
transition: transform 0.35s ease !important;
|
||||
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
opacity: 1 !important;
|
||||
|
||||
& .findbar-container {
|
||||
flex-wrap: wrap;
|
||||
overflow-x: auto !important;
|
||||
height: auto !important;
|
||||
& .findbar-container {
|
||||
flex-wrap: wrap;
|
||||
overflow-x: auto !important;
|
||||
height: auto !important;
|
||||
|
||||
row-gap: 10px;
|
||||
row-gap: 10px;
|
||||
|
||||
& > :first-child {
|
||||
width: 100% !important;
|
||||
}
|
||||
& > :first-child {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
& .findbar-textbox {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
& .findbar-textbox {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&[hidden="true"] {
|
||||
top: -150px;
|
||||
}
|
||||
&[hidden="true"] {
|
||||
transform: translateX(var(--better-findbar-transform-translateX)) translateY(var(--better-findbar-transform-translateY));
|
||||
}
|
||||
|
||||
@starting-style {
|
||||
top: -150px;
|
||||
}
|
||||
@starting-style {
|
||||
transform: translateX(var(--better-findbar-transform-translateX)) translateY(var(--better-findbar-transform-translateY));
|
||||
}
|
||||
}
|
||||
|
||||
/* Horizontal Position */
|
||||
body:has(
|
||||
#theme-Better-Find-Bar[theme-better_find_bar-horizontal_position="left"]
|
||||
) {
|
||||
findbar {
|
||||
left: 15px;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
#theme-Better-Find-Bar[theme-better_find_bar-horizontal_position="left"]
|
||||
) {
|
||||
--better-findbar-transform-translateX: 0%;
|
||||
--better-findbar-position-left: 15px;
|
||||
--better-findbar-position-right: auto;
|
||||
}
|
||||
|
||||
body:has(
|
||||
#theme-Better-Find-Bar[theme-better_find_bar-horizontal_position="right"]
|
||||
) {
|
||||
findbar {
|
||||
left: unset !important;
|
||||
right: 15px;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
#theme-Better-Find-Bar[theme-better_find_bar-horizontal_position="right"]
|
||||
) {
|
||||
--better-findbar-transform-translateX: 0%;
|
||||
--better-findbar-position-left: auto;
|
||||
--better-findbar-position-right: 15px;
|
||||
}
|
||||
|
||||
body:has(
|
||||
#theme-Better-Find-Bar[theme-better_find_bar-vertical_position="top"]
|
||||
) {
|
||||
--better-findbar-transform-translateY: -150px;
|
||||
--better-findbar-position-bottom: auto;
|
||||
--better-findbar-position-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
/* Background blur */
|
||||
@media (-moz-bool-pref: "theme.better_find_bar.transparent_background") {
|
||||
findbar,
|
||||
findbar .findbar-textbox:not([status="notfound"]) {
|
||||
backdrop-filter: blur(15px);
|
||||
findbar, findbar .findbar-textbox:not([status="notfound"]) {
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
background: color-mix(
|
||||
in hsl,
|
||||
var(--zen-colors-tertiary),
|
||||
transparent 30%
|
||||
) !important;
|
||||
}
|
||||
background: color-mix(in hsl, var(--zen-colors-tertiary), transparent 30%) !important;
|
||||
}
|
||||
|
||||
findbar .findbar-textbox:not([status="notfound"]) {
|
||||
background: color-mix(
|
||||
in hsl,
|
||||
var(--zen-colors-tertiary),
|
||||
transparent 10%
|
||||
) !important;
|
||||
}
|
||||
findbar .findbar-textbox:not([status="notfound"]) {
|
||||
background: color-mix(in hsl, var(--zen-colors-tertiary), transparent 10%) !important;
|
||||
}
|
||||
}
|
|
@ -1,27 +1,47 @@
|
|||
[
|
||||
{
|
||||
"property": "theme.better_find_bar.transparent_background",
|
||||
"label": "Transparent background",
|
||||
"type": "checkbox"
|
||||
},
|
||||
{
|
||||
"property": "theme.better_find_bar.horizontal_position",
|
||||
"label": "Horizontal position",
|
||||
"type": "dropdown",
|
||||
"disabledOn": [],
|
||||
"options": [
|
||||
{
|
||||
"label": "Left",
|
||||
"value": "left"
|
||||
},
|
||||
{
|
||||
"label": "Center",
|
||||
"value": "default"
|
||||
},
|
||||
{
|
||||
"label": "Right",
|
||||
"value": "right"
|
||||
}
|
||||
]
|
||||
}
|
||||
{
|
||||
"property": "theme.better_find_bar.transparent_background",
|
||||
"label": "Transparent background",
|
||||
"type": "checkbox"
|
||||
},
|
||||
{
|
||||
"property": "theme.better_find_bar.horizontal_position",
|
||||
"label": "Horizontal position",
|
||||
"type": "dropdown",
|
||||
"disabledOn": [],
|
||||
"placeholder": "Select horizontal position",
|
||||
"defaultValue": "default",
|
||||
"options": [
|
||||
{
|
||||
"label": "Left",
|
||||
"value": "left"
|
||||
},
|
||||
{
|
||||
"label": "Center",
|
||||
"value": "default"
|
||||
},
|
||||
{
|
||||
"label": "Right",
|
||||
"value": "right"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"property": "theme.better_find_bar.vertical_position",
|
||||
"label": "Vertical position",
|
||||
"type": "dropdown",
|
||||
"disabledOn": [],
|
||||
"placeholder": "Select vertical position",
|
||||
"defaultValue": "default",
|
||||
"options": [
|
||||
{
|
||||
"label": "Top",
|
||||
"value": "top"
|
||||
},
|
||||
{
|
||||
"label": "Bottom",
|
||||
"value": "default"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
|
@ -1,3 +1,3 @@
|
|||
# Better Find Bar
|
||||
|
||||
Improves the find bar by matching the browser theme, making it floating, more responsive, and moving it to the top of the page.
|
||||
Improves the find bar by matching the browser theme, making it floating and more responsive.
|
||||
|
|
|
@ -8,8 +8,8 @@
|
|||
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/a6335949-4465-4b71-926c-4a52d34bc9c0/image.png",
|
||||
"author": "RobotoSkunk",
|
||||
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/a6335949-4465-4b71-926c-4a52d34bc9c0/preferences.json",
|
||||
"version": "1.1.2",
|
||||
"version": "1.2.0",
|
||||
"tags": [],
|
||||
"createdAt": "2024-11-24",
|
||||
"updatedAt": "2025-01-31"
|
||||
"updatedAt": "2025-05-09"
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue