MediaWiki:Common.css: Difference between revisions

From Pearl Dental Software Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 184: Line 184:
}
}


/*#region PopularPages*/
.popular-pages ul {
.popular-pages ul {
     display: grid;
     display: grid;
Line 190: Line 191:
     margin: 1em 0 0.7em 0;
     margin: 1em 0 0.7em 0;
}
}
/*#endregion PopularPages*/
@media only screen and (max-width: 65.999rem) {
@media only screen and (max-width: 65.999rem) {
     .mainpage-recent-updates .tile-halves:last-child {
     .mainpage-recent-updates .tile-halves:last-child {

Revision as of 08:41, 2 August 2022

#ca-nstab-user a { background: none;}
#ca-view { display: none !important; }
#ca-talk { display:none !important; }
#footer-poweredbyico { display: none; }

:root {
    --body-main: #e8f1ea;
    --body-light: #d8ccb4;
    --body-mid: #d0bd97;
    --body-dark: #b8a282;
    --body-border: #94866d;
    --body-background-color: #acccb4;
    --button-background: #605443;
    --button-color: #fff;
    --button-border: #3c352a;
    --button-dark: #18140c;
    --button-light: #3a301d;
    --sidebar: #cfc08d;
    --background-text-color: #444;
    --background-link-color: #52351e;
    --search-box: #efeee6;
    --link-color: #936039;
    --redlink-color: #ba0000;
    --text-color: #000;
    --byline-color: #4c4c4c;
    --pearl-green: #605443;
}

:root {
    --tabber-tab-bg: var(--body-light);
    --tabber-tab-border-color: var(--body-border);
    --tabber-active-tab-bg: var(--body-light);
    --tabber-active-tab-color: var(--text-color);
    --tabber-active-tab-hover-bg: var(--body-light);
    --tabber-active-tab-hover-border-color: var(--body-border);
    --tabber-active-tab-hover-color: var(--text-color);
    --tabber-active-tab-border-hider-color: var(--body-light);
    --tabber-inactive-tab-bg: var(--body-background-color);
    --tabber-inactive-tab-border-color: var(--body-border);
    --tabber-inactive-tab-color: var(--text-color);
    --tabber-inactive-tab-hover-bg: var(--body-light);
    --tabber-inactive-tab-hover-border-color: var(--body-border);
}

.tabber {
    margin: 1em 0;
}

.tabber .tabbertab {
    background-color: var(--tabber-tab-bg);
    border: 1px solid var(--tabber-tab-border-color);
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
    padding: 1em 1.5em;
}

ul.tabbernav {
    border: none;
    margin-left: 2em;
    margin-bottom: 0;
    margin-right: 2em;
    padding: 0;
    font-family: inherit;
}

ul.tabbernav li.tabberactive > a {
    background-color: var(--tabber-active-tab-bg);
    color: var(--tabber-active-tab-color);
    border-bottom: none;
    position: relative;
}

ul.tabbernav li.tabberactive > a:hover {
    color: var(--tabber-active-tab-hover-color);
    background-color: var(--tabber-active-tab-hover-bg);
    border-color: var(--tabber-active-tab-hover-border-color);
    border-bottom: none;
}

ul.tabbernav li.tabberactive > a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    border-bottom: 2px solid var(--tabber-active-tab-border-hider-color);
}

ul.tabbernav li a {
    background-color: var(--tabber-inactive-tab-bg);
    border-bottom: transparent;
    border-color: var(--tabber-inactive-tab-border-color);
    color: var(--tabber-inactive-tab-color);
    display: inline-block;
    font-size: 110%;
    padding: 0.5em 1em;
}

ul.tabbernav li a:hover {
    background-color: var(--tabber-inactive-tab-hover-bg);
    border-color: var(--tabber-inactive-tab-hover-border-color);
}

ul.tabbernav li a:link,
ul.tabbernav li a:visited {
    color: var(--tabber-inactive-tab-color);
}

.mw-body {
    background-color: var(--body-main);
    color: var(--text-color);
    border-color: transparent;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.15);
    margin-top: 0;
}
#mw-page-base {
    background: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-color);
}

#p-search{
	margin:0;
}

#simpleSearch {
    border: none;
    background: var(--search-box);
    height: 2.485em;
    margin-top: 0;
    box-shadow: inset 0 -7px 7px -7px rgb(0 0 0 / 15%);
}

.page-main_page .catlinks,#firstHeading
{
	display: none;
	background: --body-main;
}


.catlinks {
    background: var(--body-light);
    border: 1px solid var(--body-dark);
    padding: 8px 15px;
    box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
}

.mainpage-header {
    display: flex;
    margin: 2.6em 1.75em 1.5em;
}

.mainpage-header .header-intro {
    flex: 2;
}

.mainpage-header .header-intro h1 {
    font-size: 2.5em;
    font-weight: bold;
    border: none;
    margin: 0 0 0.15em;
}

.mainpage-header .header-intro p {
    font-size: 1.1em;
    line-height: 1.7em;
}

.mainpage-header .header-stats {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -1em;
}

.mainpage-header .header-stats ul {
    list-style: none;
}

/*#region PopularPages*/
.popular-pages ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.6em;
    margin: 1em 0 0.7em 0;
}
/*#endregion PopularPages*/
@media only screen and (max-width: 65.999rem) {
    .mainpage-recent-updates .tile-halves:last-child {
          display: none;
    }

    .mainpage-recent-updates .tile-halves:hover .tile-top img {
          transform: scale(1.04);
    }

    .mainpage-recent-updates .tile-halves:nth-last-child(2) {
          margin-right: 0;
    }

    .mainpage-recent-updates .tile-top {
          height: 18vw;
    }

    .mainpage-contents .tile-halves:nth-child(1),
    .mainpage-contents .tile-halves:nth-child(2),
    .mainpage-contents .tile-halves:nth-child(3) {
          margin-bottom: 0.9rem;
    }

    .mainpage-contents .tile-halves:nth-child(3) {
          margin-right: 0;
    }

    .mainpage-contents .line-break {
          width: 100%;
    }

    .mainpage-skills ul {
          columns: 2 9em;
    }

    .mainpage-header .header-stats {
          display: none;
    }

    .popular-pages ul {
          grid-template-columns: repeat(2, 1fr);
    }