mirror of
https://github.com/moodle/moodle.git
synced 2025-02-16 05:45:36 +01:00
66 lines
3.1 KiB
CSS
66 lines
3.1 KiB
CSS
/**
|
|
* Rounded corner CSS + images
|
|
* This CSS uses background images and relative positioning to display rounded
|
|
* corners on all browsers.
|
|
*/
|
|
.rounded-corner {display:block;width:11px;height:11px;font-size:1pt;margin:0px;padding:0px;}
|
|
|
|
#page-header .rounded-corner {background-image:url([[pix:theme|corners_header]]);clear:both;}
|
|
#page-header .rounded-corner.top-left {background-position:0px 0px;float:left;}
|
|
#page-header .rounded-corner.top-right {background-position:11px 0px;float:right;}
|
|
|
|
/** Fix IE8 + Opera positioning issue **/
|
|
.ie8 #page-header .rounded-corner.top-right,
|
|
.opera #page-header .rounded-corner.top-right {position:relative;top:-11px;}
|
|
|
|
#page-footer {position:relative;}
|
|
#page-footer .rounded-corner {position:absolute;background-image:url([[pix:theme|corners_header]]);clear:both;}
|
|
#page-footer .rounded-corner.bottom-left {background-position:0px 11px;bottom:0px;left:0px;float:left;}
|
|
#page-footer .rounded-corner.bottom-right {background-position:11px 11px;bottom:0px;right:-1px;float:right;}
|
|
|
|
.block {border-width:0px;background-color:white;}
|
|
.block .corner-box {border:1px solid #C8C9C7;margin-bottom:10px;padding-bottom:10px;background-color:#E3E3E3;}
|
|
.block .corner-box .rounded-corner {background-image:url([[pix:theme|corners_block]]);position:relative;}
|
|
.block .corner-box .rounded-corner.top-left {background-position:0px 0px;float:left;top:-1px;left:-1px;}
|
|
.block .corner-box .rounded-corner.top-right {background-position:11px 0px;float:right;top:-1px;right:-1px;}
|
|
.block .corner-box .rounded-corner.bottom-left {background-position:0px 11px;float:left;bottom:0px;left:-1px;}
|
|
.block .corner-box .rounded-corner.bottom-right {background-position:11px 11px;float:right;bottom:0px;right:-1px;}
|
|
|
|
/**
|
|
* Pure CSS rounded corners
|
|
* This CSS overrides the above to remove images and use pure CSS to display the
|
|
* rounded corners. Less requests, betterg page load time, better looking rounded
|
|
* corners.... if only IE could handle it.
|
|
*
|
|
* Browsers:
|
|
* Firefox: body.gecko
|
|
* Chrome: body.safari
|
|
* Safari: body.safari
|
|
*/
|
|
.safari .rounded-corner.top-left,
|
|
.safari .rounded-corner.top-right,
|
|
.safari .rounded-corner.bottom-left,
|
|
.safari .rounded-corner.bottom-right
|
|
.gecko .rounded-corner.top-left,
|
|
.gecko .rounded-corner.top-right,
|
|
.gecko .rounded-corner.bottom-left,
|
|
.gecko .rounded-corner.bottom-right {background-image:none;display:none;}
|
|
|
|
.safari .block .corner-box,
|
|
.gecko .block .corner-box {-webkit-border-radius: 10px;-moz-border-radius: 10px;}
|
|
|
|
.safari .block .corner-box .header,
|
|
.safari #page-header,
|
|
.gecko .block .corner-box .header,
|
|
.gecko #page-header {-moz-border-radius: 10px 10px 0px 0px;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px;}
|
|
|
|
.safari #page-footer,
|
|
.gecko #page-footer {-moz-border-radius: 0px 0px 10px 10px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;}
|
|
|
|
.gecko .forumpost,
|
|
.gecko .forumpost .side {-moz-border-radius-bottomleft:20px}
|
|
.gecko .forumpost,
|
|
.gecko .forumpost .content {-moz-border-radius-bottomright:20px;}
|
|
|
|
/** Fix for IE 6 float background bug */
|
|
.ie .column-content {position:relative;} |