Repository navigation
Theming: coloring of folders and log in background #378
Description
Also I think, that on login page we should use CSS color filter to color the picture on background. Of course, this feature should work only with default background.
I think it's easy to realise, just convert RGB hex code to HSV and then use three CSS tricks:
hue-rotate(0deg);
brightness(0%);
contrast(0%);
Activity
[-]Theming: Color of some elements on the page[/-][+]Theming: Color of some elements on the page and background[/+]Bugsbane commentedon Jul 12, 2016
I agree on having the element accent color either continue to match the header color when changed, or have its own color picker.
Tinting the login background image is an interesting idea, although I'd place it way down the list of theming priorities after things like switching all of the white text everywhere to black when the lightness of the chosen header CSS color goes above a certain lightness level, making it hard to read (eg white header color with white text)
juliusknorr commentedon Jul 12, 2016
Changing white text to black text could also be triggered automatically. You can take the lightness of the chosen theme color and define a limit to switch the text color, e.g. lightness of color > 0.5 -> dark text.
Then we could avoid adding another configuration option.
schiessle commentedon Jul 12, 2016
do you want to provide a pull request? Would be great! 😃
juliusknorr commentedon Jul 12, 2016
Sure, but it may take a while, possibly at the end of the next week.
schiessle commentedon Jul 12, 2016
Great! No need to rush... Looking forward to your pull request!
jancborchardt commentedon Jul 15, 2016
@Lord-Protector yeah, great points! I also thought about tinting the background image via CSS. Do you want to prepare a pull request for that maybe? We just need to take care that it works in all browsers.
Also I’d leave the normal blue background by default and only use that method for theming to avoid a flash of white when loading.
Regarding the folder icons and checkmarks, we have to somehow mess with the SVG. Since the new version will remove the PNG fallback that’s a lot easier. @Lord-Protector do you know how to do that?
juliusknorr commentedon Jul 15, 2016
Checkboxes even work without messing around with the SVG. (see #415)
We could use mask-image CSS to colorize the folder icons, but that is still not supported in IE/Edge.
savely-krasovsky commentedon Jul 15, 2016
@jancborchardt sorry, I am not a programmer. May be a little bit as hobby.
But I can help with some graphic stuff (mockups, icons, logos etc).
jancborchardt commentedon Jul 18, 2016
@juliushaertl awesome, great work! :) Good to have you on the Design team.
Why is it not possible there – aren’t they also SVG?
But yeah, we can use mask-image, it will just be a nice enhancement which is available in most browsers but not Edge.
juliusknorr commentedon Jul 18, 2016
@jancborchardt Thanks!
I thought about generating SVGs dynamically by replacing the contained color value in mind when you talked about 'messing' with the SVG. 😄
Yeah, if support for Edge isn't that important for this specific feature, than using mask-image would be a good solution to solve this.
[-]Theming: Color of some elements on the page and background[/-][+]Theming: coloring of folders and log in background[/+]jancborchardt commentedon Jul 28, 2016
Changed the title of this since the checkboxes are basically fixed by #415 – @Lord-Protector would be nice if you can review it since you opened the issue. ;)
Brahmachari commentedon Sep 7, 2016
Great! Thanks to all.
Don't forget the status bar (displayed while uploading a file)
core/css/jquery-ui-fixes.css
.ui-widget-header {border: 1px solid #0082c9; background: #0082c9; color: #ffffff;}
jancborchardt commentedon Sep 13, 2016
@Brahmachari I think this is fixed in latest master (cc @juliushaertl)
juliusknorr commentedon Sep 14, 2016
@Brahmachari
@jancborchardt is right. This has been fixed in #771
juliusknorr commentedon Nov 18, 2016
Fixed with #840
jancborchardt commentedon Nov 21, 2016
Big thanks to our theming guru @juliushaertl! :) 🎉
Build(deps-dev): Bump webpack from 5.89.0 to 5.94.0 (nextcloud#378)