MediaWiki:ProgramsHub.css

/* Author: Nekky-chan */ /* wraped content */ .programshub-body { display: flex; flex-wrap: wrap; justify-content: space-around; } .programshub-body .wds-is-disabled { opacity: 1; }

/* outer box */ .programshub-box { position: relative; width: 48%; height: 200px; background-color: var(--theme-page-background-color--secondary); border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.3s ease; overflow: hidden; margin: 5px; border: solid 1px; border-color: var(--fandom-border-color); } .programshub-box p { margin: 0; } .programshub-box:hover { transform: translateX(10px); opacity: 0.8; -moz-box-shadow: 0 0 10px var(--theme-body-text-color); -webkit-box-shadow: 0 0 10px var(--theme-body-text-color); box-shadow: 0 0 10px var(--theme-body-text-color); } .skin-fandomdesktop .programshub-box:hover:nth-child(even) { transform: translateX(-10px); } .programshub-box.programshub-box-primary-1 { background-color: #520044; } .programshub-box.programshub-box-primary-2 { background-color: #ffc500; } .programshub-box.programshub-box-primary-1:hover { border-color: #520044; -moz-box-shadow: 0 0 10px #520044; -webkit-box-shadow: 0 0 10px #520044; box-shadow: 0 0 10px #520044; } .programshub-box.programshub-box-primary-2:hover { border-color: #ffc500; -moz-box-shadow: 0 0 10px #ffc500; -webkit-box-shadow: 0 0 10px #ffc500; box-shadow: 0 0 10px #ffc500; } .skin-fandommobile .programshub-box { width: 100%; }

/* box content */ .programshub-box-content { display: flex; align-items: center; height: 100%; padding: 20px; }   display: table; } .skin-fandommobile .programshub-box-content:has(#programshub-box-logo-isinformative) { display: grid !important; }
 * 1) programshub-box-content-isinformative {

/* inner box aka hover element */ .programshub-box-inner-body { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; padding: 20px; background-color: rgba(var(--theme-page-background-color--secondary--rgb), 0.95); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; transform: translateY(100%); overflow-y: auto; } .page-Community_Central_Policies .programshub-box-inner-body { background-color: rgba(var(--theme-page-background-color--secondary--rgb), 1); } .programshub-box:hover .programshub-box-inner-body { opacity: 1; transform: translateY(0); } .programshub-box-inner-body-isinformative { overflow-y: auto; height: 100%; font-size: 15px; }

/* box header */ .programshub-box-header { font-size: 20px; font-weight: bold; margin-bottom: 10px; display: block; word-break: break-word; }   display: inline; } .skin-fandommobile .programshub-box-header { margin: 0 auto; } .programshub-box.programshub-box-primary-2 .programshub-box-header { color: black; } .programshub-box.programshub-box-primary-1 .programshub-box-header { color: #ffffff; }
 * 1) programshub-box-header-isinformative {

/* box logo */ display: flex; justify-content: center; } .skin-fandommobile .programshub-box-logo img { border: none; }
 * 1) programshub-box-logo-isinformative {

/* Programs hub sections */ .program-hub-section h3 { color: #6a68cf; border: medium none; font-family: 'Rubik',"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif; font-size: 26px; font-weight: bold; line-height: normal; margin: 20px 0; overflow: hidden; padding: 0; text-align: center; text-transform: uppercase; } .program-hub-section h3:before, .program-hub-section h3:after { background-color: #6a68cf; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; } .program-hub-section h3:before { margin-left: -50%; right: 0.5em; } .program-hub-section h3:after { left: 0.5em; margin-right: -50%; } .program-hub-section-is-light .program-hub-section a:link, .program-hub-section-is-light .program-hub-section a:visited, .program-hub-section-is-light .program-hub-section a.external.text { color: #ad0057; } .program-hub-section-is-light .program-hub-section a:link:hover, .program-hub-section-is-light .program-hub-section a:visited:hover, .program-hub-section-is-light .program-hub-section a.external.text:hover { color: #460023; } .program-hub-section-is-dark .program-hub-section a:link, .program-hub-section-is-dark .program-hub-section a:visited, .program-hub-section-is-dark .program-hub-section a.external.text { color: #ffc500; } .program-hub-section-is-dark .program-hub-section a:link:hover, .program-hub-section-is-dark .program-hub-section a:visited:hover, .program-hub-section-is-dark .program-hub-section a.external.text:hover { color: #cc9e00; } .program-hub-section-wrap.program-hub-section-is-light { background-image: url("https://static.wikia.nocookie.net/central/images/b/b5/Site-background-light/revision/latest"); color: #000000; } .program-hub-section-wrap.program-hub-section-is-dark { background-image: url("https://static.wikia.nocookie.net/central/images/0/08/Site-background-dark/revision/latest"); color: #ffffff; } .program-hub-section-wrap { border: solid 1px #6a68cf; border-radius: 3px; width: 95%; margin: 0 auto 20px; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } .program-hub-section-is-light .program-hub-section-wrap-opacity-layer { background: rgba(255, 197, 0, .4); } .program-hub-section-is-dark .program-hub-section-wrap-opacity-layer { background: rgba(82, 0, 68, .4); } .program-hub-section { font-size: 15px; padding: 5px 20px; }

/* Template:ListEvents */ .listevents-table { display: table; margin: 0 auto; width: 95%; border: solid 1px var(--theme-border-color); border-radius: 3px; padding: 5px 15px; margin-bottom: 10px; background-color: var(--theme-page-background-color--secondary); } .listevents-header { font-weight: bold; font-size: 19px; background-image: linear-gradient(to top,var(--wds-midlight-color,rgba(var(--theme-accent-color--rgb),.15)) 54%,transparent 54%,transparent 100%); box-decoration-break: clone; margin-left: -3px; margin-right: -3px; padding-left: 3px; padding-right: 3px; } .listevents-body { font-size: 15px; } .listevents-body-when, .listevents-body-where { display: block; } .listevents-partlink { display: block; text-align: center; margin-top: 10px; font-size: 16px; } .page__right-rail .listevents-table { background-color: var(--theme-page-background-color); } .page__right-rail .mainpage-button { margin: 0 18px; background-color: var(--theme-page-background-color); }