blob: 0a6842c0045c0a7e3926e2b677d27c0eb90a28a7 [file] [log] [blame]
Davit Tabidze3ec24cf2024-05-22 14:06:02 +04001@media screen and (min-width:801px) {
2 #main {
3 width: 600px;
4 }
5}
6
7article {
8 margin: 0.3em;
9 margin-bottom: 0.3em;
10 display: flex;
11 padding: 6px !important;
12 position: relative;
13 align-items: flex-start;
14}
15
16.icon {
17 margin-right: 10px;
18 flex-shrink: 0;
19}
20
21.app-details {
22 display: flex;
23 flex-direction: column;
24 flex-grow: 1;
25 position: relative;
26}
27
28.app-name-container {
29 display: flex;
30 align-items: center;
31 justify-content: space-between;
32}
33
34.app {
35 margin-bottom: 2px;
36 margin-top: 0px;
37 margin-left: 5px;
38}
39
40.description {
41 --pico-color: var(--pico-secondary);
42 font-size: medium;
43 margin-bottom: 3px;
44 margin-left: 5px;
45 text-decoration: none !important;
46}
47
48.app-link:hover .app {
49 text-decoration: underline;
50}
51
52.instance-count {
53 display: flex;
54 justify-content: center;
55 align-items: center;
56 width: 24px;
57 height: 24px;
58 border-radius: 50%;
59 background-color: white;
60 color: var(--pico-color);
61 font-size: 16px;
62 font-weight: bold;
63 border: 2px solid var(--pico-color);
64 position: absolute;
65 top: 14px;
66 right: 11px;
67 transform: translate(50%, -50%);
68}
69
70pre {
71 white-space: pre-wrap; /* Since CSS 2.1 */
72 white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
73 white-space: -pre-wrap; /* Opera 4-6 */
74 white-space: -o-pre-wrap; /* Opera 7 */
75 word-wrap: break-word; /* Internet Explorer 5.5+ */
76 background-color: transparent;
77}
78
79.hidden {
80 visibility: hidden;
81}
82
83.toast {
84 position: fixed;
85 z-index: 999;
86 bottom: 10px;
87}
88
89.app-link {
90 padding-top: 0px;
91 padding-bottom: 2px;
92 text-decoration: none;
93}
94
95nav li {
96 padding-top: 0;
97 padding-bottom: 0;
98}
99
100input[type="search"] {
101 margin-bottom: 0;
102}
103
104.page {
105 display: flex;
106 align-items: center;
107 flex-direction: column;
108}
109
110.search-bar {
111 max-width: 616px;
112 min-width: 500px;
113}
114
115.card-content {
116 width: 100%;
117}
118
119.app-card {
120 margin-bottom: 6px;
121}
122
123header {
124 height: 80px !important;
125 display: flex;
126 align-items: center;
127 justify-content: center;
128}
129
130header > h1 {
131 margin-bottom: 0px;
132}
133
134nav {
135 height: 100%;
136}
137
138#config-form label {
139 width: auto !important;
140}
141
142html {
143 overflow-x: hidden;
144 scroll-behavior: smooth;
145}
146
147body {
148 --pico-main-top-offset: 0rem;
149}
150
151body>header.is-fixed-above-lg {
152 z-index: 2;
153 position: sticky;
154 top: 0;
155 -webkit-backdrop-filter: blur(1rem);
156 backdrop-filter: blur(1rem);
157 background-color: var(--pico-header-background);
158 transition: border-top-color .4s ease-in-out,box-shadow .4s ease-in-out;
159}
160
161body>header.is-fixed-above-lg.is-fixed {
162 border-bottom-color: var(--pico-header-border-color);
163 box-shadow: var(--pico-card-box-shadow);
164}
165
166body>header {
167 z-index: 4;
168 position: relative;
169 padding: .5rem 0;
170 border-bottom: var(--pico-border-width) solid transparent;
171}
172
173body>main {
174 display: grid;
175 grid-template-rows: auto auto 1fr;
176 grid-template-columns: 11rem 1fr;
177 grid-template-areas: "menu content";
178 column-gap: 2rem;
179
180 margin-top: 1rem;
181 padding: 0;
182}
183
184#menu-nav {
185 grid-area: menu;
186}
187
188#content {
189 grid-area: content;
190}
191
192main>aside {
193 --pico-font-size: 16px;
194 font-size: var(--pico-font-size);
195}
196
197body>main>aside>nav.is-sticky-above-lg {
198 position: sticky;
199 top: calc(var(--pico-main-top-offset) + var(--pico-block-spacing-vertical)/ 2);
200 max-height: calc(var(--max-height) - var(--pico-spacing));
201 overflow: auto;
202 transition: top var(--pico-transition);
203 transition-delay: 50ms;
204}
205
206main>aside#menu-nav nav {
207 margin-bottom: var(--pico-spacing);
208 margin-block:calc(var(--pico-outline-width) * -1);padding-block: var(--pico-outline-width);
209 overflow: auto;
210}
211
212#menu-nav nav ul:first-of-type {
213 margin: 0;
214 padding: 0;
215}