Template:FP Box/FP Styles.css

From BerserkerLoop
< Template:FP Box
Revision as of 09:37, 19 December 2022 by Crimsongaia (talk | contribs) (Created page with ".fp-button { border-radius: 4px; background: none; border: 2px solid #2e2d2d; cursor: pointer; padding: 0.5em 0.75em; font-weight: 700; font-size: 14px; color: white; display: inline-block; transition: all 0.3s cubic-bezier(.25, .8, .25, 1); } .fp-button:hover { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.24); } .fpcontent { width: 100%; display: inline-block; overflow: visible !important; z-index: 1; } .fpbox { ba...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

.fp-button {

 border-radius: 4px;
 background: none;
 border: 2px solid #2e2d2d;
 cursor: pointer;
 padding: 0.5em 0.75em;
 font-weight: 700;
 font-size: 14px;
 color: white;
 display: inline-block;
 transition: all 0.3s cubic-bezier(.25, .8, .25, 1);

} .fp-button:hover {

 box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.24);

} .fpcontent {

 width: 100%;
 display: inline-block;
 overflow: visible !important;
 z-index: 1;

} .fpbox {

 background-color: rgba(42, 42, 42, .2);
 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
 margin: 0px 10px 20px 10px;
 padding: 2px;
 border-radius: 4px;

} .fpbox .heading {

 border-bottom: 1px solid rgba(160, 160, 160, .4);
 margin: 0 0 10px 0;
 padding: 0 0 5px 0;
 font-weight: 600;
 text-align: center;
 font-size: 22px;

} .fpbox .heading .smalllink {

 font-weight: 500;

} .fpbox hr {

 border: none;
 border-bottom: 1px solid rgba(160, 160, 160, .4);

} .fplinks {

 margin: -5px;

} .fpvideos {

 margin: 0 auto;
 overflow: hidden;
 text-align: center;

} .fpvideo {

 display: inline-block;
 margin: 0 5px;

} .fplinks .linkslabel {

 background: rgba(0, 0, 0, 0);
 border-bottom: 2px solid #454545;
 margin: 15px 5px 5px 5px;
 padding: 0 0 5px 0;

} .fplink {

 display: inline-block;
 vertical-align: middle;
 width: 100%;
 font-size: 14px;
 font-weight: 500;

} .fplink a {

 color: black;

} .fplink a.external {

 color: black;

} .fplink a.external:visited {

 color: black;

} .fplink a:visited {

 color: black;

} /* Yeah, using display: table makes for a lot of extra markup, but it makes proportionate sizing and vertical centering a lot easier, so going with it */

