diff options
36 files changed, 268 insertions, 196 deletions
@@ -1,5 +1,13 @@ Changelog: +02-10-2021: serverflag symbols and style rotation + * display serverflag symbols on top right area of servername + * update styles to match + * add more game icons + * automatically rotate styles for special events like halloween, christmas + * sanity check for whether a provided style exists (assumes settings are valid) + * update manual with rotate_style setting info and skingen symbol filter + 09-09-2021: style fix, readable gametypes * fix style so tabs are not overlapping title bars * function to label game types as their readable counterparts @@ -42,6 +42,12 @@ When more than one website style exists, it can be selected in the following opt style => "333networks", ``` +It is possible to automatically apply styles for April's Fools, Halloween and Christmas. This is enabled with the following option, which is disabled by default. When style folders do not exist for these events, the default style remains active. +``` + # rotate styles + rotate_styles => 1, +``` + By default, only servers that have updated in the last half hour are shown. To show servers for a shorter or longer period of time after the last update increase or decrease the value of the option `window_time`. This value is provided in seconds (3600 seconds is 1 hour). ``` # do not display servers older than [seconds] @@ -71,11 +77,14 @@ textcol4 #666 accent color for complementing main text color (color) // logos bglogo 333networks.png logo in background (recommended 75 px high max) + +// symbol filter +pngfilter sepia(56%) css filter property to match status symbols with text colors ``` -Some parameters can be colors, textures or both. Fields with the (texture) indication can be both images and colors, such as `#0af`, `#0af box.png`, `box.png`, but (color) implies color ONLY. +Some parameters can be colors, textures or both. Fields with the (texture) indication can be both images and colors, such as `#0af`, `#0af box.png`, `box.png`, but (color) implies color ONLY. The CSS `filter` property to match the status symbols can be automatically calculated on <https://codepen.io/sosuke/pen/Pjoqqp>. -To compile a skin, run the command `./skingen.pl SKINNAME` from the `util` directory, where skinname is the lowercase folder name of your skin. The generated stylesheet can now be used in your webinterface config file under the `style => skinname` option. +To compile a skin, run the command `./skingen.pl SKINNAME` from the `util` directory, where skinname is the lowercase folder name of your skin. The generated stylesheet can now be used in your webinterface config file under the `style => skinname` option. Stylesheets may be edited manually, but running the command again will overwrite previous changes without confirmation. ## Apache settings Update the vhost configuration for the Web Interface to match your repository folder path. You may be required to enable modules such as `mod_rewrite` and `fcgi`. diff --git a/data/settings.pl b/data/settings.pl index fff087d..6b3b5af 100755 --- a/data/settings.pl +++ b/data/settings.pl @@ -14,6 +14,9 @@ our %S = (%S, # retain options from parent script # display style => "333networks", + # rotate styles + rotate_styles => 0, + # display the style selection/test box style_box => 0, diff --git a/data/style.css b/data/style.css index 6f38fa8..c7aa48a 100755 --- a/data/style.css +++ b/data/style.css @@ -397,24 +397,34 @@ div.mainbox.detail div.header div.serverflags { float:right; overflow:hidden; } -div.mainbox.detail div.header div.serverflags div { - width:48px; - height:48px; + +div.mainbox.detail div.header div.serverflags div.r, +div.mainbox.detail div.header div.serverflags div.g { + background: #311; display:inline-block; border-left:1px solid $textcol2$; - $_boxbg3$ +} +div.mainbox.detail div.header div.serverflags div.g { + background: #131; } /* server flag icons */ -div.mainbox.detail div.header div.serverflags div.direct {background: #131} -div.mainbox.detail div.header div.serverflags div.manual {background: #311} -div.mainbox.detail div.header div.serverflags div.authed {background: #131} -div.mainbox.detail div.header div.serverflags div.noauthed {background: #311} -div.mainbox.detail div.header div.serverflags div.noblacklist {background: #131} -div.mainbox.detail div.header div.serverflags div.blacklist {background: #311} -div.mainbox.detail div.header div.serverflags div.nopasswd {background: #131} -div.mainbox.detail div.header div.serverflags div.passwd {background: #311} - +div.mainbox.detail div.header div.serverflags div div.direct {background-image: url(/serverflags/direct.png);} +div.mainbox.detail div.header div.serverflags div div.manual {background-image: url(/serverflags/manual.png);} +div.mainbox.detail div.header div.serverflags div div.authed {background-image: url(/serverflags/authed.png);} +div.mainbox.detail div.header div.serverflags div div.noauthed {background-image: url(/serverflags/noauthed.png);} +div.mainbox.detail div.header div.serverflags div div.noblacklist {background-image: url(/serverflags/noblacklist.png);} +div.mainbox.detail div.header div.serverflags div div.blacklist {background-image: url(/serverflags/blacklist.png);} +div.mainbox.detail div.header div.serverflags div div.nopasswd {background-image: url(/serverflags/nopasswd.png);} +div.mainbox.detail div.header div.serverflags div div.passwd {background-image: url(/serverflags/passwd.png);} +div.mainbox.detail div.header div.serverflags div div { + width:48px; + height:48px; + background-repeat: no-repeat; + background-position: center center; + background-size: 40px 40px; + $_png_filter$ +} div.mainbox.detail table { margin-bottom: 20px; diff --git a/lib/MasterWebInterface/Handler/ServInfo.pm b/lib/MasterWebInterface/Handler/ServInfo.pm index 032f929..ef9d2cf 100755 --- a/lib/MasterWebInterface/Handler/ServInfo.pm +++ b/lib/MasterWebInterface/Handler/ServInfo.pm @@ -102,26 +102,26 @@ sub show_server # uplink or manually added/through applet if ( $info->{f_direct} ) - { div class => "direct", title => "This server uplinks directly to $self->{site_name}.", ""; } + { div class => "g"; div class => "direct", title => "This server uplinks directly to $self->{site_name}.", ""; end;} else - { div class => "manual", title => "This server was added through master synchronisation and does not uplink to $self->{site_name}.", ""; } + { div class => "r"; div class => "manual", title => "This server was added through master synchronisation and does not uplink to $self->{site_name}.", ""; end;} # authenticated through secure/validate if ( $info->{f_auth} ) - { div class => "authed", title => "This server authenticated through the secure/validate challenge.", ""; } + { div class => "g"; div class => "authed", title => "This server authenticated through the secure/validate challenge.", ""; end;} else - { div class => "noauthed", title => "This server failed the secure/validate challenge or did not reply.", ""; } + { div class => "r"; div class => "noauthed", title => "This server failed the secure/validate challenge or did not reply.", ""; end;} # server blacklisted? if ( $info->{f_blacklist} ) - { div class => "blacklist", title => "This server is blacklisted for violating the $self->{site_name} Terms of Use or by request from the administrator.", ""; } + { div class => "r"; div class => "blacklist", title => "This server is blacklisted for violating the $self->{site_name} Terms of Use or by request from the administrator.", ""; end;} else - { div class => "noblacklist", title => "This server is not blacklisted by $self->{site_name}.", ""; } + { div class => "g"; div class => "noblacklist", title => "This server is not blacklisted by $self->{site_name}.", ""; end;} if ( $info->{passworded} and $info->{passworded} =~ /(true|1)/i ) - { div class => "passwd", title => "This server requires a password to join.", ""; } + { div class => "r"; div class => "passwd", title => "This server requires a password to join.", ""; end;} else - { div class => "nopasswd", title => "This server is accessible for everybody.", "";} + { div class => "g"; div class => "nopasswd", title => "This server is accessible for everybody.", ""; end;} end; h1 title => $info->{hostname} // "[unnamed $gamename server]", $info->{hostname} // "[unnamed $gamename server]"; @@ -173,7 +173,7 @@ sub show_server span title => ("Server was added on ". strftime "%e %b %Y", gmtime ($info->{dt_added} // 0) ); txt "information updated "; - my @t = gmtime( time - ( $info->{dt_updated} // 0 ) ); + my @t = gmtime( time - ( $info->{dt_serverinfo} // 0 ) ); my $diff; $diff .= ($t[5]-70)*365 + $t[7] > 0 ? ( ($t[5]-70)*365 + $t[7])." days" : "" ; # years+days diff --git a/lib/MasterWebInterface/Util/Layout.pm b/lib/MasterWebInterface/Util/Layout.pm index 536aad7..20647fa 100755 --- a/lib/MasterWebInterface/Util/Layout.pm +++ b/lib/MasterWebInterface/Util/Layout.pm @@ -15,12 +15,24 @@ sub htmlHeader # CSS override: allow passing of style from GET --> ?style=classic my $style = $self->{style}; + + # rotate styles for different occasions. + my @dt = localtime(time); + # specify dates [m/d] = styles + if ($dt[4] == 2 && $dt[3] == 31) {$style = "april";} # 31 mar and 1 apr + if ($dt[4] == 3 && $dt[3] == 1) {$style = "april";} + if ($dt[4] == 9 && $dt[3] >= 1) {$style = "halloween";} + if ($dt[4] == 11 && $dt[3] >= 7) {$style = "xmas";} + if (my $overrideStyle = $self->reqParam("style") ) { # default to custom style if specified option doesn't exist - $style = ( -e "$self->{root}/s/style/$overrideStyle" ) ? $overrideStyle : $self->{style}; + $style = $overrideStyle; } + # default to default style if specified option does not exist + $style = ( -e "$self->{root}/s/style/$style" ) ? $style : $self->{style}; + html lang => "en"; head; title "$o{title} :: $self->{site_name} masterserver"; diff --git a/s/icon32/bf1942.png b/s/icon32/bf1942.png Binary files differnew file mode 100644 index 0000000..8de2f16 --- /dev/null +++ b/s/icon32/bf1942.png diff --git a/s/icon32/igi2.png b/s/icon32/igi2.png Binary files differnew file mode 100644 index 0000000..b3fb9e5 --- /dev/null +++ b/s/icon32/igi2.png diff --git a/s/icon32/ut2.png b/s/icon32/ut2.png Binary files differnew file mode 100644 index 0000000..82ef0ba --- /dev/null +++ b/s/icon32/ut2.png diff --git a/s/icon32/ut2004.png b/s/icon32/ut2004.png Binary files differnew file mode 100644 index 0000000..74c3fc3 --- /dev/null +++ b/s/icon32/ut2004.png diff --git a/s/icon32/ut2004d.png b/s/icon32/ut2004d.png Binary files differnew file mode 100644 index 0000000..74c3fc3 --- /dev/null +++ b/s/icon32/ut2004d.png diff --git a/s/icon32/ut2d.png b/s/icon32/ut2d.png Binary files differnew file mode 100644 index 0000000..82ef0ba --- /dev/null +++ b/s/icon32/ut2d.png diff --git a/s/serverflags/authed.png b/s/serverflags/authed.png Binary files differnew file mode 100644 index 0000000..4e3ac40 --- /dev/null +++ b/s/serverflags/authed.png diff --git a/s/serverflags/blacklist.png b/s/serverflags/blacklist.png Binary files differnew file mode 100644 index 0000000..99cbd7c --- /dev/null +++ b/s/serverflags/blacklist.png diff --git a/s/serverflags/direct.png b/s/serverflags/direct.png Binary files differnew file mode 100644 index 0000000..944c3bf --- /dev/null +++ b/s/serverflags/direct.png diff --git a/s/serverflags/manual.png b/s/serverflags/manual.png Binary files differnew file mode 100644 index 0000000..4dde549 --- /dev/null +++ b/s/serverflags/manual.png diff --git a/s/serverflags/noauthed.png b/s/serverflags/noauthed.png Binary files differnew file mode 100644 index 0000000..9c1f0d6 --- /dev/null +++ b/s/serverflags/noauthed.png diff --git a/s/serverflags/noblacklist.png b/s/serverflags/noblacklist.png Binary files differnew file mode 100644 index 0000000..f681e77 --- /dev/null +++ b/s/serverflags/noblacklist.png diff --git a/s/serverflags/nopasswd.png b/s/serverflags/nopasswd.png Binary files differnew file mode 100644 index 0000000..f2eb0d9 --- /dev/null +++ b/s/serverflags/nopasswd.png diff --git a/s/serverflags/passwd.png b/s/serverflags/passwd.png Binary files differnew file mode 100644 index 0000000..024cc4a --- /dev/null +++ b/s/serverflags/passwd.png diff --git a/s/style/333networks/conf b/s/style/333networks/conf index 8b23887..bc5c252 100755 --- a/s/style/333networks/conf +++ b/s/style/333networks/conf @@ -1,5 +1,3 @@ -// template - name 333networks author Darkelarious @@ -17,4 +15,7 @@ textcol3 #ff0 textcol4 #666 // logos -bglogo 333networks.png +bglogo 333networks.png + +// filter +pngfilter invert(49%) sepia(50%) saturate(4931%) hue-rotate(177deg) brightness(109%) contrast(104%) diff --git a/s/style/333networks/style.css b/s/style/333networks/style.css index a94b81c..0bfe28d 100644 --- a/s/style/333networks/style.css +++ b/s/style/333networks/style.css @@ -397,24 +397,34 @@ div.mainbox.detail div.header div.serverflags { float:right; overflow:hidden; } -div.mainbox.detail div.header div.serverflags div { - width:48px; - height:48px; + +div.mainbox.detail div.header div.serverflags div.r, +div.mainbox.detail div.header div.serverflags div.g { + background: #311; display:inline-block; border-left:1px solid #0af; - background: #222; +} +div.mainbox.detail div.header div.serverflags div.g { + background: #131; } /* server flag icons */ -div.mainbox.detail div.header div.serverflags div.direct {background: #131} -div.mainbox.detail div.header div.serverflags div.manual {background: #311} -div.mainbox.detail div.header div.serverflags div.authed {background: #131} -div.mainbox.detail div.header div.serverflags div.noauthed {background: #311} -div.mainbox.detail div.header div.serverflags div.noblacklist {background: #131} -div.mainbox.detail div.header div.serverflags div.blacklist {background: #311} -div.mainbox.detail div.header div.serverflags div.nopasswd {background: #131} -div.mainbox.detail div.header div.serverflags div.passwd {background: #311} - +div.mainbox.detail div.header div.serverflags div div.direct {background-image: url(/serverflags/direct.png);} +div.mainbox.detail div.header div.serverflags div div.manual {background-image: url(/serverflags/manual.png);} +div.mainbox.detail div.header div.serverflags div div.authed {background-image: url(/serverflags/authed.png);} +div.mainbox.detail div.header div.serverflags div div.noauthed {background-image: url(/serverflags/noauthed.png);} +div.mainbox.detail div.header div.serverflags div div.noblacklist {background-image: url(/serverflags/noblacklist.png);} +div.mainbox.detail div.header div.serverflags div div.blacklist {background-image: url(/serverflags/blacklist.png);} +div.mainbox.detail div.header div.serverflags div div.nopasswd {background-image: url(/serverflags/nopasswd.png);} +div.mainbox.detail div.header div.serverflags div div.passwd {background-image: url(/serverflags/passwd.png);} +div.mainbox.detail div.header div.serverflags div div { + width:48px; + height:48px; + background-repeat: no-repeat; + background-position: center center; + background-size: 40px 40px; + filter: brightness(0) saturate(100%) invert(49%) sepia(50%) saturate(4931%) hue-rotate(177deg) brightness(109%) contrast(104%); +} div.mainbox.detail table { margin-bottom: 20px; diff --git a/s/style/errorist/conf b/s/style/errorist/conf index 8fc8595..f43e5cd 100755 --- a/s/style/errorist/conf +++ b/s/style/errorist/conf @@ -1,5 +1,3 @@ -// template - name errorist author Syntax-Error @@ -17,4 +15,7 @@ textcol3 #f88 textcol4 #666 // logos -bglogo errorist.png +bglogo errorist.png + +// filter +pngfilter invert(49%) sepia(74%) saturate(755%) hue-rotate(207deg) brightness(101%) contrast(101%) diff --git a/s/style/errorist/style.css b/s/style/errorist/style.css index 34af196..833d2ed 100644 --- a/s/style/errorist/style.css +++ b/s/style/errorist/style.css @@ -397,24 +397,34 @@ div.mainbox.detail div.header div.serverflags { float:right; overflow:hidden; } -div.mainbox.detail div.header div.serverflags div { - width:48px; - height:48px; + +div.mainbox.detail div.header div.serverflags div.r, +div.mainbox.detail div.header div.serverflags div.g { + background: #311; display:inline-block; border-left:1px solid #88f; - background: #1c1c1c; +} +div.mainbox.detail div.header div.serverflags div.g { + background: #131; } /* server flag icons */ -div.mainbox.detail div.header div.serverflags div.direct {background: #131} -div.mainbox.detail div.header div.serverflags div.manual {background: #311} -div.mainbox.detail div.header div.serverflags div.authed {background: #131} -div.mainbox.detail div.header div.serverflags div.noauthed {background: #311} -div.mainbox.detail div.header div.serverflags div.noblacklist {background: #131} -div.mainbox.detail div.header div.serverflags div.blacklist {background: #311} -div.mainbox.detail div.header div.serverflags div.nopasswd {background: #131} -div.mainbox.detail div.header div.serverflags div.passwd {background: #311} - +div.mainbox.detail div.header div.serverflags div div.direct {background-image: url(/serverflags/direct.png);} +div.mainbox.detail div.header div.serverflags div div.manual {background-image: url(/serverflags/manual.png);} +div.mainbox.detail div.header div.serverflags div div.authed {background-image: url(/serverflags/authed.png);} +div.mainbox.detail div.header div.serverflags div div.noauthed {background-image: url(/serverflags/noauthed.png);} +div.mainbox.detail div.header div.serverflags div div.noblacklist {background-image: url(/serverflags/noblacklist.png);} +div.mainbox.detail div.header div.serverflags div div.blacklist {background-image: url(/serverflags/blacklist.png);} +div.mainbox.detail div.header div.serverflags div div.nopasswd {background-image: url(/serverflags/nopasswd.png);} +div.mainbox.detail div.header div.serverflags div div.passwd {background-image: url(/serverflags/passwd.png);} +div.mainbox.detail div.header div.serverflags div div { + width:48px; + height:48px; + background-repeat: no-repeat; + background-position: center center; + background-size: 40px 40px; + filter: brightness(0) saturate(100%) invert(49%) sepia(74%) saturate(755%) hue-rotate(207deg) brightness(101%) contrast(101%); +} div.mainbox.detail table { margin-bottom: 20px; diff --git a/s/style/gonespy/conf b/s/style/gonespy/conf index 2c9623b..d4f26ee 100755 --- a/s/style/gonespy/conf +++ b/s/style/gonespy/conf @@ -1,5 +1,3 @@ -// template - name gonespy author CougarXR7 @@ -18,3 +16,6 @@ textcol4 #777 // logos bglogo gonespytm.png + +// filter +pngfilter invert(45%) sepia(84%) saturate(1025%) hue-rotate(85deg) brightness(110%) contrast(130%) diff --git a/s/style/gonespy/style.css b/s/style/gonespy/style.css index 2d00859..dbc8074 100644 --- a/s/style/gonespy/style.css +++ b/s/style/gonespy/style.css @@ -397,24 +397,34 @@ div.mainbox.detail div.header div.serverflags { float:right; overflow:hidden; } -div.mainbox.detail div.header div.serverflags div { - width:48px; - height:48px; + +div.mainbox.detail div.header div.serverflags div.r, +div.mainbox.detail div.header div.serverflags div.g { + background: #311; display:inline-block; border-left:1px solid #0e0; - background: #1c1c1c; +} +div.mainbox.detail div.header div.serverflags div.g { + background: #131; } /* server flag icons */ -div.mainbox.detail div.header div.serverflags div.direct {background: #131} -div.mainbox.detail div.header div.serverflags div.manual {background: #311} -div.mainbox.detail div.header div.serverflags div.authed {background: #131} -div.mainbox.detail div.header div.serverflags div.noauthed {background: #311} -div.mainbox.detail div.header div.serverflags div.noblacklist {background: #131} -div.mainbox.detail div.header div.serverflags div.blacklist {background: #311} -div.mainbox.detail div.header div.serverflags div.nopasswd {background: #131} -div.mainbox.detail div.header div.serverflags div.passwd {background: #311} - +div.mainbox.detail div.header div.serverflags div div.direct {background-image: url(/serverflags/direct.png);} +div.mainbox.detail div.header div.serverflags div div.manual {background-image: url(/serverflags/manual.png);} +div.mainbox.detail div.header div.serverflags div div.authed {background-image: url(/serverflags/authed.png);} +div.mainbox.detail div.header div.serverflags div div.noauthed {background-image: url(/serverflags/noauthed.png);} +div.mainbox.detail div.header div.serverflags div div.noblacklist {background-image: url(/serverflags/noblacklist.png);} +div.mainbox.detail div.header div.serverflags div div.blacklist {background-image: url(/serverflags/blacklist.png);} +div.mainbox.detail div.header div.serverflags div div.nopasswd {background-image: url(/serverflags/nopasswd.png);} +div.mainbox.detail div.header div.serverflags div div.passwd {background-image: url(/serverflags/passwd.png);} +div.mainbox.detail div.header div.serverflags div div { + width:48px; + height:48px; + background-repeat: no-repeat; + background-position: center center; + background-size: 40px 40px; + filter: brightness(0) saturate(100%) invert(45%) sepia(84%) saturate(1025%) hue-rotate(85deg) brightness(110%) contrast(130%); +} div.mainbox.detail table { margin-bottom: 20px; diff --git a/s/style/halloween/conf b/s/style/halloween/conf index 92566da..73a67aa 100755 --- a/s/style/halloween/conf +++ b/s/style/halloween/conf @@ -1,5 +1,3 @@ -// template - name halloween author Darkelarious @@ -17,4 +15,7 @@ textcol3 #ff0 textcol4 #552500 // logos -bglogo 333hw1.png +bglogo 333hw1.png + +// filter +pngfilter invert(60%) sepia(56%) saturate(887%) hue-rotate(0deg) brightness(103%) contrast(104%) diff --git a/s/style/halloween/style.css b/s/style/halloween/style.css index 66ceb98..18290b4 100644 --- a/s/style/halloween/style.css +++ b/s/style/halloween/style.css @@ -43,9 +43,9 @@ a:hover { width: 900px; margin: 0 auto; min-height: 100%; - background: url(/style/halloween/333hw1.png) no-repeat center 10px fixed; - padding-top: 120px; - background-size: 500px; + background: url(/style/halloween/333hw1.png) no-repeat center 0 fixed; + padding-top: 200px; + background-size: 900px; } #footer { @@ -397,24 +397,34 @@ div.mainbox.detail div.header div.serverflags { float:right; overflow:hidden; } -div.mainbox.detail div.header div.serverflags div { - width:48px; - height:48px; + +div.mainbox.detail div.header div.serverflags div.r, +div.mainbox.detail div.header div.serverflags div.g { + background: #311; display:inline-block; border-left:1px solid #fa0; - background: url(/style/halloween/prim.png) repeat center top; +} +div.mainbox.detail div.header div.serverflags div.g { + background: #131; } /* server flag icons */ -div.mainbox.detail div.header div.serverflags div.direct {background: #131} -div.mainbox.detail div.header div.serverflags div.manual {background: #311} -div.mainbox.detail div.header div.serverflags div.authed {background: #131} -div.mainbox.detail div.header div.serverflags div.noauthed {background: #311} -div.mainbox.detail div.header div.serverflags div.noblacklist {background: #131} -div.mainbox.detail div.header div.serverflags div.blacklist {background: #311} -div.mainbox.detail div.header div.serverflags div.nopasswd {background: #131} -div.mainbox.detail div.header div.serverflags div.passwd {background: #311} - +div.mainbox.detail div.header div.serverflags div div.direct {background-image: url(/serverflags/direct.png);} +div.mainbox.detail div.header div.serverflags div div.manual {background-image: url(/serverflags/manual.png);} +div.mainbox.detail div.header div.serverflags div div.authed {background-image: url(/serverflags/authed.png);} +div.mainbox.detail div.header div.serverflags div div.noauthed {background-image: url(/serverflags/noauthed.png);} +div.mainbox.detail div.header div.serverflags div div.noblacklist {background-image: url(/serverflags/noblacklist.png);} +div.mainbox.detail div.header div.serverflags div div.blacklist {background-image: url(/serverflags/blacklist.png);} +div.mainbox.detail div.header div.serverflags div div.nopasswd {background-image: url(/serverflags/nopasswd.png);} +div.mainbox.detail div.header div.serverflags div div.passwd {background-image: url(/serverflags/passwd.png);} +div.mainbox.detail div.header div.serverflags div div { + width:48px; + height:48px; + background-repeat: no-repeat; + background-position: center center; + background-size: 40px 40px; + filter: brightness(0) saturate(100%) invert(60%) sepia(56%) saturate(887%) hue-rotate(0deg) brightness(103%) contrast(104%); +} div.mainbox.detail table { margin-bottom: 20px; diff --git a/s/style/newbies/conf b/s/style/newbies/conf index c7198ec..3acfddd 100755 --- a/s/style/newbies/conf +++ b/s/style/newbies/conf @@ -1,5 +1,3 @@ -// newbiesplayground.net - name newbies author Strategy @@ -17,4 +15,7 @@ textcol3 #3abe25 textcol4 #666 // logos -bglogo newbs2.png +bglogo newbs2.png + +// filter +pngfilter invert(43%) sepia(11%) saturate(3275%) hue-rotate(66deg) brightness(93%) contrast(88%) diff --git a/s/style/newbies/style.css b/s/style/newbies/style.css index aa57ad3..3630f15 100644 --- a/s/style/newbies/style.css +++ b/s/style/newbies/style.css @@ -44,8 +44,8 @@ a:hover { margin: 0 auto; min-height: 100%; background: url(/style/newbies/newbs2.png) no-repeat center 10px fixed; - padding-top: 76px; - background-size: 500px; + padding-top: 120px; + background-size: 800px; } #footer { @@ -397,24 +397,34 @@ div.mainbox.detail div.header div.serverflags { float:right; overflow:hidden; } -div.mainbox.detail div.header div.serverflags div { - width:48px; - height:48px; + +div.mainbox.detail div.header div.serverflags div.r, +div.mainbox.detail div.header div.serverflags div.g { + background: #311; display:inline-block; border-left:1px solid #2d851f; - background: #222; +} +div.mainbox.detail div.header div.serverflags div.g { + background: #131; } /* server flag icons */ -div.mainbox.detail div.header div.serverflags div.direct {background: #131} -div.mainbox.detail div.header div.serverflags div.manual {background: #311} -div.mainbox.detail div.header div.serverflags div.authed {background: #131} -div.mainbox.detail div.header div.serverflags div.noauthed {background: #311} -div.mainbox.detail div.header div.serverflags div.noblacklist {background: #131} -div.mainbox.detail div.header div.serverflags div.blacklist {background: #311} -div.mainbox.detail div.header div.serverflags div.nopasswd {background: #131} -div.mainbox.detail div.header div.serverflags div.passwd {background: #311} - +div.mainbox.detail div.header div.serverflags div div.direct {background-image: url(/serverflags/direct.png);} +div.mainbox.detail div.header div.serverflags div div.manual {background-image: url(/serverflags/manual.png);} +div.mainbox.detail div.header div.serverflags div div.authed {background-image: url(/serverflags/authed.png);} +div.mainbox.detail div.header div.serverflags div div.noauthed {background-image: url(/serverflags/noauthed.png);} +div.mainbox.detail div.header div.serverflags div div.noblacklist {background-image: url(/serverflags/noblacklist.png);} +div.mainbox.detail div.header div.serverflags div div.blacklist {background-image: url(/serverflags/blacklist.png);} +div.mainbox.detail div.header div.serverflags div div.nopasswd {background-image: url(/serverflags/nopasswd.png);} +div.mainbox.detail div.header div.serverflags div div.passwd {background-image: url(/serverflags/passwd.png);} +div.mainbox.detail div.header div.serverflags div div { + width:48px; + height:48px; + background-repeat: no-repeat; + background-position: center center; + background-size: 40px 40px; + filter: brightness(0) saturate(100%) invert(43%) sepia(11%) saturate(3275%) hue-rotate(66deg) brightness(93%) contrast(88%); +} div.mainbox.detail table { margin-bottom: 20px; diff --git a/s/style/oldunreal/conf b/s/style/oldunreal/conf index 7c5910b..25811d0 100755 --- a/s/style/oldunreal/conf +++ b/s/style/oldunreal/conf @@ -1,5 +1,3 @@ -// Old Unreal - name OldUnreal author Smirftsch @@ -18,3 +16,6 @@ textcol4 #777 // logos bglogo oldunreal.png + +// filter +pngfilter invert(50%) sepia(32%) saturate(2747%) hue-rotate(83deg) brightness(124%) contrast(117%) diff --git a/s/style/oldunreal/style.css b/s/style/oldunreal/style.css index 61f78c1..6aa36c1 100644 --- a/s/style/oldunreal/style.css +++ b/s/style/oldunreal/style.css @@ -397,24 +397,34 @@ div.mainbox.detail div.header div.serverflags { float:right; overflow:hidden; } -div.mainbox.detail div.header div.serverflags div { - width:48px; - height:48px; + +div.mainbox.detail div.header div.serverflags div.r, +div.mainbox.detail div.header div.serverflags div.g { + background: #311; display:inline-block; border-left:1px solid #0f0; - background: #1c1c1c; +} +div.mainbox.detail div.header div.serverflags div.g { + background: #131; } /* server flag icons */ -div.mainbox.detail div.header div.serverflags div.direct {background: #131} -div.mainbox.detail div.header div.serverflags div.manual {background: #311} -div.mainbox.detail div.header div.serverflags div.authed {background: #131} -div.mainbox.detail div.header div.serverflags div.noauthed {background: #311} -div.mainbox.detail div.header div.serverflags div.noblacklist {background: #131} -div.mainbox.detail div.header div.serverflags div.blacklist {background: #311} -div.mainbox.detail div.header div.serverflags div.nopasswd {background: #131} -div.mainbox.detail div.header div.serverflags div.passwd {background: #311} - +div.mainbox.detail div.header div.serverflags div div.direct {background-image: url(/serverflags/direct.png);} +div.mainbox.detail div.header div.serverflags div div.manual {background-image: url(/serverflags/manual.png);} +div.mainbox.detail div.header div.serverflags div div.authed {background-image: url(/serverflags/authed.png);} +div.mainbox.detail div.header div.serverflags div div.noauthed {background-image: url(/serverflags/noauthed.png);} +div.mainbox.detail div.header div.serverflags div div.noblacklist {background-image: url(/serverflags/noblacklist.png);} +div.mainbox.detail div.header div.serverflags div div.blacklist {background-image: url(/serverflags/blacklist.png);} +div.mainbox.detail div.header div.serverflags div div.nopasswd {background-image: url(/serverflags/nopasswd.png);} +div.mainbox.detail div.header div.serverflags div div.passwd {background-image: url(/serverflags/passwd.png);} +div.mainbox.detail div.header div.serverflags div div { + width:48px; + height:48px; + background-repeat: no-repeat; + background-position: center center; + background-size: 40px 40px; + filter: brightness(0) saturate(100%) invert(50%) sepia(32%) saturate(2747%) hue-rotate(83deg) brightness(124%) contrast(117%); +} div.mainbox.detail table { margin-bottom: 20px; diff --git a/s/style/rune/conf b/s/style/rune/conf index 788d530..e7be76b 100755 --- a/s/style/rune/conf +++ b/s/style/rune/conf @@ -15,4 +15,7 @@ textcol3 #ff0 textcol4 #552500 // logos -bglogo 333runic.png +bglogo 333runic.png + +// filter +pngfilter invert(73%) sepia(32%) saturate(5426%) hue-rotate(1deg) brightness(105%) contrast(104%) diff --git a/s/style/rune/conf2 b/s/style/rune/conf2 deleted file mode 100755 index afd3dbb..0000000 --- a/s/style/rune/conf2 +++ /dev/null @@ -1,29 +0,0 @@ -// Basic greyscale theme with 333networks logo -// see util/skingen/colortypes.txt for descriptions of colors. - -name halloween -author Darkelarious - -bodybg #000 background.jpg -bglogo 333runic.png - -boxbg1 g75.png -boxbg2 g50.png -boxbg3 #210 - -glow #552500 -shadow #fa0 - -textcol1 #ccc -textcol2 #aaa - -headercol #fa0 -themecol1 #552500 -themecol2 #888 -themecol3 #333 - -link #fa0 -linkhover #ff0 - - - diff --git a/s/style/rune/style.css b/s/style/rune/style.css index cafe77f..01e3e88 100644 --- a/s/style/rune/style.css +++ b/s/style/rune/style.css @@ -397,24 +397,34 @@ div.mainbox.detail div.header div.serverflags { float:right; overflow:hidden; } -div.mainbox.detail div.header div.serverflags div { - width:48px; - height:48px; + +div.mainbox.detail div.header div.serverflags div.r, +div.mainbox.detail div.header div.serverflags div.g { + background: #311; display:inline-block; border-left:1px solid #fa0; - background: #210; +} +div.mainbox.detail div.header div.serverflags div.g { + background: #131; } /* server flag icons */ -div.mainbox.detail div.header div.serverflags div.direct {background: #131} -div.mainbox.detail div.header div.serverflags div.manual {background: #311} -div.mainbox.detail div.header div.serverflags div.authed {background: #131} -div.mainbox.detail div.header div.serverflags div.noauthed {background: #311} -div.mainbox.detail div.header div.serverflags div.noblacklist {background: #131} -div.mainbox.detail div.header div.serverflags div.blacklist {background: #311} -div.mainbox.detail div.header div.serverflags div.nopasswd {background: #131} -div.mainbox.detail div.header div.serverflags div.passwd {background: #311} - +div.mainbox.detail div.header div.serverflags div div.direct {background-image: url(/serverflags/direct.png);} +div.mainbox.detail div.header div.serverflags div div.manual {background-image: url(/serverflags/manual.png);} +div.mainbox.detail div.header div.serverflags div div.authed {background-image: url(/serverflags/authed.png);} +div.mainbox.detail div.header div.serverflags div div.noauthed {background-image: url(/serverflags/noauthed.png);} +div.mainbox.detail div.header div.serverflags div div.noblacklist {background-image: url(/serverflags/noblacklist.png);} +div.mainbox.detail div.header div.serverflags div div.blacklist {background-image: url(/serverflags/blacklist.png);} +div.mainbox.detail div.header div.serverflags div div.nopasswd {background-image: url(/serverflags/nopasswd.png);} +div.mainbox.detail div.header div.serverflags div div.passwd {background-image: url(/serverflags/passwd.png);} +div.mainbox.detail div.header div.serverflags div div { + width:48px; + height:48px; + background-repeat: no-repeat; + background-position: center center; + background-size: 40px 40px; + filter: brightness(0) saturate(100%) invert(73%) sepia(32%) saturate(5426%) hue-rotate(1deg) brightness(105%) contrast(104%); +} div.mainbox.detail table { margin-bottom: 20px; diff --git a/util/skingen.pl b/util/skingen.pl index 81304e9..66f31e9 100755 --- a/util/skingen.pl +++ b/util/skingen.pl @@ -12,35 +12,7 @@ use Cwd 'abs_path'; # Here, SKINNAME is a lowercase folder and conf a plaintext file. In this folder # you can opt to place textures, logos and other pictures used in your skin. # -# In the conf file you describe the following color codes or textures: -# -# Options: -# -# name example description -# ------------------------------------------------------------------------------ -# name stylename description of the style/name of the style -# author Darkelarious style author (commented in style.css for credits) -# -#// backgrounds -# bodybg #222 body.gif body background (texture) -# boxbg1 #333 box background (texture) -# boxbg2 #111 menu backgrounds, buttons, thumbnail/image boxes (texture) -# boxbg3 #222 odd row accents (texture) -# shadow #222 shadow color (color) -# -# // text -# textcol1 #ccc main text color -# textcol2 #0af primary color for borders, links (color) -# textcol3 #ff0 secondary color for link:hover, actions (color) -# textcol4 #666 accent color for complementing main text color (color) -# -# // logos -# bglogo 333networks.png logo in background (recommended 75 px high max) -# -# ------------------------------------------------------------------------------ -# NOTE: some parameters can be colors, textures or both. (texture) can be both -# images and colors, such as #0af, #0af box.png, box.png, but (color) implies -# color ONLY. +# For more information, see the README.md file of this repository. # # To compile a skin, run the command "./skingen.pl SKINNAME" where skinname is # the lowercase folder name of your skin. The output is a style.css file in your @@ -170,6 +142,14 @@ sub writeskin $o{_bgpadd} = "padding-top: " . int(500/$w*$h-5) . "px;"; } + # png filter for symbols + $o{_png_filter} = ""; + if (length($o{pngfilter} // "") > 1) + { + # symbol picture is white. filter assumes picture is black. force symbol to black first. + $o{_png_filter} = "filter: brightness(0) saturate(100%) $o{pngfilter};"; + } + # write the CSS open my $CSS, '<', "$ROOT/data/style.css" or die "$ROOT/util/skingen/style.css $!"; my $css = join '', <$CSS>; |
