style.scoped.scss 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. $whiteFilter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(116deg)
  2. brightness(109%) contrast(109%);
  3. .queue-item {
  4. display: flex;
  5. align-items: center;
  6. justify-content: space-between;
  7. width: 100%;
  8. height: 50px;
  9. min-height: 50px;
  10. border-radius: 5px;
  11. margin-bottom: 10px;
  12. user-select: none;
  13. .info {
  14. display: flex;
  15. padding-left: 10px;
  16. .drag-icon {
  17. margin-right: 10px;
  18. img {
  19. width: 25px;
  20. height: 25px;
  21. filter: $whiteFilter;
  22. cursor: pointer;
  23. }
  24. }
  25. p {
  26. font-size: 18px;
  27. }
  28. }
  29. .buttons {
  30. height: 100%;
  31. .button-remove {
  32. height: 50px;
  33. width: 50px;
  34. background-color: rgba(254, 127, 1, 0.6);
  35. border-top-right-radius: 5px;
  36. border-bottom-right-radius: 5px;
  37. display: flex;
  38. justify-content: center;
  39. align-items: center;
  40. cursor: pointer;
  41. opacity: 0;
  42. transition: 0.3s;
  43. img {
  44. height: 20px;
  45. width: 20px;
  46. filter: $whiteFilter;
  47. }
  48. &:hover {
  49. background-color: rgba(254, 127, 1, 1);
  50. }
  51. }
  52. }
  53. &:hover {
  54. background-color: rgba($color: #fff, $alpha: 0.1);
  55. .button-remove {
  56. opacity: 1;
  57. }
  58. }
  59. }