.fplink .box {

 border-collapse: separate;
 border-spacing: 5px;
 display: table;
 width: 100%;

} .fplink .box .row {

 display: table-row;

} .fplink .box .row .cell {

 background-color: white;
 border: 1px solid #1976d2;
 color: black;
 border-radius: 4px;
 display: table-cell;
 padding: 0 6px;
 position: relative;
 text-align: center;
 vertical-align: middle;

} .fplink.wide .box .row .cell {

 padding: 0 5px;

}

  1. fptopsection .fplink.image, #fpflexsection .fplink.image, #fpbottomsection .fplink.image {
 height: 114px;
 width: 114px;

} .fplink.image .box .row .cell {

 height: 100px;
 width: 100px;
 vertical-align: bottom;

} .fplink.image .box .row .cell .image img {

 height: 100px;
 width: 100px;

} @media (min-width: 470px) {

 .fplink {
   width: 50%;
 }
 .fplink.wide {
   width: 100%;
 }

} @media (min-width: 580px) {

 .fplink {
   width: 33.333%;
 }
 .fplink.wide {
   width: 66.666%;
 }

} @media (min-width: 690px) {

 .fplink {
   width: 25%;
 }
 .fplink.wide {
   width: 50%;
 }

} @media (min-width: 800px) {

 .fplink {
   width: 20%;
 }
 .fplink.wide {
   width: 40%;
 }

} @media (min-width: 910px) {

 .fplink {
   width: 16.666%;
 }
 .fplink.wide {
   width: 33.333%;
 }

} @media (min-width: 990px) {

 .fpcontent {
   padding-right: 520px;
   width: calc(100% - 530px);
 }
 #fptopsection {
   float: left;
   width: 100%;
 }
 #fpflexsection {
   float: right;
   width: 520px;
   margin-right: -520px;
 }
 #fpbottomsection {
   float: left;
   width: 100%;
   margin-top: -5px;
 }
 #fptopsection .fplink, #fpbottomsection .fplink {
   width: 50%;
 }
 #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
   width: 100%;
 }
 #fpflexsection .fplink {
   width: 25%;
 }
 #fpflexsection .fplink.wide {
   width: 50%;
 }

} @media (min-width: 1100px) {

 #fptopsection .fplink, #fpbottomsection .fplink {
   width: 33.333%;
 }
 #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
   width: 66.666%;
 }

} @media (min-width: 1210px) {

 #fptopsection .fplink, #fpbottomsection .fplink {
   width: 25%;
 }
 #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
   width: 50%;
 }

} @media (min-width: 1320px) {

 #fptopsection .fplink, #fpbottomsection .fplink {
   width: 20%;
 }
 #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
   width: 40%;
 }

} @media (min-width: 1430px) {

 #fptopsection .fplink, #fpbottomsection .fplink {
   width: 16.666%;
 }
 #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
   width: 33.333%;
 }
 .fplink a {
   padding: 3px 5px;
   color: black;
 }
 .fplink a:visited {
   color: black;
 }
 .fplink a.external {
   color: black;
 }
 .fplink a.external:visited {
   color: black;
 }

} @media (min-width: 1540px) {

 #fptopsection .fplink, #fpbottomsection .fplink {
   width: 14.285%;
 }
 #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
   width: 28.571%;
 }
 #fptopsection .fpmaybercol .fpbox, #fpbottomsection .fpmaybercol .fpbox {
   background-image: none;
 }
 .fpmaybelcol {
   float: left;
   width: 70.886%;
 }
 #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
   width: 20%;
 }
 #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
   width: 40%;
 }
 .fpmaybercol {
   float: right;
   width: 29.113%;
 }
 #fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
   width: 50%;
 }
 #fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
   width: 100%;
 }

} @media (min-width: 1650px) {

 #fptopsection .fplink, #fpbottomsection .fplink {
   width: 12.5%;
 }
 #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
   width: 25%;
 }

} @media (min-width: 1697px) {

 #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
   width: 16.666%;
 }
 #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
   width: 33.333%;
 }

} @media (min-width: 1760px) {

 #fptopsection .fplink, #fpbottomsection .fplink {
   width: 11.111%;
 }
 #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
   width: 22.222%;
 }

} @media (min-width: 1850px) {

 #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
   width: 14.285%;
 }
 #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
   width: 28.571%;
 }

} @media (min-width: 1870px) {

 #fptopsection .fplink, #fpbottomsection .fplink {
   width: 10%;
 }
 #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
   width: 20%;
 }
 #fptopsection .fplink.image, #fpbottomsection .fplink.image {
   width: 134px;
   height: 134px;
 }
 #fptopsection .fplink.image .box .row .cell, #fpbottomsection .fplink.image .box .row .cell {
   width: 120px;
   height: 120px;
 }
 #fptopsection .fplink.image .box .row .cell .image img, #fpbottomsection .fplink.image .box .row .cell .image img {
   width: 120px;
   height: 120px;
 }

} @media (min-width: 1918px) {

 #fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
   width: 33.333%;
 }
 #fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
   width: 66.666%;
 }

} @media (min-width: 1980px) {

 #fptopsection .fplink, #fpbottomsection .fplink {
   width: 9.09%;
 }
 #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
   width: 18.181%;
 }

} @media (min-width: 2006px) {

 #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
   width: 12.5%;
 }
 #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
   width: 25%;
 }

} @media (min-width: 2090px) {

 #fptopsection .fplink, #fpbottomsection .fplink {
   width: 8.33%;
 }
 #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
   width: 16.666%;
 }

} @media (min-width: 2161px) {

 #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
   width: 11.111%;
 }
 #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
   width: 22.222%;
 }

} @media (min-width: 2200px) {

 #fptopsection .fplink, #fpbottomsection .fplink {
   width: 7.692%;
 }
 #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
   width: 15.384%;
 }

} @media (min-width: 2296px) {

 #fptopsection .fpmaybercol .fplink, #fpbottomsection .fpmaybercol .fplink {
   width: 25%;
 }
 #fptopsection .fpmaybercol .fplink.wide, #fpbottomsection .fpmaybercol .fplink.wide {
   width: 50%;
 }

} @media (min-width: 2310px) {

 #fptopsection .fplink, #fpbottomsection .fplink {
   width: 7.142%;
 }
 #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
   width: 14.285%;
 }

} @media (min-width: 2316px) {

 #fptopsection .fpmaybelcol .fplink, #fpbottomsection .fpmaybelcol .fplink {
   width: 10%;
 }
 #fptopsection .fpmaybelcol .fplink.wide, #fpbottomsection .fpmaybelcol .fplink.wide {
   width: 20%;
 }

} @media (min-width: 2420px) {

 #fptopsection .fplink, #fpbottomsection .fplink {
   width: 6.666%;
 }
 #fptopsection .fplink.wide, #fpbottomsection .fplink.wide {
   width: 13.333%;
 }
 .fplink a {
   padding: 5px 5px;
 }
 #fptopsection .fplink.image, #fpbottomsection .fplink.image {
   width: 164px;
   height: 164px;
 }
 #fptopsection .fplink.image .box .row .cell, #fpbottomsection .fplink.image .box .row .cell {
   width: 150px;
   height: 150px;
 }
 #fptopsection .fplink.image .box .row .cell .image img, #fpbottomsection .fplink.image .box .row .cell .image img {
   width: 150px;
   height: 150px;
 }

} .fplink.image .image {

 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 1;

} .fplink.image a {

 z-index: 2;

} .fplink a {

 display: block;
 position: relative;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 padding: 1px 5px;

} .fplink.image .image a {

 padding: 0;

} .fplink.image .link a {

 background: #f5f5f5;
 border-top: 2px solid #454545;

} .fplink.wide a {

 margin: 0 -5px;

}