MediaWiki:Common.css: Difference between revisions

Latest revision as of 09:36, 31 October 2024

/* CSS placed here will be applied to all skins */

div#mw-panel a {
color: black;
}

.vector-menu-tabs-legacy li,
.vector-menu-tabs a {
    background-image: none;
}

body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; }
                              
@font-face {
    font-family: 'happytimes';
    src: url('floop-wiki-fonts/happytimes/happy-times-NG_regular_master_web.woff2') format('woff2'),
         url('floop-wiki-fonts/happytimes/happy-times-NG_regular_master_web.woff') format('woff'),
         url('floop-wiki-fonts/happytimes/happy-times-NG_regular_master_web.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'happytimes';
    src: url('floop-wiki-fonts/happytimes/happy-times-NG_bold_master_web.woff2') format('woff2'),
         url('floop-wiki-fonts/happytimes/happy-times-NG_bold_master_web.woff') format('woff'),
         url('floop-wiki-fonts/happytimes/happy-times-NG_bold_master_web.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'happytimes';
    src: url('floop-wiki-fonts/happytimes/happy-times-NG_italic_master_web.woff2') format('woff2'),
         url('floop-wiki-fonts/happytimes/happy-times-NG_italic_master_web.woff') format('woff'),
         url('floop-wiki-fonts/happytimes/happy-times-NG_italic_master_web.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

/*mediawiki css*/


/* unvisited, visited, mouse over hover and selected links */
.portal a:link,
.portal a:visited,
.portal a:hover,
.portal a:active
 {
  color: black;
}

main#content.mw-body {
    margin: 0; /*new*/
}

.mw-body, #mw-head-base, #left-navigation, #mw-data-after-content, #footer {
margin-left: 21em;
color: black;
}

.mw-parser-output a.external {
color: black;
}

.mw-parser-output a.external:visited {
color: black;
}

.mw-references-wrap.mw-references-columns {
font-family: 'happytimes', serif;
padding-top: 12px;
}

#left-navigation {
margin-left: 22em;
}

#mw-page-base {
background-image: none;
background-color: transparent;
}

#mw-head-base {
margin-left: 21em;
height: 5.5em;
}

#mw-head .vectorMenu h3 {
height: 100%;
}

.vectorMenu li a {
color: black;
}

.mw-body {
margin-left: 21em;
background-color: transparent;
border-top: 1px solid black;
border-left: 0;
border-right: 0;
border-bottom: none;
/*border-bottom: 1px solid black;*/
border-radius: 100px 0 100px 0;
padding: 1em;
}

.mw-body-content {
background-color: transparent;
margin: none;
font-family: 'happytimes', serif;
}

.mw-body-content h3 {
font-weight: normal;
text-align: left;
margin-top: 1em;
border-top: 1px solid black;
border-radius: 0px 50px 0px 0px;
font-size: 1.4em;
}

.mw-body-content h4 {
/*font-family: 'Arial', sans-serif;*/
text-align: center;
font-weight: normal;
font-size: 1.4em;
max-width: 60%;
padding-bottom: 2em;
}

/*"edit" note appearing next to h2*/
.mw-editsection {
/*display: none;*/
}

/* padding/sizing and aesthetic styles for the background of the tabs */
div#mw-head div.vectorMenu h3, div#mw-head div.vectorTabs ul li span {
background: white;
line-height: 1;
overflow: visible;
color: black
}

div.gallerytext {
font-size: 60%;
max-width: 100%;
}

div.thumbinner {
border: none;
background: white;
padding: 4px;
text-align: center;
overflow: hidden;
}

/*floop main page*/

.title-box {
/*position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)*/
padding: 0.5em;
}

/*curve*/
div.right-curve {
border-radius: 100px 0px;
height: 100%;
max-width: 100%;
border-left: 1px solid black;
border-right: 1px solid black;
}

/*tabs in top nav*/
.vectorTabs {
background-image: none;
background-color: transparent;
color: black;
/*height: auto;*/
}

.vectorTabs li a {
color: black;
}

.vectorTabs #ca-unwatch.icon a {
padding-top: 36px;
}

