MediaWiki:Common.css: Difference between revisions

From Foxwells Wiki
Jump to navigation Jump to search
No edit summary
theme
Line 2: Line 2:


/* Note template styles - wiki-style info boxes */
/* Note template styles - wiki-style info boxes */
.note {
  border:1px solid #ccc;
  border-left-width:6px;
  background:#f9f9f9;
  padding:12px 16px;
  margin:1em 0;
  border-radius:4px;
  box-shadow:0 1px 2px rgb(0 0 0 / 0.1);
  font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
  font-size:14px;
  line-height:1.4
}
.note-info {
  border-left-color:#5bc0de;
  background:#d9edf7;
  color:#31708f
}
.note-error {
  border-left-color:#d9534f;
  background:#f2dede;
  color:#a94442
}
.note-warn {
  border-left-color:#f0ad4e;
  background:#fcf8e3;
  color:#8a6d3b
}
.note-reminder {
  border-left-color:#5cb85c;
  background:#dff0d8;
  color:#3c763d
}
.note-inline {
  display:inline-block;
  padding:2px 6px;
  font-size:90%;
  vertical-align:middle;
  margin:0 0.3em;
  border-radius:3px;
  border-left-width:3px;
  box-shadow:none
}
.note-inline.note-info {
  border-left-color:#5bc0de;
  background:#e1f0fa;
  color:#31708f
}
.note-inline.note-error {
  border-left-color:#d9534f;
  background:#f8d7da;
  color:#a94442
}
.note-inline.note-warn {
  border-left-color:#f0ad4e;
  background:#faf1d6;
  color:#8a6d3b
}
.note-inline.note-reminder {
  border-left-color:#5cb85c;
  background:#d8e9d1;
  color:#3c763d
}


.note {
 
  border: 1px solid #ccc;
/* foxwells tweeeeks */
  border-left-width: 6px;
:root {
  background: #f9f9f9;
    --bg-main: #f2f9fc;
  padding: 12px 16px;
    --bg-surface: #ffffff;
  margin: 1em 0;
    --bg-sidebar: #e0f2f9;
  border-radius: 4px;
    --bg-footer: #cde7f2;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.1);
    --bg-tabs: #c0e3f2;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --border-color: #99cfe5;
  font-size: 14px;
    --accent: #339dc3;
  line-height: 1.4;
    --accent-hover: #247fa3;
    --text-main: #1a1a1a;
    --text-muted: #4d4d4d;
}
}


.note-info {
 
  border-left-color: #5bc0de; /* bright blue */
body, html {
  background: #d9edf7;
    margin: 0;
  color: #31708f;
    padding: 0;
    font-family: "Segoe UI", "Helvetica Neue", sans-serif;
    background: var(--bg-main);
    color: var(--text-main);
    line-height: 1.6;
}
}


.note-error {
#mw-panel {
  border-left-color: #d9534f; /* strong red */
    background-color: none;
  background: #f2dede;
    border-right: none;
  color: #a94442;
    padding-top: 1em;
}
#p-logo {
    background: none;
    margin-bottom: 1em;
}
.vector-menu h3 {
    color: var(--accent);
    font-weight: bold;
    padding: 0.5em 1em;
}
}


.note-warn {
.vector-menu-portal ul {
  border-left-color: #f0ad4e; /* orange */
    list-style: none;
  background: #fcf8e3;
    padding-left: 1em;
  color: #8a6d3b;
}
.vector-menu-portal li a {
    display: block;
    padding: 0.3em 0.5em;
    color: var(--accent);
    border-radius: 4px;
}
.vector-menu-portal li a:hover {
    background: var(--bg-tabs);
    color: var(--accent-hover);
}
}


.note-reminder {
#footer {
  border-left-color: #5cb85c; /* green */
    padding: 2em;
  background: #dff0d8;
    text-align: center;
  color: #3c763d;
    font-size: 0.9em;
    color: var(--text-muted);
}
}


.note-inline {
 
  display: inline-block;
.wikitable, table.infobox {
  padding: 2px 6px;
    border: 1px solid var(--border-color);
  font-size: 90%;
    background: var(--bg-surface);
  vertical-align: middle;
    color: var(--text-main);
  margin: 0 0.3em;
    margin: 1em 0;
  border-radius: 3px;
    width: 100%;
  border-left-width: 3px;
  box-shadow: none;
}
}


.note-inline.note-info {
 
  border-left-color: #5bc0de;
#firstHeading {
  background: #e1f0fa;
    color: var(--accent);
  color: #31708f;
    font-size: 1.8em;
    margin-bottom: 0.5em;
}
}


