From 519778efd0601a8d203b68fa237f34dd1e9a25de Mon Sep 17 00:00:00 2001 From: Denis Walker <dez@sucs.org> Date: Sat, 13 Nov 2010 15:18:22 +0000 Subject: [PATCH] Makes box curves use border-radius rather than images for all but IE --- htdocs/css/ie.css | 60 +++++++++++++++++++++++++++++++++++ htdocs/css/sucs.css | 77 ++++++++++++++++++++++----------------------- 2 files changed, 98 insertions(+), 39 deletions(-) diff --git a/htdocs/css/ie.css b/htdocs/css/ie.css index 013a9ec..65a1e2d 100644 --- a/htdocs/css/ie.css +++ b/htdocs/css/ie.css @@ -105,3 +105,63 @@ background: url('/images/menu-bottom-right.png') no-repeat bottom right; padding: 0.2em 0.5em; } +/* -------------------------------------------------- + Content box (e.g. for news items) + -------------------------------------------------- */ +.box .boxhead { + background: #e76808 url('/images/menu-top-left.png') no-repeat top left; +} + +.box .hollowhead { + background: #ffffff url('/images/border-bottom.png') repeat-x top; + height: 5px; + margin: 0; + padding: 0; + border: none; +} + +.box .hollowhead div { + background: url('/images/border-top-left.png') no-repeat top left; + height: 100%; +} + +.box .hollowhead div div { + background: url('/images/border-top-right.png') no-repeat top right; + height: 100%; +} + + +.box .boxhead h2, .box .boxhead h3, .error .errorhead h3 { + background: url('/images/menu-top-right.png') no-repeat top right; +} + +.box .boxfoot { + background: #e76808 url('/images/menu-bottom-left.png') no-repeat bottom left; +} + +.box .boxfoot p { + background: url('/images/menu-bottom-right.png') no-repeat bottom right; +} + +.box .hollowfoot { + background: #ffffff url('/images/border-bottom.png') repeat-x bottom; + height: 5px; + margin: 0; + padding: 0; +} + +.box .hollowfoot div { + background: url('/images/border-bottom-left.png') no-repeat bottom left; + height: 100%; +} + +.box .hollowfoot div div { + background: url('/images/border-bottom-right.png') no-repeat bottom right; + height: 100%; +} +/* -------------------------------------------------- + Error box + -------------------------------------------------- */ +.error .errorhead { + background: #ff0000 url('/images/menu-top-left.png') no-repeat top left; +} diff --git a/htdocs/css/sucs.css b/htdocs/css/sucs.css index 2f459d6..6242536 100644 --- a/htdocs/css/sucs.css +++ b/htdocs/css/sucs.css @@ -282,6 +282,8 @@ ul#valid { .box { background: #ffffff; + border-radius: 7px; + -moz-border-radius: 7px; } .box div.boxcontent { @@ -295,54 +297,47 @@ ul#valid { } .box .boxhead { - background: #e76808 url('/images/menu-top-left.png') no-repeat top left; + background: #e76808; + border-top-left-radius: 7px; + border-top-right-radius: 7px; + -moz-border-radius-topleft: 7px; + -moz-border-radius-topright: 7px; } .box .hollowhead { - background: #ffffff url('/images/border-bottom.png') repeat-x top; + background: #ffffff; + border-top: 2px solid #e76808; + border-left: 2px solid #e76808; + border-right: 2px solid #e76808; + border-top-left-radius: 7px; + border-top-right-radius: 7px; + -moz-border-radius-topleft: 7px; + -moz-border-radius-topright: 7px; height: 5px; margin: 0; padding: 0; } -.box .hollowhead div { - background: url('/images/border-top-left.png') no-repeat top left; - height: 100%; -} - -.box .hollowhead div div { - background: url('/images/border-top-right.png') no-repeat top right; - height: 100%; -} - - -.box .boxhead h2, .box .boxhead h3, .error .errorhead h3 { - background: url('/images/menu-top-right.png') no-repeat top right; -} - .box .boxfoot { - background: #e76808 url('/images/menu-bottom-left.png') no-repeat bottom left; -} - -.box .boxfoot p { - background: url('/images/menu-bottom-right.png') no-repeat bottom right; + background: #e76808; + border-bottom-left-radius: 7px; + border-bottom-right-radius: 7px; + -moz-border-radius-bottomleft: 7px; + -moz-border-radius-bottomright: 7px; } .box .hollowfoot { - background: #ffffff url('/images/border-bottom.png') repeat-x bottom; + background: #ffffff; height: 5px; margin: 0; padding: 0; -} - -.box .hollowfoot div { - background: url('/images/border-bottom-left.png') no-repeat bottom left; - height: 100%; -} - -.box .hollowfoot div div { - background: url('/images/border-bottom-right.png') no-repeat bottom right; - height: 100%; + border-bottom: 2px solid #e76808; + border-left: 2px solid #e76808; + border-right: 2px solid #e76808; + border-bottom-left-radius: 7px; + border-bottom-right-radius: 7px; + -moz-border-radius-bottomleft: 7px; + -moz-border-radius-bottomright: 7px; } /* -------------------------------------------------- @@ -357,6 +352,11 @@ ul#valid { .error div.errorcontent { background: #ffffff; border: 2px solid #ff0000; + border-bottom-left-radius: 7px; + border-bottom-right-radius: 7px; + -moz-border-radius-bottomleft: 7px; + -moz-border-radius-bottomright: 7px; + padding-bottom: 0.5em; } .error .errorhead h3 { @@ -364,7 +364,11 @@ ul#valid { } .error .errorhead { - background: #ff0000 url('/images/menu-top-left.png') no-repeat top left; + background: #ff0000; + border-top-left-radius: 7px; + border-top-right-radius: 7px; + -moz-border-radius-topleft: 7px; + -moz-border-radius-topright: 7px; } .errorbar, .navbar, .infobar { @@ -419,11 +423,6 @@ ul#valid { Tables -------------------------------------------------- */ -table.border { - border-radius: 7px; - -moz-border-radius: 7px; -} - table.border th { background: #e76808; color: #ffc62b; -- GitLab