Template:Https://wiki.veloren.net/wiki/User:Ajima/MyStyle.css: Difference between revisions
Template page
Content added Content deleted
mNo edit summary |
mNo edit summary |
||
(199 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
/* Main Page */ |
|||
/* Used for nav button in main page */ |
|||
#mainpage-nav{ |
|||
padding: 10px; |
|||
border: none; |
|||
border-radius:5px; |
|||
background-color: #272d36; /* blue #3366cc*/ |
|||
} |
|||
/* Overide mediawiki nav link style */ |
|||
.plainlinks > a{ |
|||
color: #d8d8dd; |
|||
font-weight: bold; |
|||
font-size: 1em; |
|||
} |
|||
#mainpage-nav:hover { |
|||
color: white; |
|||
background-color: #ff6666; /* pink */ |
|||
} |
|||
/* Same style then nav button but separated in case */ |
|||
#button{ |
|||
max-height: 32px; |
|||
padding: 10px; |
|||
border: none; |
|||
border-radius:5px; |
|||
color: white; |
|||
background-color: rgba(92, 133, 214, 0.25); /* blue */ |
|||
} |
|||
#button:hover { |
|||
background-color: #ff6666; /* pink */ |
|||
} |
|||
/* overide default tab style */ |
|||
/* navtab */ |
|||
.tabs-tabbox.navbox{ |
|||
margin-bottom: 30px; |
|||
} |
|||
.tabs-tabbox.navbox > .tabs-input:checked + .tabs-label, .tabs-input-0:checked + .tabs-input-1 + .tabs-label { |
|||
z-index: 2; |
|||
background-color:rgba(92, 133, 214, 0.25); |
|||
color: #bfc8d9; /*white*/ |
|||
} |
|||
.tabs-tabbox.navbox > .tabs-container { |
|||
margin-top: -1px; |
|||
padding: 17px; |
|||
border-radius: 8px; |
|||
position: relative; |
|||
border-bottom: 3px solid #5c85d6; /* blue */ |
|||
width: inherit; |
|||
max-width: inherit; |
|||
min-width: inherit; |
|||
z-index: 1; |
|||
} |
|||
.tabs-tabbox.navbox > .tabs-label { |
|||
margin: 0; |
|||
position: relative; |
|||
display: inline-block; |
|||
vertical-align: bottom; |
|||
color: #5f6a7f; |
|||
background-color: #1f2735; |
|||
border: none; |
|||
} |
|||
.tabs-tabbox.navbox > .tabs-label:hover { |
|||
background-color:rgba(92, 133, 214, 0.25); |
|||
color: #bfc8d9; /*white*/ |
|||
} |
|||
.tabs-tabbox.navbox > .tabs-label { |
|||
margin:0; |
|||
border-radius: 0; |
|||
border-bottom: none; |
|||
position: relative; |
|||
display: inline-block; |
|||
vertical-align: bottom; |
|||
} |
|||
/* Contents */ |
|||
.clear{ |
|||
clear: both; |
|||
} |
|||
/* Used for any flex content */ |
|||
.flex-container { |
.flex-container { |
||
display: flex; |
display: flex; |
||
flex-direction: row; |
flex-direction: row; |
||
flex-wrap: wrap; |
flex-wrap: wrap; |
||
column-gap: 10px; /* tough mediawiki said it doesn't support gap, it does support */ |
|||
gap: 10px; |
|||
row-gap: 10px; |
|||
} |
} |
||
.hlist > div { |
.hlist > div { |
||
display : inline-block; |
display : inline-block; |
||
} |
} |
||
/* Force the overflow in table for Armors page */ |
|||
.Stats { |
.Stats { |
||
max-width:765px; |
max-width:765px; /* So picture of armor set and the table are next to each other */ |
||
overflow-x:auto; |
overflow-x:auto; |
||
} |
} |
||
.Stats > table, th, tr, td { |
.Stats > table, th, tr, td { |
||
padding: |
padding:0; |
||
} |
} |
||
/* Force the overflow in table for Weapons page */ |
|||
.Weapon-grid{ |
.Weapon-grid{ |
||
max-width: 960px; /* 960px is the max-width of body section */ |
|||
overflow-x:auto; |
overflow-x:auto; |
||
} |
|||
max-width: 960px; |
|||
/* Cardbox for category card*/ |
|||
/* Defines rounded border */ |
|||
.cardbox-image img { |
|||
display:block; |
|||
padding:0; |
|||
margin: 0; |
|||
border-radius:8px 8px 0 0; |
|||
} |
|||
/* Rounded title + hover effect */ |
|||
.cardbox-title { |
|||
max-height: 45px; |
|||
padding: 10px; |
|||
margin: 0; |
|||
border: none; |
|||
color: white; |
|||
background-color: #3366cc; /* blue */ |
|||
} |
|||
.plainlinks { |
|||
color:white; |
|||
} |
|||
.cardbox-title:hover { |
|||
background-color: #ff6666; /* pink */ |
|||
} |
|||
/* overide mediawiki links's style */ |
|||
.plainlinks{ |
|||
color:white; |
|||
} |
|||
/* CSS for upcoming category */ |
|||
.cardbox-title-grey { |
|||
max-height: 45px; |
|||
padding: 10px; |
|||
margin: 0; |
|||
border: none; |
|||
color: rgba(255,255,255,0.6); |
|||
background-color: #2b2f36; /* blue */ |
|||
} |
|||
.cardbox-overlay-container { |
|||
position: relative; |
|||
width: 300px; |
|||
border-radius:8px; |
|||
} |
|||
.cardbox-overlay-container:hover { |
|||
background-color: #2b2f36; |
|||
opacity:1; |
|||
} |
|||
.cardbox-overlay-img img { |
|||
opacity:0.6; |
|||
display:block; |
|||
padding:0; |
|||
margin: 0; |
|||
border-radius:8px 8px 0 0; |
|||
} |
|||
.cardbox-overlay-img p { |
|||
margin:0; |
|||
} |
|||
.cardbox-overlay-text p { |
|||
margin: 0; |
|||
padding: 10px; |
|||
color: rgba(0,0,0,0); |
|||
font-size: 1em; |
|||
position: absolute; |
|||
top:0px; |
|||
left:0px; |
|||
height:208.8px; |
|||
text-align: left; |
|||
border-radius:8px |
|||
} |
|||
.cardbox-overlay-text:hover p { |
|||
color: #d8d8dd; |
|||
background-color: #2b2f36; |
|||
} |
|||
/*End Cardbox */ |
|||
/* Iconbox */ |
|||
.iconbox{ |
|||
border : 2px; |
|||
border-style: dashed; |
|||
border-radius : 8px; |
|||
border-color: #3c578a; |
|||
padding:5px; |
|||
} |
|||
.iconbox:hover{ |
|||
border-style: solid; |
|||
background-color: #37445f;/* #2b2f36;*/ |
|||
} |
|||
/* tab */ |
|||
.tabheader{ |
|||
padding:8px; |
|||
color: #d8d8dd; |
|||
border-radius:8px 8px 0 0; |
|||
background-color: #663300; |
|||
} |
|||
.tabline{ |
|||
border-bottom:solid; |
|||
border-color: #663300; /* orange clear */ /* #382f27 brown */ |
|||
margin:15px 0; |
|||
content:" "; |
|||
padding:7px; |
|||
} |
|||
/* textheader */ |
|||
.textheader{ |
|||
background-color: #37445f; |
|||
text-align:center; |
|||
padding:10px; |
|||
margin:10px; |
|||
border-radius:8px |
|||
} |
|||
/* table header */ |
|||
th > p { |
|||
margin-top: 5px; |
|||
margin-bottom : 0px; |
|||
} |
} |
Latest revision as of 09:05, 17 October 2023
/* Main Page */
/* Used for nav button in main page */
#mainpage-nav{
padding: 10px;
border: none;
border-radius:5px;
background-color: #272d36; /* blue #3366cc*/
}
/* Overide mediawiki nav link style */
.plainlinks > a{
color: #d8d8dd;
font-weight: bold;
font-size: 1em;
}
#mainpage-nav:hover {
color: white;
background-color: #ff6666; /* pink */
}
/* Same style then nav button but separated in case */
#button{
max-height: 32px;
padding: 10px;
border: none;
border-radius:5px;
color: white;
background-color: rgba(92, 133, 214, 0.25); /* blue */
}
#button:hover {
background-color: #ff6666; /* pink */
}
/* overide default tab style */
/* navtab */
.tabs-tabbox.navbox{
margin-bottom: 30px;
}
.tabs-tabbox.navbox > .tabs-input:checked + .tabs-label, .tabs-input-0:checked + .tabs-input-1 + .tabs-label {
z-index: 2;
background-color:rgba(92, 133, 214, 0.25);
color: #bfc8d9; /*white*/
}
.tabs-tabbox.navbox > .tabs-container {
margin-top: -1px;
padding: 17px;
border-radius: 8px;
position: relative;
border-bottom: 3px solid #5c85d6; /* blue */
width: inherit;
max-width: inherit;
min-width: inherit;
z-index: 1;
}
.tabs-tabbox.navbox > .tabs-label {
margin: 0;
position: relative;
display: inline-block;
vertical-align: bottom;
color: #5f6a7f;
background-color: #1f2735;
border: none;
}
.tabs-tabbox.navbox > .tabs-label:hover {
background-color:rgba(92, 133, 214, 0.25);
color: #bfc8d9; /*white*/
}
.tabs-tabbox.navbox > .tabs-label {
margin:0;
border-radius: 0;
border-bottom: none;
position: relative;
display: inline-block;
vertical-align: bottom;
}
/* Contents */
.clear{
clear: both;
}
/* Used for any flex content */
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 10px; /* tough mediawiki said it doesn't support gap, it does support */
row-gap: 10px;
}
.hlist > div {
display : inline-block;
}
/* Force the overflow in table for Armors page */
.Stats {
max-width:765px; /* So picture of armor set and the table are next to each other */
overflow-x:auto;
}
.Stats > table, th, tr, td {
padding:0;
}
/* Force the overflow in table for Weapons page */
.Weapon-grid{
max-width: 960px; /* 960px is the max-width of body section */
overflow-x:auto;
}
/* Cardbox for category card*/
/* Defines rounded border */
.cardbox-image img {
display:block;
padding:0;
margin: 0;
border-radius:8px 8px 0 0;
}
/* Rounded title + hover effect */
.cardbox-title {
max-height: 45px;
padding: 10px;
margin: 0;
border: none;
color: white;
background-color: #3366cc; /* blue */
}
.plainlinks {
color:white;
}
.cardbox-title:hover {
background-color: #ff6666; /* pink */
}
/* overide mediawiki links's style */
.plainlinks{
color:white;
}
/* CSS for upcoming category */
.cardbox-title-grey {
max-height: 45px;
padding: 10px;
margin: 0;
border: none;
color: rgba(255,255,255,0.6);
background-color: #2b2f36; /* blue */
}
.cardbox-overlay-container {
position: relative;
width: 300px;
border-radius:8px;
}
.cardbox-overlay-container:hover {
background-color: #2b2f36;
opacity:1;
}
.cardbox-overlay-img img {
opacity:0.6;
display:block;
padding:0;
margin: 0;
border-radius:8px 8px 0 0;
}
.cardbox-overlay-img p {
margin:0;
}
.cardbox-overlay-text p {
margin: 0;
padding: 10px;
color: rgba(0,0,0,0);
font-size: 1em;
position: absolute;
top:0px;
left:0px;
height:208.8px;
text-align: left;
border-radius:8px
}
.cardbox-overlay-text:hover p {
color: #d8d8dd;
background-color: #2b2f36;
}
/*End Cardbox */
/* Iconbox */
.iconbox{
border : 2px;
border-style: dashed;
border-radius : 8px;
border-color: #3c578a;
padding:5px;
}
.iconbox:hover{
border-style: solid;
background-color: #37445f;/* #2b2f36;*/
}
/* tab */
.tabheader{
padding:8px;
color: #d8d8dd;
border-radius:8px 8px 0 0;
background-color: #663300;
}
.tabline{
border-bottom:solid;
border-color: #663300; /* orange clear */ /* #382f27 brown */
margin:15px 0;
content:" ";
padding:7px;
}
/* textheader */
.textheader{
background-color: #37445f;
text-align:center;
padding:10px;
margin:10px;
border-radius:8px
}
/* table header */
th > p {
margin-top: 5px;
margin-bottom : 0px;
}