aboutsummaryrefslogtreecommitdiffhomepage
path: root/app/Resources/static/themes/material/css
diff options
context:
space:
mode:
authorThomas Citharel <tcit@tcit.fr>2017-03-31 20:21:41 +0200
committerThomas Citharel <tcit@tcit.fr>2017-05-04 14:49:44 +0200
commit64f81bc31699ed239e4becec1cfa7ebc0bef2b5a (patch)
tree6363a596055683587d11aaffcf30608a682988aa /app/Resources/static/themes/material/css
parent3b4502e0e663866e7bac00164fd935fdc92309d6 (diff)
downloadwallabag-64f81bc31699ed239e4becec1cfa7ebc0bef2b5a.tar.gz
wallabag-64f81bc31699ed239e4becec1cfa7ebc0bef2b5a.tar.zst
wallabag-64f81bc31699ed239e4becec1cfa7ebc0bef2b5a.zip
Adds Webpack support and removes the use for Grunt
Signed-off-by: Thomas Citharel <tcit@tcit.fr> use scss Signed-off-by: Thomas Citharel <tcit@tcit.fr> fix build, add babel, fix annotations fixes (and improvements !) for baggy add live reload & environments & eslint & theme fixes
Diffstat (limited to 'app/Resources/static/themes/material/css')
-rw-r--r--app/Resources/static/themes/material/css/article.scss174
-rw-r--r--app/Resources/static/themes/material/css/cards.scss186
-rw-r--r--app/Resources/static/themes/material/css/entries.scss87
-rw-r--r--app/Resources/static/themes/material/css/filters.scss15
-rw-r--r--app/Resources/static/themes/material/css/fonts.scss13
-rw-r--r--app/Resources/static/themes/material/css/icons.scss185
-rw-r--r--app/Resources/static/themes/material/css/index.scss17
-rwxr-xr-xapp/Resources/static/themes/material/css/layout.scss50
-rw-r--r--app/Resources/static/themes/material/css/media_queries.scss149
-rw-r--r--app/Resources/static/themes/material/css/nav.scss106
-rwxr-xr-xapp/Resources/static/themes/material/css/print.scss (renamed from app/Resources/static/themes/material/css/print.css)5
-rw-r--r--app/Resources/static/themes/material/css/sidenav.scss41
-rw-r--r--app/Resources/static/themes/material/css/variables.scss5
-rw-r--r--app/Resources/static/themes/material/css/various.scss24
14 files changed, 1053 insertions, 4 deletions
diff --git a/app/Resources/static/themes/material/css/article.scss b/app/Resources/static/themes/material/css/article.scss
new file mode 100644
index 00000000..7d0bdac7
--- /dev/null
+++ b/app/Resources/static/themes/material/css/article.scss
@@ -0,0 +1,174 @@
1/* ==========================================================================
2 Article
3 ========================================================================== */
4
5#article {
6 font-size: 20px;
7 margin: 0 auto;
8 max-width: 45em;
9
10 article {
11 color: #424242;
12 font-size: 18px;
13 line-height: 1.7em;
14
15 h1,
16 h2,
17 h3,
18 h4,
19 h5,
20 h6 {
21 color: #212121;
22
23 strong {
24 font-weight: 500;
25 }
26 }
27
28 h6 {
29 font-size: 1.2rem;
30 }
31
32 h5 {
33 font-size: 1.6rem;
34 }
35
36 h4 {
37 font-size: 1.9rem;
38 }
39
40 h3 {
41 font-size: 2.2rem;
42 }
43
44 h2 {
45 font-size: 2.5rem;
46 }
47
48 h1 {
49 font-size: 2.7rem;
50 }
51
52 a {
53 border-bottom: 1px dotted #03a9f4;
54 text-decoration: none;
55 }
56
57 a:hover {
58 border-bottom-style: solid;
59 }
60
61 ul {
62 padding-left: 30px;
63 }
64
65 ul,
66 ul li {
67 list-style-type: disc;
68 }
69
70 blockquote {
71 font-style: italic;
72 }
73
74 strong {
75 font-weight: bold;
76 }
77 }
78
79 img,
80 figure {
81 max-width: 100%;
82 height: auto;
83 }
84
85 pre {
86 box-sizing: border-box;
87 margin: 0 0 1.75em;
88 border: #e3f2fd 1px solid;
89 width: 100%;
90 padding: 10px;
91 font-family: monospace;
92 font-size: 0.8em;
93 white-space: pre;
94 overflow: auto;
95 background: #f5f5f5;
96 border-radius: 3px;
97 }
98
99 > header > h1 {
100 font-size: 2em;
101 margin: 2.1rem 0 0.68rem;
102 }
103
104 aside {
105 .tools {
106 font-size: 0.8em;
107 display: flex;
108 flex-flow: row wrap;
109 margin: 0 auto;
110
111 li {
112 display: inline-flex;
113 vertical-align: middle;
114 }
115
116 a {
117 color: #000;
118 text-decoration: none;
119 }
120 }
121
122 #list {
123 float: right;
124 margin: 0 15px 10px;
125 }
126
127 .chip {
128 background-color: $blueAccentColor;
129 padding: 0 15px 0 10px;
130 margin: auto 2px;
131
132 a,
133 i {
134 color: #fff;
135 }
136 }
137 }
138}
139
140.reader-mode {
141 width: 95px !important;
142 transition: width 0.2s ease;
143
144 .collapsible-body {
145 height: 0;
146 overflow: hidden;
147 }
148
149 span {
150 opacity: 0;
151 transition: opacity 0.2s ease;
152 }
153}
154
155.reader-mode:hover {
156 width: 240px !important;
157
158 .collapsible-body {
159 height: auto;
160 }
161
162 span {
163 opacity: 1;
164 }
165}
166
167.progress {
168 position: fixed;
169 top: 0;
170 width: 100%;
171 height: 3px;
172 margin: 0;
173 z-index: 9999;
174}
diff --git a/app/Resources/static/themes/material/css/cards.scss b/app/Resources/static/themes/material/css/cards.scss
new file mode 100644
index 00000000..18ef6e60
--- /dev/null
+++ b/app/Resources/static/themes/material/css/cards.scss
@@ -0,0 +1,186 @@
1/* ==========================================================================
2 Cards
3 ========================================================================== */
4
5main {
6 #content {
7 padding: 0 0.5rem;
8 }
9
10 ul.row {
11 padding: 0 0.75rem;
12 }
13}
14
15.data .card .card-body {
16 height: 19em;
17 overflow: hidden;
18}
19
20.card {
21 .card-content .card-title,
22 .card-reveal .card-title {
23 line-height: 22.8px;
24 max-height: 80px;
25 font-size: 19px;
26 font-family: roberto, "Helvetica Neue", Helvetica, Arial, sans-serif;
27 color: #313131;
28 }
29
30 .card-content .activator,
31 .card-reveal .activator {
32 cursor: pointer;
33 font-family: "Material Icons";
34 }
35
36 .card-content i.right,
37 .card-reveal i.right {
38 margin-left: 0;
39 }
40
41 .card-content .original {
42 line-height: 24px;
43 font-size: 15px;
44 }
45
46 .card-entry-labels {
47 position: absolute;
48 top: 10px;
49 z-index: 90;
50 max-width: 50%;
51 }
52
53 .card-entry-labels-hidden {
54 margin: 2.5px auto;
55 }
56
57 .card-entry-labels-hidden li {
58 display: inline-block;
59 background-color: $blueAccentColor;
60 margin: 0 5px;
61 padding: 5px 12px;
62 border-radius: 3px;
63 color: #fff;
64 max-height: 2em;
65 max-width: calc(100% - 15px);
66 overflow: hidden;
67 text-overflow: ellipsis;
68 white-space: nowrap;
69 }
70
71 .card-entry-labels-hidden li {
72 display: inline-block;
73 background-color: $blueAccentColor;
74 margin: 0 5px;
75 padding: 5px 12px;
76 border-radius: 3px;
77 color: #fff;
78 max-height: 2em;
79 max-width: calc(100% - 15px);
80 overflow: hidden;
81 text-overflow: ellipsis;
82 white-space: nowrap;
83 }
84
85 .card-content .estimatedTime {
86 margin-bottom: 10px;
87 }
88
89 .card-action {
90 padding: 10px 5px 10px 15px;
91
92 ul.links {
93 margin: 0;
94 font-size: 24px;
95 line-height: 24px;
96 }
97
98 a {
99 color: #fff;
100 margin: 0;
101 }
102
103 a:hover {
104 color: #fff;
105 }
106
107 ul.tools li a.tool {
108 margin-right: 5px !important;
109 }
110
111 .reading-time {
112 display: inline-flex;
113 vertical-align: middle;
114 }
115 }
116
117 .card-entry-labels li,
118 .card-tag-labels li {
119 margin: 10px 10px 10px auto;
120 padding: 5px 12px 5px 16px !important;
121 background-color: $blueAccentColor;
122 border-radius: 0 3px 3px 0;
123 color: #fff;
124 cursor: default;
125 max-height: 2em;
126 overflow: hidden;
127 text-overflow: ellipsis;
128 white-space: nowrap;
129 }
130
131 .card-image {
132 height: 10em;
133 }
134
135 .card-fullimage {
136 height: 13.5em;
137 }
138
139 .card-image .preview,
140 .card-fullimage .preview {
141 height: 14em;
142 background: no-repeat 50%/cover;
143 }
144
145 &.sw {
146 max-width: 370px;
147 margin-left: auto;
148 margin-right: auto;
149 }
150}
151
152a.original {
153 text-overflow: ellipsis;
154 white-space: nowrap;
155 overflow: hidden;
156 display: block;
157}
158
159.card-entry-tags a,
160.card-entry-labels a,
161.card-tag-labels a,
162.card-entry-labels-hidden a,
163#list .chip a {
164 text-decoration: none;
165 font-weight: normal;
166 color: #fff;
167}
168
169.card-stacked {
170 &:hover ul.tools-list {
171 display: block;
172 }
173
174 ul.tools-list {
175 display: none;
176 }
177}
178
179.quickstart .card .card-action a,
180.quickstart .card .card-action a:hover {
181 color: #fff !important;
182}
183
184.settings .div_tabs {
185 padding-bottom: 15px;
186}
diff --git a/app/Resources/static/themes/material/css/entries.scss b/app/Resources/static/themes/material/css/entries.scss
new file mode 100644
index 00000000..b6a46a9e
--- /dev/null
+++ b/app/Resources/static/themes/material/css/entries.scss
@@ -0,0 +1,87 @@
1/* ==========================================================================
2 * Entries
3 * ========================================================================== */
4
5.results {
6 height: 1em;
7
8 .nb-results,
9 .pagination {
10 margin: 15px 15px 0;
11 }
12
13 .nb-results {
14 display: inline-flex;
15 }
16
17 a {
18 color: #444;
19 }
20}
21
22.pagination {
23 float: right;
24
25 ul {
26 margin: 0 !important;
27
28 .prev.disabled,
29 .next.disabled {
30 display: none;
31 }
32 }
33
34 li {
35 padding: 0;
36 }
37
38 a {
39 padding: 0 10px;
40 height: 30px;
41 display: block;
42 }
43
44 .disabled {
45 margin-right: 10px;
46 margin-left: 10px;
47 }
48
49 li.active span {
50 padding: 0 10px;
51 height: 30px;
52 display: block;
53 color: #fff;
54 }
55}
56
57.page-footer .footer-copyright {
58 min-width: 50px;
59 height: auto !important;
60 line-height: 1em !important;
61
62 p {
63 text-overflow: ellipsis;
64 white-space: nowrap;
65 overflow: hidden;
66 display: block;
67 }
68}
69
70.hidden {
71 display: none;
72}
73
74.picker__date-display {
75 display: none;
76}
77
78footer {
79 &.page-footer {
80 margin-top: 10px;
81 padding-top: 0;
82 }
83
84 .row {
85 margin-bottom: 10px;
86 }
87}
diff --git a/app/Resources/static/themes/material/css/filters.scss b/app/Resources/static/themes/material/css/filters.scss
new file mode 100644
index 00000000..299dad3d
--- /dev/null
+++ b/app/Resources/static/themes/material/css/filters.scss
@@ -0,0 +1,15 @@
1/* ==========================================================================
2 * Filters slider
3 * ========================================================================== */
4
5#filters {
6 button {
7 padding: 0;
8 width: 100%;
9 }
10
11 div.with-checkbox {
12 height: 3rem;
13 margin-top: 0;
14 }
15}
diff --git a/app/Resources/static/themes/material/css/fonts.scss b/app/Resources/static/themes/material/css/fonts.scss
new file mode 100644
index 00000000..743f1a84
--- /dev/null
+++ b/app/Resources/static/themes/material/css/fonts.scss
@@ -0,0 +1,13 @@
1/* ==========================================================================
2 * Fonts
3 * ========================================================================== */
4
5/**
6 * Icomoon
7 */
8@font-face {
9 font-family: icomoon;
10 src: url("~icomoon-free-npm/Font/IcoMoon-Free.ttf");
11 font-weight: normal;
12 font-style: normal;
13}
diff --git a/app/Resources/static/themes/material/css/icons.scss b/app/Resources/static/themes/material/css/icons.scss
new file mode 100644
index 00000000..268e6dca
--- /dev/null
+++ b/app/Resources/static/themes/material/css/icons.scss
@@ -0,0 +1,185 @@
1/* ==========================================================================
2 * Icons
3 * ========================================================================== */
4
5/**
6 *
7 * Material icons
8 *
9 */
10.material-icons {
11 font-family: 'Material Icons';
12 font-weight: normal;
13 font-style: normal;
14 font-size: 24px; /* Preferred icon size */
15 width: 1em;
16 height: 1em;
17 display: inline-block;
18 line-height: 1;
19 text-transform: none;
20 letter-spacing: normal;
21 word-wrap: normal;
22 white-space: nowrap;
23 direction: ltr;
24
25 /* Support for all WebKit browsers. */
26 -webkit-font-smoothing: antialiased;
27
28 /* Support for Safari and Chrome. */
29 text-rendering: optimizeLegibility;
30
31 /* Support for Firefox. */
32 -moz-osx-font-smoothing: grayscale;
33
34 /* Support for IE. */
35 font-feature-settings: 'liga';
36
37 .md-18 {
38 font-size: 18px;
39 }
40
41 .md-24 {
42 font-size: 24px;
43 }
44
45 .md-36 {
46 font-size: 36px;
47 }
48
49 .md-48 {
50 font-size: 48px;
51 }
52
53 .md-dark {
54 color: rgba(0, 0, 0, 0.54);
55
56 .md-inactive {
57 color: rgba(0, 0, 0, 0.26);
58 }
59 }
60
61 .md-light {
62 color: rgba(255, 255, 255, 1);
63
64 .md-inactive {
65 color: rgba(255, 255, 255, 0.3);
66 }
67 }
68}
69
70/**
71 *
72 * Icomoon icons
73 *
74 */
75[class^="icon-"]::before,
76[class*=" icon-"]::before {
77 font-family: icomoon;
78 speak: none;
79 font-style: normal;
80 font-weight: normal;
81 font-variant: normal;
82 text-transform: none;
83 line-height: 1;
84 background-size: 24px;
85
86 /* Enable Ligatures ================ */
87 letter-spacing: 0;
88 font-feature-settings: "liga";
89}
90
91.icon-eye::before {
92 content: "\e9ce";
93}
94
95.icon-no-eye::before {
96 content: "\e9d1";
97}
98
99.icon-calendar::before {
100 content: "\e953";
101}
102
103.icon-mail::before {
104 content: "\ea86";
105}
106
107.icon-time::before {
108 content: "\e952";
109}
110
111a.icon-image {
112 background-repeat: no-repeat;
113 padding-right: 0.4em !important;
114 padding-left: 1em !important;
115 margin-left: 25px;
116
117 &::before {
118 content: "";
119 display: block;
120 width: 24px;
121 height: 24px;
122 float: left;
123 margin: 0 6px 0 0;
124 }
125
126 &.carrot::before {
127 background: url("../../_global/img/icons/carrot-icon--black.png") no-repeat center/90%;
128 }
129
130 &.diaspora::before {
131 background: url("../../_global/img/icons/diaspora-icon--black.png") no-repeat center/80%;
132 }
133
134 &.unmark::before {
135 background: url("../../_global/img/icons/unmark-icon--black.png") no-repeat center/80%;
136 }
137
138 &.shaarli::before {
139 background: url("../../_global/img/icons/shaarli.png") no-repeat center/80%;
140 }
141}
142
143.icon-google-plus2::before {
144 content: "\ea89";
145}
146
147.icon-facebook2::before {
148 content: "\ea8d";
149}
150
151.icon-twitter::before {
152 content: "\ea96";
153}
154
155.icon-apple::before {
156 content: "\eabf";
157}
158
159.icon-android::before {
160 content: "\eac1";
161}
162
163.icon-chrome::before {
164 content: "\eae5";
165}
166
167.icon-firefox::before {
168 content: "\eae6";
169}
170
171.icon-link::before {
172 content: "\e9cb";
173}
174
175footer [class^="icon-"],
176footer [class*=" icon-"] {
177 font-size: 2em;
178 transition: text-shadow 0.2s ease;
179 padding-right: 10px;
180}
181
182footer [class^="icon-"]:hover,
183footer [class*=" icon-"]:hover {
184 text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
185}
diff --git a/app/Resources/static/themes/material/css/index.scss b/app/Resources/static/themes/material/css/index.scss
new file mode 100644
index 00000000..285a6504
--- /dev/null
+++ b/app/Resources/static/themes/material/css/index.scss
@@ -0,0 +1,17 @@
1@import 'variables';
2
3/* Style */
4@import 'article';
5@import 'cards';
6@import 'entries';
7@import 'filters';
8@import 'layout';
9@import 'nav';
10@import 'sidenav';
11@import 'various';
12
13/* Tools */
14@import 'fonts';
15@import 'icons';
16@import 'print';
17@import 'media_queries';
diff --git a/app/Resources/static/themes/material/css/layout.scss b/app/Resources/static/themes/material/css/layout.scss
new file mode 100755
index 00000000..8b8b06e6
--- /dev/null
+++ b/app/Resources/static/themes/material/css/layout.scss
@@ -0,0 +1,50 @@
1/* ==========================================================================
2 Layout
3 ========================================================================== */
4
5body {
6 display: flex;
7 min-height: 100vh;
8 flex-direction: column;
9 background: #fafafa;
10
11 &.login main {
12 padding: 0;
13 min-height: 100vh;
14 }
15}
16
17.border-bottom {
18 border-bottom: 1px solid #ddd;
19}
20
21nav,
22main,
23footer {
24 padding-left: 240px;
25}
26
27main,
28#content,
29.valign-wrapper {
30 height: 100%;
31}
32
33#main {
34 flex: 1 0 auto;
35
36 .logo {
37 a {
38 height: 100pt;
39 }
40
41 img {
42 height: 100pt;
43 width: 100pt;
44 }
45
46 &:hover {
47 background: transparent;
48 }
49 }
50}
diff --git a/app/Resources/static/themes/material/css/media_queries.scss b/app/Resources/static/themes/material/css/media_queries.scss
new file mode 100644
index 00000000..96f34494
--- /dev/null
+++ b/app/Resources/static/themes/material/css/media_queries.scss
@@ -0,0 +1,149 @@
1/* ==========================================================================
2 Media queries
3 ========================================================================== */
4
5@media only screen and (max-width: 992px) {
6 header,
7 main,
8 footer {
9 padding-left: 0;
10 }
11
12 nav,
13 main,
14 footer {
15 padding-left: 0;
16 }
17
18 .pagination {
19 width: auto;
20 }
21
22 .nav-panels .action {
23 padding-right: 0.75rem;
24 }
25
26 .nav-panel-buttom {
27 justify-content: space-around;
28 }
29
30 #article {
31 max-width: 35em;
32 margin-left: auto;
33 margin-right: auto;
34 font-size: 18px;
35
36 > header > h1 {
37 font-size: 1.33em;
38 }
39 }
40
41 .reader-mode {
42 width: 240px !important;
43
44 span {
45 opacity: 1;
46 }
47 }
48
49 .tabs {
50 display: inline-block;
51 height: auto;
52 }
53
54 .tab {
55 min-width: 100%;
56 }
57
58 .indicator {
59 display: none;
60 }
61
62 .pagination li.prev,
63 .pagination li.next {
64 width: auto;
65 }
66
67 .drag-target + .drag-target {
68 height: 50%;
69 }
70
71 .drag-target + .drag-target + .drag-target {
72 top: 50%;
73 }
74}
75
76@media only screen and (min-width: 1200px) and (max-width: 1650px) {
77 .row .col.l3 {
78 width: 33.33333%;
79 margin-left: 0;
80 }
81}
82
83@media only screen and (min-width: 993px) and (max-width: 1200px) {
84 .row {
85 .col.l1 {
86 width: 25%;
87 margin-left: 0;
88 }
89
90 .col.l2 {
91 width: 33.33333%;
92 margin-left: 0;
93 }
94
95 .col.l3 {
96 width: 41.66667%;
97 margin-left: 0;
98 }
99
100 .col.l4 {
101 width: 50%;
102 margin-left: 0;
103 }
104
105 .col.l5 {
106 width: 58.33333%;
107 margin-left: 0;
108 }
109
110 .col.l6 {
111 width: 66.66667%;
112 margin-left: 0;
113 }
114
115 .col.l7 {
116 width: 75%;
117 margin-left: 0;
118 }
119
120 .col.l8 {
121 width: 83.33333%;
122 margin-left: 0;
123 }
124
125 .col.l9 {
126 width: 91.66667%;
127 margin-left: 0;
128 }
129
130 .col.l10 {
131 width: 100%;
132 margin-left: 0;
133 }
134 }
135}
136
137@media only screen and (max-width: 350px) {
138 .nb-results {
139 display: none;
140 }
141
142 main ul.row {
143 padding: 0;
144 }
145
146 .row .col {
147 padding: 0;
148 }
149}
diff --git a/app/Resources/static/themes/material/css/nav.scss b/app/Resources/static/themes/material/css/nav.scss
new file mode 100644
index 00000000..1a25a5be
--- /dev/null
+++ b/app/Resources/static/themes/material/css/nav.scss
@@ -0,0 +1,106 @@
1
2/* ==========================================================================
3 Nav
4 ========================================================================== */
5
6nav {
7 height: auto;
8
9 input {
10 color: #aaa;
11 }
12
13 ul a:hover {
14 background-color: initial;
15 }
16}
17
18.nav-wrapper {
19 display: flex;
20 flex-wrap: wrap;
21 justify-content: space-between;
22 min-height: 64px;
23
24 .button-collapse {
25 padding: 0 15px;
26 }
27}
28
29.nav-input {
30 display: none;
31}
32
33.nav-panel-buttom {
34 display: flex;
35 flex-grow: 1;
36 justify-content: flex-end;
37
38 li {
39 max-height: 64px;
40 }
41}
42
43.nav-panel-add .add,
44.nav-panel-search .search,
45.nav-panels .close {
46 color: #444 !important;
47}
48
49.nav-panels {
50 transition: background 0.2s ease;
51
52 .action {
53 padding-left: 0.75rem;
54 font-size: 2.1rem;
55 white-space: nowrap;
56 }
57
58 .input-field input {
59 display: block;
60 line-height: inherit;
61 padding-left: 4rem !important;
62 width: calc(100% - 8rem);
63 height: 4.1rem;
64 }
65
66 .input-field input:focus {
67 background-color: #fff;
68 border: 0;
69 box-shadow: none;
70 color: #444;
71 }
72}
73
74.input-field {
75 &.nav-panel-add label,
76 &.nav-panel-search label {
77 left: 1rem;
78 }
79
80 &.nav-panel-add .close,
81 &.nav-panel-search .close {
82 position: absolute;
83 top: 0;
84 right: 1rem;
85 color: transparent;
86 cursor: pointer;
87 font-size: 2rem;
88 transition: 0.3s color;
89 }
90
91 &.nav-panel-add,
92 &.nav-panel-add form,
93 &.nav-panel-search,
94 &.nav-panel-search form {
95 display: flex;
96 flex: 1;
97 }
98}
99
100#button_filters {
101 display: none;
102}
103
104#button_export {
105 display: none;
106}
diff --git a/app/Resources/static/themes/material/css/print.css b/app/Resources/static/themes/material/css/print.scss
index 98505aae..967a8c2b 100755
--- a/app/Resources/static/themes/material/css/print.css
+++ b/app/Resources/static/themes/material/css/print.scss
@@ -64,11 +64,8 @@
64 64
65 #main { 65 #main {
66 width: 100%; 66 width: 100%;
67 padding: 0;
68 margin: 0; 67 margin: 0;
69 margin-left: 0; 68 padding: 0;
70 padding-right: 0;
71 padding-bottom: 0;
72 } 69 }
73 70
74 #article { 71 #article {
diff --git a/app/Resources/static/themes/material/css/sidenav.scss b/app/Resources/static/themes/material/css/sidenav.scss
new file mode 100644
index 00000000..b430077e
--- /dev/null
+++ b/app/Resources/static/themes/material/css/sidenav.scss
@@ -0,0 +1,41 @@
1/* ==========================================================================
2 Side-nav
3 ========================================================================== */
4
5.side-nav {
6 width: 240px;
7
8 li {
9 padding: 0;
10 }
11
12 a {
13 margin: 0 1rem;
14 }
15
16 &.fixed a {
17 font-size: 13px;
18 line-height: 44px;
19 height: 44px;
20 }
21
22 .collapsible-header,
23 &.fixed .collapsible-header {
24 height: 45px;
25 line-height: 44px;
26 padding: 0 20px;
27 }
28
29 > li.logo {
30 line-height: 0;
31 text-align: center;
32 }
33}
34
35.bold > a {
36 font-weight: bold;
37}
38
39span.numberItems {
40 float: right;
41}
diff --git a/app/Resources/static/themes/material/css/variables.scss b/app/Resources/static/themes/material/css/variables.scss
new file mode 100644
index 00000000..25e22aca
--- /dev/null
+++ b/app/Resources/static/themes/material/css/variables.scss
@@ -0,0 +1,5 @@
1/* ==========================================================================
2 Variables
3 ========================================================================== */
4
5$blueAccentColor: rgba(0, 151, 167, 0.85);
diff --git a/app/Resources/static/themes/material/css/various.scss b/app/Resources/static/themes/material/css/various.scss
new file mode 100644
index 00000000..6a6f52f9
--- /dev/null
+++ b/app/Resources/static/themes/material/css/various.scss
@@ -0,0 +1,24 @@
1/* ==========================================================================
2 * Various
3 * ========================================================================== */
4
5div.settings div.file-field {
6 /* force height on non-input field in the settings page */
7 div,
8 ul {
9 margin-top: 40px;
10 }
11
12 /* but avoid to kill all file input */
13 div {
14 margin-top: inherit;
15 }
16}
17
18.input-field label.active {
19 font-size: 1rem;
20}
21
22nav .input-field input {
23 margin: 0;
24}