summaryrefslogtreecommitdiff
path: root/pagefind/pagefind-modular-ui.css
diff options
context:
space:
mode:
authorjaseg <git@jaseg.de>2025-06-30 15:39:53 +0200
committerjaseg <git@jaseg.de>2025-06-30 15:39:53 +0200
commit0d45de162ce253f7c18c4c60d013ab502a3dbb1f (patch)
tree221a69f75047fba66c49d0cfd8b1455a488f6b2d /pagefind/pagefind-modular-ui.css
parent752f296a77b29fc2e2284482835243bb6c12423f (diff)
parent754e3c8c02c249dfb328d3f37ed96e6aa6b8d620 (diff)
downloadblog-0d45de162ce253f7c18c4c60d013ab502a3dbb1f.tar.gz
blog-0d45de162ce253f7c18c4c60d013ab502a3dbb1f.tar.bz2
blog-0d45de162ce253f7c18c4c60d013ab502a3dbb1f.zip
deploy.py auto-commit
Diffstat (limited to 'pagefind/pagefind-modular-ui.css')
-rw-r--r--pagefind/pagefind-modular-ui.css214
1 files changed, 214 insertions, 0 deletions
diff --git a/pagefind/pagefind-modular-ui.css b/pagefind/pagefind-modular-ui.css
new file mode 100644
index 0000000..9c6793e
--- /dev/null
+++ b/pagefind/pagefind-modular-ui.css
@@ -0,0 +1,214 @@
+:root {
+ --pagefind-ui-scale: 0.8;
+ --pagefind-ui-primary: #034AD8;
+ --pagefind-ui-fade: #707070;
+ --pagefind-ui-text: #393939;
+ --pagefind-ui-background: #ffffff;
+ --pagefind-ui-border: #eeeeee;
+ --pagefind-ui-tag: #eeeeee;
+ --pagefind-ui-border-width: 2px;
+ --pagefind-ui-border-radius: 8px;
+ --pagefind-ui-image-border-radius: 8px;
+ --pagefind-ui-image-box-ratio: 3 / 2;
+ --pagefind-ui-font: system, -apple-system, ".SFNSText-Regular",
+ "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue",
+ "Lucida Grande", sans-serif;
+}
+
+[data-pfmod-hidden] {
+ display: none !important;
+}
+
+[data-pfmod-suppressed] {
+ opacity: 0 !important;
+ pointer-events: none !important;
+}
+
+[data-pfmod-sr-hidden] {
+ -webkit-clip: rect(0 0 0 0) !important;
+ clip: rect(0 0 0 0) !important;
+ -webkit-clip-path: inset(100%) !important;
+ clip-path: inset(100%) !important;
+ height: 1px !important;
+ overflow: hidden !important;
+ overflow: clip !important;
+ position: absolute !important;
+ white-space: nowrap !important;
+ width: 1px !important;
+}
+
+[data-pfmod-loading] {
+ color: var(--pagefind-ui-text);
+ background-color: var(--pagefind-ui-text);
+ border-radius: var(--pagefind-ui-border-radius);
+ opacity: 0.1;
+ pointer-events: none;
+}
+
+/* Input */
+
+.pagefind-modular-input-wrapper {
+ position: relative;
+}
+
+.pagefind-modular-input-wrapper::before {
+ background-color: var(--pagefind-ui-text);
+ width: calc(18px * var(--pagefind-ui-scale));
+ height: calc(18px * var(--pagefind-ui-scale));
+ top: calc(23px * var(--pagefind-ui-scale));
+ left: calc(20px * var(--pagefind-ui-scale));
+ content: "";
+ position: absolute;
+ display: block;
+ opacity: 0.7;
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z' fill='%23000000'/%3E%3C/svg%3E%0A");
+ mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7549 11.255H11.9649L11.6849 10.985C12.6649 9.845 13.2549 8.365 13.2549 6.755C13.2549 3.165 10.3449 0.255005 6.75488 0.255005C3.16488 0.255005 0.254883 3.165 0.254883 6.755C0.254883 10.345 3.16488 13.255 6.75488 13.255C8.36488 13.255 9.84488 12.665 10.9849 11.685L11.2549 11.965V12.755L16.2549 17.745L17.7449 16.255L12.7549 11.255ZM6.75488 11.255C4.26488 11.255 2.25488 9.245 2.25488 6.755C2.25488 4.26501 4.26488 2.255 6.75488 2.255C9.24488 2.255 11.2549 4.26501 11.2549 6.755C11.2549 9.245 9.24488 11.255 6.75488 11.255Z' fill='%23000000'/%3E%3C/svg%3E%0A");
+ -webkit-mask-size: 100%;
+ mask-size: 100%;
+ z-index: 9;
+ pointer-events: none;
+}
+
+.pagefind-modular-input {
+ height: calc(64px * var(--pagefind-ui-scale));
+ padding: 0 calc(70px * var(--pagefind-ui-scale)) 0 calc(54px * var(--pagefind-ui-scale));
+ background-color: var(--pagefind-ui-background);
+ border: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border);
+ border-radius: var(--pagefind-ui-border-radius);
+ font-size: calc(21px * var(--pagefind-ui-scale));
+ position: relative;
+ appearance: none;
+ -webkit-appearance: none;
+ display: flex;
+ width: 100%;
+ box-sizing: border-box;
+ font-weight: 700;
+}
+
+.pagefind-modular-input::placeholder {
+ opacity: 0.2;
+}
+
+.pagefind-modular-input-clear {
+ position: absolute;
+ top: calc(2px * var(--pagefind-ui-scale));
+ right: calc(2px * var(--pagefind-ui-scale));
+ height: calc(60px * var(--pagefind-ui-scale));
+ border-radius: var(--pagefind-ui-border-radius);
+ padding: 0 calc(15px * var(--pagefind-ui-scale)) 0 calc(2px * var(--pagefind-ui-scale));
+ color: var(--pagefind-ui-text);
+ font-size: calc(14px * var(--pagefind-ui-scale));
+ cursor: pointer;
+ background-color: var(--pagefind-ui-background);
+ border: none;
+ appearance: none;
+}
+
+/* ResultList */
+
+.pagefind-modular-list-result {
+ list-style-type: none;
+ display: flex;
+ align-items: flex-start;
+ gap: min(calc(40px * var(--pagefind-ui-scale)), 3%);
+ padding: calc(30px * var(--pagefind-ui-scale)) 0 calc(40px * var(--pagefind-ui-scale));
+ border-top: solid var(--pagefind-ui-border-width) var(--pagefind-ui-border);
+}
+
+.pagefind-modular-list-result:last-of-type {
+ border-bottom: solid var(--pagefind-ui-border-width) var(--pagefind-ui-border);
+}
+
+.pagefind-modular-list-thumb {
+ width: min(30%,
+ calc((30% - (100px * var(--pagefind-ui-scale))) * 100000));
+ max-width: calc(120px * var(--pagefind-ui-scale));
+ margin-top: calc(10px * var(--pagefind-ui-scale));
+ aspect-ratio: var(--pagefind-ui-image-box-ratio);
+ position: relative;
+}
+
+.pagefind-modular-list-image {
+ display: block;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ font-size: 0;
+ width: auto;
+ height: auto;
+ max-width: 100%;
+ max-height: 100%;
+ border-radius: var(--pagefind-ui-image-border-radius);
+}
+
+.pagefind-modular-list-inner {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ margin-top: calc(10px * var(--pagefind-ui-scale));
+}
+
+.pagefind-modular-list-title {
+ display: inline-block;
+ font-weight: 700;
+ font-size: calc(21px * var(--pagefind-ui-scale));
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.pagefind-modular-list-link {
+ color: var(--pagefind-ui-text);
+ text-decoration: none;
+}
+
+.pagefind-modular-list-link:hover {
+ text-decoration: underline;
+}
+
+.pagefind-modular-list-excerpt {
+ display: inline-block;
+ font-weight: 400;
+ font-size: calc(16px * var(--pagefind-ui-scale));
+ margin-top: calc(4px * var(--pagefind-ui-scale));
+ margin-bottom: 0;
+ min-width: calc(250px * var(--pagefind-ui-scale));
+}
+
+/* FilterPills */
+
+.pagefind-modular-filter-pills-wrapper {
+ overflow-x: scroll;
+ padding: 15px 0;
+}
+
+.pagefind-modular-filter-pills {
+ display: flex;
+ gap: 6px;
+}
+
+.pagefind-modular-filter-pill {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: none;
+ appearance: none;
+ padding: 0 calc(24px * var(--pagefind-ui-scale));
+ background-color: var(--pagefind-ui-background);
+ color: var(--pagefind-ui-fade);
+ border: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border);
+ border-radius: calc(25px * var(--pagefind-ui-scale));
+ font-size: calc(18px * var(--pagefind-ui-scale));
+ height: calc(50px * var(--pagefind-ui-scale));
+ cursor: pointer;
+ white-space: nowrap;
+}
+
+.pagefind-modular-filter-pill:hover {
+ border-color: var(--pagefind-ui-primary);
+}
+
+.pagefind-modular-filter-pill[aria-pressed="true"] {
+ border-color: var(--pagefind-ui-primary);
+ color: var(--pagefind-ui-primary);
+} \ No newline at end of file