Browse Source

Take a stab at the light theme

Luke Murphy 4 months ago
parent
commit
2d64f7e173
No account linked to committer's email address
3 changed files with 182 additions and 33 deletions
  1. 7
    1
      custom_overlay.css
  2. 163
    27
      custom_portal.css
  3. 12
    5
      custom_portal.js

+ 7
- 1
custom_overlay.css View File

@@ -12,6 +12,12 @@
12 12
  likely break app's rendering
13 13
 ===============================================================================
14 14
 */
15
+
15 16
 #ynh-overlay-switch {
16
-  background-image: url("./cashew.png");
17
+  background-color: #eee;
18
+}
19
+
20
+#ynh-overlay-switch:hover {
21
+  border-color: #ccc;
22
+  background-color: #ccc;
17 23
 }

+ 163
- 27
custom_portal.css View File

@@ -5,39 +5,175 @@
5 5
 ===============================================================================
6 6
 */
7 7
 
8
-/* Make page texts black */
9
-.user-container h2,
10
-.user-container small,
11
-.user-container .user-mail,
12
-.user-container .user-mail,
13
-.content .footer a,
14
-a.app-tile,
15
-#ynh-logout {
16
-  color: black !important;
8
+body {
9
+   background: #fff;
17 10
 }
18 11
 
19
-.ynh-user-portal {
20
-  background-image: url("background.jpg");
21
-  background-repeat: no-repeat;
22
-  background-size: cover;
23
-  width: 100%;
24
-  height: 100%;
12
+#ynh-logo {
13
+  background-image: url("cashew.png");
25 14
 }
26 15
 
