![[site community profile]](https://www.dreamwidth.org/img/comm_staff.png){kind=small}
[dw-free] Funky Circles: create new color props for easier customizing + correct some colors
[commit: http://hg.dwscoalition.org/dw-free/rev/d1428ccce103]
http://bugs.dwscoalition.org/show_bug.cgi?id=2942
Add new (non-userfacing) properties for shadows, for easier themability.
Tweak colors for empty days in calendars and the search module.
Patch by![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
ninetydegrees.
Files modified:
http://bugs.dwscoalition.org/show_bug.cgi?id=2942
Add new (non-userfacing) properties for shadows, for easier themability.
Tweak colors for empty days in calendars and the search module.
Patch by
ninetydegrees.Files modified:
- bin/upgrading/s2layers/funkycircles/layout.s2
- bin/upgrading/s2layers/funkycircles/themes.s2
- cgi-bin/LJ/S2Theme/funkycircles.pm
--------------------------------------------------------------------------------
diff -r 67f528165b9a -r d1428ccce103 bin/upgrading/s2layers/funkycircles/layout.s2
--- a/bin/upgrading/s2layers/funkycircles/layout.s2 Thu Oct 14 13:17:56 2010 +0800
+++ b/bin/upgrading/s2layers/funkycircles/layout.s2 Thu Oct 14 13:25:45 2010 +0800
@@ -49,8 +49,32 @@ propgroup colors_child {
property Color color_entry_footer_link_hover { des = "Entry footer hover link color"; }
property Color color_entry_footer_link_visited { des = "Entry footer visited link color"; }
property Color color_entry_footer_border { des = "Entry footer border color"; }
+ property Color color_specificmodule_background {
+ des ="Calendar and Search modules background color";
+ note= "Used when day has no entries and for the search button.";
+ }
+ property Color color_specificmodule_text { des ="Calendar and Search modules text color"; }
+ property Color color_specificmodule_background_alt {
+ des ="Calendar and Search modules alternative background color";
+ note= "Used when day has entries and for the search text field.";
+ }
+ property Color color_specificmodule_text_alt { des ="Calendar and Search modules alternative text color"; }
+ property Color color_specificmodule_background_hover { des ="Calendar and Search modules hover background color"; }
+ property Color color_specificmodule_text_hover { des ="Calendar and Search modules hover text color"; }
+ property Color color_specificmodule_background_visited { des ="Calendar and Search modules visited background color"; }
+ property Color color_specificmodule_text_visited { des ="Calendar and Search modules visited text color"; }
+ property Color color_shadow {
+ des ="Shadow color";
+ noui = 1;
+ }
+ property Color color_shadow_alt {
+ des ="Shadow alternative color";
+ noui = 1;
+ }
}
+set color_shadow = "#111";
+set color_shadow_alt = "#8c8c8c";
##===============================
## Misc
@@ -221,10 +245,10 @@ q { font-style: italic;
background-position: 100% 0%;
padding: 0;
padding-bottom: 1.65em;
- box-shadow: -.667em .067em .667em #111;
- -moz-box-shadow: -.667em .067em .667em #111;
- -webkit-box-shadow: -.667em .067em .667em #111;
- -khtml-box-shadow: -.667em .067em .667em #111;
+ box-shadow: -.667em .067em .667em $*color_shadow;
+ -moz-box-shadow: -.667em .067em .667em $*color_shadow;
+ -webkit-box-shadow: -.667em .067em .667em $*color_shadow;
+ -khtml-box-shadow: -.667em .067em .667em $*color_shadow;
}
#header .inner {
@@ -244,10 +268,10 @@ h1#title {
padding: 1.1em .5em;
text-transform: uppercase;
word-spacing: .167em;
- box-shadow: inset -.667em .067em .667em #111;
- -moz-box-shadow: inset -.667em .067em .667em #111;
- -webkit-box-shadow: -.667em .067em .667em #111;
- -khtml-box-shadow: -.667em .067em .667em #111;
+ box-shadow: inset -.667em .067em .667em $*color_shadow;
+ -moz-box-shadow: inset -.667em .067em .667em $*color_shadow;
+ -webkit-box-shadow: -.667em .067em .667em $*color_shadow;
+ -khtml-box-shadow: -.667em .067em .667em $*color_shadow;
}
h2#subtitle,
@@ -442,10 +466,10 @@ h2#pagetitle {
border-left: none;
border-right: none;
margin-bottom: 1em;
- box-shadow: .067em .067em .667em #111;
- -moz-box-shadow: .067em .067em .667em #111;
- -webkit-box-shadow: .667em .067em .667em #111;
- -khtml-box-shadow: .667em .067em .667em #111;
+ box-shadow: .067em .067em .667em $*color_shadow;
+ -moz-box-shadow: .067em .067em .667em $*color_shadow;
+ -webkit-box-shadow: .667em .067em .667em $*color_shadow;
+ -khtml-box-shadow: .667em .067em .667em $*color_shadow;
}
.comment-wrapper.partial {
@@ -595,10 +619,10 @@ h2#pagetitle {
.comment .contents .userpic {
background-color: $*color_entry_userpic_border;
padding: .7em;
- box-shadow: .067em .067em .2em #111;
- -moz-box-shadow: .067em .067em .2em #111;
- -webkit-box-shadow: .067em .067em .2em #111;
- -khtml-box-shadow: .067em .067em .2em #111;
+ box-shadow: .067em .067em .2em $*color_shadow;
+ -moz-box-shadow: .067em .067em .2em $*color_shadow;
+ -webkit-box-shadow: .067em .067em .2em $*color_shadow;
+ -khtml-box-shadow: .067em .067em .2em $*color_shadow;
}
@@ -726,10 +750,10 @@ h2#pagetitle {
$entry_footer_colors
padding: 0 .5em;
text-align: right;
- box-shadow: .067em .067em .667em #111;
- -moz-box-shadow: .067em .067em .667em #111;
- -webkit-box-shadow: .067em .067em .667em #111;
- -khtml-box-shadow: .067em .067em .667em #111;
+ box-shadow: .067em .067em .667em $*color_shadow;
+ -moz-box-shadow: .067em .067em .667em $*color_shadow;
+ -webkit-box-shadow: .067em .067em .667em $*color_shadow;
+ -khtml-box-shadow: .067em .067em .667em $*color_shadow;
}
.page-tags .tags-container .manage-tags-link {
@@ -887,10 +911,10 @@ h2#pagetitle {
.page-reply #postform {
$entry_footer_colors
padding: .5em;
- box-shadow: .067em .067em .667em #111;
- -moz-box-shadow: .067em .067em .667em #111;
- -webkit-box-shadow: .067em .067em .667em #111;
- -khtml-box-shadow: .067em .067em .667em #111;
+ box-shadow: .067em .067em .667em $*color_shadow;
+ -moz-box-shadow: .067em .067em .667em $*color_shadow;
+ -webkit-box-shadow: .067em .067em .667em $*color_shadow;
+ -khtml-box-shadow: .067em .067em .667em $*color_shadow;
}
.page-reply #postform a {
@@ -977,10 +1001,10 @@ h2#pagetitle {
.module-userprofile .userpic img {
background-color: $*color_header_background;
padding: .7em;
- box-shadow: .067em .067em .2em #111;
- -moz-box-shadow: .067em .067em .2em #111;
- -webkit-box-shadow: .067em .067em .2em #111;
- -khtml-box-shadow: .067em .067em .2em #111;
+ box-shadow: .067em .067em .2em $*color_shadow;
+ -moz-box-shadow: .067em .067em .2em $*color_shadow;
+ -webkit-box-shadow: .067em .067em .2em $*color_shadow;
+ -khtml-box-shadow: .067em .067em .2em $*color_shadow;
}
.module-userprofile .userlite-interaction-links li {
@@ -1002,39 +1026,44 @@ h2#pagetitle {
}
.module-calendar td.empty-day {
- background-color: $*color_page_title_background;
- color: $*color_entry_footer_link !important;
- box-shadow: .067em .067em .134em #111;
- -moz-box-shadow: .067em .067em .134em #111;
- -webkit-box-shadow: .067em .067em .134em #111;
- -khtml-box-shadow: .067em .067em .134em #111;
+ background-color: $*color_specificmodule_background;
+ color: $*color_specificmodule_text !important;
+ box-shadow: .067em .067em .134em $*color_shadow;
+ -moz-box-shadow: .067em .067em .134em $*color_shadow;
+ -webkit-box-shadow: .067em .067em .134em $*color_shadow;
+ -khtml-box-shadow: .067em .067em .134em $*color_shadow;
}
.module-calendar td.entry-day {
- background-color: $*color_entry_border;
- box-shadow: .067em .067em .134em #8c8c8c;
- -moz-box-shadow: .067em .067em .134em #8c8c8c;
- -webkit-box-shadow: .067em .067em .134em #8c8c8c;
- -khtml-box-shadow: .067em .067em .134em #8c8c8c;
+ background-color: $*color_specificmodule_background_alt;
+ box-shadow: .067em .067em .134em $*color_shadow_alt;
+ -moz-box-shadow: .067em .067em .134em $*color_shadow_alt;
+ -webkit-box-shadow: .067em .067em .134em $*color_shadow_alt;
+ -khtml-box-shadow: .067em .067em .134em $*color_shadow_alt;
}
.module-calendar td.entry-day a {
- color: $*color_entry_background !important;
+ color: $*color_specificmodule_text_alt !important;
padding: 0;
}
- .module-calendar td.entry-day:hover {
- background-color: $*color_entry_background;
+ .module-calendar td.entry-day:visited {
+ background-color: $*color_specificmodule_background_visited;
}
+ .module-calendar td.entry-day:hover {
+ background-color: $*color_specificmodule_background_hover;
+ }
+
+ .module-calendar td.entry-day:visited > a,
.module-calendar td.entry-day a:visited {
- color: $*color_entry_footer_link !important;
+ color: $*color_specificmodule_text_visited !important;
text-decoration: none !important;
}
.module-calendar td.entry-day:hover > a,
.module-calendar td.entry-day a:hover {
- color: $*color_entry_text !important;
+ color: $*color_specificmodule_text_hover !important;
text-decoration: none !important;
}
@@ -1061,23 +1090,28 @@ h2#pagetitle {
}
.module-search .search-box {
- background-color: $*color_entry_border;
- color: $*color_entry_background;
+ background-color: $*color_specificmodule_background_alt;
+ color: $*color_specificmodule_text_alt;
width: 90%;
- box-shadow: .067em .067em .134em #8c8c8c;
- -moz-box-shadow: .067em .067em .134em #8c8c8c;
- -webkit-box-shadow: .067em .067em .134em #8c8c8c;
- -khtml-box-shadow: .067em .067em .134em #8c8c8c;
+ box-shadow: .067em .067em .134em $*color_shadow_alt;
+ -moz-box-shadow: .067em .067em .134em $*color_shadow_alt;
+ -webkit-box-shadow: .067em .067em .134em $*color_shadow_alt;
+ -khtml-box-shadow: .067em .067em .134em $*color_shadow_alt;
}
.module-search .search-button {
- background-color: $*color_page_title_background;
- color: $*color_entry_footer_link;
+ background-color: $*color_specificmodule_background;
+ color: $*color_specificmodule_text;
margin-top: .3em;
- box-shadow: .067em .067em .134em #111;
- -moz-box-shadow: .067em .067em .134em #111;
- -webkit-box-shadow: .067em .067em .134em #111;
- -khtml-box-shadow: .067em .067em .134em #111;
+ box-shadow: .067em .067em .134em $*color_shadow;
+ -moz-box-shadow: .067em .067em .134em $*color_shadow;
+ -webkit-box-shadow: .067em .067em .134em $*color_shadow;
+ -khtml-box-shadow: .067em .067em .134em $*color_shadow;
+ }
+
+.module-search .search-button:hover {
+ background-color: $*color_specificmodule_background_hover;
+ color: $*color_specificmodule_text_hover;
}
/* Footer
diff -r 67f528165b9a -r d1428ccce103 bin/upgrading/s2layers/funkycircles/themes.s2
--- a/bin/upgrading/s2layers/funkycircles/themes.s2 Thu Oct 14 13:17:56 2010 +0800
+++ b/bin/upgrading/s2layers/funkycircles/themes.s2 Thu Oct 14 13:25:45 2010 +0800
@@ -52,6 +52,14 @@ set color_entry_userpic_border = "#080E1
set color_module_text = "#fff";
set color_module_title = "#fff";
+set color_specificmodule_background = "#080E13";
+set color_specificmodule_background_alt = "#ff863b";
+set color_specificmodule_background_hover = "#fff";
+set color_specificmodule_background_visited = "#ff863b";
+set color_specificmodule_text = "#fff";
+set color_specificmodule_text_alt = "#000";
+set color_specificmodule_text_hover = "#000";
+set color_specificmodule_text_visited = "#21232b";
##===============================
## Images
@@ -67,30 +75,6 @@ set image_module_list = "funkycircles/at
set image_module_list = "funkycircles/atomicorange-modulebullet.png";
set image_module_list_active = "funkycircles/atomicorange-modulebulletactive.png";
set image_module_list_hover = "funkycircles/atomicorange-modulebullethover.png";
-
-function Page::print_theme_stylesheet() {
- """
- .module-calendar td.empty-day,
- .module-search .search-button {
- background-color: $*color_header_background;
- }
-
- .module-calendar td.entry-day a,
- .module-search .search-box {
- color: $*color_page_subtitle !important;
- }
-
- .module-calendar td.entry-day a:visited {
- color: $*color_page_background !important;
- text-decoration: none !important;
- }
-
- .module-calendar td.entry-day:hover > a,
- .module-calendar td.entry-day a:hover {
- color: $*color_entry_text !important;
- }
- """;
-}
#NEWLAYER: funkycircles/chocolaterose
@@ -147,6 +131,14 @@ set color_entry_userpic_border = "#16130
set color_module_text = "#fff";
set color_module_title = "#fff";
+set color_specificmodule_background = "#362C2A";
+set color_specificmodule_background_alt = "#B35B6B";
+set color_specificmodule_background_hover = "#fff";
+set color_specificmodule_background_visited = "#B35B6B";
+set color_specificmodule_text = "#fff";
+set color_specificmodule_text_alt = "#fff";
+set color_specificmodule_text_hover = "#000";
+set color_specificmodule_text_visited = "#DAD1CF";
##===============================
## Images
@@ -217,6 +209,14 @@ set color_entry_userpic_border = "#10142
set color_module_text = "#fff";
set color_module_title = "#fff";
+set color_specificmodule_background = "#19243c";
+set color_specificmodule_background_alt = "#6c778e";
+set color_specificmodule_background_hover = "#fff";
+set color_specificmodule_background_visited = "#6c778e";
+set color_specificmodule_text = "#fff";
+set color_specificmodule_text_alt = "#fff";
+set color_specificmodule_text_hover = "#000";
+set color_specificmodule_text_visited = "#C8C8C8";
##===============================
## Images
@@ -288,6 +288,14 @@ set color_entry_userpic_border = "#211F2
set color_module_text = "#fff";
set color_module_title = "#fff";
+set color_specificmodule_background = "#24203D";
+set color_specificmodule_background_alt = "#696580";
+set color_specificmodule_background_hover = "#fff";
+set color_specificmodule_background_visited = "#696580";
+set color_specificmodule_text = "#fff";
+set color_specificmodule_text_alt = "#fff";
+set color_specificmodule_text_hover = "#000";
+set color_specificmodule_text_visited = "#B8B8B8";
##===============================
## Images
@@ -359,6 +367,14 @@ set color_entry_userpic_border = "#1b1f1
set color_module_text = "#fff";
set color_module_title = "#fff";
+set color_specificmodule_background = "#283723";
+set color_specificmodule_background_alt = "#F3CE97";
+set color_specificmodule_background_hover = "#fff";
+set color_specificmodule_background_visited = "#F3CE97";
+set color_specificmodule_text = "#fff";
+set color_specificmodule_text_alt = "#000";
+set color_specificmodule_text_hover = "#000";
+set color_specificmodule_text_visited = "#283723";
##===============================
## Images
@@ -374,24 +390,6 @@ set image_module_list = "funkycircles/ea
set image_module_list = "funkycircles/earthygreen-modulebullet.png";
set image_module_list_active = "funkycircles/earthygreen-modulebulletactive.png";
set image_module_list_hover = "funkycircles/earthygreen-modulebullethover.png";
-
-function Page::print_theme_stylesheet() {
- """
- .module-calendar td.entry-day a,
- .module-search .search-box {
- color: $*color_entry_text !important;
- }
-
- .module-calendar td.entry-day a:visited {
- color: $*color_page_title_background !important;
- }
-
- .module-calendar td.entry-day:hover > a,
- .module-calendar td.entry-day a:hover {
- color: $*color_entry_text !important;
- }
- """;
-}
#NEWLAYER: funkycircles/industrialpink
@@ -418,6 +416,8 @@ set color_footer_link = "#E4E9E8";
set color_footer_link = "#E4E9E8";
set color_footer_link_hover = "#ff0";
set color_footer_link_visited = "#FFC3FF";
+
+set color_shadow_alt = "#444";
##===============================
## Entry Colors
@@ -446,6 +446,14 @@ set color_entry_userpic_border = "#222";
set color_module_text = "#fff";
set color_module_title = "#fff";
+set color_specificmodule_background = "#4B4C4F";
+set color_specificmodule_background_alt = "#FFFF00";
+set color_specificmodule_background_hover = "#111";
+set color_specificmodule_background_visited = "#FFFF00";
+set color_specificmodule_text = "#fff";
+set color_specificmodule_text_alt = "#111";
+set color_specificmodule_text_hover = "#fff";
+set color_specificmodule_text_visited = "#626666";
##===============================
## Images
@@ -461,28 +469,6 @@ set image_module_list = "funkycircles/in
set image_module_list = "funkycircles/industrialpink-modulebullet.png";
set image_module_list_active = "funkycircles/industrial-modulebulletactive.png";
set image_module_list_hover = "funkycircles/industrial-modulebullethover.png";
-
-function Page::print_theme_stylesheet() {
- """
- .module-calendar td.entry-day,
- .module-search .search-box {
- background-color: $*color_page_link_hover;
- box-shadow: .067em .067em .134em #444;
- -moz-box-shadow: .067em .067em .134em #444;
- -webkit-box-shadow: .067em .067em .134em #444;
- -khtml-box-shadow: .067em .067em .134em #444;
- }
-
- .module-calendar td.entry-day a:visited {
- color: $*color_page_background !important;
- }
-
- .module-calendar td.entry-day:hover > a,
- .module-calendar td.entry-day a:hover {
- color: $*color_entry_text !important;
- }
- """;
-}
#NEWLAYER: funkycircles/industrialteal
@@ -512,6 +498,8 @@ set color_footer_link_hover = "#ff0";
set color_footer_link_hover = "#ff0";
set color_footer_link_visited = "#88F2FF";
+set color_shadow_alt = "#444";
+
##===============================
## Entry Colors
##===============================
@@ -539,6 +527,14 @@ set color_entry_userpic_border = "#222";
set color_module_text = "#fff";
set color_module_title = "#fff";
+set color_specificmodule_background = "#3D3D3D";
+set color_specificmodule_background_alt = "#FFFF00";
+set color_specificmodule_background_hover = "#111";
+set color_specificmodule_background_visited = "#FFFF00";
+set color_specificmodule_text = "#fff";
+set color_specificmodule_text_alt = "#111";
+set color_specificmodule_text_hover = "#fff";
+set color_specificmodule_text_visited = "#5A5A5A";
##===============================
## Images
@@ -554,28 +550,6 @@ set image_module_list = "funkycircles/in
set image_module_list = "funkycircles/industrialteal-modulebullet.png";
set image_module_list_active = "funkycircles/industrial-modulebulletactive.png";
set image_module_list_hover = "funkycircles/industrial-modulebullethover.png";
-
-function Page::print_theme_stylesheet() {
- """
- .module-calendar td.entry-day,
- .module-search .search-box {
- background-color: $*color_page_link_hover;
- box-shadow: .067em .067em .134em #444;
- -moz-box-shadow: .067em .067em .134em #444;
- -webkit-box-shadow: .067em .067em .134em #444;
- -khtml-box-shadow: .067em .067em .134em #444;
- }
-
- .module-calendar td.entry-day a:visited {
- color: $*color_page_background !important;
- }
-
- .module-calendar td.entry-day:hover > a,
- .module-calendar td.entry-day a:hover {
- color: $*color_entry_text !important;
- }
- """;
-}
#NEWLAYER: funkycircles/lightondark
@@ -647,6 +621,14 @@ set color_module_text = "#fff";
set color_module_text = "#fff";
set color_module_title = "#fff";
set color_module_title_background = "#666";
+set color_specificmodule_background = "#473a61";
+set color_specificmodule_background_alt = "#90f";
+set color_specificmodule_background_hover = "#000";
+set color_specificmodule_background_visited = "#90f";
+set color_specificmodule_text = "#fff";
+set color_specificmodule_text_alt = "#000";
+set color_specificmodule_text_hover = "#fff";
+set color_specificmodule_text_visited = "#ddf";
##===============================
## Images
@@ -731,6 +713,14 @@ set color_module_text = "#666";
set color_module_text = "#666";
set color_module_title = "#700";
set color_module_title_background = "#000";
+set color_specificmodule_background = "#000";
+set color_specificmodule_background_alt = "#333";
+set color_specificmodule_background_hover = "#000";
+set color_specificmodule_background_visited = "#333";
+set color_specificmodule_text = "#fff";
+set color_specificmodule_text_alt = "#666";
+set color_specificmodule_text_hover = "#666";
+set color_specificmodule_text_visited = "#eee";
##===============================
## Fonts
@@ -848,6 +838,14 @@ set color_entry_userpic_border = "#0a142
set color_module_text = "#000";
set color_module_title = "#000";
+set color_specificmodule_background = "#03525C";
+set color_specificmodule_background_alt = "#368F88";
+set color_specificmodule_background_hover = "#fff";
+set color_specificmodule_background_visited = "#368F88";
+set color_specificmodule_text = "#fff";
+set color_specificmodule_text_alt = "#fff";
+set color_specificmodule_text_hover = "#000";
+set color_specificmodule_text_visited = "#DFDFDF";
##===============================
## Images
diff -r 67f528165b9a -r d1428ccce103 cgi-bin/LJ/S2Theme/funkycircles.pm
--- a/cgi-bin/LJ/S2Theme/funkycircles.pm Thu Oct 14 13:17:56 2010 +0800
+++ b/cgi-bin/LJ/S2Theme/funkycircles.pm Thu Oct 14 13:25:45 2010 +0800
@@ -15,7 +15,19 @@ sub page_props {
sub module_props {
my $self = shift;
- my @props = qw( image_module_list image_module_list_hover image_module_list_active );
+ my @props = qw(
+ image_module_list
+ image_module_list_active
+ image_module_list_hover
+ color_specificmodule_background
+ color_specificmodule_background_alt
+ color_specificmodule_background_hover
+ color_specificmodule_background_visited
+ color_specificmodule_text
+ color_specificmodule_text_alt
+ color_specificmodule_text_hover
+ color_specificmodule_text_visited
+ );
return $self->_append_props( "module_props", @props );
}
--------------------------------------------------------------------------------