khanat-opennel-code/code/web/api/data/css/ryzom_ui.css

248 lines
5.9 KiB
CSS
Raw Normal View History

2012-05-04 10:04:49 +00:00
/* Copyright (C) 2009 Winch Gate Property Limited
*
* This file is part of ryzom_api.
* ryzom_api is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* ryzom_api is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with ryzom_api. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Check ryzom_api/functions_render.php for easy php function to render ryzom layout or use this following html:
*
<div class="ryzom-ui">
<div class="ryzom-ui-tl"><div class="ryzom-ui-tr">
<div class="ryzom-ui-t"><!-- title --></div>
</div></div>
<div class="ryzom-ui-l"><div class="ryzom-ui-r"><div class="ryzom-ui-m">
<div class="ryzom-ui-body"><!-- content --></div>
</div></div></div>
<div class="ryzom-ui-bl"><div class="ryzom-ui-br"><div class="ryzom-ui-b"></div></div></div>
</div><!-- .ryzom-ui -->
*/
.ryzom-ui {
color: white;
}
.ryzom-ui input, .ryzom-ui select {
2012-10-23 15:44:36 +00:00
border-bottom: 1px solid #7B7E80;
border-left: 1px solid #7B7E80;
border-top: 1px solid #101010;
border-right: 1px solid #101010;
background-color: #1D1D1D;
border-radius: 3px;
color: #BBB;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
2012-05-04 10:04:49 +00:00
font-size: 12px;
margin: 2px 0 5px 0;
2012-10-23 15:44:36 +00:00
padding: 1px;
2012-05-04 10:04:49 +00:00
}
.ryzom-ui input[type=text] {
width: 100%;
}
.ryzom-ui textarea {
width: 98%;
}
/* input[type=submit] will make IE6 to ignore whole CSS rule, so cant combine this with .ryzom-ui-button below */
input[type=submit] {
2012-10-23 15:44:36 +00:00
border-bottom: 1px solid #7B7E80;
border-left: 1px solid #7B7E80;
border-top: 1px solid #7B7E80;
border-right: 1px solid #7B7E80;
background-color: #232323;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
color: #BBB;
}
input[type=submit]:hover {
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
color: #FFF;
2012-05-04 10:04:49 +00:00
}
input.ryzom-ui-button, .ryzom-ui-button {
2012-10-23 15:44:36 +00:00
border-bottom: 1px solid #7B7E80;
border-left: 1px solid #7B7E80;
border-top: 1px solid #7B7E80;
border-right: 1px solid #7B7E80;
background-color: #232323;
border-radius: 3px;
color: #BBB;
2012-05-04 10:04:49 +00:00
}
a.ryzom-ui-button, a.ryzom-ui-button:visited {
2012-10-23 15:44:36 +00:00
color: #DDD;
padding: .2em .5em;
2012-05-04 10:04:49 +00:00
text-decoration: none;
}
a.ryzom-ui-button:hover {
2012-10-23 15:44:36 +00:00
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
color: #FFF;
2012-05-04 10:04:49 +00:00
}
/* window without title - just borders */
.ryzom-ui-tl {
background-image: url(skin_tl.gif);
background-repeat: no-repeat;
background-position: left top;
width: 100%; height: 8px;
}
.ryzom-ui-tr {
background-image: url(skin_tr.gif);
background-repeat: no-repeat;
background-position: right top;
height: 8px;
}
.ryzom-ui-t {
background-image: url(skin_t.gif);
background-repeat: repeat-x;
background-position: left top;
height: 8px;
margin: 0 8px;
}
/* window with proper header */
.ryzom-ui-header .ryzom-ui-tl {
margin: 0px 0px;
background-image: url(skin_header_l.gif);
background-repeat: no-repeat;
background-position: left top;
height: 32px;
}
.ryzom-ui-header .ryzom-ui-tr {
background-image: url(skin_header_r.gif);
background-repeat: no-repeat;
background-position: right top;
height: 32px;
}
.ryzom-ui-header .ryzom-ui-t {
background-image: url(skin_header_m.gif);
background-repeat: repeat-x;
background-position: left top;
margin-left: 12px;
margin-right: 26px;
padding-top: 9px;
height: 32px;
text-transform: uppercase;
color: white;
}
/* window body */
.ryzom-ui-l {
background-image: url(skin_l.gif);
background-position: left top;
background-repeat: repeat-y;
width: 100%;
}
.ryzom-ui-r {
background-image: url(skin_r.gif);
background-position: right top;
background-repeat: repeat-y;
width: 100%;
}
.ryzom-ui-m {
margin: 0 8px;
padding: 8px;
background-image: url(skin_blank.png);
background-repeat: repeat;
}
.ryzom-ui-body {
background-image: url(skin_blank_inner.png);
background-repeat: repeat;
/* leave 5px room after bottom border */
margin: 0px 0 5px 0;
padding: 10px 10px 5px 10px;
border-top: 1px solid #030403;
border-right: 1px solid #6e7f57;
border-bottom: 1px solid #889e6c;
border-left: 1px solid #272d1f;
}
/* window bottom border */
.ryzom-ui-bl {
background-image: url(skin_bl.gif);
background-repeat: no-repeat;
background-position: left top;
height: 8px;
}
.ryzom-ui-br {
background-image: url(skin_br.gif);
background-repeat: no-repeat;
background-position: right top;
height: 8px;
}
.ryzom-ui-b {
background-image: url(skin_b.gif);
background-repeat: repeat-x;
background-position: left top;
height: 8px;
margin: 0 8px;
}
.ryzom-ui-notice {
margin: 0px;
padding: 0px;
color: #333;
text-align: center;
}
a.ryzom-ui-notice, a.ryzom-ui-notice:visited {
margin: 0px;
padding: 0px;
color: #555;
padding: 0 .5em;
text-decoration: underline;
}
a.ryzom-ui-notice:hover {
color: gray;
}
.ryzom-ui-t .ryzom-ui-text-button {
font-size: 85%;
}
a.ryzom-ui-text-button, a:visited.ryzom-ui-text-button {
color:#FFFF11;
text-decoration:none;
}
.ryzom-ui-text-button {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.ryzom-ui-text-button {
padding: 0;margin: 0;
border-color: #ff8 #ff3 #ff3 #ff8;
border-width: 1px;
border-style: solid;
padding: 0px 4px;
color: white;
}
.ryzom-ui-wrap-ul {
float: left;
text-align: center;
padding: 0;
list-style: none;
margin-top: -5px;
margin-bottom: -20px;
}
.ryzom-ui-wrap-li {
float: left;
margin: 0 5px 10px 5px;
width: 6.1em;
padding: 0;
list-style: none;
height: 70px;
}