Difference between revisions of "MediaWiki:Common.css"

From Final Fantasy Hacktics Wiki
Jump to navigation Jump to search
Line 58: Line 58:
 
   outline-color: #FFF;
 
   outline-color: #FFF;
 
   transition: background-color 250ms linear;
 
   transition: background-color 250ms linear;
 +
  color: #D1D6B3;
 +
  text-shadow: rgba(0, 0, 0, 0.75) 0.05em 0em 0.15em, rgba(0, 0, 0, 0.75) -0.048em -0.015em 0.15em, rgba(0, 0, 0, 0.75) 0.041em 0.029em 0.15em, rgba(0, 0, 0, 0.75) -0.03em -0.04em 0.15em, rgba(0, 0, 0, 0.75) 0.016em 0.047em 0.15em, rgba(0, 0, 0, 0.75) -0.001em -0.05em 0.15em;
 
}
 
}
 
.map-cell-grid-data.low, .map-cell-grid-data.high {
 
.map-cell-grid-data.low, .map-cell-grid-data.high {

Revision as of 14:12, 31 July 2021

/* CSS placed here will be applied to all skins */
.fftfont
{
	display: block;
	width: 20px;
	height: 28px;
	background-image: url('/font.png');
	background-repeat: no-repeat;
}

.noautonum .tocnumber { display: none; }

h1 { margin-top: 0.50em; }
h2 { margin-top: 0.45em; }
h3 { margin-top: 0.40em; }
h4 { margin-top: 0.35em; }
h5 { margin-top: 0.30em; }
h6 { margin-top: 0.25em; }

.map-table {
  margin:0 auto;
}
.map-screenshot-bev {
  position: absolute;
  z-index: -1;
  padding: 56px;
}
.map-screenshot-bev > img {
  transform: scale(200%) translate(25%, 25%); 
}
.map-row {
  height: 56px;
}
.map-cell {
  display: inline-block;
  float: left;
  font-size: 18px;
  font-family: Verdana;
  width: 56px;
  height: 56px;
  line-height: 56px;
  white-space: nowrap;
  outline-width: 2px;
  outline-offset: -2px;
  outline-color: #8E8A65;
  outline-style: dotted;
}
.map-cell.map-cell-number {
  background-color: #D1D6B3;
}
.map-cell-number {
  outline-style: solid;
}
.map-cell-empty {
  outline-width: 0;
}
.map-cell-grid {
  outline-color: #FFF;
  transition: background-color 250ms linear;
  color: #D1D6B3;
  text-shadow: rgba(0, 0, 0, 0.75) 0.05em 0em 0.15em, rgba(0, 0, 0, 0.75) -0.048em -0.015em 0.15em, rgba(0, 0, 0, 0.75) 0.041em 0.029em 0.15em, rgba(0, 0, 0, 0.75) -0.03em -0.04em 0.15em, rgba(0, 0, 0, 0.75) 0.016em 0.047em 0.15em, rgba(0, 0, 0, 0.75) -0.001em -0.05em 0.15em;
}
.map-cell-grid-data.low, .map-cell-grid-data.high {
  height: 28px;
  line-height: 28px;
}
.map-cell-grid:hover .map-cell-grid-data {
  background-color: rgba(128,128,255,0.667);
}
.map-cell-grid:hover .map-cell-grid-data.unwalkable {
  background-color: rgba(255,0,0,0.667);
}
.map-cell-grid:hover .map-cell-grid-data.unselectable {
  background-color: rgba(0,0,0,0.667);
}
 

.angled-screenshots {
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	align-content: stretch;
	margin: 1em;
}

.angled-screenshot {
	position: relative;
	display: inline-block;
	background-color: #D1D6B3;
	border: 4px solid #8E8A65;
	margin: 1em;
}
.angled-screenshot span { 
	padding: 0.125em 0.5em;
	font-size: 24px;
  text-shadow: rgba(209, 214, 179, 0.9) 0.15em 0em 0.333em, rgba(209, 214, 179, 0.9) -0.143em -0.046em 0.333em, rgba(209, 214, 179, 0.9) 0.122em 0.087em 0.333em, rgba(209, 214, 179, 0.9) -0.09em -0.12em 0.333em, rgba(209, 214, 179, 0.9) 0.049em 0.142em 0.333em, rgba(209, 214, 179, 0.9) -0.003em -0.15em 0.333em;
}
.top-left {
	position: absolute;
	top: 0;
	left: 0;
}
.top-right {
	position: absolute;
	top: 0;
	right: 0;
}
.bottom-left {
	position: absolute;
	bottom: 0;
	left: 0;
}
.bottom-right {
	position: absolute;
	bottom: 0;
	right: 0;
}
.angled-screenshot-image img {
  padding: 8px;
}

.map-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: baseline;
	align-content: space-around;
}

.map-list-entry {
  text-align: center;
  font-weight: bold;
  background-color: #D1D6B3;
  border: 2px solid #8E8A65;
  padding: 8px;
  margin: 1em;
}

.map-list-entry-name {
  display: block;
  text-align: center;
  margin-bottom: 8px
}