aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/application.scss
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-04-21 11:06:33 +0200
committerChocobozzz <florian.bigard@gmail.com>2017-04-26 21:23:19 +0200
commit383bfc8356d444cbed1dab7e5c1b3bb16becfdfd (patch)
treeae0541d99056d75b08f14e8e4ea73f67f173d942 /client/src/sass/application.scss
parent240c64c5f4277f0ce36c094f0663bd30d264ec40 (diff)
downloadPeerTube-383bfc8356d444cbed1dab7e5c1b3bb16becfdfd.tar.gz
PeerTube-383bfc8356d444cbed1dab7e5c1b3bb16becfdfd.tar.zst
PeerTube-383bfc8356d444cbed1dab7e5c1b3bb16becfdfd.zip
Client: responsive design
Diffstat (limited to 'client/src/sass/application.scss')
-rw-r--r--client/src/sass/application.scss102
1 files changed, 63 insertions, 39 deletions
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index df3ee6c20..25d79a0cb 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -1,44 +1,81 @@
1@import '../../node_modules/video.js/dist/video-js.css'; 1@import '../../node_modules/video.js/dist/video-js.css';
2 2
3body { 3[hidden] {
4 padding: 20px; 4 display: none !important;
5}
5 6
6 @media screen and (max-width: 400px) { 7input.readonly {
7 padding: 3px; 8 /* Force blank on readonly inputs */
8 } 9 background-color: #fff !important;
9} 10}
10 11
11menu { 12.form-control, .btn {
12 @media screen and (max-width: 600px) { 13 border-radius: 0;
13 margin-right: 3px !important; 14}
14 padding: 3px !important;
15 min-height: 400px !important;
16 }
17 15
18 min-height: 600px; 16.glyphicon-black {
19 margin-right: 20px; 17 color: black;
20 border-right: 1px solid rgba(0, 0, 0, 0.2); 18}
19
20.header {
21 height: $header-height;
21 22
22 .panel-block:not(:last-child) { 23 .search-col {
23 border-bottom: 1px solid rgba(0, 0, 0, 0.1); 24 height: 100%;
25 margin-left: -15px;
26 padding: 0;
24 } 27 }
28}
25 29
26 .panel-button { 30.main-col {
27 margin: 8px; 31 padding: 0;
28 cursor: pointer;
29 transition: margin 0.2s;
30 32
31 &:hover { 33 .main-row {
32 margin-left: 15px; 34 padding: 15px 30px;
35
36 @media screen and (min-width: 1400px) {
37 padding: 15px 40px;
33 } 38 }
34 39
35 a { 40 @media screen and (min-width: 1600px) {
36 color: #333333; 41 padding: 15px 50px;
42 }
43
44 @media screen and (min-width: 1800px) {
45 padding: 15px 60px;
37 } 46 }
38 } 47 }
48}
39 49
40 .glyphicon { 50.title-menu-left {
41 margin: 5px; 51 height: calc(100vh - #{$header-height});
52 padding-right: 0;
53
54 .title-menu-left-block {
55 margin-left: -15px;
56
57 &.menu {
58 height: 100%;
59 }
60 }
61
62 #peertube-title {
63 background-color: #fff;
64 border-right: 2px solid $header-border-color;
65 font-size: 25px;
66 line-height: $header-height;
67 text-align: center;
68 margin-top: 0;
69 margin-bottom: 0;
70
71 a {
72 color: inherit !important;
73
74 &:hover {
75 color: inherit !important;
76 text-decoration: none !important;
77 }
78 }
42 } 79 }
43} 80}
44 81
@@ -63,19 +100,6 @@ ng2-smart-table {
63 } 100 }
64} 101}
65 102
66[hidden] {
67 display: none !important;
68}
69
70input.readonly {
71 /* Force blank on readonly inputs */
72 background-color: #fff !important;
73}
74
75.glyphicon-black {
76 color: black;
77}
78
79footer { 103footer {
80 border-top: 1px solid rgba(0, 0, 0, 0.2); 104 border-top: 1px solid rgba(0, 0, 0, 0.2);
81 padding-top: 10px; 105 padding-top: 10px;