Advertisement
powylv

lovespace update log 1

Jul 10th, 2022 (edited)
662
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.18 KB | None | 0 0
  1. <div id="log">
  2. <div class="title" align="center">update log
  3. </div>
  4. <div class="info" align="left">
  5. <mark>xx.xx.xx</mark> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  6. <br>
  7. <mark>xx.xx.xx</mark> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  8. <br>
  9. <mark>xx.xx.xx</mark> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  10. </div>
  11. </div>
  12.  
  13.  
  14. <style>
  15. #log, #log:hover {
  16. position: fixed;
  17. top: 20px;
  18. left: 20px;
  19. z-index: 3;
  20. overflow: hidden;
  21. padding: 5px 10px 5px 5px;
  22. background: white;
  23. border-radius: 15px;
  24. box-shadow: 0 0 4px 7px #ffffff;
  25. width: 20px;
  26. height: 18px;
  27. }
  28. #log:hover {
  29. width: 150px;
  30. height: 170px;
  31. padding: 5px 5px 5px 5px;
  32. border-radius: 5px;
  33. box-shadow: 0 0 7px 10px #ffffff;
  34. }
  35.  
  36. .title, #log:hover .title {
  37. opacity: 0;
  38. font: 0 bubblegum;
  39. height: 28px;
  40. background: linear-gradient(#e0afb6, white);
  41. -webkit-background-clip: text;
  42. -webkit-text-fill-color: transparent;
  43. -webkit-text-stroke: 0.5px #bd8088;
  44. }
  45. #log:hover .title {
  46. opacity: 1;
  47. font: 19px bubblegum;
  48. }
  49.  
  50. .info, #log:hover .info {
  51. opacity: 0;
  52. height: 0;
  53. overflow: auto;
  54. padding-top: 2px;
  55. font: 0 system-ui;
  56. color: #303030;
  57. line-height: 14px;
  58. text-align: left;
  59. }
  60. #log:hover .info {
  61. opacity: 0.99;
  62. height: 135px;
  63. font: 0.67rem system-ui;
  64. line-height: 14px;
  65. }
  66.  
  67. #log mark, #log:hover mark {
  68. opacity: 0;
  69. font-size: 0;
  70. background: linear-gradient(#e0afb6, #fff);
  71. border: 0.7px solid #e0afb6;
  72. border-radius: 15px;
  73. padding: 1px 4px 0.5px 4px;
  74. color: #303030;
  75. }
  76. #log:hover mark {
  77. opacity: 1;
  78. font-size: 0.67rem;
  79. }
  80.  
  81. #log, #log:hover, .info, #log:hover .info, .title, #log:hover .title, #log mark, #log:hover mark {
  82. -webkit-transition: opacity 0.5s linear;
  83. -webkit-transition: all 0.5s ease-in-out;
  84. -moz-transition: all 0.5s ease-in-out;
  85. -o-transition: all 0.5s ease-in-out;
  86. }
  87.  
  88. #log br {
  89. display: block;
  90. content: "";
  91. margin-top: 10px;
  92. }
  93.  
  94. @font-face {
  95. font-family: bubblegum;
  96. src: url(https://dl.dropbox.com/s/lisoxfxadojjlqo/bubblegum.ttf);
  97. }
  98. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement