A decentralized music tracking and discovery platform built on AT Protocol 馃幍
rocksky.app
spotify
atproto
lastfm
musicbrainz
scrobbling
listenbrainz
1import { css } from "@emotion/react";
2import styled from "@emotion/styled";
3
4export const PlayButton = styled.button`
5 border: none;
6 display: flex;
7 align-items: center;
8 justify-content: center;
9 height: 45px;
10 width: 45px;
11 border-radius: 24px;
12 background-color: var(--color-play-button);
13 cursor: pointer;
14 margin-left: 5px;
15 margin-right: 5px;
16`;
17
18export const PreviousButton = styled.button`
19 border: none;
20 display: flex;
21 align-items: center;
22 justify-content: center;
23 height: 42px;
24 width: 42px;
25 border-radius: 24px;
26 background-color: var(--color-background);
27 cursor: pointer;
28`;
29
30export const NextButton = styled.button`
31 border: none;
32 display: flex;
33 align-items: center;
34 justify-content: center;
35 height: 42px;
36 width: 42px;
37 border-radius: 24px;
38 cursor: pointer;
39 background-color: var(--color-background);
40`;
41
42export const Controls = styled.div`
43 display: flex;
44 height: 48px;
45 align-items: center;
46 justify-content: center;
47 flex-direction: row;
48`;
49
50export const Button = styled.button<{ disabled?: boolean }>`
51 display: flex;
52 align-items: center;
53 justify-content: center;
54 width: 60px;
55 cursor: pointer;
56 border: none;
57 background-color: transparent;
58 ${(props) =>
59 props.disabled &&
60 css`
61 opacity: 0.5;
62 background-color: transparent;
63 cursor: not-allowed;
64 `}
65`;
66
67export const MainWrapper = styled.div`
68 flex: 1;
69 margin-left: 10px;
70 margin-right: 10px;
71`;
72
73export const RightActions = styled.div`
74 display: flex;
75 justify-content: space-between;
76 align-items: center;
77`;
78
79export const ProgressbarContainer = styled.div`
80 cursor: pointer;
81`;
82
83export const LikeButton = styled.button`
84 border: none;
85 background: none;
86 cursor: pointer;
87`;
88
89export const styles = {
90 Progressbar: {
91 BarContainer: {
92 style: {
93 marginLeft: 0,
94 marginRight: 0,
95 },
96 },
97 BarProgress: {
98 style: () => ({
99 backgroundColor: "rgb(254, 9, 156)",
100 }),
101 },
102 Bar: {
103 style: () => ({
104 backgroundColor: "rgba(177, 178, 181, 0.218)",
105 }),
106 },
107 },
108};