MediaWiki:Common.css: Difference between revisions

From Foxwells Wiki
Jump to navigation Jump to search
No edit summary
css
 
(One intermediate revision by the same user not shown)
Line 2: Line 2:


/* Note template styles - wiki-style info boxes */
/* Note template styles - wiki-style info boxes */
.note {
.note {
   border: 1px solid #ccc;
   border:1px solid #ccc;
   border-left-width: 6px;
   border-left-width:6px;
   background: #f9f9f9;
   background:#f9f9f9;
   padding: 12px 16px;
   padding:12px 16px;
   margin: 1em 0;
   margin:1em 0;
   border-radius: 4px;
   border-radius:4px;
   box-shadow: 0 1px 2px rgb(0 0 0 / 0.1);
   box-shadow:0 1px 2px rgb(0 0 0 / 0.1);
   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; /* bright blue */
   border-left-color:#5bc0de;
   background: #d9edf7;
   background:#d9edf7;
   color: #31708f;
   color:#31708f  
}
}
.note-error {
.note-error {
   border-left-color: #d9534f; /* strong red */
   border-left-color:#d9534f;
   background: #f2dede;
   background:#f2dede;
   color: #a94442;
   color:#a94442  
}
}
.note-warn {
.note-warn {
   border-left-color: #f0ad4e; /* orange */
   border-left-color:#f0ad4e;
   background: #fcf8e3;
   background:#fcf8e3;
   color: #8a6d3b;
   color:#8a6d3b  
}
}
.note-reminder {
.note-reminder {
   border-left-color: #5cb85c; /* green */
   border-left-color:#5cb85c;
   background: #dff0d8;
   background:#dff0d8;
   color: #3c763d;
   color:#3c763d  
}
}
.note-inline {
.note-inline {
   display: inline-block;
   display:inline-block;
   padding: 2px 6px;
   padding:2px 6px;
   font-size: 90%;
   font-size:90%;
   vertical-align: middle;
   vertical-align:middle;
   margin: 0 0.3em;
   margin:0 0.3em;
   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  
}
: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
  }
}
}

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
  }
}