effection-www/main.css at main · thefrontside/effection-www · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
@import "tailwindcss";
@plugin "@tailwindcss/typography";

/* Tailwind-based Pagefind UI styling */
@layer components {
  .pagefind-ui {
    @apply w-full text-gray-900 dark:text-gray-200;
  }

  .pagefind-ui__drawer {
    @apply flex flex-row;
  }

  .pagefind-ui__form {
    @apply relative;
  }

  .pagefind-ui__form:before {
    @apply absolute left-4 top-1/2 w-6 h-6 bg-current;
    content: "";
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0'%3E%3C/path%3E%3Cpath d='M21 21l-6 -6'%3E%3C/path%3E%3C/svg%3E");
    width: 18px;
    height: 18px;
    top: 23px;
    left: 20px;
    mask-repeat: no-repeat;
    mask-size: 100%;
    z-index: 9;
    pointer-events: none;
    display: block;
    opacity: 0.7;
  }

  .pagefind-ui__search-input {
    @apply w-full h-16 px-14 py-4 bg-white dark:bg-gray-800 border-2
      border-gray-200 dark:border-gray-600 rounded-lg text-xl font-bold
      placeholder:opacity-20 focus:outline-none focus:border-sky-500
      focus:ring-2 focus:ring-sky-500;
  }

  .pagefind-ui__search-clear {
    @apply absolute top-1 right-1 h-14 px-4 py-1 text-gray-900
      dark:text-gray-200 text-sm cursor-pointer bg-white dark:bg-gray-800
      rounded-lg;
  }

  .pagefind-ui__results {
    @apply pl-0 px-0! my-0;
    padding-inline-start: 0 !important;
  }

  .pagefind-ui__results-area {
    @apply flex-1 mt-5 pl-5;
  }

  .pagefind-ui__message {
    @apply flex items-center h-6 py-2 text-base font-bold mt-0;
  }

  .pagefind-ui__result {
    @apply list-none flex items-start gap-10 border-t-1 border-gray-200
      dark:border-gray-600;
  }

  .pagefind-ui__result:last-of-type {
    @apply border-b-1 border-gray-200 dark:border-gray-600;
  }

  .pagefind-ui__result-inner {
    @apply flex-1 flex flex-col items-start mt-2 py-2;
  }

  .pagefind-ui__result-title {
    @apply font-bold text-xl my-0!;
  }

  .pagefind-ui__result-nested {
    @apply pl-5 mb-2;
  }

  .pagefind-ui__result-nested:nth-of-type(1) {
    @apply mt-2;
  }

  .pagefind-ui__result-nested .pagefind-ui__result-title {
    @apply text-base;
  }

  .pagefind-ui__result-link {
    @apply relative text-gray-900 dark:text-gray-200 no-underline!
      hover:underline!;
  }

  .pagefind-ui__result-nested .pagefind-ui__result-link:before {
    content: "\2937  ";
    position: absolute;
    top: -2;
    right: calc(100% + 0.1em);
  }

  .pagefind-ui__result-excerpt {
    @apply font-normal text-sm mt-1! mb-0!;
  }

  .pagefind-ui__result-tags {
    @apply list-none p-0 flex gap-5 flex-wrap mt-5;
  }

  .pagefind-ui__result-tag {
    @apply px-2 py-1 text-sm rounded bg-gray-200 dark:bg-gray-600;
  }

  .pagefind-ui__filter-panel {
    @apply flex-1 flex flex-col mt-5 max-w-60;
  }

  .pagefind-ui__filter-panel-label {
    @apply hidden;
  }

  .pagefind-ui__filter-block {
    @apply block border-b-1 border-gray-200 dark:border-gray-600 py-5;
  }

  .pagefind-ui__filter-name {
    @apply text-base relative flex items-center list-none font-bold
      cursor-pointer h-6;
  }

  .pagefind-ui__filter-group {
    @apply flex flex-col gap-5 pt-8;
  }

  .pagefind-ui__filter-group-label {
    @apply hidden;
  }

  .pagefind-ui__filter-value {
    @apply relative flex items-center gap-2;
  }

  .pagefind-ui__filter-checkbox {
    @apply m-0 w-4 h-4 border border-gray-200 dark:border-gray-600
      appearance-none rounded bg-white dark:bg-gray-800 cursor-pointer
      checked:bg-sky-500 checked:border-sky-500;
  }

  .pagefind-ui__filter-label {
    @apply cursor-pointer text-base font-normal;
  }

  .pagefind-ui__button {
    @apply mt-10 w-full h-12 px-3 text-base text-gray-900 dark:text-sky-500
      bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-600
      rounded font-bold cursor-pointer text-center hover:border-sky-500
      hover:text-sky-500;
  }

  /* Loading skeleton styles */
  .pagefind-ui__loading {
    @apply text-gray-900 dark:text-gray-200 bg-gray-900 dark:bg-gray-200 rounded
      opacity-10 pointer-events-none;
  }
}