_mixins.css 1015 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. @import '_variables';
  2. @mixin panel($width, $max-width) {
  3. max-width: $max-width;
  4. margin: 0 auto;
  5. float: none;
  6. border-radius: 0;
  7. position: relative;
  8. width: $width;
  9. }
  10. @mixin play-button {
  11. position: absolute;
  12. width: 100%;
  13. height: 100%;
  14. top: 0;
  15. left: 0;
  16. z-index: 1;
  17. &:hover {
  18. .overlay-circle {
  19. border-color: $accent;
  20. }
  21. .overlay-triangle {
  22. border-color: transparent transparent transparent $accent;
  23. }
  24. }
  25. }
  26. @mixin breakable {
  27. overflow: hidden;
  28. overflow-wrap: break-word;
  29. }
  30. @mixin ellipsis {
  31. overflow: hidden;
  32. text-overflow: ellipsis;
  33. white-space: nowrap;
  34. }
  35. @mixin center-panel($bg) {
  36. padding: 12px;
  37. border-radius: 4px;
  38. display: flex;
  39. background: $bg;
  40. box-shadow: 0 0 15px $shadow_dark;
  41. margin: auto;
  42. margin-top: -50px;
  43. }
  44. @mixin input-colors {
  45. &:hover {
  46. border-color: $accent;
  47. }
  48. &:active {
  49. border-color: $accent_light;
  50. }
  51. }