cssbox.css 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. /* The work below, CSSBox, is released under the Creative Commons
  2. Attribution-ShareAlike 4.0 license and is available on
  3. https://notabug.org/SylvieLorxu/CSSBox. You are not required to add
  4. additional credit to your website, just leave the above text in this file */
  5. div.cssbox {
  6. display: inline-block;
  7. }
  8. span.cssbox_full {
  9. z-index: 999;
  10. position: fixed;
  11. height: 100%;
  12. width: 100%;
  13. background-color: rgba(0,0,0,0.8);
  14. top: 0;
  15. left: 0;
  16. opacity: 0;
  17. pointer-events: none;
  18. transition: opacity 0.5s linear;
  19. }
  20. span.cssbox_full img {
  21. position: fixed;
  22. background-color: white;
  23. margin: 0;
  24. padding: 0;
  25. max-height: 90%;
  26. max-width: 90%;
  27. top: 50%;
  28. left: 50%;
  29. margin-right: -50%;
  30. transform: translate(-50%, -50%);
  31. box-shadow: 0 0 20px black;
  32. }
  33. a.cssbox_close,
  34. a.cssbox_prev,
  35. a.cssbox_next {
  36. z-index: 999;
  37. position: fixed;
  38. text-decoration: none;
  39. visibility: hidden;
  40. color: white;
  41. font-size: 36px;
  42. }
  43. a.cssbox_close {
  44. top: 1%;
  45. right: 1%
  46. }
  47. a.cssbox_close::after {
  48. content: '\00d7';
  49. }
  50. a.cssbox_prev,
  51. a.cssbox_next {
  52. top: 50%;
  53. transform: translate(0%, -50%);
  54. }
  55. a.cssbox_prev {
  56. left: 5%;
  57. }
  58. a.cssbox_next {
  59. right: 5%;
  60. }
  61. a:target ~ a.cssbox_close,
  62. a:target ~ a.cssbox_prev,
  63. a:target ~ a.cssbox_next {
  64. visibility: visible;
  65. }
  66. a:target > img.cssbox_thumb + span.cssbox_full {
  67. visibility: visible;
  68. opacity: 1;
  69. pointer-events: initial;
  70. }
  71. span.cssbox_full {
  72. cursor: initial;
  73. }
  74. /* This is the end of CSSBox */