Difference between revisions of "Testpage/styles.css"

From WildRP
Jump to navigation Jump to search
(Created page with "→‎Variables: @background-color-base: #000000; @background-color-article: #2C2C2C; @color-base: #D504FA; @color-gray: #a2a9b1; @color-gray-2: #eaecf0; @color-link: #04FA86;...")
(No difference)

Revision as of 14:17, 26 February 2021

/* Variables */ @background-color-base: #000000; @background-color-article: #2C2C2C; @color-base: #D504FA; @color-gray: #a2a9b1; @color-gray-2: #eaecf0; @color-link: #04FA86; @color-link--visited: #04FA86; @font-family: 'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI','Oxygen','Ubuntu','Cantarell','Helvetica Neue',sans-serif;

/* Styles */ html { 

 background: @background-color-base;
 background-image: url("https://steamuserimages-a.akamaihd.net/ugc/940586530515504757/CDDE77CB810474E1C07B945E40AE4713141AFD76/");
 margin: 0;
 padding: 0 0 20px;

}

body { 

 background: @background-color-article;

max-width: 800px; 

 margin: 0 auto;
 font-family: @font-family;

 > header,
 > main,
 > nav,
 > footer {
   padding: 1em;
 }

}

a { 

 color: @color-link;

 &:visited {
   color: @color-link--visited;
 }

}

/* GENERAL */ .mw-portlet { 

 position: relative;

 h3 {
   display: none;
 }

 li {
   display: inline-block;
   margin-right: 10px;
 }

 input[type=checkbox] {
   display: none;
 }

}


/** HEADER */

.mw-header { 

 min-height: 50px;
 margin: 10px 0 8px;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 position: relative;
 z-index: 3;

}

  1. p-search {
 width: 100%;

 #searchInput {
   background-image: url("https://steamuserimages-a.akamaihd.net/ugc/940586530515504757/CDDE77CB810474E1C07B945E40AE4713141AFD76/");
   background-color: #797979;
   background-size: 18px;
   -webkit-appearance: none;
   max-width: 450px;
   margin-top: 0;
   height: 2.25em;
   border: solid 1px @color-gray-2;
   border-radius: 2px;
   padding: 7px 0 7px 29px;
   box-shadow: 0 1px 1px rgba(0,0,0,0.05);
   outline: 0;
   background-position: left 6px center;
   background-repeat: no-repeat;
   background-size: 18px;
 }

 #searchButton {
   .client-js & {
     display: none;
   }
 }

 h3 {
   display: none;
 }

}

  1. p-logo {
 min-width: 300px;
 margin-left: 40px;
 min-height: 70px;
 display: flex;
 align-items: center;
 flex-grow: 1;

}

.mw-portlet-notifications { 

 li {
   width: 20px;
   height: 20px;
 }

 a {
   background-repeat: no-repeat;
   color: transparent;
   background-position: left center;
   display: block;
 }

}

.mw-portlet-personal { 

 margin: 0 0 0 12px;

padding: 0 12px 0 0; 

 height: 20px;
 width: 20px;

h3 { background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAx0lEQVQ4jdXSzQmEQAwFYEuYUixhSwgkA8mQgKXYgS3YgXZgCZagHWgHuxf14t8osssGcv145CVJvjk+hBRFK2TrkK1D0cqHkN7CUBRI7L21KAqXMIDModiwD9oAkLlH0i3L+ooGiTWPAPPfJQTIHLGOB9h46YZnKS+3PI8PISW2GkV7FO2Jrb79h4+ODyElsYJYm437NSRWRCWdylgj++U0u+UAZI5E22hsWW03UWQtr2NT66zlCjz8uzNQbFiDN7F5/xB8aj57Ynp2FKI0bAAAAABJRU5ErkJggg== ); text-indent: -999px; background-repeat: no-repeat; height: 100%; width: 40px; 

   background-position: center center;
   margin: 0;
   padding: 0;

background-position: center top; 

   overflow: hidden;

} 

 h3 {
   display: flex;
 }

 @media (max-width: @width-breakpoint-tablet ) {
   margin-bottom: 10px;
 }

}

// sidebar .toggle-list__list { 

 position: fixed;
 left: 0;
 top: 0;
 width: 30%;
 bottom: 0;
 background: white;
 z-index: 4;

 h3 {
   display: none;
 }

 a {
   display: block;
 }

 .mw-portlet-body li {
   display: block;
   padding: 8px;
 }

}

/** CONTENT */

main { 

 border-bottom: solid 20px @background-color-base;

}

