User:SOTO/CSS6: Difference between revisions
From Tardis Wiki, the free Doctor Who reference
No edit summary |
No edit summary |
||
(10 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<pre> | <pre> | ||
div#inline-box { | div#inline-box { | ||
float: left; | float: left; | ||
Line 5: | Line 6: | ||
text-align: center; | text-align: center; | ||
border: 1px solid var(--accent-7); | border: 1px solid var(--accent-7); | ||
width: | width: 246px; | ||
margin: | margin: 9px 14px 5px 5px; | ||
line-height: 1.1em; | line-height: 1.1em; | ||
font-size: .8em; | font-size: .8em; | ||
font-weight: 400; | font-weight: 400; | ||
font-style: normal; | font-style: normal; | ||
background-color: # | /* background-color: #0c1d3e; */ | ||
color: var(--text-color); | color: var(--text-color); | ||
position: relative; | |||
left: -3px; | |||
top: -4.28px; | |||
} | } | ||
Line 74: | Line 78: | ||
right: -0.408em; | right: -0.408em; | ||
right: -0.25289em; | right: -0.25289em; | ||
} | } | ||
Line 107: | Line 110: | ||
/* outline-color: hsl(216deg 23% 55%); */ | /* outline-color: hsl(216deg 23% 55%); */ | ||
outline-color: #8d99ab; | outline-color: #8d99ab; | ||
/* outline-color: # | /* outline-color: #8b9ebb; */ | ||
border-radius: 14px; | border-radius: 14px; | ||
box-shadow: 0 0 0 6px var(--primary-3), 0 0 0 6px var(--TEXT-A-H1); | box-shadow: 0 0 0 6px var(--primary-3), 0 0 0 6px var(--TEXT-A-H1); | ||
box-shadow: 0 0 0 5px var(--primary-3), 0px 0 0 6px #0b1f42, 1px 0 0 9px var(--primary-25), -9px 21px 15px 2px var(--primary-4), -12px 12px 15px -2px var(--primary-5), 0px 3px 20px 6px var(--primary-5), 63px 62px 30px -30px var(--primary-18); | box-shadow: 0 0 0 5px var(--primary-3), 0px 0 0 6px #0b1f42, 1px 0 0 9px var(--primary-25), -9px 21px 15px 2px var(--primary-4), -12px 12px 15px -2px var(--primary-5), 0px 3px 20px 6px var(--primary-5), 63px 62px 30px -30px var(--primary-18); | ||
box-shadow: 0 0 0 4px var(--primary-25), 0 0 0 7px var(--primary-3), 0px 0 0 8px #0b1f42, 1px 0 0 9px var(--primary-25), -9px 21px 15px 2px var(--primary-4), -12px 12px 15px -2px var(--primary-5), 0px 3px 20px 6px var(--primary-5), 63px 62px 30px -30px var(--primary-18); | |||
margin: 24.4px auto 16px auto; | margin: 24.4px auto 16px auto; | ||
max-width: 96.88%; | max-width: 96.88%; | ||
min-width: 62%; | |||
font-family: "Nunito","Rubik",sans-serif; | font-family: "Nunito","Rubik",sans-serif; | ||
font-size: 0.84em; | font-size: 0.84em; | ||
Line 119: | Line 124: | ||
left: 4.82px; | left: 4.82px; | ||
z-index: 0; | z-index: 0; | ||
z-index: -1; | /* z-index: -1; */ | ||
} | } | ||
h2 ~ .content-table-wrapper table.wikitable, | h2 ~ .content-table-wrapper table.wikitable, | ||
Line 138: | Line 143: | ||
top: -5.08px; | top: -5.08px; | ||
left: 2.82px; | left: 2.82px; | ||
left: 5.48px; | |||
} | } | ||
h3 + .content-table-wrapper table.wikitable, | h3 + .content-table-wrapper table.wikitable, | ||
h3 + .content-table-wrapper #smwtable, | h3 + .content-table-wrapper #smwtable, | ||
h3 + .content-table-wrapper table.smwtable { | h3 + .content-table-wrapper table.smwtable { | ||
top: - | top: -10.42px; | ||
} | } | ||
h3 + h4 + .content-table-wrapper table.wikitable, | h3 + h4 + .content-table-wrapper table.wikitable, | ||
h3 + h4 + .content-table-wrapper #smwtable, | h3 + h4 + .content-table-wrapper #smwtable, | ||
h3 + h4 + .content-table-wrapper table.smwtable { | h3 + h4 + .content-table-wrapper table.smwtable { | ||
top: -9. | top: -9.22px; | ||
} | } | ||
h4 + .content-table-wrapper table.wikitable, | h4 + .content-table-wrapper table.wikitable, | ||
h4 + .content-table-wrapper #smwtable, | h4 + .content-table-wrapper #smwtable, | ||
h4 + .content-table-wrapper table.smwtable { | h4 + .content-table-wrapper table.smwtable { | ||
top: -8. | top: -8.44px; | ||
} | } | ||
Line 204: | Line 210: | ||
background: #081832; | background: #081832; | ||
background: #0a1932; | background: #0a1932; | ||
background: # | /* background: #081938; */ | ||
/* background: #0a162c; */ | |||
/* background: #09162e; */ | |||
border: solid 3px var(--primary-21); | border: solid 3px var(--primary-21); | ||
/* border: solid 3px #1d335c; */ | |||
color: var(--text-color-2); | color: var(--text-color-2); | ||
} | } | ||
Line 240: | Line 249: | ||
.mw- | |||
ul#filetoc, .toc, .toccolours, .mw-warning { | |||
background: #0c1d3e; | |||
/* background: #0a1932; */ | |||
border-color: #8d99ab; | |||
/*max-width: 240px; | |||
margin-right: 0.06em;*/ | |||
border-color: var(--contrast-color-10); | |||
border-color: var(--primary-26); | |||
max-width: 238px; | |||
top: -15px; | |||
top: 1px; | |||
/* top: -39px; */ | |||
/* top: -34px; */ | |||
right: 12px; | |||
right: 20px; | |||
/* z-index: -1; */ | |||
} | |||
:root.theme-dark ul#filetoc > ul, | |||
:root.theme-dark .toc > ul, | |||
:root.theme-dark .toccolours > ul { | |||
filter: invert(1) hue-rotate(180deg); | |||
} | |||
.mw-body .toctitle { | |||
border-bottom: solid 3.4px var(--primary-26); | |||
border-bottom: solid 3.4px var(--primary-3); | |||
} | |||
.mw-body .toctitle h2 { | |||
color: #91a6d3; | |||
color: #8499c7; | |||
} | |||
.toctogglelabel { | |||
color: #91a6d3; | |||
} | } | ||
.mw-parser-output > | @media screen and (min-width: 1100px) { | ||
.mw-parser-output > h3 { | |||
margin-left: -0.972px; | |||
font-variant: unset; | |||
} | |||
} | } | ||
. | |||
.pullout-wrapper .pullout-content { | |||
/* background: var(--accent-1); */ | |||
} | } | ||
. | @media screen and (min-width: 851px) { | ||
top: | .pullout-content div#article-type { | ||
max-width: 54.82em; | |||
position: relative; | |||
border-right: solid 1em var(--accent-5); | |||
} | |||
#subpage-article ~ .portable-infobox ~ .portable-infobox, .subpage-tabs-main ~ .portable-infobox ~ .portable-infobox { | |||
margin-top: 2px; | |||
} | |||
} | } | ||
. | .stub-type#image-link { | ||
/* filter: invert(1) hue-rotate(322deg) brightness(0.93) contrast(2.2) saturate(0.58); */ | |||
} | } | ||
</pre> | </pre> |
Latest revision as of 02:44, 16 November 2024
div#inline-box { float: left; padding: 10px; text-align: center; border: 1px solid var(--accent-7); width: 246px; margin: 9px 14px 5px 5px; line-height: 1.1em; font-size: .8em; font-weight: 400; font-style: normal; /* background-color: #0c1d3e; */ color: var(--text-color); position: relative; left: -3px; top: -4.28px; } #mw-related-navigation { margin-top: 1px; /* margin-left: 1px; */ } @media screen and (min-width: 851px) { :root.theme-dark #mw-site-navigation .sidebar-chunk/*, #mw-related-navigation .sidebar-chunk*/ { /*width: 12.194em; position: relative; right: 0.052em; border-color: var(--contrast-color-3);*/ border-right-color: var(--primary-2); border-radius: 18px 4.3px 4.3px 18px / 14px 7px 7px 14px; border-radius: 20px 4.3px 4.3px 18px / 14px 7px 7px 14px; } } @media screen and (min-width: 1340px) { :root.theme-dark #mw-site-navigation .sidebar-chunk { -moz-box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-2.28px 0 0 var(--primary-9),-4.78px 0 0 var(--primary-4); -webkit-box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-2.28px 0 0 var(--primary-9),-4.78px 0 0 var(--primary-4); -o-box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-2.28px 0 0 var(--primary-9),-4.78px 0 0 var(--primary-4); -ms-box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-2.28px 0 0 var(--primary-9),-4.78px 0 0 var(--primary-4); box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-2.28px 0 0 var(--primary-9),-1.78px 0 0 var(--primary-2),-3.78px 0 0 var(--primary-4),1px 0px 0 4px var(--primary-17), 0px -1px 0 2px var(--primary-3); box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-2.28px 0 0 var(--primary-9),-1.78px 0 0 var(--primary-2),-3.78px 0 0 var(--primary-4),1px 0px 0 4px var(--primary-17), 1px 0px 0 2px var(--primary-3); /* box-shadow: -2px 0 0 var(--contrast-color-7) inset,3.78px 0 0 var(--primary-7),-3.28px 0 0 var(--primary-9),-3.78px 0 0 var(--primary-2),-4.78px 0 0 var(--primary-4),2px 0px 0 4px var(--primary-17), 1px 0px 0 2px var(--primary-3); */ /* border-top-right-radius: 17px; */ /* border-bottom-right-radius: 18px; */ } #mw-site-navigation .sidebar-chunk#site-navigation { font-size: 0.9626em; left: 0.068em; top: -0.4288em; border-bottom-left-radius: 3px; } /* #mw-related-navigation .sidebar-chunk { right: -0.438em; /* right: -0.348em; */ /* right: -0.598em; */ /* right: -0.348em; */ }/* #mw-related-navigation .sidebar-chunk { border-left-color: var(--primary-3); border-left-width: 3.28px; border-right-color: var(--contrast-color-3); box-shadow: 2px 0 0 var(--primary-7) inset,2.22px 0 0 var(--primary-7),5.42px 0 0 var(--primary-4),1px 1px 0 4px var(--primary-17), 1px -1px 0 4px var(--primary-2); border-radius: 4.3px 18px 18px 4.3px / 1px 14px 14px 7px; } */ :root.theme-dark #mw-related-navigation .sidebar-chunk { box-shadow: 2px 0 0 var(--primary-7) inset,1.22px 0 0 var(--primary-7),4.42px 0 0 var(--primary-4), -2px 0 0 var(--accent-9); right: -0.408em; right: -0.25289em; } } :root.theme-dark .mw-ui-button.mw-ui-progressive:not(:disabled) { outline: solid 4px var(--primary-26); background: var(--primary-28)!important; } table.wikitable, #smwtable, table.smwtable { border: solid 3px #555b66; border: solid 3px #3e4e6c; border: solid 3px var(--TEXT-B-H2); border: solid 3px hsl(220deg 60% 22%); border: solid 3px var(--primary-6); outline: solid 3px var(--accent-10); outline: solid 3px var(--contrast-color-14); /* outline: solid 3px #6f81a5; */ outline-color: var(--contrast-color-13); outline-color: #6d809b; outline-color: #8497b3; outline-color: #8691a1; outline-color: #909caf; outline-color: #869bbb; outline-color: #778daf; /* outline-color: hsl(216deg 23% 55%); */ outline-color: #8d99ab; /* outline-color: #8b9ebb; */ border-radius: 14px; box-shadow: 0 0 0 6px var(--primary-3), 0 0 0 6px var(--TEXT-A-H1); box-shadow: 0 0 0 5px var(--primary-3), 0px 0 0 6px #0b1f42, 1px 0 0 9px var(--primary-25), -9px 21px 15px 2px var(--primary-4), -12px 12px 15px -2px var(--primary-5), 0px 3px 20px 6px var(--primary-5), 63px 62px 30px -30px var(--primary-18); box-shadow: 0 0 0 4px var(--primary-25), 0 0 0 7px var(--primary-3), 0px 0 0 8px #0b1f42, 1px 0 0 9px var(--primary-25), -9px 21px 15px 2px var(--primary-4), -12px 12px 15px -2px var(--primary-5), 0px 3px 20px 6px var(--primary-5), 63px 62px 30px -30px var(--primary-18); margin: 24.4px auto 16px auto; max-width: 96.88%; min-width: 62%; font-family: "Nunito","Rubik",sans-serif; font-size: 0.84em; position: relative; top: -11.08px; left: 4.82px; z-index: 0; /* z-index: -1; */ } h2 ~ .content-table-wrapper table.wikitable, h2 ~ .content-table-wrapper #smwtable, h2 ~ .content-table-wrapper table.smwtable { left: 7.82px; } @media screen and (min-width: 1340px) { h2 ~ .content-table-wrapper table.wikitable, h2 ~ .content-table-wrapper #smwtable, h2 ~ .content-table-wrapper table.smwtable { max-width: 57.48vw; } } h2 + .content-table-wrapper table.wikitable, h2 + .content-table-wrapper #smwtable, h2 + .content-table-wrapper table.smwtable { top: -5.08px; left: 2.82px; left: 5.48px; } h3 + .content-table-wrapper table.wikitable, h3 + .content-table-wrapper #smwtable, h3 + .content-table-wrapper table.smwtable { top: -10.42px; } h3 + h4 + .content-table-wrapper table.wikitable, h3 + h4 + .content-table-wrapper #smwtable, h3 + h4 + .content-table-wrapper table.smwtable { top: -9.22px; } h4 + .content-table-wrapper table.wikitable, h4 + .content-table-wrapper #smwtable, h4 + .content-table-wrapper table.smwtable { top: -8.44px; } :root.theme-dark table.wikitable > tr:nth-child(n+2) > th, :root.theme-dark table.wikitable > * > tr:nth-child(n+2) > th, :root.theme-dark #smwtable tr:nth-child(n+2) > th, :root.theme-dark table.smwtable > * > tr:nth-child(n+2) > th { background: #162a4c; background: #1d3158; background: #17294c; background: #1d3158; background: #091836; /* background: #162b4c; */ /* background: #1f3154; */ /* background: #23375a; */ /* font-size: 1.1em; */ } :root.theme-dark .mw_metadata>tr>th, :root.theme-dark .mw-datatable>tr>th, :root.theme-dark .wikitable>tr>th, :root.theme-dark .mw_metadata>tr>td, :root.theme-dark .mw-datatable>tr>td, :root.theme-dark .wikitable>tr>td, :root.theme-dark .mw_metadata>*>tr>th, :root.theme-dark .mw-datatable>*>tr>th, :root.theme-dark .wikitable>*>tr>th, :root.theme-dark .mw_metadata>*>tr>td, :root.theme-dark .mw-datatable>*>tr>td, :root.theme-dark .wikitable>*>tr>td { background: #0c1d3c; background: var(--primary-6); background: var(--primary-12); background: #15223c; background: #091d43; background: #16284a; background: var(--primary-18); background: #11203c; background: #0e2140; background: #0a1e3e; /* background: #091d3c; */ /* background: #0a1d3a; */ /* background: #081832; */ background: #081a38; background: #081b3c; background: #081938; background: #0c1d3e; border: solid 2px #555b66; border: solid 2px #555a64; } :root.theme-dark table.wikitable>tr>th, :root.theme-dark table.wikitable>*>tr>th, :root.theme-dark #smwtable tr>th, :root.theme-dark table.smwtable>*>tr>th { background: var(--primary-9); background: #0f2140; background: #091a36; background: #081a38; background: #071834; background: #081832; background: #0a1932; /* background: #081938; */ /* background: #0a162c; */ /* background: #09162e; */ border: solid 3px var(--primary-21); /* border: solid 3px #1d335c; */ color: var(--text-color-2); } table.wikitable tbody tr:hover td a, :root.theme-dark #smwtable tbody tr:hover td a, :root.theme-dark table.smwtable tbody tr:hover td a, :root.theme-dark table.wikitable tbody tr:hover td, :root.theme-dark #smwtable tbody tr:hover td, :root.theme-dark table.smwtable tbody tr:hover td { background: #162a4c; background: #0c182e; background: #0f1b32; /* background: #1d3158; */ /* background: #162b4c; */ /* background: #1f3154; */ background: #23375a; background: #091b38; background: #0a1d3a; background: #1a3054; outline: solid 2px var(--primary-21); } table.wikitable tbody tr:hover td a, #smwtable tbody tr:hover td a, table.smwtable tbody tr:hover td a { color: var(--accent-1); } table.wikitable tbody tr:hover td a:hover, #smwtable tbody tr:hover td a:hover, table.smwtable tbody tr:hover td a:hover { color: var(--accent-2); color: var(--alt-link-color-1b); text-decoration-color: var(--accent-7); } ul#filetoc, .toc, .toccolours, .mw-warning { background: #0c1d3e; /* background: #0a1932; */ border-color: #8d99ab; /*max-width: 240px; margin-right: 0.06em;*/ border-color: var(--contrast-color-10); border-color: var(--primary-26); max-width: 238px; top: -15px; top: 1px; /* top: -39px; */ /* top: -34px; */ right: 12px; right: 20px; /* z-index: -1; */ } :root.theme-dark ul#filetoc > ul, :root.theme-dark .toc > ul, :root.theme-dark .toccolours > ul { filter: invert(1) hue-rotate(180deg); } .mw-body .toctitle { border-bottom: solid 3.4px var(--primary-26); border-bottom: solid 3.4px var(--primary-3); } .mw-body .toctitle h2 { color: #91a6d3; color: #8499c7; } .toctogglelabel { color: #91a6d3; } @media screen and (min-width: 1100px) { .mw-parser-output > h3 { margin-left: -0.972px; font-variant: unset; } } .pullout-wrapper .pullout-content { /* background: var(--accent-1); */ } @media screen and (min-width: 851px) { .pullout-content div#article-type { max-width: 54.82em; position: relative; border-right: solid 1em var(--accent-5); } #subpage-article ~ .portable-infobox ~ .portable-infobox, .subpage-tabs-main ~ .portable-infobox ~ .portable-infobox { margin-top: 2px; } } .stub-type#image-link { /* filter: invert(1) hue-rotate(322deg) brightness(0.93) contrast(2.2) saturate(0.58); */ }