User:JoeCool/common.css.blinking

From ArchWiki

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/*
 * Override https://github.com/archlinux/archwiki/blob/master/resources/src/mediawiki.skinning/elements.less#L182
 * which was introduced in MediaWiki because of at least https://phabricator.wikimedia.org/T2260 and https://phabricator.wikimedia.org/T103780
 * but those problems should not affect us
 */

pre,
.mw-code {
    white-space: pre;
}


/*
 * Remove icon from links to wiki.archlinux.org because they are sometimes
 * used for example to link to edit diffs or in status templates for the
 * "Discuss" link
 */

#bodyContent a.external[href ^="http://wiki.archlinux.org"],
#bodyContent a.external[href ^="https://wiki.archlinux.org"] {
    background: none;
    padding-right: 0;
}


/* Template:Pkg, Template:AUR, Template:Grp, Template:Man */

span.archwiki-template-pkg,
span.archwiki-template-man {
    font-family: monospace, monospace;
}


/* Note, Warning, Tip templates */

div.archwiki-template-box {
    padding: 5px;
    border: thin solid black;
    margin: 0.5em 0;
    overflow: hidden;
}
div.archwiki-template-box.archwiki-template-box-note {
    background-color: #ddf;
    border-color: #bbd;
}
div.archwiki-template-box.archwiki-template-box-warning {
    background-color: #fdd;
    border-color: #dbb;
}
div.archwiki-template-box.archwiki-template-box-tip {
    background-color: #dfd;
    border-color: #bdb;
}


/* Status templates */

div.archwiki-template-message {
    position: relative;
    overflow: hidden; /* This e.g. prevents the template from overlapping the related articles box;
                         using 'auto' would display a vertical scrollbar in e.g. Chromium and Opera:
                         increasing min-height would fix it too, but this seems safer and more elegant */
    min-height: 4.6em; /* Needed to better host the two icons at the sides */
    margin-bottom: 1em;
    background-color: #f9faff;
    border: 1px solid #d7dfe3;
    padding: 0 100px;
    text-align: center;
}
div.archwiki-template-message > p > a {
    display: block;
    position: absolute;
    top: 5px;
}
div.archwiki-template-message > p > a:first-of-type {
    left: 26px; /* the icon is 48px, centering in the 100px padding */
}
div.archwiki-template-message > p > a:last-of-type {
    right: 26px; /* the icon is 48px, centering in the 100px padding */
}
div.archwiki-template-message > div {
    font-size: 90%;
}
div.archwiki-template-message ul,
div.archwiki-template-message ol {
    text-align: left;
}


/* Related articles templates */

div.archwiki-template-meta-related-articles-start {
    float: right;
    clear: right;
    width: 25%;
    margin: 0 0 0.5em 0.5em;
}
div.archwiki-template-meta-related-articles-start > p {
    background: #333;
    color: white;
    padding: 0.2em;
    border-bottom:5px #08c solid;
    margin:0;
    text-align:center;
    font-weight:bold;
}
div.archwiki-template-meta-related-articles-start > ul {
    list-style-type: none;
    list-style-image: none;
    /* Resetting the margin of ul is necessary for compatibility among browsers */
    margin: 0;
    padding: 0.3em;
}
div.archwiki-template-meta-related-articles-start > ul > li {
    padding: 0.4em 0;
    /* line-height:1 makes wrapped long links distinguishable */
    line-height: 1;
}


/*
 * Main Page columns
 * Keep coherent with https://github.com/archlinux/archwiki/search?q=width-breakpoint-tablet
 */

@media screen and ( min-width: 721px ) {
    div.archwiki-main-page-columns {
        column-count: 2;
    }
    div.archwiki-main-page-columns > * {
        page-break-inside: avoid;
        /* fix alignment of list items in multi-column layout, see https://stackoverflow.com/a/42349512 */
        display: inline-block;
        width: 100%;
    }
}


