| Davit Tabidze | 3ec24cf | 2024-05-22 14:06:02 +0400 | [diff] [blame^] | 1 | @media screen and (min-width:801px) { |
| 2 | #main { |
| 3 | width: 600px; |
| 4 | } |
| 5 | } |
| 6 | |
| 7 | article { |
| 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 | |
| 70 | pre { |
| 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 | |
| 95 | nav li { |
| 96 | padding-top: 0; |
| 97 | padding-bottom: 0; |
| 98 | } |
| 99 | |
| 100 | input[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 | |
| 123 | header { |
| 124 | height: 80px !important; |
| 125 | display: flex; |
| 126 | align-items: center; |
| 127 | justify-content: center; |
| 128 | } |
| 129 | |
| 130 | header > h1 { |
| 131 | margin-bottom: 0px; |
| 132 | } |
| 133 | |
| 134 | nav { |
| 135 | height: 100%; |
| 136 | } |
| 137 | |
| 138 | #config-form label { |
| 139 | width: auto !important; |
| 140 | } |
| 141 | |
| 142 | html { |
| 143 | overflow-x: hidden; |
| 144 | scroll-behavior: smooth; |
| 145 | } |
| 146 | |
| 147 | body { |
| 148 | --pico-main-top-offset: 0rem; |
| 149 | } |
| 150 | |
| 151 | body>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 | |
| 161 | body>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 | |
| 166 | body>header { |
| 167 | z-index: 4; |
| 168 | position: relative; |
| 169 | padding: .5rem 0; |
| 170 | border-bottom: var(--pico-border-width) solid transparent; |
| 171 | } |
| 172 | |
| 173 | body>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 | |
| 192 | main>aside { |
| 193 | --pico-font-size: 16px; |
| 194 | font-size: var(--pico-font-size); |
| 195 | } |
| 196 | |
| 197 | body>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 | |
| 206 | main>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 | } |