MediaWiki:Common.css: Difference between revisions

From Foxwells Wiki
Jump to navigation Jump to search
theme
css
 
Line 12: Line 12:
   font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
   font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
   font-size:14px;
   font-size:14px;
   line-height:1.4
   line-height:1.4  
}
}
.note-info {
.note-info {
   border-left-color:#5bc0de;
   border-left-color:#5bc0de;
   background:#d9edf7;
   background:#d9edf7;
   color:#31708f
   color:#31708f  
}
}
.note-error {
.note-error {
   border-left-color:#d9534f;
   border-left-color:#d9534f;
   background:#f2dede;
   background:#f2dede;
   color:#a94442
   color:#a94442  
}
}
.note-warn {
.note-warn {
   border-left-color:#f0ad4e;
   border-left-color:#f0ad4e;
   background:#fcf8e3;
   background:#fcf8e3;
   color:#8a6d3b
   color:#8a6d3b  
}
}
.note-reminder {
.note-reminder {
   border-left-color:#5cb85c;
   border-left-color:#5cb85c;
   background:#dff0d8;
   background:#dff0d8;
   color:#3c763d
   color:#3c763d  
}
}
.note-inline {
.note-inline {
Line 42: Line 42:
   border-radius:3px;
   border-radius:3px;
   border-left-width:3px;
   border-left-width:3px;
   box-shadow:none
   box-shadow:none  
}
}
.note-inline.note-info {
.note-inline.note-info {
   border-left-color:#5bc0de;
   border-left-color:#5bc0de;
   background:#e1f0fa;
   background:#e1f0fa;
   color:#31708f
   color:#31708f  
}
}
.note-inline.note-error {
.note-inline.note-error {
   border-left-color:#d9534f;
   border-left-color:#d9534f;
   background:#f8d7da;
   background:#f8d7da;
   color:#a94442
   color:#a94442  
}
}
.note-inline.note-warn {
.note-inline.note-warn {
   border-left-color:#f0ad4e;
   border-left-color:#f0ad4e;
   background:#faf1d6;
   background:#faf1d6;
   color:#8a6d3b
   color:#8a6d3b  
}
}
.note-inline.note-reminder {
.note-inline.note-reminder {
   border-left-color:#5cb85c;
   border-left-color:#5cb85c;
   background:#d8e9d1;
   background:#d8e9d1;
   color:#3c763d
   color:#3c763d  
}
}
/* foxwells tweeeeks */
:root {
:root {
    --bg-main: #f2f9fc;
  --bg-main:#f2f9fc;
    --bg-surface: #ffffff;
  --bg-surface:#ffffff;
    --bg-sidebar: #e0f2f9;
  --bg-sidebar:#e0f2f9;
    --bg-footer: #cde7f2;
  --bg-footer:#cde7f2;
    --bg-tabs: #c0e3f2;
  --bg-tabs:#c0e3f2;
    --border-color: #99cfe5;
  --border-color:#99cfe5;
    --accent: #339dc3;
  --accent:#339dc3;
    --accent-hover: #247fa3;
  --accent-hover:#247fa3;
    --text-main: #1a1a1a;
  --text-main:#1a1a1a;
    --text-muted: #4d4d4d;
  --text-muted:#4d4d4d
}
}
 
body,
 
html {
body, html {
  margin:0;
    margin: 0;
  padding:0;
    padding: 0;
  font-family:"Segoe UI","Helvetica Neue",sans-serif;
    font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  background:var(--bg-main);
    background: var(--bg-main);
  color:var(--text-main);
    color: var(--text-main);
  line-height:1.6
    line-height: 1.6;
}
}
#mw-panel {
#mw-panel {
    background-color: none;
  background-color:none;
    border-right: none;
  border-right:none;
    padding-top: 1em;
  padding-top:1em
}
}
#p-logo {
#p-logo {
    background: none;
  background:none;
    margin-bottom: 1em;
  margin-bottom:1em
}
}
.vector-menu h3 {
.vector-menu h3 {
    color: var(--accent);
  color:var(--accent);
    font-weight: bold;
  font-weight:bold;
    padding: 0.5em 1em;
  padding:0.5em 1em
}
}
.vector-menu-portal ul {
.vector-menu-portal ul {
    list-style: none;
  list-style:none;
    padding-left: 1em;
  padding-left:1em
}
}
.vector-menu-portal li a {
.vector-menu-portal li a {
    display: block;
  display:block;
    padding: 0.3em 0.5em;
  padding:0.3em 0.5em;
    color: var(--accent);
  color:var(--accent);
    border-radius: 4px;
  border-radius:4px
}
}
.vector-menu-portal li a:hover {
.vector-menu-portal li a:hover {
    background: var(--bg-tabs);
  background:var(--bg-tabs);
    color: var(--accent-hover);
  color:var(--accent-hover)
}
}
#footer {
#footer {
    padding: 2em;
  padding:2em;
    text-align: center;
  text-align:center;
    font-size: 0.9em;
  font-size:0.9em;
    color: var(--text-muted);
  color:var(--text-muted)
}
}
 
.wikitable,
 
table.infobox {
.wikitable, table.infobox {
  border:1px solid var(--border-color);
    border: 1px solid var(--border-color);
  background:var(--bg-surface);
    background: var(--bg-surface);
  color:var(--text-main);
    color: var(--text-main);
  margin:1em 0;
    margin: 1em 0;
  width:100%
    width: 100%;
}
}
#firstHeading {
#firstHeading {
    color: var(--accent);
  color:var(--accent);
    font-size: 1.8em;
  font-size:1.8em;
    margin-bottom: 0.5em;
  margin-bottom:0.5em
}
}
 
h1,
/* headings */
h2,
h1, h2, h3, h4, h5, h6 {
h3,
    color: var(--accent);
h4,
    margin-top: 1.5em;
h5,
    margin-bottom: 0.6em;
h6 {
  color:var(--accent);
  margin-top:1.5em;
  margin-bottom:0.6em
}
}
/* lonks */
a {
a {
    color: var(--accent);
  color:var(--accent);
    text-decoration: none;
  text-decoration: underline dotted;
}
  }
a:hover {
a:hover {
    color: var(--accent-hover);
  color:var(--accent-hover);
    text-decoration: underline;
  text-decoration:underline;
}
}
 
@media screen and (max-width:768px) {
/* mobile tweeks */
  #mw-panel {
@media screen and (max-width: 768px) {
    padding:0.5em
    #mw-panel {
  }
        padding: 0.5em;
  #searchform {
    }
    flex-direction:column
    #searchform {
  }
        flex-direction: column;
  #content,
    }
  .mw-body {
    #content, .mw-body {
    padding:1em
        padding: 1em;
  }
    }
}
}

Latest revision as of 11:19, 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 
}
: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
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color:var(--accent);
  margin-top:1.5em;
  margin-bottom:0.6em
}
a {
  color:var(--accent);
  text-decoration: underline dotted;
  }
a:hover {
  color:var(--accent-hover);
  text-decoration:underline;
}
@media screen and (max-width:768px) {
  #mw-panel {
    padding:0.5em
  }
  #searchform {
    flex-direction:column
  }
  #content,
  .mw-body {
    padding:1em
  }
}