Template:Character/css.css

.page-grid-container {
    all:unset;
}
.container {
    grid-area: container;
}

.buttons {
   grid-area: buttons;
   text-align:center;
   margin: 0.1em;
}
.mw-body .container-image img {
	width: auto;
	max-height: 400px;
}
@media screen and (min-width: 450px) {
.mw-body .container-image img {
	height: 400px !important;
    max-width: unset !important;
    }
    }
    
.grid-container {
    display: grid;
    grid-template-columns: repeat(10, 10%);
    justify-content: center;
}

/*new tabber css */
.character-image .tabber__header {
   align-self: center;
}

.character-info .tabber__section {
   height: auto !important;
}

.character-info .tabber__tabs {
   box-shadow: unset;
}
.character-info .tabber__tab {
   border: 1px solid black;
   margin: 0.1em;
   padding: 2px;
}

/* New Skills table css start */
.crit-text {
font-weight: bold;
font-style: italic;
/*color: #fbfba3;
text-shadow: -1px 1px 1px #6f6f6f, -1px -1px 1px #f9b186, 1px 1px 1px #6f6f6f, 1px -1px 1px #6f6f6f, -1px 1px 1px #6f6f6f, -1px -1px 1px #6f6f6f, 1px 1px 1px #6f6f6f, 1px -1px 1px #6f6f6f; 
font-size: small;*/
/*filter: drop-shadow(0 0 3px #371a02); 
background: -webkit-linear-gradient(white 10%, #e8dd8e 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #7d5324;
padding-right: 0.3em;*/
}
.character-skill-row {
    background-color: #FFF;
}
.character-skill-row:nth-child(2n+1) {
    background-color: #F3F3F3;
}

[class*="-skills-grid-table"] {
    border: 1px solid #AAA;
    overflow: hidden;
}

[class*="-skill-grid-container-title"]  {
    background-color: #ffd441; font-weight: bold;
}

[class*="-skill-grid-container-title"] [class*="-skill-"] {
    text-align: center;
    align-content: center;
    justify-content: center;
}
[class*="-skills-grid-table"] [class*="skill-row"] {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #AAA;
}

[class*="-skill-grid"] [class*="-skill-"] {
    padding: 0.25em 0.5em;
}


.character-skill-name-image {
    grid-area: skill-name-image;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    justify-content: flex-start;
    position: relative;
    border-right: 1px dashed #AAA;
}

.skill-image {
    display: flex;
    flex-direction: column;
}
.skill-img {
  margin-right: 0.2em;
}
.character-skill-element-type {
    grid-area: skill-element-type;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
    grid-template-areas:
    "ele-type-upper ele-type-lower";
    text-align: center;
}
.character-skill-element-type .upper-grid {
    grid-area: ele-type-upper;
}
.character-skill-element-type .lower-grid {
    grid-area: ele-type-lower;
    border-left:1px dashed #AAA;
}

.character-skill-mp {
    grid-area: skill-mp;
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    border-left: 1px dashed #AAA; 
}

.character-skill-mod {
    grid-area: skill-mod;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
    grid-template-areas:
    "mod-upper mod-lower";
    text-align: center;
    align-content: center;
    white-space: pre-wrap;
    border-left: 1px dashed #AAA;    
}
.skill-mod {
    grid-area: mod-upper;
}
.skill-crit-mod {
    grid-area: mod-lower;
    border-left: 1px dashed #AAA;
}
.character-skill-description {
    grid-area: skill-description;
    display:flex;
    text-align:left;
    position: relative;
    align-items: center;
    justify-content: stretch;
    border-right: 0;
    border-top: 1px dashed #AAA;
}

.character-skill-description table {
  border-collapse: collapse;
  border-style: hidden;
  text-align: center;
  margin: 0.25em;
}

.character-skill-description th, .character-skill-description td  {
  border: #aaa 1px solid;
}

.skill-mp {
    position: absolute; 
    right: 0.1em;
    bottom: 0.1em;
    border: 1px Blue solid; 
    padding: 0 0.5em; 
    border-radius: 0.5em;
    color: Blue;
    display: none;
    font-size: x-small;
    font-weight: bold;
}
[class*="padding"] {
    padding-top: 1.5em;
 }

[class*="-skill-grid-container"] {
    display: grid;
    grid-template-columns: 160px 200px 1fr 35px;
    grid-template-areas:
    "skill-name-image skill-element-type skill-mod skill-mp"
    "skill-name-image skill-description  skill-description skill-description";
}

@media screen and (max-width: 1200px) {
[class*="-skill-grid-container"] {
    grid-template-columns: 140px 200px 1fr 35px;
    grid-template-areas:
    "skill-name-image skill-element-type skill-mod skill-mp"
    "skill-name-image skill-description  skill-description skill-description";  
}
}