/* dropdown menu in right nav (More) */
.vectorMenu .menu {
border: 1px solid black;
background-color: white;
opacity: 100;
}

.vectorMenuCheckbox {
background-color: lavender;
}

div#p-cactions.vectorMenu {
background-color: lavender;
}

.vectorMenuCheckbox {
background: lavender;
}

#p-cactions-label {
background-color: lavender;
}

div#mw-head div.vectorMenu h3, div#mw-head div.vectorTabs ul li span {
background-color: white;
}

#searchInput {
border: 1px solid black;
}

/* sidebar */

#mw-panel .portal .body{
background-image: none;
}

#mw-panel .portal .body li a:visited {
color: black;
}

#mw-panel .portal .body li a {
color: black;
}

#mw-panel.collapsible-nav .portal.collapsed h3 a {
    line-height: 120%;
    color: black;
    font-weight: 400;
}

/*main page in sidebar*/
#mw-panel .portal .body li#n-The-Fabulous-Loop-de-Loop {
margin-left: -12px;
font-weight: bold;
}

#p-NAVIGATION-label {
padding-bottom: 0.2em;
}

h3#p-Contents-label {
color: black;
font-weight: bold;
}

#mw-panel .portal h3 {
color: black;
font-weight: bold;
line-height: 120%;
padding-top: 1em;
}

#mw-panel.collapsible-nav .portal h3 {
    color: black;
    background-position: left center;
    background-repeat: no-repeat;
    /*background-image: url(/fabulousloopdeloop/extensions/CollapsibleVector/modules/images/arrow-collapsed-ltr.png?93349);*/
    background-image: none;
    padding: none;
}

/* box for curve lines above sidebar?*/
#p-logo {
display: none;
width: 200px;
height: 36px;
border-top: 3px solid black;
margin: 12px;
border-radius: 50px 0 50px 0;
}

/*image for logo on server*/
#p-logo a {
display: none;
height: auto;
}

.mw-wiki-logo {
padding-top: 12px;
}


#mw-panel {
/* OLD width: 20em;*/
width: auto; /* NEW */
font-family: 'happytimes',serif;
/* OLD position: fixed; */
border-right: 1px solid black;
border-radius: 0px 100px 0px 0px;
height: 100%;
overflow: auto;
background-color: white;
font-size: 2em;
}

#mw-panel .portal {
    padding: 0em 0.875em 0em 0em;
    margin: 0em 0.25em;
    /*padding: 0.25em 0.875em 0em 0em;*/
}

#mw-panel #p-logo + .portal {
margin-top: 0.4em;
}

/* footer */
#footer-icons {
display: none;
}

/* meta-diagram */
.container {
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows: auto auto auto;
}

.container-2 {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: auto auto;
}

.container-4 {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: auto auto auto auto;
}


.container-shell {
padding: 3em 1em 0 1em;
}

.container-title {
padding: 2em;
max-width: 100%;
margin: auto;
}

.container-box {
float: left;
padding: 12px;
position: relative;
text-align: center;
max-width: 100%;
display: table-cell;
}

p.container-part {
/*padding: 1em;
margin: auto;
text-align: center;
max-width: 100%;
display: inline-block;*/

display: flex;
justify-content: center;

/*position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)*/
}

.quote-box {
    display: grid;
    max-width: 100%;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-radius: 50px 0px;
    margin: 1em 25% 2em;
}

.body-quote {
text-align: left;
padding-left: 1em;
}

.rightBend {
    border-left: 3px solid black;
    border-radius: 400px 0px 0px 0px;
    max-width: 100%;
    height: 100px;
}


/*type classes*/
.mw-body-content h2 {
font-family: 'happytimes',serif;
font-size: 1.4em;
padding-top: 12px;
border-top: 1px solid black;
border-radius: 0px 50px 0px 0px;
border-bottom: none;
text-align: left;
}

.title {
font-family: 'happytimes', serif;
font-size: 2.6em;
font-style: normal;
text-align: center;
line-height: 1em;
max-width: 100%;
}

