Welcome to IOPWiki, Commander.
We are searching for editors to complete gameplay topics in all games. You can contribute without an account. Learn how to contribute and join our Discord server.

MediaWiki:Gadget-SkillForm.css: Difference between revisions

Welcome to IOP Wiki. This website is maintained by the Girls' Frontline community and is free to edit by anyone.
Jump to navigation Jump to search
Moved skillform style from Template to here
No edit summary
 
(9 intermediate revisions by 3 users not shown)
Line 7: Line 7:
   flex-direction: column;
   flex-direction: column;
   min-height: 225px;
   min-height: 225px;
}
.skilltabarea {
  display: flex;
  background-color: rgba(100,100,100,0.7);
  margin: 5px;
  flex-basis: 100%;
  flex-grow: 1;
  margin: 0;
  padding: 5px;
}
.skillcontainer {
  background: rgba(0, 0, 0, 0.5);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding: 10px;
  position: relative;
}
.skillcontent {
  /*position: absolute;*/
  display: flex;
  flex-direction: column;
  /*top: 10px;
  bottom: 0px;*/
}
.skillicon {
  background: rgba(128, 128, 128, 0);
  width: 52px;
  height: 52px;
}
.skilllevel{
width: 70px;
}
.skillform .skill-value {
color: greenyellow;
}
}


Line 15: Line 56:
text-align:center;
text-align:center;
border:none;
border:none;
color:rgb(63,63,63);
color:#3f3f3f;
}
.strategy-fairy select {
background-color:#739ee7;
}
.battle-fairy select {
background-color:#f76529;
}
}


Line 21: Line 68:
background-color:rgba(255, 255, 255, 0.25);
background-color:rgba(255, 255, 255, 0.25);
padding-left: 5px;
padding-left: 5px;
min-width:300px;
}
}


Line 27: Line 75:
}
}


.skilldesc {
.maxanalysis {
color: #FB0061;
width: min-content;
}
 
.skillform p.skilldesc {
overflow-y:auto;
overflow-y:auto;
margin:0;
margin:0;
Line 33: Line 86:




.skillform.loading .skilltabarea{
.skillform.loading .skillcontainer{
   background-image: url('/images/8/88/gfloading.gif');
   background-image: url('/images/8/88/gfloading.gif');
   background-repeat: no-repeat;
   background-repeat: no-repeat;
Line 39: Line 92:
   background-position: bottom right;
   background-position: bottom right;
   background-size: 30px;
   background-size: 30px;
}
#description {
overflow-y:auto;
}
}



Latest revision as of 16:26, 26 January 2024

/* For skills on T-Doll pages */
.skillform {
  display:flex;
  background-color: rgba(0,0,0,0.5);
  margin: 2px;
  flex-grow: 1;
  flex-direction: column;
  min-height: 225px;
}

.skilltabarea {
  display: flex;
  background-color: rgba(100,100,100,0.7);
  margin: 5px;
  flex-basis: 100%;
  flex-grow: 1;
  margin: 0;
  padding: 5px;
}

.skillcontainer {
  background: rgba(0, 0, 0, 0.5);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding: 10px;
  position: relative;
}

.skillcontent {
  /*position: absolute;*/
  display: flex;
  flex-direction: column;
  /*top: 10px;
  bottom: 0px;*/
}

.skillicon {
  background: rgba(128, 128, 128, 0);
  width: 52px;
  height: 52px;
}

.skilllevel{
	width: 70px;
}

.skillform .skill-value {
	color: greenyellow;
}

.skilllevel select {
	background-color: #f0b000;
	width:60px;
	height:21px;
	text-align:center;
	border:none;
	color:#3f3f3f;
}
.strategy-fairy select {
	background-color:#739ee7;
}
.battle-fairy select {
	background-color:#f76529;
}

.skillname {
	background-color:rgba(255, 255, 255, 0.25);
	padding-left: 5px;
	min-width:300px;
}

.skillconditions {
	color: #f0b000;
}

.maxanalysis {
	color: #FB0061;
	width: min-content;
}

.skillform p.skilldesc {
	overflow-y:auto;
	margin:0;
}


.skillform.loading .skillcontainer{
  background-image: url('/images/8/88/gfloading.gif');
  background-repeat: no-repeat;
  background-attachment: local;
  background-position: bottom right;
  background-size: 30px;
}

@-moz-document url-prefix() {
	.skill{
		-moz-appearance: none;
		text-indent: -5px;	
		text-overflow: "";
		background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);	
		background-position: calc(100% - 10px) calc(0.5em + 2px), calc(100% - 5px) calc(0.5em + 2px), calc(100% - 2.5em) 0.5em;
		background-size: 5px 5px, 5px 5px, 1px 1.5em;
		background-repeat: no-repeat;
	}
}