@media screen and (max-width: 900px) {
[class*="-skill-grid-container"] {
    grid-template-columns: 120px 100px 1fr 35px; 
    grid-template-areas:
    "skill-name-image skill-element-type skill-mod skill-mp"
    "skill-description skill-description skill-description skill-description";
}
.character-skill-element-type {
    grid-template-areas:
    "ele-type-upper" "ele-type-lower";
}
.character-skill-mod {
    grid-template-areas:
    "mod-upper" "mod-lower";
}
.character-skill-element-type .lower-grid {
    border-left: 0;
    border-top: 1px dashed #AAA;
}
.skill-crit-mod {
    border-left: 0;
    border-top: 1px dashed #AAA;
}
[class*="padding-low"] {
    padding-top: unset;
 }
}
@media screen and (max-width: 550px) {
[class*="-skill-grid-container"] {
    grid-template-columns: minmax(110px,1fr) 1fr 1fr 35px;
    grid-template-areas: 
    "skill-name-image skill-element-type skill-element-type skill-mp"
    "skill-name-image skill-mod skill-mod skill-mod" 
    "skill-description skill-description skill-description skill-description";
}
.character-skill-element-type {
    grid-template-areas:
    "ele-type-upper ele-type-lower";
}
.character-skill-element-type [class*="padding"] {
    padding-top: 1.5em;
 }
 .character-skill-element-type .lower-grid {
    border-top: 0;
    border-left: 1px dashed #AAA;
 }
.character-skill-mod {
  border-left: 0;
  border-top: 1px dashed #AAA;
 }
.character-skill-mod [class*="padding"] {
    padding-top: unset;
 }
 .character-skill-mod .skill-crit-mod {
    border-top: 1px dashed #AAA;
 }
}

/* New Skills table css end */

.character-image {
	grid-row: 1;
    grid-row-start: 1;
    grid-row-end: 3;
	grid-column-start: 1;
	grid-column-end: 6;
	text-align: center;
    max-height: 435px;
    width: auto;
}

.character-details {
    grid-row: 1;
    grid-column-start: 6;
    grid-column-end: 11;
    text-align: center;
}

.character-description,
.character-quests,
.character-stat-bonus,
.character-class,
.character-valor-chant,
.character-ex-special-move,
.character-skills,
.character-weapon {
	padding:1em;
    padding-bottom:unset;
}
div[class*='character']:not([class*='weapon']) table.anotherTable {
	margin-bottom: 0;
}

.character-selector {
    grid-row: 2;
    grid-column-start: 6;
    grid-column-end: 11;
    text-align: center;
    border: 1px solid #AAA;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 95%;
    justify-self: end;
    margin-bottom: inherit;
}

.character-selector-header {
    font-variant-caps: small-caps;
}

.character-selector-content {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    justify-content: center;
}

.character-description {
	grid-row: 3;
	grid-column-start: 1;
	grid-column-end: 7;
}

.character-class {
	grid-row:3;
	grid-column-start: 7;
	grid-column-end: 11;
}

.character-quests {
	grid-row: 4;
	grid-column-start: 1;
	grid-column-end: 7;
}

.character-stat-bonus {
	grid-row-start: 4;
    grid-row-end: 7;
	grid-column-start: 7;
	grid-column-end: 11;
}

.character-valor-chant {
	grid-row: 5;
	grid-column-start: 1;
	grid-column-end: 7;
}

.character-ex-special-move {
	grid-row: 6;
	grid-column-start: 1;
	grid-column-end: 7;
}

.character-skills,
.character-weapon
{
	grid-column-start: 1;
	grid-column-end: 11;
}
.character-skills {
	grid-row: 7;
}

.character-weapon {
	grid-row: 8;
}

@media only screen and (max-width: 768px) {
    .page-grid-container {
        all: unset;
    }
    .container {
       all: unset;
    }
    .character-selector {
       grid-row: 1;
       margin: auto;
       width: 70%;
       display: unset;
       grid-column-start: 1;
       grid-column-end: 11;
    }
    
	.character-image {
		grid-row: 2;
		grid-column-start: 1;
		grid-column-end: 11;
	}

	.character-details {
	    grid-row: 3;
	    grid-column-start: 1;
		grid-column-end: 11;
	}

	.character-description,
    .character-quests,
	.character-stat-bonus,
	.character-class,
	.character-valor-chant,
        .character-ex-special-move,
	.character-skills,
	.character-weapon {
	   padding:1em;
       padding-bottom:unset;
	}

	.character-description {
		grid-row: 4;
		grid-column-start: 1;
		grid-column-end: 11;
	}
    
	.character-quests {
		grid-row: 5;
		grid-column-start: 1;
		grid-column-end: 11;
	}

	.character-class {
		grid-row: 6;
		grid-column-start: 1;
		grid-column-end: 11;
	}

	.character-stat-bonus {
		grid-row: 7;
		grid-column-start: 1;
		grid-column-end: 11;
	}

	.character-valor-chant {
		grid-row: 8;
		grid-column-start: 1;
		grid-column-end: 11;
	}
        .character-ex-special-move {
		grid-row: 9;
		grid-column-start: 1;
		grid-column-end: 11;
	}  

	.character-skills {
		grid-row: 10;
	}

	.character-weapon {
		grid-row: 11;
	}
 }   
/*skill switcher start*/
   .character-skill-toggle {
     /* background-color: white;
      border-radius: 50%;
      user-select: none;*/
   }
   .character-skill-toggle::before {
      content: '';
      position: absolute;
      top: 15.5px;
      left: 13px;
      width: 20px;
      height: 20px;
      background-color: #AAA;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
   }
   .character-skill-toggle-text::before {
      content: '';
      position: absolute;
      top: 55%;
      left: 13px;
      width: calc(100% - 13px);
      height: 1em;
      border: 2px #AAA solid;
      background-color: white;
      transform: translate(0, -50%);
      z-index: 1;
   }
   .character-skill-toggle-content {
     position:relative;
     z-index: 2;
   }
   .character-skill-manifest-text {
     user-select: none;
     font-size: smaller;      
   }
   .character-skill-toggle-count {
     position: absolute;
     top: -4px;
     left: 18px;
     z-index: 2;
     font-weight: bolder;
     color: blue;
     }
 /*skill switcher end*/