.subtitle {
font-family: 'happytimes', serif;
/*font-size: 1.6em;*/
line-height: 1.3em;
text-align: center;
max-width: 100%;
padding: 1em 0.5em 0.5em 0.5em;
}

.annotation-machine {
font-family: 'happytimes',serif;
font-size: 1.4em;
line-height: 1.3em;
padding-top: 12px;
border-top: 1px solid black;
border-radius: 0px 50px 0px 0px;
border-bottom: none;
text-align: center;
max-width: 100%;
}

.chapter {
text-align: center;
max-width: 100%;
padding: 1em;
line-height: 1.3em;
font-size: 1.4em;
font-family: 'happytimes', serif;
}

.chapter-outline-intro {
    max-width: 100%;
    padding: 4em;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-radius: 50px 0px;
    margin: 1em 25% 2em;
    /*font-size: 1.2em;*/
}

/*chapter links at bottom of pages*/

.chapter-links {
margin-bottom: 0.4em;
border-bottom: 1px solid black;
}

.previous-chapter {
text-align: left;
margin-bottom: -1.6em;
}

.next-chapter {
text-align: right;
}

.loglines {
text-align: left;
padding: 2em;
font-size: 1em;
line-height: 1.2em;
font-family: 'happytimes', serif;
max-width: 100%;
}

.machine {
font-family: 'happytimes', serif;
font-size: 1em;
line-height: 1.2em;
font-style: bold;
text-align: center;
max-width: 100%;
}

/* some way to target references in body text???
sup.reference {
color: blue;
}
*/

.quote {
    font-family: 'happytimes',serif;
    font-style: normal;
    /* text-align: center; */
    font-size: 1.4em;
    max-width: 100%;
    height: auto;
    padding: 1em;
}

.byline {
text-align: center;
max-width: 100%;
padding: 0.5em 0.5em 1em 0.5em;
line-height: 1.3em;

}

body {
background-color: white;
color: black;
background-image: none;
font-family: 'happytimes', 'Times New Roman', serif;
}

h1#firstHeading.firstHeading {
font-family: 'happytimes',serif;
font-size: 1.4em;
line-height: 1.3em;
border-bottom: none;
border-radius: 0px 0px 50px 0px;
padding-top: 12px;
padding-bottom: 24px;
width: 100%;
height: auto;
text-align: center;
}

p.floop-link {
font-family: 'Arial', sans-serif;
font-size: 0.875em;
line-height: 1.3em;
border-bottom: 1px solid black;
border-radius: 0px 0px 0px 50px;
padding-left: 15%;
max-width: 100%;
text-align: left;
float: right;
clear: left;
}

p.pt-link {
font-family: 'Arial', sans-serif;
font-size: 0.875em;
line-height: 1.3em;
margin-right: 0.5em;
border-bottom: 1px solid black;
border-radius: 0px 0px 0px 50px;
width: 33%;
height: auto;
text-align: right;
float: right;
clear: left;
}

p {
font-family: 'happytimes', serif;
font-size: 1.4em;
line-height: 1.3em;
max-width: 60%;
}

p.indent, p.list {
margin-left: 1em;
line-height: 1.3em;
margin-right: 2em;
}

p.parallel-indent {
font-family: 'Arial', sans-serif;
width: 60%;
margin-left: 1em;
line-height: 1.3em;
margin-right: 2em;
}

p.parallel-text {
font-family: 'Arial', sans-serif;
width: 60%;
}

p.preamble {
border-top: 1px solid black;
border-bottom: 1px solid black;
border-radius: 0px 50px 0px 50px;
padding: 1em;
margin-bottom: 1.3em;
margin-top: 1.3em;
}

ol {
margin-right: 2em;
}

ol.references {
font-size: 1em;
line-height: 1.6em;
max-width: 100%;
}

ol {
font-family: 'happytimes', serif;
font-size: 1.4em;
line-height: 1.3em;
max-width: 60%;
}

/* links */
a.image {
display: inline-block;
margin: auto auto auto auto;
position: relative;
max-width: 100%;
}

a:link, a:visited {
color: black;
}

a:hover, a:active , img:hover {
text-decoration: underline;
color: black;
}

/* TOC */
.toctogglespan {
display: none;
}