27
-/* Apps colors */
28
-.app-tile {
29
-  background-color: rgba(255, 255, 255, 0.5) !important;
16
+.login-form .form-group {
17
+  border: 1px solid #bbb;
30 18
 }
31 19
 
32
-.app-tile:hover:after,
33
-.app-tile:focus:after,
34
-.app-tile:hover:before,
35
-.app-tile:focus:before {
36
-    background: rgba(255, 255, 255, 0.5) !important;
20
+.user-container,
21
+.user-menu a,
22
+.link-btn,
23
+.footer a {
24
+   color: #555;
37 25
 }
38 26
 
39
-/* Use a custom logo image */
40
-#ynh-logo {
41
-  z-index: 10;
42
-  background-image: url("./cashew.png");
27
+.user-menu a:hover,
28
+.footer a:hover {
29
+   color: #000;
30
+}
31
+
32
+.form-text:disabled:hover {
33
+   background: #797b83;
34
+}
35
+
36
+.link-btn,
37
+.link-btn:hover {
38
+   background: none;
39
+}
40
+
41
+
42
+.bluebg {
43
+    background: #3498DB!important;
44
+}
45
+.bluebg:hover:after,
46
+.bluebg:focus:after,
47
+.bluebg:hover:before,
48
+.bluebg:focus:before {
49
+    background: #16527A!important;
50
+}
51
+
52
+.purplebg {
53
+    background: #9B59B6!important;
54
+}
55
+.purplebg:hover:after,
56
+.purplebg:focus:after,
57
+.purplebg:hover:before,
58
+.purplebg:focus:before {
59
+    background: #532C64!important;
60
+}
61
+
62
+.redbg {
63
+    background: #E74C3C!important;
64
+}
65
+.redbg:hover:after,
66
+.redbg:focus:after,
67
+.redbg:hover:before,
68
+.redbg:focus:before {
69
+    background: #921E12!important;
70
+}
71
+
72
+.orangebg {
73
+    background: #F39C12!important;
74
+}
75
+.orangebg:hover:after,
76
+.orangebg:focus:after,
77
+.orangebg:hover:before,
78
+.orangebg:focus:before {
79
+    background: #7F5006!important;
80
+}
81
+
82
+.greenbg {
83
+    background: #2ECC71!important;
84
+}
85
+.greenbg:hover:after,
86
+.greenbg:focus:after,
87
+.greenbg:hover:before,
88
+.greenbg:focus:before {
89
+    background: #176437!important;
90
+}
91
+
92
+.darkbluebg {
93
+    background: #34495E!important;
94
+}
95
+.darkbluebg:hover:after,
96
+.darkbluebg:focus:after,
97
+.darkbluebg:hover:before,
98
+.darkbluebg:focus:before {
99
+    background: #07090C!important;
100
+}
101
+
102
+.lightbluebg {
103
+    background: #6A93D4!important;
104
+}
105
+.lightbluebg:hover:after,
106
+.lightbluebg:focus:after,
107
+.lightbluebg:hover:before,
108
+.lightbluebg:focus:before {
109
+    background: #2B5394!important;
110
+}
111
+
112
+.yellowbg {
113
+    background: #F1C40F!important;
114
+}
115
+.yellowbg:hover:after,
116
+.yellowbg:focus:after,
117
+.yellowbg:hover:before,
118
+.yellowbg:focus:before {
119
+    background: #796307!important;
120
+}
121
+
122
+
123
+.lightpinkbg {
124
+    background: #F76F87!important;
125
+}
126
+.lightpinkbg:hover:after,
127
+.lightpinkbg:focus:after,
128
+.lightpinkbg:hover:before,
129
+.lightpinkbg:focus:before {
130
+    background: #DA0C31!important;
131
+}
132
+
133
+/* Following colors are not used yet */
134
+.pinkbg {
135
+    background: #D66D92!important;
136
+}
137
+.pinkbg:hover:after,
138
+.pinkbg:focus:after,
139
+.pinkbg:hover:before,
140
+.pinkbg:focus:before {
141
+    background: #992B52!important;
142
+}
143
+
144
+.turquoisebg {
145
+    background: #1ABC9C!important;
146
+}
147
+.turquoisebg:hover:after,
148
+.turquoisebg:focus:after,
149
+.turquoisebg:hover:before,
150
+.turquoisebg:focus:before {
151
+    background: #0B4C3F!important;
152
+}
153
+.lightyellow {
154
+    background: #FFC973!important;
155
+}
156
+.lightyellow:hover:after,
157
+.lightyellow:focus:after,
158
+.lightyellow:hover:before,
159
+.lightyellow:focus:before {
160
+    background: #F39500!important;
161
+}
162
+.lightgreen {
163
+    background: #B5F36D!important;
164
+}
165
+.lightgreen:hover:after,
166
+.lightgreen:focus:after,
167
+.lightgreen:hover:before,
168
+.lightgreen:focus:before {
169
+    background: #77CF11!important;
170
+}
171
+.purpledarkbg {
172
+    background: #8E44AD!important;
173
+}
174
+.purpledarkbg:hover:after,
175
+.purpledarkbg:focus:after,
176
+.purpledarkbg:hover:before,
177
+.purpledarkbg:focus:before {
178
+    background: #432051!important;
43 179
 }

+ 12
- 5
custom_portal.js View File

@@ -10,16 +10,23 @@
10 10
 ===============================================================================
11 11
 */
12 12
 
13
-/*
14
- * Monkeypatch init_portal to customize the app tile style
15
- *
13
+var app_tile_colors = ['redbg','purpledarkbg','darkbluebg','orangebg','greenbg', 'yellowbg','lightpinkbg','pinkbg','turquoisebg','lightbluebg', 'bluebg'];
14
+
15
+function set_app_tile_style(el)
16
+{
17
+    // Select a color value from the App label
18
+    randomColorNumber = parseInt(el.textContent, 36) % app_tile_colors.length;
19
+    // Add color class.
20
+    el.classList.add(app_tile_colors[randomColorNumber]);
21
+}
22
+
23
+// Monkeypatch init_portal to customize the app tile style
16 24
 init_portal_original = init_portal;
17 25
 init_portal = function()
18 26
 {
19 27
     init_portal_original();
20
-    // Some stuff here
28
+    Array.each(document.getElementsByClassName("app-tile"), set_app_tile_style);
21 29
 }
22
-*/
23 30
 
24 31
 /*
25 32
  * Monkey patching example to do custom stuff when loading inside an app

Loading…
Cancel
Save