.content { 

 &__header {
   position: relative;
 }

 &__heading {
   padding: 0 50px 0 0;
   margin: 0;
   border-bottom: 0;
   float: left;
 }

 &__language-btn {
   float: right;
 }

 &__indicators {
   position: absolute;
   top: 10px;
   right: 0;
 }

 &__tagline {
   clear: both;
   color: @color-base;
   font-size: 0.85em;
   margin-bottom: 12px;
   line-height: 20px;
   &:empty {
     display: none;
   }
 }

 &__actions {
   display: flex;
 }

}

.mw-portlet-cactions { 

 margin-left: 40px;

}

/* Checkbox hack dropdown */ .mw-portlet-personal, .mw-portlet-cactions { 

 li {
   display: block;
   padding: 0.75em 0.875em;
 }

 .mw-portlet-body {
   display: none;

   ul {
     background: @background-color-article;
     position: absolute;
     overflow-y: auto;
     z-index: 2;
     box-shadow: 0 5px 17px 0 rgba(0,0,0,0.24), 0 0 1px @color-gray;
     right: 0;
     min-width: 200px;
   }
 }

 input[type="checkbox"] {
   display: block;
   position: absolute;
   opacity: 0;
   cursor: pointer;
   top: 0;
   left: 0;
   z-index: 1;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
 }

 input:checked {
   ~ .mw-portlet-body ul {
     opacity: 1;
     visibility: visible;
   }

   ~ .mw-portlet-body {
     display: block;
     opacity: 1;
   }
 }

}

.mw-portlet-namespaces { 

 margin-top: 10px;
 border-bottom: 1px solid @color-gray-2;

 a {
   font-size: 0.85em;
   margin: 0 10px 0 0;
   color: @color-base;
   font-weight: bold;
   padding-bottom: 6px;
   display: inline-block;
 }

 li.selected {
   border-bottom: 2px solid @color-base;
   margin-bottom: -1px;
 }

}

.mw-portlet-views { 

 flex-grow: 1;

 ul {
   display: flex;
   height: 3em;
   justify-content: space-between;
 }

 li:first-child {
   justify-content: flex-start;
 }

 li:hover {
   background-color: rgba(0,0,0,0.03);
 }

}

.mw-portlet-cactions h3, .mw-portlet-views li { 

 display: flex;
 justify-content: flex-end;
 align-items: center;
 min-width: 0;
 overflow: hidden;
 flex-basis: auto;
 height: 40px;
 font-weight: normal;
 font-size: 100%;
 padding: 0;

}

.mw-portlet-cactions h3, .mw-portlet-cactions li a, .mw-portlet-views li a { 

 color: @color-base;
 text-decoration: none;

}

/* CATEGORIES */

  1. catlinks {
 font-size: 0;
 border: none;
 background: none;
 margin: 40px 0 10px 0;
 padding: 0;

 .mw-normal-catlinks > a {
   display: none;
 }

 ul {
   margin: 0;
   font-size: 14px;
 }

 li {
   display: inline-block;
   border: 0;
 }

 a {
   padding: 5px 10px;
   margin-right: 5px;
   display: block;
   background-color: @color-gray-2;
   color: @color-base;
   box-shadow: 0 1px 3px rgba(0,0,0,0.03),0 1px 2px rgba(0,0,0,0.06);
 }

}

/* FOOTER */

body > footer { 

 border-top: solid 20px @background-color-base;
 padding: 20px 0;

 li {
   display: inline-block;
   margin-right: 20px;
 }

}

/* The following rules will not be needed in future */ .mw-portlet ul { 

 margin: 0;

}

.tright { 

 float: right;
 clear: both;

} .tleft { 

 float: right;
 clear: both;

}

  1. ca-view {
 display: none;

}

/* checkbox hack */ .toggle-list__checkbox { 

 position: absolute;
 z-index: -1;
 opacity: 0;

}

.toggle-list__list { 

 display: none;

}

.toggle-list__checkbox:checked ~ .toggle-list__list { 

 display: block;

}

.toggle-list__checkbox ~ .toggle-list__mask { 

 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 opacity: 0;
 bottom: 0;
 background: rgba(0,0,0,0.8);
 z-index: 3;
 visibility: hidden;

}

.toggle-list__checkbox:checked ~ .toggle-list__mask { 

 visibility: visible;
 opacity: 1;

}

/* Icons */ .sidebar__icon { 

 cursor: pointer;
 width: 20px;
 height: 20px;
 position: absolute;
 top: 40px;
 overflow: hidden;
 color: transparent;
 left: 20px;
 z-index: 3;

} .sidebar__icon:before { 

 content: ;
 width: 20px;
 display: block;
 height: 20px;
 background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E menu %3C/title%3E %3Cpath d=%22M1 3v2h18V3zm0 8h18V9H1zm0 6h18v-2H1z%22/%3E %3C/svg%3E");

}

.toctogglelabel { 

 color: inherit;

}

Retrieved from "https://wiki.wildrp.com/index.php?title=Testpage/styles.css&oldid=157"