MediaWiki:Main.css: Difference between revisions
From Tiny Rogues Wiki
(Blanked the page) Tag: Blanking |
No edit summary |
||
Line 1: | Line 1: | ||
/* after content section */ | |||
#mw-data-after-content > div { | |||
display: flex; | |||
flex-direction: column; | |||
padding: 10px; | |||
gap: 15px; | |||
place-items: center; | |||
border: 1px solid var(--border-color); | |||
border-top: 0; | |||
} | |||
#mw-data-after-content br { | |||
display: none; | |||
} | |||
#mw-data-after-content { | |||
background: var(--theme-tone-6); | |||
border-radius: 0 0 5px 5px; | |||
} | |||
#mw-data-after-content a.nn-cmp-show { | |||
margin-top: 0.8em; | |||
display: inline-block; | |||
padding: 5px 10px; | |||
background-color: var(--theme-tone-3); | |||
width: fit-content; | |||
border-radius: 4px; | |||
font-weight: 500; | |||
color: black; | |||
transition: background-color 0.3s, color 0.2s; | |||
text-decoration: none; | |||
color: var(--text-color); | |||
} | |||
#mw-data-after-content a.nn-cmp-show:hover { | |||
background-color: var(--accent-color); | |||
color: white; | |||
} | |||
@media screen and (min-width: 1100px) and (max-width: 1340px) { | |||
#content-bottom-stuff { | |||
margin-left: 0; | |||
display: table-caption; | |||
} | |||
#mw-related-navigation .sidebar-chunk { | |||
box-shadow: 0 0 2px 1px rgb(0 0 0 / 10%) !important; | |||
} | |||
#mw-related-navigation { | |||
position: absolute; | |||
right: 0; | |||
transform: translateX(90%); | |||
transition: 300ms; | |||
} | |||
#mw-related-navigation:hover { | |||
transform: translateX(0); | |||
} | |||
} | |||
/****************************** Checkbox, Radio & Button Styles ******************************/ | |||
input, | |||
button { | |||
position: relative; | |||
} | |||
/****************************** Namebox Styles ******************************/ | |||
table.nmbox { | |||
border-collapse: collapse; | |||
width: 100%; | |||
clear: both; | |||
font-size: 85%; | |||
border: 2px solid #bfdbe3; | |||
margin: 20px 0; | |||
} | |||
.nmbox th:first-of-type { | |||
width: 80px; | |||
} | |||
table.nmbox > tbody > tr > th, | |||
table.nmbox > tbody > tr > td { | |||
padding: 0.4em 0.8em; | |||
} | |||
table.nmbox > tbody > tr > td { | |||
background-color: #f7fdff; | |||
} | |||
table.nmbox > tbody > tr > th { | |||
background-color: #ebf4f7; | |||
} | |||
#p-googleadsense .pBody { | |||
padding-top: 5px; | |||
text-align: center; | |||
} | |||
/* Collapsible toggle */ | |||
.mw-content-ltr .section-border .mw-collapsible-toggle { | |||
padding-right: 10px; | |||
position: absolute; | |||
right: 0; | |||
} | |||
/* floating text */ | |||
.textfloat { | |||
color: #fff; | |||
text-shadow: 1px 1px 1px #000; | |||
} | |||
.textfloat a, | |||
.textfloat a:link, | |||
.textfloat a:visited, | |||
.textfloat a:hover, | |||
.textfloat a:active { | |||
color: inherit; | |||
} | |||
th { | |||
background-color: inherit; | |||
} | |||
/** | |||
Bilibili Sidebar Style | |||
**/ | |||
.portal h3 { | |||
background-image: none !important; | |||
padding: 0 0 3px 0 !important; | |||
} | |||
.portal h3, | |||
.portal h3:hover, | |||
.portal h3:active, | |||
.portal h3:link, | |||
.portal h3:visited { | |||
font-weight: bolder !important; | |||
text-decoration: none !important; | |||
} | |||
.portal li > ul { | |||
position: absolute; | |||
visibility: hidden; | |||
left: 100%; | |||
background-color: #fff; | |||
margin-top: -1em !important; | |||
margin-left: -10px !important; | |||
min-width: 180px; | |||
max-width: 230px; | |||
opacity: 0; | |||
-webkit-box-shadow: 10px 10px 10px #ccf; | |||
-moz-box-shadow: 10px 10px 10px #ccf; | |||
box-shadow: 10px 10px 10px #ccf; | |||
} | |||
.portal li:hover > ul { | |||
opacity: 1; | |||
visibility: visible; | |||
} | |||
.portal ul, | |||
.portal li, | |||
.portal a, | |||
.portal strong.selflink { | |||
display: block; | |||
} | |||
.portal a, | |||
.portal strong.selflink { | |||
max-width: 96%; | |||
} | |||
.portal li { | |||
position: relative; | |||
font-weight: bold; | |||
font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; | |||
text-decoration: none; | |||
padding: 0; | |||
margin: 0; | |||
} | |||
.portal li:hover { | |||
-webkit-transform: translateX(10px); | |||
-moz-transform: translateX(10px); | |||
-ms-transform: translateX(10px); | |||
-o-transform: translateX(10px); | |||
transform: translateX(10px); | |||
} | |||
.portal a, | |||
.portal a:link, | |||
.portal a:visited, | |||
.portal a:hover, | |||
.portal a:active, | |||
.portal strong.selflink { | |||
text-decoration: none; | |||
color: #000 !important; | |||
} | |||
.portal a:before, | |||
.portal a:after, | |||
.portal strong.selflink:before, | |||
.portal strong.selflink:after { | |||
color: #07a3d7; | |||
margin: auto 3px; | |||
} | |||
.portal a:before, | |||
.portal strong.selflink:before { | |||
content: ">"; | |||
} | |||
.portal a:after, | |||
.portal strong.selflink:after { | |||
content: "<"; | |||
visibility: hidden; | |||
-webkit-transform: translateX(15px); | |||
-moz-transform: translateX(15px); | |||
-ms-transform: translateX(15px); | |||
-o-transform: translateX(15px); | |||
transform: translateX(15px); | |||
} | |||
.portal a:hover:after, | |||
.portal strong.selflink:hover:after { | |||
visibility: visible; | |||
-webkit-transform: translateX(0px); | |||
-moz-transform: translateX(0px); | |||
-ms-transform: translateX(0px); | |||
-o-transform: translateX(0px); | |||
transform: translateX(0px); | |||
} | |||
.portal strong.selflink { | |||
color: #07a3d7 !important; | |||
border-bottom: 2px #07a3d7 solid; | |||
} | |||
.portal a:after, | |||
.portal strong.selflink:after, | |||
.portal li { | |||
-webkit-transition: transform 0.3s; | |||
-moz-transition: transform 0.3s; | |||
-o-transition: transform 0.3s; | |||
transition: transform 0.3s; | |||
} | |||
.portal li > ul { | |||
-webkit-transition: opacity 0.3s; | |||
-moz-transition: opacity 0.3s; | |||
-o-transition: opacity 0.3s; | |||
transition: opacity 0.3s; | |||
} |
Revision as of 16:57, 19 January 2024
/* after content section */
#mw-data-after-content > div {
display: flex;
flex-direction: column;
padding: 10px;
gap: 15px;
place-items: center;
border: 1px solid var(--border-color);
border-top: 0;
}
#mw-data-after-content br {
display: none;
}
#mw-data-after-content {
background: var(--theme-tone-6);
border-radius: 0 0 5px 5px;
}
#mw-data-after-content a.nn-cmp-show {
margin-top: 0.8em;
display: inline-block;
padding: 5px 10px;
background-color: var(--theme-tone-3);
width: fit-content;
border-radius: 4px;
font-weight: 500;
color: black;
transition: background-color 0.3s, color 0.2s;
text-decoration: none;
color: var(--text-color);
}
#mw-data-after-content a.nn-cmp-show:hover {
background-color: var(--accent-color);
color: white;
}
@media screen and (min-width: 1100px) and (max-width: 1340px) {
#content-bottom-stuff {
margin-left: 0;
display: table-caption;
}
#mw-related-navigation .sidebar-chunk {
box-shadow: 0 0 2px 1px rgb(0 0 0 / 10%) !important;
}
#mw-related-navigation {
position: absolute;
right: 0;
transform: translateX(90%);
transition: 300ms;
}
#mw-related-navigation:hover {
transform: translateX(0);
}
}
/****************************** Checkbox, Radio & Button Styles ******************************/
input,
button {
position: relative;
}
/****************************** Namebox Styles ******************************/
table.nmbox {
border-collapse: collapse;
width: 100%;
clear: both;
font-size: 85%;
border: 2px solid #bfdbe3;
margin: 20px 0;
}
.nmbox th:first-of-type {
width: 80px;
}
table.nmbox > tbody > tr > th,
table.nmbox > tbody > tr > td {
padding: 0.4em 0.8em;
}
table.nmbox > tbody > tr > td {
background-color: #f7fdff;
}
table.nmbox > tbody > tr > th {
background-color: #ebf4f7;
}
#p-googleadsense .pBody {
padding-top: 5px;
text-align: center;
}
/* Collapsible toggle */
.mw-content-ltr .section-border .mw-collapsible-toggle {
padding-right: 10px;
position: absolute;
right: 0;
}
/* floating text */
.textfloat {
color: #fff;
text-shadow: 1px 1px 1px #000;
}
.textfloat a,
.textfloat a:link,
.textfloat a:visited,
.textfloat a:hover,
.textfloat a:active {
color: inherit;
}
th {
background-color: inherit;
}
/**
Bilibili Sidebar Style
**/
.portal h3 {
background-image: none !important;
padding: 0 0 3px 0 !important;
}
.portal h3,
.portal h3:hover,
.portal h3:active,
.portal h3:link,
.portal h3:visited {
font-weight: bolder !important;
text-decoration: none !important;
}
.portal li > ul {
position: absolute;
visibility: hidden;
left: 100%;
background-color: #fff;
margin-top: -1em !important;
margin-left: -10px !important;
min-width: 180px;
max-width: 230px;
opacity: 0;
-webkit-box-shadow: 10px 10px 10px #ccf;
-moz-box-shadow: 10px 10px 10px #ccf;
box-shadow: 10px 10px 10px #ccf;
}
.portal li:hover > ul {
opacity: 1;
visibility: visible;
}
.portal ul,
.portal li,
.portal a,
.portal strong.selflink {
display: block;
}
.portal a,
.portal strong.selflink {
max-width: 96%;
}
.portal li {
position: relative;
font-weight: bold;
font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 0;
margin: 0;
}
.portal li:hover {
-webkit-transform: translateX(10px);
-moz-transform: translateX(10px);
-ms-transform: translateX(10px);
-o-transform: translateX(10px);
transform: translateX(10px);
}
.portal a,
.portal a:link,
.portal a:visited,
.portal a:hover,
.portal a:active,
.portal strong.selflink {
text-decoration: none;
color: #000 !important;
}
.portal a:before,
.portal a:after,
.portal strong.selflink:before,
.portal strong.selflink:after {
color: #07a3d7;
margin: auto 3px;
}
.portal a:before,
.portal strong.selflink:before {
content: ">";
}
.portal a:after,
.portal strong.selflink:after {
content: "<";
visibility: hidden;
-webkit-transform: translateX(15px);
-moz-transform: translateX(15px);
-ms-transform: translateX(15px);
-o-transform: translateX(15px);
transform: translateX(15px);
}
.portal a:hover:after,
.portal strong.selflink:hover:after {
visibility: visible;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
.portal strong.selflink {
color: #07a3d7 !important;
border-bottom: 2px #07a3d7 solid;
}
.portal a:after,
.portal strong.selflink:after,
.portal li {
-webkit-transition: transform 0.3s;
-moz-transition: transform 0.3s;
-o-transition: transform 0.3s;
transition: transform 0.3s;
}
.portal li > ul {
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
}