]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/app/menu/menu.component.scss
Responsive player
[github/Chocobozzz/PeerTube.git] / client / src / app / menu / menu.component.scss
CommitLineData
b33f657c
C
1menu {
2 background-color: $black-background;
3 margin: 0;
4 padding: 0;
5 height: 100%;
6 white-space: nowrap;
7 text-overflow: ellipsis;
8 overflow: hidden;
9 z-index: 1000;
10 color: $menu-color;
11
12 @media screen and (max-width: 550px) {
13 font-size: 90%;
14 }
15
16 .logged-in-block {
17 height: 100px;
18 background-color: rgba(255, 255, 255, 0.15);
19 display: flex;
20 align-items: center;
21 justify-content: center;
22 margin-bottom: 35px;
23
2295ce6c
C
24 img {
25 margin-left: 20px;
26 margin-right: 10px;
27
28 @include avatar(34px);
29 }
30
b33f657c
C
31 .logged-in-info {
32 flex-grow: 1;
b33f657c
C
33
34 .logged-in-username {
35 font-size: 16px;
36 font-weight: $font-semibold;
c30745f3
C
37 color: $menu-color;
38 cursor: pointer;
39
40 @include disable-default-a-behaviour;
b33f657c
C
41 }
42
43 .logged-in-email {
44 font-size: 13px;
45 color: #C6C6C6;
cadb46d8
C
46 white-space: nowrap;
47 overflow: hidden;
48 text-overflow: ellipsis;
49 max-width: 140px;
b33f657c
C
50 }
51 }
52
53 .logged-in-more {
54 margin-right: 20px;
55
56 .glyphicon {
57 cursor: pointer;
58 font-size: 18px;
59 }
60 }
61 }
62
63 .button-block {
64 margin: 30px 25px 35px 25px;
65
66 .login-button, .create-account-button {
67 font-weight: $font-semibold;
68 font-size: 15px;
69 height: $button-height;
70 line-height: $button-height;
71 width: 190px;
72 border-radius: 3px;
73 text-align: center;
c30745f3
C
74 color: $menu-color;
75 display: block;
76 cursor: pointer;
77 margin-bottom: 15px;
78
79 @include disable-default-a-behaviour;
b33f657c
C
80
81 &.login-button {
82 background-color: $orange-color;
83 margin-bottom: 10px;
84 }
85
86 &.create-account-button {
87 background-color: rgba(255, 255, 255, 0.25);
88 }
89 }
90 }
91
92 .block-title {
93 text-transform: uppercase;
94 font-weight: $font-bold; // Bold
95 font-size: 13px;
96 margin-bottom: 25px;
97 }
98
99 .panel-block {
100 margin-bottom: 45px;
101 margin-left: 26px;
102
103 a {
104 display: flex;
c30745f3
C
105 color: $menu-color;
106 cursor: pointer;
107 height: 22px;
108 line-height: 22px;
109 font-size: 16px;
110 margin-bottom: 15px;
111 @include disable-default-a-behaviour;
b33f657c
C
112
113 .icon {
0727cab0
C
114 @include icon(22px);
115
b33f657c 116 margin-right: 18px;
b33f657c
C
117
118 &.icon-videos-trending {
119 position: relative;
120 top: -2px;
d2cc03aa 121 background-image: url('../../assets/images/menu/trending.svg');
b33f657c
C
122 }
123
124 &.icon-videos-recently-added {
125 width: 23px;
126 height: 23px;
127 position: relative;
128 top: -1px;
d2cc03aa 129 background-image: url('../../assets/images/menu/recently-added.svg');
b33f657c
C
130 }
131
132 &.icon-administration {
133 width: 23px;
134 height: 23px;
135
d2cc03aa 136 background-image: url('../../assets/images/menu/administration.svg');
b33f657c
C
137 }
138 }
139 }
140 }
b33f657c 141}