User:SOTO/CSS4: Difference between revisions
From Tardis Wiki, the free Doctor Who reference
(Created page with "div#inline-box { float: left; padding: 10px; text-align: center; border: 1px solid var(--accent-7); width: 250px; margin: 10px 14px 10px 6px; line-height: 1.1em; font-size: .8em; font-weight: 400; font-style: normal; background-color: #081630; color: var(--text-color); }") |
No edit summary Tag: Undo |
||
(6 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<pre> | |||
div#inline-box { | div#inline-box { | ||
float: left; | float: left; | ||
Line 13: | Line 14: | ||
color: var(--text-color); | color: var(--text-color); | ||
} | } | ||
#mw-related-navigation { | |||
margin-top: 1px; | |||
/* margin-left: 1px; */ | |||
} | |||
@media screen and (min-width: 851px) { | |||
#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); | |||
/*-moz-box-shadow: -2px 0 0 var(--contrast-color-5) inset; | |||
-webkit-box-shadow: -2px 0 0 var(--contrast-color-5) inset; | |||
-o-box-shadow: -2px 0 0 var(--contrast-color-5) inset; | |||
-ms-box-shadow: -2px 0 0 var(--contrast-color-5) inset; | |||
box-shadow: -2px 0 0 var(--contrast-color-5) inset; | |||
background: var(--primary-8); | |||
padding-top: 0.23em!important; | |||
padding-left: 1.05em;*/ | |||
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) { | |||
#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-ui-button.mw-ui-progressive:not(:disabled) { | |||
outline: solid 4px var(--primary-26); | |||
background: var(--primary-28)!important; | |||
} | |||
</pre> |
Latest revision as of 06:09, 10 November 2024
div#inline-box { float: left; padding: 10px; text-align: center; border: 1px solid var(--accent-7); width: 250px; margin: 10px 14px 10px 6px; line-height: 1.1em; font-size: .8em; font-weight: 400; font-style: normal; background-color: #081630; color: var(--text-color); } #mw-related-navigation { margin-top: 1px; /* margin-left: 1px; */ } @media screen and (min-width: 851px) { #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); /*-moz-box-shadow: -2px 0 0 var(--contrast-color-5) inset; -webkit-box-shadow: -2px 0 0 var(--contrast-color-5) inset; -o-box-shadow: -2px 0 0 var(--contrast-color-5) inset; -ms-box-shadow: -2px 0 0 var(--contrast-color-5) inset; box-shadow: -2px 0 0 var(--contrast-color-5) inset; background: var(--primary-8); padding-top: 0.23em!important; padding-left: 1.05em;*/ 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) { #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-ui-button.mw-ui-progressive:not(:disabled) { outline: solid 4px var(--primary-26); background: var(--primary-28)!important; }