MediaWiki:FandomMobile.css

@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:ProgramsHub.css&only=styles"); /* some general stuff */ .text-align-center { text-align: center; } .skin-fandommobile .no-border-mobile img, .skin-fandommobile .no-border-mobile figure, .centralhelpbox img:first-of-type { border: none; } .mainpage-button { -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; border: 1px solid rgba(var(--theme-border-color--rgb),0.8); border-radius: 0 0 4px 4px; display: block; text-align: center; } /* Template:Advice Spotlight */ .blogspotlight { align-items: center; border: 1px solid rgba(109, 109, 109, 0.6); border-radius: 5px; column-gap: 12px; display: flex; flex-direction: column; margin: 16px 0; padding: 8px; } .blogspotlight__avatar { border-bottom: 1px solid rgba(109, 109, 109, 0.6); margin-bottom: 8px; } .blogspotlight__avatar img { border-radius: 100%; } .blogspotlight__title { font-size: 1.6em; text-align: center; } .blogspotlight__author { align-items: center; display: flex; flex-direction: column; font-size: 1.1em; } .blogspotlight__tags { color: #ccc; font-size: 0.75em; margin-left: 8px; padding-left: 8px; position: relative; vertical-align: middle; } .blogspotlight__title { margin-top: 8px; } /** Transfer and modification of Mainpage blogs **/ .mainpage-blogs { column-gap: 24px; display: grid; grid-template-columns: 1fr 1fr; justify-content: space-between; } .mainpage-blogs .blog { align-self: top; display: flex; flex-direction: column; margin: 0 0 10px; width: 100%; } .mainpage-blogs .blog-info { -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; border: 1px solid rgba(var(--theme-border-color--rgb), 0.8); border-radius: 4px 4px 4px 4px; display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 64px; height: 100%; } .mainpage-blogs .blog .blog-info { padding: 15px; } .mainpage-blogs .details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 18px; } .mainpage-blogs .blog-info .avatar { display: none; } .mainpage-blogs .blog-info .author a, .mainpage-blogs .blog-info .author a:active, .mainpage-blogs .blog-info .author a:visited { color: #4a90e2; font-size: 15px; text-decoration: none; } .mainpage-blogs .blog-info .author a:after { content: ':'; } .mainpage-blogs .blog .blog-info .title { font-size: 16px; font-weight: bold; margin-top: 4px; line-height: 1.1; } .mainpage-blogs .blog.featured .blog-info .title { font-size: 23px; } .mainpage-blogs .blog-info .title a, .mainpage-blogs .blog-info .title a:active, .mainpage-blogs .blog-info .title a:visited { color: #4a90e2; text-decoration: none; } /* Advice cards */ .advice-card { padding: 10px 30px; margin-bottom: 10px; } .advice-card.advice-card-bg-1 { background: var(--theme-page-background-color--secondary); } .advice-card.advice-card-bg-2 { background: var(--fandom-notifications-unread-card-background-color); } /* Help:Contents */ .centralhelpbox { margin: 0 5px 10px 0; border: 1px solid silver; padding: 20px 20px 10px; } .centralhelpbox p:has(.centralhelpbox-end-img) { text-align: center; } .mainpage-connect .staff { display: flex; flex-wrap: wrap; justify-content: space-between; list-style: outside none none; margin: 0; }

.mainpage-connect .staff li { border-radius: 4px; border: 1px solid rgba(125,129,139,0.38); box-sizing: border-box; margin: 0 0 20px; min-width: 200px; padding: 15px 20px; text-align: center; width: calc(50% - 10px); }

.mainpage-connect .staff img { border-radius: 50%; height: auto; width: 95px; }

.mainpage-connect .staff .name { line-height: 18px; margin-top: 10px; } .mainpage-connect .staff .name a, .mainpage-connect .staff .name a:active, .mainpage-connect .staff .name a:visited { color: var(--theme-page-text-color); font-weight: bold; text-decoration: none; } .mainpage-connect .staff .name a:hover { color: #545454; }

.mainpage-connect .mainpage-more { margin-top: 10px; }

@media (max-width: 420px) { .mainpage-connect .staff li { width: 100%; } }