/*
 * Override syntax highlighting style
 * (CodeMirror should just highlight, not change the size of elements)
 */

#content .CodeMirror pre {
    line-height: 1.5em;
}
#content pre.cm-mw-section-1,
#content pre.cm-mw-section-2 {
    line-height: 1.5em;
    font-size: inherit;
    font-weight: bold;
}
#content .cm-mw-pagename {
    /* avoid underlining which obfuscates underscores */
    text-decoration: unset;
}


/*
 * Override font size of section headings to improve readability
 *
 * Vector's font size for h4 is 100%, just like regular paragraphs, which makes
 * the heading indiscernible from regular bolded text.
 */
 
.mw-body-content h1 { font-size: 188%; }
.mw-body-content h2 { font-size: 150%; }
.mw-body-content h3 { font-size: 128%; }
.mw-body-content h4 { font-size: 116%; }
.mw-body-content h5 { font-size: 108%; }
.mw-body-content h6 { font-size: 100%; }


/*
 * Add anonymous replaced elements to auto-number sections
 *
 * (This feature was removed in MediaWiki 1.38 for "performance reasons",
 * see https://www.mediawiki.org/wiki/MediaWiki_1.38#Other_changes )
 *
 * Note that MediaWiki does not have nested DOM elements for sections, so we
 * cannot use nested counters and have to hack it with several counters per
 * each level.
 *
 * Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters
 */

/* Create counters and set their initial value to 0. */
body {
  counter-reset: h2-section h3-section h4-section h5-section h6-section;
}

/* Set up resetting */
/* (note that counter-reset does not work) */
h2 > .mw-headline
{
  counter-increment: h2-section;
  counter-set: h3-section h4-section h5-section h6-section;
}
h3 > .mw-headline
{
  counter-increment: h3-section;
  counter-set: h4-section h5-section h6-section;
}
h4 > .mw-headline
{
  counter-increment: h4-section;
  counter-set: h5-section h6-section;
}
h5 > .mw-headline
{
  counter-increment: h5-section;
  counter-set: h6-section;
}
h6 > .mw-headline
{
  counter-increment: h6-section;
}

/* Display the counters in the headings */
h2 > .mw-headline::before
{
  content: counter(h2-section) " ";
  animation: NAME-YOUR-ANIMATION 1s infinite;
}
h3 > .mw-headline::before
{
  content: counter(h2-section) "." counter(h3-section) " ";
  animation: NAME-YOUR-ANIMATION 1s infinite;
}
h4 > .mw-headline::before
{
  content: counter(h2-section) "." counter(h3-section) "." counter(h4-section) " ";
  animation: NAME-YOUR-ANIMATION 1s infinite;
}
h5 > .mw-headline::before
{
  content: counter(h2-section) "." counter(h3-section) "." counter(h4-section) "." counter(h5-section) " ";
  animation: NAME-YOUR-ANIMATION 1s infinite;
}
h6 > .mw-headline::before
{
  content: counter(h2-section) "." counter(h3-section) "." counter(h4-section) "." counter(h5-section) "." counter(h6-section) " ";
  animation: NAME-YOUR-ANIMATION 1s infinite;
}

@keyframes NAME-YOUR-ANIMATION {
0%, 49% {
    background: initial;
}
50%, 100% {
    background: red;
}
}


/* move category links to the top */
body:not(.page-Main_page) #bodyContent{
    display: flex;
    flex-direction: column; 
}
body:not(.page-Main_page) #contentSub {
    order: -2;
    margin-bottom: 0;
}
body:not(.page-Main_page) #catlinks {
    order: -1;
    /* The margin-bottom is consistent with div.archwiki-template-message */
    margin: 0.5em 0 1em;
}

body:not(.page-Main_page) p:first-child, .archwiki-template-meta-related-articles-start + p{
    margin-top: 0;
}

/* hide stupid empty div which causes large margin between the category links and content */
#contentSub:empty, #contentSub2:empty {
    display: none;
}