bookmark.css 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. #BOOKMARK-wrapper {
  2. display: flex;
  3. flex-direction: column;
  4. justify-content: flex-start;
  5. }
  6. .BOOKMARK-category {
  7. text-align: center;
  8. margin-bottom: 40px;
  9. }
  10. .BOOKMARK-category-title {
  11. font-weight: 500;
  12. color: #ddd;
  13. font-size: large;
  14. }
  15. .BOOKMARK-category-content {
  16. width: 80%;
  17. margin: 0 auto;
  18. display: flex;
  19. flex-flow: row wrap;
  20. justify-content: center;
  21. }
  22. .BOOKMARK-tab {
  23. display: inline-flex;
  24. justify-content: space-between;
  25. align-items: center;
  26. margin: 10px 10px 0 10px;
  27. height: 50px;
  28. width: 200px;
  29. overflow: hidden;
  30. border: 1px solid;
  31. border-radius: 5px;
  32. transition: all 0.2s ease-in-out;
  33. }
  34. .BOOKMARK-tab:hover {
  35. filter: brightness(80%);
  36. }
  37. .BOOKMARK-tab-image {
  38. width: 50px;
  39. max-width: 50px;
  40. height: 100%;
  41. flex-grow: 33;
  42. }
  43. .BOOKMARK-tab-image img {
  44. width: 100%;
  45. height: 100%;
  46. padding: 8px;
  47. object-fit: contain;
  48. }
  49. .BOOKMARK-tab-image i {
  50. width: 100%;
  51. height: 100%;
  52. line-height: 44px;
  53. font-size: 2.2em;
  54. }
  55. .BOOKMARK-tab-title {
  56. flex-grow: 67;
  57. padding: 0 5px;
  58. color: white;
  59. text-align: left;
  60. font-weight: 500;
  61. }