sidebar.css 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. html, body {
  2. width: 100%;
  3. }
  4. #tabs {
  5. margin-top: 1px;
  6. width: 100%;
  7. }
  8. .tab {
  9. display: flex;
  10. align-items: center;
  11. justify-content: flex-start;
  12. border: solid #cfcfcf 1px;
  13. margin-bottom: 1px;
  14. padding-left: 2px;
  15. width: 100%;
  16. }
  17. .tab:hover {
  18. background-color: #cccccc;
  19. }
  20. .tab-title {
  21. display: inline-block;
  22. align-self: center;
  23. overflow: hidden;
  24. text-overflow: ellipsis;
  25. white-space: nowrap;
  26. width: 100%;
  27. }
  28. .tab-favicon {
  29. /* necessary to avoid flicker when hovering the close button */
  30. flex-shrink: 0;
  31. display: inline-block;
  32. background-size: cover;
  33. background-position: center;
  34. width: 15px;
  35. height: 15px;
  36. margin-left: 5px;
  37. margin-right: 5px;
  38. vertical-align: middle;
  39. }
  40. .close-button-parent {
  41. width: 17px;
  42. height: 17px;
  43. margin-right: 4px;
  44. display: none;
  45. }
  46. .tab:hover > .close-button-parent {
  47. display: inline-block;
  48. }
  49. .close-button-parent:hover {
  50. background-color: #707070;
  51. }
  52. .close-button-outer {
  53. height: 15px;
  54. width: 2px;
  55. margin-left: 6.2px;
  56. margin-top: 1.2px;
  57. background-color: black;
  58. transform: rotate(45deg);
  59. Z-index: 1;
  60. }
  61. .close-button-inner {
  62. height: 15px;
  63. width: 2px;
  64. background-color: black;
  65. transform: rotate(90deg);
  66. Z-index: 2;
  67. }
  68. .close-button-parent:hover .close-button-outer {
  69. background-color: #cccccc;
  70. }
  71. .close-button-parent:hover .close-button-inner {
  72. background-color: #cccccc;
  73. }