Template:Infobox material/styles.css: Difference between revisions
From Captain of Industry Wiki
Thadius856 (talk | contribs) Initial creation for a very basic. Basic and brief test follows. |
Thadius856 (talk | contribs) migrate text-shadow from .inner-header to .title to prevent the tier from receiving a glow |
||
| (17 intermediate revisions by 2 users not shown) | |||
| Line 2: | Line 2: | ||
- Template:Infobox material | - Template:Infobox material | ||
- Template:Infobox machine | |||
- Template:Infobox transport | |||
- Template:Infobox vehicle | |||
- Template:Infobox storage | |||
*/ | */ | ||
. | .infobox-wrapper { | ||
float: right; | |||
clear: right; | |||
} | |||
.outer-box { | |||
display:inline-block; | |||
min-width: 250px; | |||
max-width: 375px; | |||
border: 3px solid rgba(255,153,0,1); | |||
border-radius: 15px; | |||
margin: 10px; | |||
font-size: 14px; | |||
background-color: rgba(46,46,46,1); | |||
} | |||
.inner-header { | |||
width: 100%; | |||
vertical-align: middle; | |||
text-align: center; | |||
background-color: rgba(34,34,34,1); | |||
font-size: 20px; | |||
color: rgba(255,164,22,1); | |||
font-family: Georgia, Liberation Serif, Times, serif; | |||
border-radius: 15px 15px 0 0; | |||
border-bottom: 3px solid rgba(252,162,58,1); | |||
padding: 10px 0; | |||
display: flex; | |||
height: 48px; | |||
line-height: 48px; | |||
} | |||
.designation, .tier { | |||
display: inline-block; | |||
min-width: 48px; | |||
} | |||
.designation { | |||
padding-left: 5px; | |||
} | |||
.title { | |||
width: 100%; | |||
text-shadow: 0 0 10px rgba(255, 162, 58, 0.7); | |||
} | |||
.tier { | |||
text-align: right; | |||
padding-right: 8px; | |||
font-size: 18px; | |||
color: rgba(255,255,255,1); | |||
} | |||
.inner-main { | |||
text-align: center; | |||
padding: 10px 10px 0; | |||
} | |||
.description { | |||
padding: 10px 0px 0px 0px; | |||
} | |||
.inner-table { | |||
padding: 10px; | |||
} | |||
.inner-inner-table { | |||
vertical-align: top; | |||
width: 100%; | |||
} | |||
.table { | |||
border-collapse: collapse; | |||
border-spacing: 0 8px; | |||
flex-grow: 1; | |||
line-height: 16px; | |||
white-space: nowrap; | |||
width: 100%; | |||
} | |||
.table-tr { | |||
border-top: 1px solid white; | |||
vertical-align: top; | |||
} | |||
.table-td-left { | |||
text-align: right; | |||
font-weight: bold; | |||
padding: 5px 5px 5px 0; | |||
} | |||
.table-td-right { | |||
padding: 5px 0 5px 5px; | |||
} | |||
Latest revision as of 12:42, 23 January 2022
/* External stylesheet intended for ease of maintenance with the following templates:
- Template:Infobox material
- Template:Infobox machine
- Template:Infobox transport
- Template:Infobox vehicle
- Template:Infobox storage
*/
.infobox-wrapper {
float: right;
clear: right;
}
.outer-box {
display:inline-block;
min-width: 250px;
max-width: 375px;
border: 3px solid rgba(255,153,0,1);
border-radius: 15px;
margin: 10px;
font-size: 14px;
background-color: rgba(46,46,46,1);
}
.inner-header {
width: 100%;
vertical-align: middle;
text-align: center;
background-color: rgba(34,34,34,1);
font-size: 20px;
color: rgba(255,164,22,1);
font-family: Georgia, Liberation Serif, Times, serif;
border-radius: 15px 15px 0 0;
border-bottom: 3px solid rgba(252,162,58,1);
padding: 10px 0;
display: flex;
height: 48px;
line-height: 48px;
}
.designation, .tier {
display: inline-block;
min-width: 48px;
}
.designation {
padding-left: 5px;
}
.title {
width: 100%;
text-shadow: 0 0 10px rgba(255, 162, 58, 0.7);
}
.tier {
text-align: right;
padding-right: 8px;
font-size: 18px;
color: rgba(255,255,255,1);
}
.inner-main {
text-align: center;
padding: 10px 10px 0;
}
.description {
padding: 10px 0px 0px 0px;
}
.inner-table {
padding: 10px;
}
.inner-inner-table {
vertical-align: top;
width: 100%;
}
.table {
border-collapse: collapse;
border-spacing: 0 8px;
flex-grow: 1;
line-height: 16px;
white-space: nowrap;
width: 100%;
}
.table-tr {
border-top: 1px solid white;
vertical-align: top;
}
.table-td-left {
text-align: right;
font-weight: bold;
padding: 5px 5px 5px 0;
}
.table-td-right {
padding: 5px 0 5px 5px;
}