Difference between revisions of "MediaWiki:Common.css"

Revision as of 03:07, 26 April 2022

/* playdate color: #FFC833 */

/* NAVBAR */
.navbar {
  background-color: #ffc833;
  color: #212223;
}
.navbar-brand
{
  font-family: "Montserrat", sans-serif;
}
.navbar-brand img{
  max-height: 50px;
}
.navbar-nav .nav-link {
  color: black!important;
}
.navbar-nav .nav-link:hover {
  color: rgba(0,0,0,.5);
}
.navbar-nav .nav-item.dropdown .dropdown-toggle:after {
  margin-left: 0.5em;
  vertical-align: .2em;
}
.navbar-nav .nav-item {
  margin-right: 0.5em;
}
.navbar-nav.navbar-right .nav-item .fa.fa-user {
  margin-right: 0.5em;
}
/*FOOTER*/

#footer a {
	color: #FFC833;
}

#footer a:hover {
	color: #FFC833;
	background: none;
	text-decoration: underline;
}

.dropdown-menu {
	background: #343A3D;
}

.dropdown-menu label {
	color: #FFC833;
}

#footer-info-credits {
	color: white;
}

@media (min-width: 992px) { 
  .navbar .container-fluid {
    max-width: 70%;
    flex: 0 10% 50%;
  }
  .navbar-brand img{
    padding-left: 50px; 
  }
/*  .navbar-nav {
    padding-left: 20px;
    padding-right: 50px;
  }*/
  #content {
    /* background: rgba(255, 255, 255, 0.1); 
    border: 1px solid rgba(0,0,0,0.3); */
  }
  .footer .container-fluid {
    padding-left: 90px;
    padding-right: 90px;
    max-width: 70%;
    flex: 0 10% 50%;
  }
}
@media (max-width: 991px) {
  .navbar-nav:first-child {
    margin-bottom: 1em;
  }
  .navbar-nav .nav-item {
    margin-right: 0.5em;
    border-bottom: 1px solid rgba(0,0,0,0.5);
  }
  .navbar-nav .nav-item:last-child {
    border-bottom: none;
  }
  .navbar-nav .nav-item.dropdown .dropdown-toggle:after {
    float: right;
    margin-top: 10px;
  }
  .navbar-nav .nav-item.dropdown .dropdown-menu {
    margin-bottom: 0.5em;
  }
  .navbar-form input.search-query {
    width: 100%;
    margin-bottom: 1em;
  }

  #sidebar-right {
    width: 100% !important;
  }
}
@media (min-width: 768px) {
	.col-md-1 {
		max-width: none!important;
	}
}

/* MAIN CONTENT */
body
{
  background: #212223;
  color: white;
}

/*sidebar buttons only?? I THINK??**/
#sidebar-right .btn {
  color: #212223;
}

/*ok it still has a border around the border????*/
#sidebar-right .btn:focus, .btn:active
{
  background-color:goldenrod;
  border-color: goldenrod;
  border-width: 5px;
}

/*ok it still has a border around the border????*/
.btn:focus, .btn:active
{
  background-color:goldenrod;
  border-color: goldenrod;
  border-width: 5px;
}


/*TOC*/
/*TOC colors???? for links*/
#tweekiTOC #toc a.active, #tweekiTOC #toc a:focus, #tweekiTOC #toc a:hover
{
  color: goldenrod;
}
/*SPECIFICALLY THE "TO TOP" FOR TOC*/
#tweekiTOC #toctitle h2 a, #tweekiTOC .toctitle h2 a
{
  background-color: goldenrod;
  color: black;
}

.toc, .toccolours {
    border: 1px solid goldenrod;
    background-color: #212223;
}

/* LINKS */
a {
  font-weight: 500;
}
a:link { /* unvisited link */
  color: goldenrod;
}
a:visited { /* visited link */
  color: goldenrod;
}
a:hover { /* mouse over link */
  color: goldenrod;
}
a:active { /* selected link */
  color: #ffc833;
}
a[href*="redlink=1"] { /* unknown link */
  color: red;
}
#content a.external, /* external link default img removal */
#content a.external[href^="gopher://"],
#content a.external[href^="https://"],
.link-https { 
  color: #ffc833;
  /* remove lock background: none padding-right:0 */
  background: none;
  padding-right: 0;
}
#content a.external::after, /* external link icon */
#content a.external[href^="gopher://"]::after,
#content a.external[href^="https://"]::after,
.link-https, .link-https::after  {
  color: goldenrod;
  content: "\f35d";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 8px;
  background: none;
  padding-left: 3px;
  padding-right: 0;
  vertical-align: super;
}

pre {
  color: white;
  background-color: #212223;
}

/*ALL BUTTONS*/
.btn, .btn:link
{
  background-color:#FFC833;
  border-style: solid;
  border-color:#ffc833;
  color: #212223;
  border-width: 5px;
}
.btn:active, .btn:focus {
  color: goldenrod;
  border-style: solid;
  border-width: 5px;
}
/*BUTTON HOVER COLORS* note: when active/selected it's still fucked*/
.btn-primary.focus,.btn-primary:focus,.btn-primary:hover,.btn-primary:active{
  background-color: goldenrod;
  color: #212223;
  border-style: solid;
  border-width: 5px;
  border-color: goldenrod;
}

/*DISPLAY CATERGORIES*/
#catlinks { 
  display: block;
  background: transparent;
  border: none;
}
.mw-content-ltr ul {
  margin-left: 2em;
}
.mw-content-ltr li {
  padding-left: 0.5em;
}

.slideshow-current
{
    background: #303133!important;
}

.gallery {
	background: #343A3D;
}

ul.gallery.mw-gallery-slideshow .mw-gallery-slideshow-buttons {
	opacity: 1;
}

.gallery.mw-gallery-slideshow .mw-gallery-slideshow-buttons .oo-ui-buttonElement-button {
	background: #FFC833;
	border-radius: 0.25rem;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

@media screen and (max-width: 1111px) {
	.infobox {
		width: 100%;
	}
	.infobox .wikitable {
		width: 100%;
	}
}

.infobox a img {
	width: 100%;
    height: 100%;
}

.app-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1rem;
}

.app-link-item {
	background-color: #343a40;
    padding: 1rem;
}

.app-link-item-title p {
	margin-bottom: 0;
}

.app-link-item .floatright {
	width: 100%
}

.app-link-item .floatright img {
	width: 100%;
	height: 120px;
	object-fit: cover;
}

.upcoming-item {
	background-color: #343a40;
	margin-bottom: 2rem;
    overflow: hidden;
    padding: 1rem;
}
.upcoming-item .floatright img {
	image-rendering: pixelated;
}

@media screen and (max-width: 1111px) {
	.app-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.upcoming-item .floatright {
	width: 100%;
	}
	
	.upcoming-item .floatright img{
		width: 100%;
		height: auto;
	}
}

@media (max-width: 766px) {
		.app-grid {
		grid-template-columns: repeat(1, 1fr);
	}
}

.action-link p {
    margin-bottom: 0;
}

.action-link a {
	display: inline-block;
	background-color: #FFC833!important;
	color: black!important;
	text-decoration: none;
	padding: 0.6rem;
    border-radius: 0.3rem;
}
.action-link a:after {
	color: black!important;
	padding-right: 0.5rem!important;
}