Template:Infobox/styles.css: Difference between revisions
mNo edit summary |
No edit summary |
||
(77 intermediate revisions by the same user not shown) | |||
Line 2: | Line 2: | ||
float: right; | float: right; | ||
position: relative; | position: relative; | ||
width: | width:300px; | ||
background:#FFF; | background:#FFF; | ||
font-size:0.923em; | font-size:0.923em; | ||
Line 8: | Line 8: | ||
margin:0 0 1em 1em; | margin:0 0 1em 1em; | ||
padding:0; | padding:0; | ||
background-image:linear-gradient(135deg,#fff 0%,#eee 100%) | background-image:linear-gradient(135deg,#fff 0%,#eee 100%) | ||
} | } | ||
div.infobox .heading { | div.infobox .heading { | ||
font-weight:700; | font-weight:700; | ||
text-align:center; | text-align:center; | ||
border:1px solid rgba(0,0,0,0.25); | border:1px solid rgba(0,0,0,0.25); | ||
Line 46: | Line 43: | ||
float:left; | float:left; | ||
text-align:right; | text-align:right; | ||
width: | width:88px; | ||
line-height:1em; | line-height:1em; | ||
font-weight:700; | font-weight:700; | ||
Line 83: | Line 80: | ||
div.infobox dt,div.infobox dd{ | div.infobox dt,div.infobox dd{ | ||
line-height:1.667em | line-height:1.667em | ||
} | |||
div.infobox .infobox-icon{ | |||
float:right; | |||
position:relative; | |||
z-index:2; | |||
width:auto; | |||
margin:5px | |||
} | |||
.infobox-icon a.new{ | |||
color:transparent; | |||
display:inline-block; | |||
font:0/0 a; | |||
overflow:hidden; | |||
vertical-align:middle; | |||
height:40px; | |||
width:40px | |||
} | |||
.infobox-icon a.new{ | |||
height:48px; | |||
width:48px | |||
} | |||
.infobox-icon p{ | |||
text-align:center; | |||
color:#444; | |||
font-size:9px !important; | |||
background-color:rgba(255,255,255,0.5); | |||
border-radius:0.75em; | |||
line-height:1em; | |||
margin:0.25em -0.5em; | |||
padding:2px | |||
} | |||
div.infobox.npc .heading{ | |||
background-image:linear-gradient(#094 0%,#050 100%); | |||
} | |||
div.infobox.npc dd,div.infobox.npc dt{ | |||
border-color:#390 | |||
} | |||
div.infobox.item .heading{ | |||
background-image:linear-gradient(360deg,#777 0%, #AAA 100%); | |||
} | |||
div.infobox.item dd,div.infobox.item dt{ | |||
border-color:#AAA | |||
} | |||
div.infobox.item .subheading,div.infobox.item .heading{ | |||
text-align:center; | |||
padding:2px; | |||
font-weight:bold; | |||
background-image:linear-gradient(360deg,#777 0%, #AAA 100%) !important; | |||
border:1px solid rgba(0,0,0,0.25); | |||
margin:-1px -1px 5px !important | |||
} | |||
div.infobox.normal .heading{ | |||
color:#FFF !important; | |||
} | |||
div.infobox.magic .heading{ | |||
color:#0FF !important; | |||
} | |||
div.infobox.magic dd,div.infobox.magic dt{ | |||
border-color:#0FF !important | |||
} | |||
div.infobox.rare .heading{ | |||
color:#FF0 !important; | |||
} | |||
div.infobox.rare dd,div.infobox.rare dt{ | |||
border-color:#ee0 !important | |||
} | |||
div.infobox.soul .heading{ | |||
color:#DAA949 !important; | |||
} | |||
div.infobox.soul dd,div.infobox.soul dt{ | |||
border-color:#DAA949 !important | |||
} | |||
div.infobox.unique .heading{ | |||
color:#050 !important; | |||
} | |||
div.infobox.unique dd,div.infobox.unique dt{ | |||
border-color:#050 !important | |||
} | |||
div.infobox.material .heading{ | |||
color:#FFF !important; | |||
background-image:linear-gradient(#ca7 0%,#752 100%) !important | |||
} | |||
div.infobox.material dd,div.infobox.rare dt{ | |||
border-color:#ca7 !important | |||
} | |||
div.infobox.skill .heading{ | |||
background-image:linear-gradient(#0dd 0%,#0aa 100%); | |||
} | |||
div.infobox.skill dd,div.infobox.skill dt{ | |||
border-color:#0aa | |||
} | |||
div.infobox.location .heading{ | |||
background-image:linear-gradient(#a2f 0%,#509 100%); | |||
} | |||
div.infobox.location dd,div.infobox.location dt{ | |||
border-color:#80d | |||
} | |||
div.infobox.quest .heading{ | |||
background-image:linear-gradient(360deg,#960 0%, #E90 100%); | |||
} | |||
div.infobox.quest dd,div.infobox.quest dt{ | |||
border-color:#E90 | |||
} | |||
div.infobox.quest .subheading,div.infobox.quest .heading{ | |||
text-align:center; | |||
padding:2px; | |||
font-weight:bold; | |||
background-image:linear-gradient(360deg,#960 0%, #E90 100%) !important; | |||
border:1px solid rgba(0,0,0,0.25); | |||
margin:-1px -1px 5px !important | |||
} | |||
div.recipe{ | |||
min-width:300px; | |||
width:auto; | |||
display:inline-block; | |||
float:none; | |||
clear:none; | |||
vertical-align:top; | |||
font-size:1em; | |||
margin:0 1em 0 0; | |||
position:relative; | |||
background:#FFF; | |||
border:1px solid #AAA; | |||
padding:0; | |||
background-image:linear-gradient(135deg,#fff 0%,#eee 100%) | |||
} | |||
div.recipe::after{ | |||
bottom:-4px; | |||
content:""; | |||
position:absolute; | |||
width:100%; | |||
left:0; | |||
height:3px; | |||
background-size:100% 3px | |||
} | |||
div.recipe .heading{ | |||
font-weight:700; | |||
text-align:center; | |||
border:1px solid rgba(0,0,0,0.25); | |||
border-bottom-width:0; | |||
position:relative; | |||
z-index:1; | |||
margin:-1px -1px 5px !important; | |||
font-family:EasonPro,"Times New Roman",serif !important; | |||
font-size:1.417em !important; | |||
color:#FFF !important; | |||
background-image:linear-gradient(#eca 0%,#ca7 100%); | |||
text-shadow:rgba(0,0,0,0.75) 0 0 0.25em; | |||
line-height:1.176em; | |||
font-size-adjust:0.43; | |||
padding:0.5em !important | |||
} | |||
div.recipe dd,div.infobox.recipe dt{ | |||
border-color:#ca7 | |||
} | |||
div.recipe .subheading,div.infobox.recipe .heading{ | |||
text-align:center; | |||
padding:2px; | |||
font-weight:bold; | |||
background-image:linear-gradient(#eca 0%,#ca7 100%) !important; | |||
border:1px solid rgba(0,0,0,0.25); | |||
margin:-1px -1px 5px !important | |||
} | |||
div.recipe .subheading{ | |||
border-width:0 1px | |||
} | |||
div.recipe dl{ | |||
margin:10px 0 | |||
} | |||
div.recipe dt{ | |||
float:left; | |||
text-align:right; | |||
width:78px; | |||
line-height:1em; | |||
font-weight:700; | |||
clear:left; | |||
border-right:2px solid #A99A86; | |||
margin:0 -2px 0 0; | |||
padding:2px 8px 2px 3px; | |||
line-height:1.667em | |||
} | |||
div.recipe dd{ | |||
float:left; | |||
border-left:2px solid #A99A86; | |||
margin:0; | |||
padding:2px 7px | |||
} | |||
div.recipe .wrapper{ | |||
clear:both; | |||
padding:0 | |||
} | |||
div.recipe.magic .heading{ | |||
color:#0FF !important; | |||
} | |||
div.recipe.magic dd,div.recipe.magic dt{ | |||
border-color:#0FF !important | |||
} | |||
div.recipe.rare .heading{ | |||
color:#FFF !important; | |||
background-image:linear-gradient(#F97 0%,#ca7 100%) !important | |||
} | |||
div.recipe.rare dd,div.infobox.rare dt{ | |||
border-color:#F97 !important | |||
} | |||
div.recipe .recipe-icon{ | |||
float:right; | |||
position:relative; | |||
z-index:2; | |||
width:auto; | |||
margin:5px | |||
} | |||
.recipe-icon a.new{ | |||
color:transparent; | |||
display:inline-block; | |||
font:0/0 a; | |||
overflow:hidden; | |||
vertical-align:middle; | |||
height:40px; | |||
width:40px | |||
} | |||
.recipe-icon a.new{ | |||
height:48px; | |||
width:48px | |||
} | |||
.recipe-icon p{ | |||
text-align:center; | |||
color:#444; | |||
font-size:9px !important; | |||
background-color:rgba(255,255,255,0.5); | |||
border-radius:0.75em; | |||
line-height:1em; | |||
margin:0.25em -0.5em; | |||
padding:2px | |||
} | } |
Latest revision as of 18:39, 23 September 2024
div.infobox {
float: right;
position: relative;
width:300px;
background:#FFF;
font-size:0.923em;
border:1px solid #AAA;
margin:0 0 1em 1em;
padding:0;
background-image:linear-gradient(135deg,#fff 0%,#eee 100%)
}
div.infobox .heading {
font-weight:700;
text-align:center;
border:1px solid rgba(0,0,0,0.25);
border-bottom-width:0;
position:relative;
z-index:1;
margin:-1px -1px 5px !important;
font-family:EasonPro,"Times New Roman",serif !important;
font-size:1.417em !important;
color:#FFF !important;
background-color:#444 !important;
text-shadow:rgba(0,0,0,0.75) 0 0 0.25em;
line-height:1.176em;
font-size-adjust:0.43;
padding:0.5em !important
}
div.infobox .image_wrapper {
text-align:center;
padding:0;
margin:10px 0
}
div.infobox .wrapper{
clear:both;
padding:0
}
div.infobox dt{
float:left;
text-align:right;
width:88px;
line-height:1em;
font-weight:700;
clear:left;
border-right:2px solid #050;
margin:0 -2px 0 0;
padding:2px 8px 2px 3px
}
div.infobox dd{
float:left;
width:140px;
font-weight:400;
border-left:2px solid #050;
margin:0;
padding:2px 7px
}
div.infobox::after,div.infobox .heading::after{
content:"";position:absolute;
width:100%;
left:0;
height:3px;
background-size:100% 3px
}
div.infobox::after,div.infobox .heading::after{
bottom:-3px
}
div.infobox table{
background-color:transparent
}
div.infobox dt,div.infobox dd{
line-height:1.667em
}
div.infobox .infobox-icon{
float:right;
position:relative;
z-index:2;
width:auto;
margin:5px
}
.infobox-icon a.new{
color:transparent;
display:inline-block;
font:0/0 a;
overflow:hidden;
vertical-align:middle;
height:40px;
width:40px
}
.infobox-icon a.new{
height:48px;
width:48px
}
.infobox-icon p{
text-align:center;
color:#444;
font-size:9px !important;
background-color:rgba(255,255,255,0.5);
border-radius:0.75em;
line-height:1em;
margin:0.25em -0.5em;
padding:2px
}
div.infobox.npc .heading{
background-image:linear-gradient(#094 0%,#050 100%);
}
div.infobox.npc dd,div.infobox.npc dt{
border-color:#390
}
div.infobox.item .heading{
background-image:linear-gradient(360deg,#777 0%, #AAA 100%);
}
div.infobox.item dd,div.infobox.item dt{
border-color:#AAA
}
div.infobox.item .subheading,div.infobox.item .heading{
text-align:center;
padding:2px;
font-weight:bold;
background-image:linear-gradient(360deg,#777 0%, #AAA 100%) !important;
border:1px solid rgba(0,0,0,0.25);
margin:-1px -1px 5px !important
}
div.infobox.normal .heading{
color:#FFF !important;
}
div.infobox.magic .heading{
color:#0FF !important;
}
div.infobox.magic dd,div.infobox.magic dt{
border-color:#0FF !important
}
div.infobox.rare .heading{
color:#FF0 !important;
}
div.infobox.rare dd,div.infobox.rare dt{
border-color:#ee0 !important
}
div.infobox.soul .heading{
color:#DAA949 !important;
}
div.infobox.soul dd,div.infobox.soul dt{
border-color:#DAA949 !important
}
div.infobox.unique .heading{
color:#050 !important;
}
div.infobox.unique dd,div.infobox.unique dt{
border-color:#050 !important
}
div.infobox.material .heading{
color:#FFF !important;
background-image:linear-gradient(#ca7 0%,#752 100%) !important
}
div.infobox.material dd,div.infobox.rare dt{
border-color:#ca7 !important
}
div.infobox.skill .heading{
background-image:linear-gradient(#0dd 0%,#0aa 100%);
}
div.infobox.skill dd,div.infobox.skill dt{
border-color:#0aa
}
div.infobox.location .heading{
background-image:linear-gradient(#a2f 0%,#509 100%);
}
div.infobox.location dd,div.infobox.location dt{
border-color:#80d
}
div.infobox.quest .heading{
background-image:linear-gradient(360deg,#960 0%, #E90 100%);
}
div.infobox.quest dd,div.infobox.quest dt{
border-color:#E90
}
div.infobox.quest .subheading,div.infobox.quest .heading{
text-align:center;
padding:2px;
font-weight:bold;
background-image:linear-gradient(360deg,#960 0%, #E90 100%) !important;
border:1px solid rgba(0,0,0,0.25);
margin:-1px -1px 5px !important
}
div.recipe{
min-width:300px;
width:auto;
display:inline-block;
float:none;
clear:none;
vertical-align:top;
font-size:1em;
margin:0 1em 0 0;
position:relative;
background:#FFF;
border:1px solid #AAA;
padding:0;
background-image:linear-gradient(135deg,#fff 0%,#eee 100%)
}
div.recipe::after{
bottom:-4px;
content:"";
position:absolute;
width:100%;
left:0;
height:3px;
background-size:100% 3px
}
div.recipe .heading{
font-weight:700;
text-align:center;
border:1px solid rgba(0,0,0,0.25);
border-bottom-width:0;
position:relative;
z-index:1;
margin:-1px -1px 5px !important;
font-family:EasonPro,"Times New Roman",serif !important;
font-size:1.417em !important;
color:#FFF !important;
background-image:linear-gradient(#eca 0%,#ca7 100%);
text-shadow:rgba(0,0,0,0.75) 0 0 0.25em;
line-height:1.176em;
font-size-adjust:0.43;
padding:0.5em !important
}
div.recipe dd,div.infobox.recipe dt{
border-color:#ca7
}
div.recipe .subheading,div.infobox.recipe .heading{
text-align:center;
padding:2px;
font-weight:bold;
background-image:linear-gradient(#eca 0%,#ca7 100%) !important;
border:1px solid rgba(0,0,0,0.25);
margin:-1px -1px 5px !important
}
div.recipe .subheading{
border-width:0 1px
}
div.recipe dl{
margin:10px 0
}
div.recipe dt{
float:left;
text-align:right;
width:78px;
line-height:1em;
font-weight:700;
clear:left;
border-right:2px solid #A99A86;
margin:0 -2px 0 0;
padding:2px 8px 2px 3px;
line-height:1.667em
}
div.recipe dd{
float:left;
border-left:2px solid #A99A86;
margin:0;
padding:2px 7px
}
div.recipe .wrapper{
clear:both;
padding:0
}
div.recipe.magic .heading{
color:#0FF !important;
}
div.recipe.magic dd,div.recipe.magic dt{
border-color:#0FF !important
}
div.recipe.rare .heading{
color:#FFF !important;
background-image:linear-gradient(#F97 0%,#ca7 100%) !important
}
div.recipe.rare dd,div.infobox.rare dt{
border-color:#F97 !important
}
div.recipe .recipe-icon{
float:right;
position:relative;
z-index:2;
width:auto;
margin:5px
}
.recipe-icon a.new{
color:transparent;
display:inline-block;
font:0/0 a;
overflow:hidden;
vertical-align:middle;
height:40px;
width:40px
}
.recipe-icon a.new{
height:48px;
width:48px
}
.recipe-icon p{
text-align:center;
color:#444;
font-size:9px !important;
background-color:rgba(255,255,255,0.5);
border-radius:0.75em;
line-height:1em;
margin:0.25em -0.5em;
padding:2px
}