.note-inline.note-error {
/* headings */
  border-left-color: #d9534f;
h1, h2, h3, h4, h5, h6 {
  background: #f8d7da;
    color: var(--accent);
  color: #a94442;
    margin-top: 1.5em;
    margin-bottom: 0.6em;
}
}


.note-inline.note-warn {
/* lonks */
  border-left-color: #f0ad4e;
a {
  background: #faf1d6;
    color: var(--accent);
  color: #8a6d3b;
    text-decoration: none;
}
a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}
}


.note-inline.note-reminder {
/* mobile tweeks */
  border-left-color: #5cb85c;
@media screen and (max-width: 768px) {
  background: #d8e9d1;
    #mw-panel {
  color: #3c763d;
        padding: 0.5em;
    }
    #searchform {
        flex-direction: column;
    }
    #content, .mw-body {
        padding: 1em;
    }
}
}

Revision as of 11:10, 8 July 2025

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

/* Note template styles - wiki-style info boxes */
.note {
  border:1px solid #ccc;
  border-left-width:6px;
  background:#f9f9f9;
  padding:12px 16px;
  margin:1em 0;
  border-radius:4px;
  box-shadow:0 1px 2px rgb(0 0 0 / 0.1);
  font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
  font-size:14px;
  line-height:1.4
}
.note-info {
  border-left-color:#5bc0de;
  background:#d9edf7;
  color:#31708f
}
.note-error {
  border-left-color:#d9534f;
  background:#f2dede;
  color:#a94442
}
.note-warn {
  border-left-color:#f0ad4e;
  background:#fcf8e3;
  color:#8a6d3b
}
.note-reminder {
  border-left-color:#5cb85c;
  background:#dff0d8;
  color:#3c763d
}
.note-inline {
  display:inline-block;
  padding:2px 6px;
  font-size:90%;
  vertical-align:middle;
  margin:0 0.3em;
  border-radius:3px;
  border-left-width:3px;
  box-shadow:none
}
.note-inline.note-info {
  border-left-color:#5bc0de;
  background:#e1f0fa;
  color:#31708f
}
.note-inline.note-error {
  border-left-color:#d9534f;
  background:#f8d7da;
  color:#a94442
}
.note-inline.note-warn {
  border-left-color:#f0ad4e;
  background:#faf1d6;
  color:#8a6d3b
}
.note-inline.note-reminder {
  border-left-color:#5cb85c;
  background:#d8e9d1;
  color:#3c763d
}


/* foxwells tweeeeks */
:root {
    --bg-main: #f2f9fc;
    --bg-surface: #ffffff;
    --bg-sidebar: #e0f2f9;
    --bg-footer: #cde7f2;
    --bg-tabs: #c0e3f2;
    --border-color: #99cfe5;
    --accent: #339dc3;
    --accent-hover: #247fa3;
    --text-main: #1a1a1a;
    --text-muted: #4d4d4d;
}


body, html {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", "Helvetica Neue", sans-serif;
    background: var(--bg-main);
    color: var(--text-main);
    line-height: 1.6;
}

#mw-panel {
    background-color: none;
    border-right: none;
    padding-top: 1em;
}
#p-logo {
    background: none;
    margin-bottom: 1em;
}
.vector-menu h3 {
    color: var(--accent);
    font-weight: bold;
    padding: 0.5em 1em;
}

.vector-menu-portal ul {
    list-style: none;
    padding-left: 1em;
}
.vector-menu-portal li a {
    display: block;
    padding: 0.3em 0.5em;
    color: var(--accent);
    border-radius: 4px;
}
.vector-menu-portal li a:hover {
    background: var(--bg-tabs);
    color: var(--accent-hover);
}

#footer {
    padding: 2em;
    text-align: center;
    font-size: 0.9em;
    color: var(--text-muted);
}


.wikitable, table.infobox {
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-main);
    margin: 1em 0;
    width: 100%;
}


#firstHeading {
    color: var(--accent);
    font-size: 1.8em;
    margin-bottom: 0.5em;
}

/* headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--accent);
    margin-top: 1.5em;
    margin-bottom: 0.6em;
}

/* lonks */
a {
    color: var(--accent);
    text-decoration: none;
}
a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* mobile tweeks */
@media screen and (max-width: 768px) {
    #mw-panel {
        padding: 0.5em;
    }
    #searchform {
        flex-direction: column;
    }
    #content, .mw-body {
        padding: 1em;
    }
}