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
m Forgot the "loading" class name
No edit summary
 
(13 intermediate revisions by 3 users not shown)
Line 1: Line 1:
/* For skills on T-Doll pages */
/* For skills on T-Doll pages */
.skill {
.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;
background-color: #f0b000;
width:60px;
width:60px;
Line 6: 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;
}
 
.skillname {
background-color:rgba(255, 255, 255, 0.25);
padding-left: 5px;
min-width:300px;
}
}


.skillform.loading .skilltabarea{
.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-image: url('/images/8/88/gfloading.gif');
   background-repeat: no-repeat;
   background-repeat: no-repeat;
Line 15: 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;
	}
}