blob: 5ad34ec98b5620f313e9b4f67d10d32bb0f6474d [file] [log] [blame]
pineafana5ce9102021-09-02 17:21:31 +01001.container {
2 display: flex;
3 flex-direction: column;
4 justify-content: top;
5 align-items: center;
6
7 position: fixed;
8 top: 0;
9 left: 0;
10 overflow: hidden;
11 margin: 20px;
12
13 width: 64px;
14 max-height: 64px;
15 height: auto;
pineafana5ce9102021-09-02 17:21:31 +010016
17 border-radius: 32px;
18 transition: 0.5s ease-in-out;
19}
pineafana5ce9102021-09-02 17:21:31 +010020.group {
21 display: flex;
22 flex-direction: column;
23 justify-content: top;
24 align-items: center;
25
pineafan69adcb82021-11-03 21:29:03 +000026 background-color: var(--theme-ui-colors-cardBackground);
pineafan78727452021-11-04 21:25:07 +000027 transition: background-color 0.3s ease-in-out;
Samuel Shuert52f37772021-09-02 12:29:40 -050028 backdrop-filter: blur(7px), brightness(0.1);
pineafana5ce9102021-09-02 17:21:31 +010029 border-radius: 32px;
30
31 width: 64px;
32 margin-bottom: 20px;
33 padding-top: 7px;
34}
35
36.headerIcon {
37 height: 64px;
38 width: 64px;
39 margin-bottom: 20px;
40 margin-right: 0;
41 margin-top: -7px;
Samuel Shuert604e31d2021-09-02 16:06:20 -050042
43 cursor: pointer;
pineafana5ce9102021-09-02 17:21:31 +010044}
45
46.icon {
47 height: 50px;
48 width: 50px;
49 margin-bottom: 5px;
pineafandf39fd42021-09-04 16:05:27 +010050 cursor: pointer;
pineafan78727452021-11-04 21:25:07 +000051 display: block;
52}
53
54.ThemeChangeButton {
55 display: flex;
56 justify-content: center;
57 align-items: center;
pineafana5ce9102021-09-02 17:21:31 +010058}
59
60.containerOpen {
pineafand494b852021-09-03 19:49:49 +010061 max-height: 460px;
pineafana5ce9102021-09-02 17:21:31 +010062}
63
pineafand494b852021-09-03 19:49:49 +010064.containerDesktop {
65 animation-name: containerCloseOnStart;
66 animation-duration: 0.5s;
67 animation-direction: forwards;
68 animation-timing-function: ease-in-out;
69}
70
71@keyframes containerCloseOnStart {
72 from { max-height: 460px; }
73 to { max-height: 64px ; }
74}
75
76.containerDesktop:hover {
77 max-height: 460px;
78 animation-name: none;
79}
80
81@media screen and (min-width: 450px) {
pineafana5ce9102021-09-02 17:21:31 +010082 .container {
83 flex-direction: row;
84 justify-content: left;
85
86 margin: 20px;
87
88 height: 64px;
89 max-width: 64px;
90 width: auto;
91 border-radius: 32px;
92
93 border-radius: 32px;
94 transition: 0.5s ease-in-out;
95 }
96 .group {
97 flex-direction: row;
98 justify-content: left;
99
100 height: 64px;
101 width: auto;
102 padding-right: 7px;
103 margin-bottom: 0;
104 padding-top: 7px;
105 margin-right: 20px;
Samuel Shuert52f37772021-09-02 12:29:40 -0500106 padding-left: 3px;
pineafana5ce9102021-09-02 17:21:31 +0100107 }
108 .headerIcon {
109 height: 64px;
110 width: 64px;
111 margin-top: 12px;
Samuel Shuert52f37772021-09-02 12:29:40 -0500112 margin-left: -3px;
pineafana5ce9102021-09-02 17:21:31 +0100113 }
114 .containerOpen {
pineafand494b852021-09-03 19:49:49 +0100115 max-width: 460px;
116 max-height: 64px;
117 }
118 .containerDesktop:hover {
119 max-width: 460px;
pineafana5ce9102021-09-02 17:21:31 +0100120 max-height: 64px;
121 }
122 .icon {
123 height: 50px;
124 width: 50px;
125 margin-left: 5px;
126 }
pineafand494b852021-09-03 19:49:49 +0100127 @keyframes containerCloseOnStart {
128 from { max-width: 460px; }
129 to { max-width: 64px ; }
130 }
pineafandf39fd42021-09-04 16:05:27 +0100131}