.toc .toctitle {
font-family: 'happytimes', serif;
font-style: normal;
text-align: left;
}

.toc, .mw-warning, .toccolours {
background-color: white;
border: none;
/*border-top: 3px solid lavender;
border-radius: 50px 0px 50px 0px;*/
width: 100%;
height: auto;
text-align: left;
padding-left: 0px;
font-family: 'happytimes', serif;
}

.mw-body-content .toc h2 {
font-family: 'happytimes', serif;
font-weight: bold;
border: 0px;
}

/* images */
img.thumbimage {
border: none;
}

/* image gallery */
li.gallerybox div.thumb {
border: 0px;
background-color: transparent;
}

p.image-body {
text-align: center;
padding: 1em 0 1em 0;
}

img {
max-width: 100%;
height: auto;
object-fit: contain;
}

/* new stuff */

.vector-page-toolbar-container {
    box-shadow: none;
    margin-bottom: 0;   
    }

.vector-page-titlebar {
    box-shadow: none;
    }

.mw-footer {
    border: none;
    }

.mw-editsection {
    display: none;
    }

.vector-toc-landmark {
    margin-left: -1em;
    }

.vector-feature-page-tools-enabled .vector-toc .vector-toc-text,.vector-toc-link {
    padding-bottom: 1em;
line-height: 1.2;
    }

.vector-toc-list-item, .vector-toc-level-1, .vector-toc-list-item-expanded {
    padding: 0;
    line-height: 1.2;
}

* {
    color: black;
    }

figure[typeof~="mw:File/Thumb"], figure[typeof~="mw:File/Frame"], figure[typeof~="mw:File/Thumb"] > figcaption, figure[typeof~="mw:File/Thumb"] {
    border: none;
    background-color: white;

    }

    .vector-feature-page-tools-enabled #vector-main-menu-pinned-container .vector-main-menu {
    background-color: white !important;    
    }

/* -------------------- media queries */

@media (width <= 1250px) {
    p, p.parallel-text {
    font-size: 2.4em;
    max-width: 100%;
    }

    .mw-body-content h2 {
    font-size: 2.4em;
    }
    
    .chapter-links {
    height: 4em;
    overflow: auto;
    display: flex;
    justify-content: space-between;
    font-size: 2.4em;
    }

    h1#firstHeading.firstHeading {
    font-size: 2.4em;
    }

    .vector-pinnable-header, .vector-toc-pinnable-header, .vector-pinnable-header-unpinned {
    font-size: 2em;
    }

    p.floop-link {
    font-size: 2em;
    height: 3em;
    max-width: 50%;
    padding-bottom: 1em;
    }

    p.pt-link {
    font-size: 2em;
    height: 3em;
    max-width: 80%;
    padding-top: 1em;
    border-bottom: 2px solid black;
    }

    .mw-body {
    border: none;
    }

    .vector-page-toolbar {
    margin-bottom: 4em;
    }
    
    .quote-box {
    margin: 0;
    }

    .quote {
    font-size: 2.4em;
    }
  
    .vector-menu-content, .vector-dropdown-content {
    max-width: auto;
    }

    .container {
    font-size: 1.5em;
    }

    .loglines {
    padding: 1em;
    font-size: 1.5em;
    }
   
    .vector-feature-page-tools-enabled .vector-pinnable-element .mw-list-item a, .vector-dropdown-content .mw-list-item a, .vector-feature-page-tools-enabled .vector-pinnable-element .vector-menu-heading, .vector-dropdown-content .vector-menu-heading {
    font-size: 2em;
    line-height: 1.2;
max-height: fit-content;
    }
   
    .vector-feature-page-tools-enabled .vector-dropdown .vector-dropdown-content, .vector-feature-page-tools-enabled .vector-dropdown > .vector-menu-content {
    max-width: 450px;
    }

   .client-js.vector-feature-toc-pinned-disabled body:not(.vector-sticky-header-visible) .vector-page-titlebar-toc > .vector-menu-content {
    font-size: 200%;
    max-height: fit-content;
    line-height: 1.2;
    }

   .container {
   grid-template-columns: auto;
   }

}