|
|
| (2 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) |
| Linha 1: |
Linha 1: |
| /* Estrutura Base */
| | .mw-body-header{ |
| .IntroCard { | | height:250px; |
| position: relative;
| | background: url(https://playtest.institutodaguerra.com/images/2/2f/Banner_-_Origens.png); |
| float:left;
| | background-repeat: no-repeat; |
| min-height: 700px;
| | background-size: cover; |
| width: 465px;
| | align-items: flex-end; |
| color: #2b282c;
| |
| margin: 15px 15px 15px 0;
| |
| }
| |
| *, :after, :before {
| |
| box-sizing: border-box;
| |
| }
| |
| div {
| |
| display: block;
| |
| }
| |
| .IntroCard:before {
| |
| content: "";
| |
| display: block;
| |
| position: absolute;
| |
| top: 0;
| |
| right: 0;
| |
| bottom: 0;
| |
| left: 0;
| |
| background-color: #cecbc5;
| |
| border-radius: 15px;
| |
| }
| |
| .OutlineFrame { | |
| position: relative;
| |
| min-height: 700px;
| |
| }
| |
| .IntroCard-content { | |
| position: relative;
| |
| /*text-align: center;*/
| |
| }
| |
| @media (min-width: 1024px) {
| |
| .IntroCard-figure {
| |
| position: relative;
| |
| overflow: hidden;
| |
| }
| |
| }
| |
| .IntroCard-figure {
| |
| position: relative;
| |
| width: 100%;
| |
| overflow: hidden;
| |
| height: 280px;
| |
| }
| |
| .IntroCard-figure{ | |
| margin: 0;
| |
| }
| |
| @media (min-width: 1024px) {
| |
| .IntroCard-figure:before {
| |
| content: "";
| |
| display: block;
| |
| padding-top: 0;
| |
| }
| |
| }
| |
| .IntroCard-figure:before {
| |
| content: "";
| |
| display: block;
| |
| padding-top: 0;
| |
| }
| |
| .IntroCard-image {
| |
| height: 100%;
| |
| width: 100%;
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| object-fit: cover;
| |
| object-position: 50% 0;
| |
| }
| |
| .IntroCard-image img {
| |
| border-style: none;
| |
| border-radius: 15px 15px 0 0;
| |
| }
| |
| .IntroCard-figure:after {
| |
| content: "";
| |
| display: block;
| |
| position: absolute;
| |
| left: 0;
| |
| bottom: 0;
| |
| width: 100%;
| |
| height: 40%;
| |
| }
| |
| .topleft{
| |
| position: absolute;
| |
| bottom: 0;
| |
| left: 24px;
| |
| font-size: 18px;
| |
| color: #FFF;
| |
| padding: 5px;
| |
| background: #897051;
| |
| } | | } |
|
| |
|
| /* Borda Personalizada */
| | .mw-body-header .page-heading, |
| .OutlineFrame .OutlineFrame-ext {
| | .mw-body-header .page-actions{ |
| overflow: hidden;
| | background: none repeat scroll 0% 0% rgba(0,0,0,0.3); |
| position: absolute;
| |
| top: 0.5rem;
| |
| bottom: 0.85rem;
| |
| left: 0.5rem;
| |
| right: 0.5rem;
| |
| color: #99664d;
| |
| font-size: 2rem;
| |
| pointer-events: none;
| |
| }
| |
| .OutlineFrame .OutlineFrame-ext:before {
| |
| position: absolute;
| |
| top: 1em;
| |
| bottom: 0;
| |
| left: 0;
| |
| right: 0;
| |
| border: 1px solid;
| |
| border-top: none;
| |
| content: "";
| |
| }
| |
| .OutlineFrame .OutlineFrame-circles { | |
| position: absolute;
| |
| height: 1em;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| }
| |
| .OutlineFrame .OutlineFrame-circles:before {
| |
| left: 0.2em;
| |
| }
| |
| .OutlineFrame .OutlineFrame-circles:before,
| |
| .OutlineFrame .OutlineFrame-circles:after { | |
| position: absolute;
| |
| height: 0.15em;
| |
| width: 0.15em;
| |
| top: 0.25em;
| |
| border-radius: 50%;
| |
| border: 1px solid #99664d;
| |
| content: "";
| |
| }
| |
| .OutlineFrame .OutlineFrame-circles:after {
| |
| right: 0.2em;
| |
| }
| |
| .OutlineFrame .OutlineFrame-cutOuts {
| |
| display: block;
| |
| height: 1em;
| |
| position: relative;
| |
| overflow: hidden;
| |
| }
| |
| .OutlineFrame .OutlineFrame-cutOuts:before {
| |
| left: -1em;
| |
| }
| |
| .OutlineFrame .OutlineFrame-cutOuts:before,
| |
| .OutlineFrame .OutlineFrame-cutOuts:after {
| |
| position: absolute;
| |
| top: -1em;
| |
| height: 2em;
| |
| width: 2em;
| |
| border: 1px solid;
| |
| border-radius: 50%;
| |
| content: "";
| |
| }
| |
| .OutlineFrame .OutlineFrame-cutOuts:after {
| |
| right: -1em;
| |
| }
| |
| .OutlineFrame .OutlineFrame-topCut {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 1em;
| |
| right: 1em;
| |
| height: 1em;
| |
| color: #99664d;
| |
| overflow: hidden;
| |
| }
| |
| .OutlineFrame .OutlineFrame-topCut:before {
| |
| left: 0;
| |
| }
| |
| .OutlineFrame .OutlineFrame-topCut:before,
| |
| .OutlineFrame .OutlineFrame-topCut:after {
| |
| position: absolute;
| |
| background: currentColor; | |
| height: 0.1rem;
| |
| width: calc(50% - 0.25em);
| |
| content: "";
| |
| }
| |
| .OutlineFrame .OutlineFrame-topCut:after {
| |
| right: 0;
| |
| }
| |
| .OutlineFrame .OutlineFrame-cut {
| |
| position: absolute;
| |
| top: -0.2em;
| |
| left: 50%;
| |
| transform: translateX(-50%);
| |
| display: block;
| |
| width: 0.4em;
| |
| height: 0.4em;
| |
| }
| |
| .OutlineFrame .OutlineFrame-cut:before {
| |
| position: absolute;
| |
| top: 0;
| |
| bottom: 0;
| |
| left: 0;
| |
| right: 0;
| |
| border: 1px solid;
| |
| transform: rotate(45deg);
| |
| content: "";
| |
| }
| |
| .OutlineFrame .OutlineFrame-ext.isDark {
| |
| top: 0.85rem;
| |
| bottom: 0.55rem;
| |
| left: 0.85rem;
| |
| right: 0.85rem;
| |
| color: #68482c;
| |
| font-size: 1.1rem;
| |
| }
| |
| .OutlineFrame .OutlineFrame-ext.isDark:after {
| |
| position: absolute;
| |
| top: 0;
| |
| bottom: 0;
| |
| left: 1em;
| |
| right: 1em;
| |
| border-top: 1px solid;
| |
| content: "";
| |
| }
| |
| /* Conteúdo do Card */
| |
| .IntroCard-wrapper {
| |
| position: relative;
| |
| padding: 0.5rem 0.95rem 1.5rem;
| |
| }
| |
| @media (min-width: 1024px) {
| |
| .IntroCard-title {
| |
| font-size: 2.2rem;
| |
| }
| |
| }
| |
| .IntroCard-title {
| |
| color: #68482c;
| |
| padding: 0 5px 0 5px;
| |
| margin: 0 0 0 0;
| |
| font-size: 25px;
| |
| }
| |
| | |
| #ClassName{
| |
| border-bottom: 2px solid #68482c;
| |
| margin-top: 0px;
| |
| margin-bottom: 0px;
| |
| }
| |
| #lore-separador{
| |
| padding:10px;
| |
| border-bottom: 2px solid #68482c;
| |
| background: rgba(137, 112, 81, 0.3);;
| |
| }
| |
| #lore{
| |
| border-left: 4px solid #baad9b;
| |
| font-style:italic;
| |
| font-size:16px;
| |
| margin: 0;
| |
| padding-left:10px;
| |
| }
| |
| #lore:first-letter{
| |
| font-size:18px;
| |
| font-weight:bold;
| |
| color: #897051;
| |
| }
| |
| | |
| /* Tabela interna */
| |
| .OutlineFrame table {
| |
| margin: 15px 0 0 0;
| |
| width: 435px;
| |
| background: linear-gradient(rgba(220,213,200,0.9), rgba(220,213,200,.9)), url(https://wiki.institutodaguerra.com/images/d/d2/Icon_objetivos.png);
| |
| background-position: center;
| |
| background-repeat: no-repeat;
| |
| background-size: contain;
| |
| }
| |
| .OutlineFrame td {
| |
| text-align: left;
| |
| vertical-align: top;
| |
| padding: 0 0 0 10px;
| |
| }
| |
| #titulo{
| |
| font-weight:bold;
| |
| width:140px;
| |
| } | | } |
