Source code of my website
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

๐Ÿ’„ : add photoswipe stylesheet for gallery

+421
+420
assets/css/photoswipe.css
··· 1 + /*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */ 2 + 3 + .pswp { 4 + --pswp-bg: #000; 5 + --pswp-placeholder-bg: #222; 6 + 7 + 8 + --pswp-root-z-index: 100000; 9 + 10 + --pswp-preloader-color: rgba(79, 79, 79, 0.4); 11 + --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9); 12 + 13 + /* defined via js: 14 + --pswp-transition-duration: 333ms; */ 15 + 16 + --pswp-icon-color: #fff; 17 + --pswp-icon-color-secondary: #4f4f4f; 18 + --pswp-icon-stroke-color: #4f4f4f; 19 + --pswp-icon-stroke-width: 2px; 20 + 21 + --pswp-error-text-color: var(--pswp-icon-color); 22 + } 23 + 24 + 25 + /* 26 + Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions) 27 + */ 28 + 29 + .pswp { 30 + position: fixed; 31 + top: 0; 32 + left: 0; 33 + width: 100%; 34 + height: 100%; 35 + z-index: var(--pswp-root-z-index); 36 + display: none; 37 + touch-action: none; 38 + outline: 0; 39 + opacity: 0.003; 40 + contain: layout style size; 41 + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 42 + } 43 + 44 + /* Prevents focus outline on the root element, 45 + (it may be focused initially) */ 46 + .pswp:focus { 47 + outline: 0; 48 + } 49 + 50 + .pswp * { 51 + box-sizing: border-box; 52 + } 53 + 54 + .pswp img { 55 + max-width: none; 56 + } 57 + 58 + .pswp--open { 59 + display: block; 60 + } 61 + 62 + .pswp, 63 + .pswp__bg { 64 + transform: translateZ(0); 65 + will-change: opacity; 66 + } 67 + 68 + .pswp__bg { 69 + opacity: 0.005; 70 + background: var(--pswp-bg); 71 + } 72 + 73 + .pswp, 74 + .pswp__scroll-wrap { 75 + overflow: hidden; 76 + } 77 + 78 + .pswp__scroll-wrap, 79 + .pswp__bg, 80 + .pswp__container, 81 + .pswp__item, 82 + .pswp__content, 83 + .pswp__img, 84 + .pswp__zoom-wrap { 85 + position: absolute; 86 + top: 0; 87 + left: 0; 88 + width: 100%; 89 + height: 100%; 90 + } 91 + 92 + .pswp__img, 93 + .pswp__zoom-wrap { 94 + width: auto; 95 + height: auto; 96 + } 97 + 98 + .pswp--click-to-zoom.pswp--zoom-allowed .pswp__img { 99 + cursor: -webkit-zoom-in; 100 + cursor: -moz-zoom-in; 101 + cursor: zoom-in; 102 + } 103 + 104 + .pswp--click-to-zoom.pswp--zoomed-in .pswp__img { 105 + cursor: move; 106 + cursor: -webkit-grab; 107 + cursor: -moz-grab; 108 + cursor: grab; 109 + } 110 + 111 + .pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active { 112 + cursor: -webkit-grabbing; 113 + cursor: -moz-grabbing; 114 + cursor: grabbing; 115 + } 116 + 117 + /* :active to override grabbing cursor */ 118 + .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img, 119 + .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active, 120 + .pswp__img { 121 + cursor: -webkit-zoom-out; 122 + cursor: -moz-zoom-out; 123 + cursor: zoom-out; 124 + } 125 + 126 + 127 + /* Prevent selection and tap highlights */ 128 + .pswp__container, 129 + .pswp__img, 130 + .pswp__button, 131 + .pswp__counter { 132 + -webkit-user-select: none; 133 + -moz-user-select: none; 134 + -ms-user-select: none; 135 + user-select: none; 136 + } 137 + 138 + .pswp__item { 139 + /* z-index for fade transition */ 140 + z-index: 1; 141 + overflow: hidden; 142 + } 143 + 144 + .pswp__hidden { 145 + display: none !important; 146 + } 147 + 148 + /* Allow to click through pswp__content element, but not its children */ 149 + .pswp__content { 150 + pointer-events: none; 151 + } 152 + .pswp__content > * { 153 + pointer-events: auto; 154 + } 155 + 156 + 157 + /* 158 + 159 + PhotoSwipe UI 160 + 161 + */ 162 + 163 + /* 164 + Error message appears when image is not loaded 165 + (JS option errorMsg controls markup) 166 + */ 167 + .pswp__error-msg-container { 168 + display: grid; 169 + } 170 + .pswp__error-msg { 171 + margin: auto; 172 + font-size: 1em; 173 + line-height: 1; 174 + color: var(--pswp-error-text-color); 175 + } 176 + 177 + /* 178 + class pswp__hide-on-close is applied to elements that 179 + should hide (for example fade out) when PhotoSwipe is closed 180 + and show (for example fade in) when PhotoSwipe is opened 181 + */ 182 + .pswp .pswp__hide-on-close { 183 + opacity: 0.005; 184 + will-change: opacity; 185 + transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1); 186 + z-index: 10; /* always overlap slide content */ 187 + pointer-events: none; /* hidden elements should not be clickable */ 188 + } 189 + 190 + /* class pswp--ui-visible is added when opening or closing transition starts */ 191 + .pswp--ui-visible .pswp__hide-on-close { 192 + opacity: 1; 193 + pointer-events: auto; 194 + } 195 + 196 + /* <button> styles, including css reset */ 197 + .pswp__button { 198 + position: relative; 199 + display: block; 200 + width: 50px; 201 + height: 60px; 202 + padding: 0; 203 + margin: 0; 204 + overflow: hidden; 205 + cursor: pointer; 206 + background: none; 207 + border: 0; 208 + box-shadow: none; 209 + opacity: 0.85; 210 + -webkit-appearance: none; 211 + -webkit-touch-callout: none; 212 + } 213 + 214 + .pswp__button:hover, 215 + .pswp__button:active, 216 + .pswp__button:focus { 217 + transition: none; 218 + padding: 0; 219 + background: none; 220 + border: 0; 221 + box-shadow: none; 222 + opacity: 1; 223 + } 224 + 225 + .pswp__button:disabled { 226 + opacity: 0.3; 227 + cursor: auto; 228 + } 229 + 230 + .pswp__icn { 231 + fill: var(--pswp-icon-color); 232 + color: var(--pswp-icon-color-secondary); 233 + } 234 + 235 + .pswp__icn { 236 + position: absolute; 237 + top: 14px; 238 + left: 9px; 239 + width: 32px; 240 + height: 32px; 241 + overflow: hidden; 242 + pointer-events: none; 243 + } 244 + 245 + .pswp__icn-shadow { 246 + stroke: var(--pswp-icon-stroke-color); 247 + stroke-width: var(--pswp-icon-stroke-width); 248 + fill: none; 249 + } 250 + 251 + .pswp__icn:focus { 252 + outline: 0; 253 + } 254 + 255 + /* 256 + div element that matches size of large image, 257 + large image loads on top of it, 258 + used when msrc is not provided 259 + */ 260 + div.pswp__img--placeholder, 261 + .pswp__img--with-bg { 262 + background: var(--pswp-placeholder-bg); 263 + } 264 + 265 + .pswp__top-bar { 266 + position: absolute; 267 + left: 0; 268 + top: 0; 269 + width: 100%; 270 + height: 60px; 271 + display: flex; 272 + flex-direction: row; 273 + justify-content: flex-end; 274 + z-index: 10; 275 + 276 + /* allow events to pass through top bar itself */ 277 + pointer-events: none !important; 278 + } 279 + .pswp__top-bar > * { 280 + pointer-events: auto; 281 + /* this makes transition significantly more smooth, 282 + even though inner elements are not animated */ 283 + will-change: opacity; 284 + } 285 + 286 + 287 + /* 288 + 289 + Close button 290 + 291 + */ 292 + .pswp__button--close { 293 + margin-right: 6px; 294 + } 295 + 296 + 297 + /* 298 + 299 + Arrow buttons 300 + 301 + */ 302 + .pswp__button--arrow { 303 + position: absolute; 304 + top: 0; 305 + width: 75px; 306 + height: 100px; 307 + top: 50%; 308 + margin-top: -50px; 309 + } 310 + 311 + .pswp__button--arrow:disabled { 312 + display: none; 313 + cursor: default; 314 + } 315 + 316 + .pswp__button--arrow .pswp__icn { 317 + top: 50%; 318 + margin-top: -30px; 319 + width: 60px; 320 + height: 60px; 321 + background: none; 322 + border-radius: 0; 323 + } 324 + 325 + .pswp--one-slide .pswp__button--arrow { 326 + display: none; 327 + } 328 + 329 + /* hide arrows on touch screens */ 330 + .pswp--touch .pswp__button--arrow { 331 + visibility: hidden; 332 + } 333 + 334 + /* show arrows only after mouse was used */ 335 + .pswp--has_mouse .pswp__button--arrow { 336 + visibility: visible; 337 + } 338 + 339 + .pswp__button--arrow--prev { 340 + right: auto; 341 + left: 0px; 342 + } 343 + 344 + .pswp__button--arrow--next { 345 + right: 0px; 346 + } 347 + .pswp__button--arrow--next .pswp__icn { 348 + left: auto; 349 + right: 14px; 350 + /* flip horizontally */ 351 + transform: scale(-1, 1); 352 + } 353 + 354 + /* 355 + 356 + Zoom button 357 + 358 + */ 359 + .pswp__button--zoom { 360 + display: none; 361 + } 362 + 363 + .pswp--zoom-allowed .pswp__button--zoom { 364 + display: block; 365 + } 366 + 367 + /* "+" => "-" */ 368 + .pswp--zoomed-in .pswp__zoom-icn-bar-v { 369 + display: none; 370 + } 371 + 372 + 373 + /* 374 + 375 + Loading indicator 376 + 377 + */ 378 + .pswp__preloader { 379 + position: relative; 380 + overflow: hidden; 381 + width: 50px; 382 + height: 60px; 383 + margin-right: auto; 384 + } 385 + 386 + .pswp__preloader .pswp__icn { 387 + opacity: 0; 388 + transition: opacity 0.2s linear; 389 + animation: pswp-clockwise 600ms linear infinite; 390 + } 391 + 392 + .pswp__preloader--active .pswp__icn { 393 + opacity: 0.85; 394 + } 395 + 396 + @keyframes pswp-clockwise { 397 + 0% { transform: rotate(0deg); } 398 + 100% { transform: rotate(360deg); } 399 + } 400 + 401 + 402 + /* 403 + 404 + "1 of 10" counter 405 + 406 + */ 407 + .pswp__counter { 408 + height: 30px; 409 + margin-top: 15px; 410 + margin-inline-start: 20px; 411 + font-size: 14px; 412 + line-height: 30px; 413 + color: var(--pswp-icon-color); 414 + text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary); 415 + opacity: 0.85; 416 + } 417 + 418 + .pswp--one-slide .pswp__counter { 419 + display: none; 420 + }
+1
themes/poison/layouts/partials/head/stylesheets.html
··· 6 6 (resources.Get "css/fonts.css") 7 7 (resources.Get "css/tabs.css") 8 8 (resources.Get "css/custom.css") 9 + (resources.Get "css/photoswipe.css") 9 10 | resources.Concat "css/bundle.css" | minify | fingerprint }} 10 11 11 12 <link type="text/css" rel="stylesheet" href="{{ $css_bundle.RelPermalink }}">