|
|
| Line 1: |
Line 1: |
|
| |
| /* Heading */
| |
| .page-Test_Page #firstHeading {
| |
| display:none;
| |
| }
| |
|
| |
| /* Main picture content */
| |
| .MainPicture {
| |
| display:flex;
| |
| justify-content:center;
| |
| flex-direction:row;
| |
| }
| |
|
| |
| /* Image Logo */
| |
| .MainPicture a img {
| |
| -webkit-filter: drop-shadow(15px 15px 15px #222);
| |
| filter: drop-shadow(20px 15px 15px #222);
| |
| }
| |
|
| |
| .MainPicture a img:hover {
| |
| -webkit-filter: drop-shadow(0px 0px 15px gray);
| |
| }
| |
|
| |
| /* Description content */
| |
| .MainDSC {
| |
| display:flex;
| |
| flex-direction:column;
| |
| align-items:center;
| |
| }
| |
|
| |
| /* Pedia content */
| |
| .MainPedia {
| |
| display:flex;
| |
| justify-content:center;
| |
| align-items:center;
| |
| text-align:center;
| |
| }
| |
|
| |
| .PediaTable {
| |
| display:flex;
| |
| justify-content:center;
| |
| align-items:center;
| |
| }
| |
|
| |
| .Pedia {
| |
| padding-left:2em;
| |
| padding-right:2em;
| |
| }
| |
|
| |
| .PediaTable p img {
| |
| -webkit-filter: drop-shadow(15px 15px 13px #222);
| |
| filter: drop-shadow(15px 15px 13px #222);
| |
| }
| |
|
| |
| .PediaTable a img:hover {
| |
| -webkit-filter: drop-shadow(0px 0px 8px gray);
| |
| }
| |
|
| |
| /* Main content */
| |
| .MainLinks,
| |
| .YouMAL {
| |
| display:flex;
| |
| flex-wrap:wrap;
| |
| flex-direction:row;
| |
| align-items:center;
| |
| justify-content:center;
| |
| padding-left:10%;
| |
| padding-right:10%;
| |
| }
| |
|
| |
| /* Paragraphs */
| |
| .MainLinks p,
| |
| .Events p,
| |
| .Other p,
| |
| .YouMAL p,
| |
| .Shops p,
| |
| .Usefull p,
| |
| .Social p {
| |
| border:2px solid #808080;
| |
| padding:3px 0 3px 5px;
| |
| background-color:#445466; /* #f0f0f0 */
| |
| padding-right:7px;
| |
| margin-right:4px;
| |
| margin-left:4px;
| |
| white-space:nowrap;
| |
| }
| |
|
| |
| /* Links Picture*/
| |
| .MainLinks p a:nth-child(1),
| |
| .Other p a:nth-child(1),
| |
| .Other p a span:nth-child(1),
| |
| .YouMAL p a:nth-child(1),
| |
| .Usefull p a:nth-child(1),
| |
| .Usefull p a span:nth-child(1),
| |
| .Social p a span:nth-child(1) {
| |
| padding:8px 0 10px 0;
| |
| border-left:5px solid transparent;
| |
| margin-left:-5px
| |
| }
| |
|
| |
| /* Links text*/
| |
| .MainLinks p a:nth-child(2),
| |
| .Other p a:nth-child(2),
| |
| .Other p a span:nth-child(2),
| |
| .YouMAL p a:nth-child(2),
| |
| .Usefull p a,
| |
| .Usefull p a span,
| |
| .Social p a span {
| |
| color:white!important;
| |
| padding:8px 0 10px 0;
| |
| border-right:5px solid transparent;
| |
| margin-right:-7px;
| |
| }
| |
|
| |
| /* Links EVENTS picture - because different size picture*/
| |
| .Events p a:nth-child(1) {
| |
| padding:12px 0 14px 0;
| |
| border-left:5px solid transparent;
| |
| margin-left:-5px
| |
| }
| |
|
| |
| /* Links EVENTS text - because different size picture */
| |
| .Events p a:nth-child(2) {
| |
| color:white!important;
| |
| padding:12px 0 14px 0;
| |
| border-right:5px solid transparent;
| |
| margin-right:-7px
| |
| }
| |
|
| |
| /* Paragraphs HOVER */
| |
| .MainLinks p:hover, .Events p:hover, .Other p:hover, .YouMAL p:hover,.Usefull p:hover, .Discord p:hover, .Social p:hover {
| |
| background-color: #808080; /* #C3C3C3 */
| |
| cursor: pointer;
| |
| border:2px solid #4F4F4F;
| |
| color:white!important;
| |
| }
| |
|
| |
| .Shops p:hover {
| |
| cursor: pointer;
| |
| border:2px solid black;
| |
| background-color: #2b314b;
| |
| }
| |
|
| |
| /* MainLinks: Rules - Other - Paragraphs ACTIVE */
| |
| .MainLinks p:active, .Events p:active, .Other p:active, .YouMAL p:active, .Shops p:active, .Usefull p:active, .Discord p:active, .Social p:active {
| |
| background-color: #C7C7C7;
| |
| cursor: pointer;
| |
| border:2px solid #595959;
| |
| color:white!important;
| |
| }
| |
|
| |
| .YouMAL a:active, .Discord a:active {
| |
| color:white!important;
| |
| }
| |
|
| |
| .Shops p:active {
| |
| cursor: pointer;
| |
| border:2px solid #4e6271;
| |
| background-color: gray;
| |
| }
| |
|
| |
| /* Grid box: Gears, Events, Other */
| |
|
| |
|
| |
| /* Gears */
| |
| /* Gears, Events, Other Box */
| |
| .G_E_O-Box{
| |
| display:flex;
| |
| flex-wrap:wrap;
| |
| justify-content:space-around;
| |
| flex-direction:row;
| |
| padding-left:10%;
| |
| padding-right:10%;
| |
| }
| |
|
| |
| /* Gears */
| |
| .G_E_O-Box .Gears{
| |
| flex-wrap:wrap;
| |
| display:flex;
| |
| align-items:center;
| |
| flex-direction:column;
| |
| justify-content:center;
| |
| width: 480px;
| |
| height:480px;
| |
| }
| |
|
| |
| .G_E_O-Box .Gears img{
| |
| border:2px solid #808080;
| |
| margin:0.5em;
| |
| min-width:220px;
| |
| }
| |
|
| |
| /* Gears hover info*/
| |
| .hideMainPage {
| |
| display: none;
| |
| }
| |
|
| |
| .HoverHide:hover + .hideMainPage {
| |
| display: block;;
| |
| }
| |
|
| |
| /* Hover over image to see text */
| |
| .ContainerMainPage {
| |
| position: relative;
| |
| width: auto;
| |
| }
| |
|
| |
| .OverlayMainPage {
| |
| position: absolute;
| |
| top: 0;
| |
| bottom: 0;
| |
| left: 0;
| |
| right: 0;
| |
| height: 100%;
| |
| width: 100%;
| |
| opacity: 0;
| |
| transition: .5s ease;
| |
| background-color: rgba(0, 0, 0, 0.3);
| |
| pointer-events: none;
| |
| }
| |
|
| |
| .ContainerMainPage:hover .OverlayMainPage {
| |
| opacity: 1;
| |
| }
| |
|
| |
| .HoverImgPainPage {
| |
| color: white;
| |
| font-size: 1.875em;
| |
| position: absolute;
| |
| text-align: center;
| |
| top: 50%;
| |
| left: 50%;
| |
| width:100%;
| |
| transform: translate(-50%, -50%);
| |
| -ms-transform: translate(-50%, -50%);
| |
| }
| |
|
| |
| .Gears .ContainerMainPage:active {
| |
| background-color: #7e9496;
| |
| }
| |
|
| |
| /* Shops */
| |
| .Shops {
| |
| display:grid;
| |
| padding-left:10%;
| |
| padding-right:10%;
| |
| align-content:center;
| |
| justify-content:space-around;
| |
| grid-template-columns:auto auto auto auto auto auto;
| |
| grid-template-columns: repeat(auto-fill, 16em);
| |
| }
| |
|
| |
|
| |
| /* Shops Paragraph */
| |
| .Shops p {
| |
| text-align:center;
| |
| line-height:3em;
| |
| font-weight:600;
| |
| padding-left:2em;
| |
| padding-right:2em;
| |
| color:#ffffff;
| |
| background-blend-mode:overlay;
| |
| }
| |
|
| |
| /* Shops Link */
| |
| .Shops a {
| |
| color:white!important;
| |
| }
| |
|
| |
| .Shops p a {
| |
| display:block;
| |
| border-top:3px solid transparent;
| |
| margin-top:-3px;
| |
| border-bottom:3px solid transparent;
| |
| margin-bottom:-3px;
| |
| border-left:28px solid transparent;
| |
| margin-left:-28px;
| |
| border-right:28px solid transparent;
| |
| margin-right:-28px;
| |
| }
| |
|
| |
| /* Shops Images */
| |
| .Shops p:nth-child(1) {
| |
| background-image:url("/images/1/17/War_Point_Shop.png");
| |
| background-size:cover;
| |
| background-position-y:45%;}
| |
| .Shops p:nth-child(2) {
| |
| background-image:url("/images/5/53/Gear_Shop.png");
| |
| background-size:cover;
| |
| background-position-y:44%;}
| |
| .Shops p:nth-child(3) {
| |
| background-image:url("/images/7/75/Parts_Shop.png");
| |
| background-size:cover;
| |
| background-position-y:62%;}
| |
| .Shops p:nth-child(4) {
| |
| background-image:url("/images/5/56/WeaponShop.png");
| |
| background-size:cover;
| |
| background-position-y:63%;}
| |
| .Shops p:nth-child(5) {
| |
| background-image:url("/images/9/9a/Card_Shop.png");
| |
| background-size:cover;
| |
| background-position-y:33%;}
| |
| .Shops p:nth-child(6) {
| |
| background-image:url("/images/d/dc/FFA_Shop.png");
| |
| background-size:cover;
| |
| background-position-y:45%;}
| |
| .Shops p:nth-child(7) {
| |
| background-image:url("/images/b/b6/Boss_Token_Shop.png");
| |
| background-size:cover;
| |
| background-position-y:35%;}
| |
| .Shops p:nth-child(8) {
| |
| background-image:url("/images/5/57/Gold_Coin_Shop.png");
| |
| background-size:cover;
| |
| background-position-y:25%;}
| |
| .Shops p:nth-child(9) {
| |
| background-image:url("/images/0/0b/Killmark_Shop.png");
| |
| background-size:cover;
| |
| background-position-y:34%;}
| |
| .Shops p:nth-child(10) {
| |
| background-image:url("/images/b/b9/Weapon_Contour_Shop.png");
| |
| background-size:cover;
| |
| background-position-y:46%;}
| |
| .Shops p:nth-child(11) {
| |
| background-image:url("/images/5/5c/Armor_Contour_Shop.png");
| |
| background-size:cover;
| |
| background-position-y:55%;}
| |
| .Shops p:nth-child(12) {
| |
| background-image:url("/images/e/e4/Custom_Cosmetics_Shop.png");
| |
| background-size:cover;
| |
| background-position-y:35%;}
| |
| .Shops p:nth-child(13) {
| |
| background-image:url("/images/b/b9/Weapon_Effect_Shop.png");
| |
| background-size:cover;
| |
| background-position-y:35%;}
| |
| .Shops p:nth-child(14) {
| |
| background-image:url("/images/e/e1/Aquarium.png");
| |
| background-size:cover;
| |
| background-position-y:75%;}
| |
| .Shops p:nth-child(15) {
| |
| background-image:url("/images/4/41/Infinity_Field_Vendor.png");
| |
| background-size:cover;
| |
| background-position-y:45%;}
| |
| .Shops p:nth-child(16) {
| |
| background-image:url("/images/4/47/Event_Shop.png");
| |
| background-size:cover;
| |
| background-position-y:45%;}
| |
| .Shops p:nth-child(17) {
| |
| background-image:url("/images/d/d2/Skill_Shop.png");
| |
| background-size:cover;
| |
| background-position-y:55%;}
| |
| .Shops p:nth-child(18) {
| |
| background-image:url("/images/1/11/CRP_Shop.png");
| |
| background-repeat: no-repeat;
| |
| background-size: 55%;
| |
| background-position: 7em;
| |
| }
| |
|
| |
| .Social{
| |
| display:flex;
| |
| flex-wrap:wrap;
| |
| justify-content:center;
| |
| }
| |
|
| |
| /* Social */
| |
| .Social p img{
| |
| width:2em;
| |
| padding-right:7px;
| |
| }
| |
|
| |
| /* Usefull, Discord */
| |
| .U_D-Box {
| |
| display:flex;
| |
| justify-content:center;
| |
| flex-direction:row;
| |
| flex-wrap:wrap;
| |
| }
| |
|
| |
| .U_D-Box .Useful{
| |
| padding-left:3em;
| |
| padding-right:3em;
| |
| text-align:center!important;
| |
| }
| |
|
| |
| .U_D-Box .Discord {
| |
| text-align:center;
| |
| }
| |
|
| |
| /* Padding on small pictures */
| |
| .MainLinks img, .Events img, .Other img, .YouMAL img{
| |
| padding-right:0.5em;
| |
| padding-right:0.5em;
| |
| }
| |
|
| |
| /* Title, main headers */
| |
| .Title, .Pedia span, .Shops.Title {
| |
| display:flex;
| |
| justify-content:center;
| |
| align-items:center;
| |
| }
| |
|
| |
| .Discord p {
| |
| border:2px solid #808080;
| |
| padding:3px 0 3px 0;
| |
| background-color:#445466; /* #f0f0f0 */
| |
| margin-right:5px;
| |
| margin-left:5px;
| |
| white-space:nowrap;
| |
| }
| |
|
| |
| /* Shadows */
| |
| .MainLinks p,
| |
| .G_E_O-Box .Events p,
| |
| .G_E_O-Box .Other p,
| |
| .YouMAL p,
| |
| .Social p,
| |
| .Shops p {
| |
| box-shadow:0px 0px 50px -25px black;
| |
| }
| |
|
| |
| .G_E_O-Box .Gears .ContainerMainPage {
| |
| box-shadow:0px 0px 50px -25px black;
| |
| }
| |
|
| |
| .U_D-Box .Discord p,
| |
| .U_D-Box .Usefull p
| |
| {
| |
| box-shadow:0px 0px 50px -14px black;
| |
| }
| |
|
| |
| /* Pciture sizes */
| |
| @media screen and (max-width: 850px) {
| |
| .Gears {transform:scale(0.95); transition: .2s ease-in-out;}}
| |
|
| |
| @media screen and (max-width: 800px) {
| |
| .Gears {transform:scale(0.90); transition: .2s ease-in-out; }}
| |
|
| |
| @media screen and (max-width: 750px) {
| |
| .Gears {transform:scale(0.85); transition: .2s ease-in-out; }}
| |
|
| |
| @media screen and (max-width: 700px) {
| |
| .Gears {transform:scale(0.80); transition: .2s ease-in-out; }}
| |
|
| |
| @media screen and (max-width: 650px) {
| |
| .Gears {transform:scale(0.75); transition: .2s ease-in-out; }}
| |
|
| |
| @media screen and (max-width: 600px) {
| |
| .Gears {transform:scale(0.70); transition: .2s ease-in-out; }}
| |
|
| |
| @media screen and (max-width: 550) {
| |
| .Gears {transform:scale(0.65); transition: .2s ease-in-out; }}
| |
|
| |
| @media screen and (max-width: 500) {
| |
| .Gears {transform:scale(0.60); transition: .2s ease-in-out; }}
| |
|
| |
| @media screen and (max-width: 450) {
| |
| .Gears {transform:scale(0.55); transition: .2s ease-in-out; }}
| |
|
| |
| @media screen and (max-width: 400) {
| |
| .Gears {transform:scale(0.50); transition: .2s ease-in-out; }}
| |
|
| |
| /* Fixing Links */
| |
| /* Events */
| |
| /* SP */
| |
| .Events p:nth-child(2) a:nth-child(2) {
| |
| padding-right:15px;
| |
| margin-right:-15px;
| |
| }
| |
|
| |
| /* MS */
| |
| .Events p:nth-child(3) a:nth-child(2) {
| |
| padding-right:11px;
| |
| margin-right:-11px;
| |
| }
| |
|
| |
| /* War */
| |
| .Events p:nth-child(4) a:nth-child(2) {
| |
| padding-right:52px;
| |
| margin-right:-52px;
| |
| }
| |
|
| |
| /* FFA */
| |
| .Events p:nth-child(5) a:nth-child(2) {
| |
| padding-right:43px;
| |
| margin-right:-43px;
| |
| }
| |
|
| |
| /* FFA */
| |
| .Events p:nth-child(6) a:nth-child(2) {
| |
| padding-right:8px;
| |
| margin-right:-8px;
| |
| }
| |
|
| |
| /* Oupost */
| |
| .Events p:nth-child(7) a:nth-child(2) {
| |
| padding-right:34px;
| |
| margin-right:-34px;
| |
| }
| |
|
| |
| /* Domination */
| |
| .Events p:nth-child(8) a:nth-child(2) {
| |
| padding-right:0;
| |
| margin-right:-7px;
| |
| }
| |
|
| |
| /* Space Ball */
| |
| .Events p:nth-child(9) a:nth-child(2) {
| |
| padding-right:53px;
| |
| margin-right:-53px;
| |
| }
| |
|
| |
|
| |
| /* Fixing Links */
| |
| /* Other */
| |
| /* Latest Game Patch */
| |
| .Other p:nth-child(2) a:nth-child(2) {
| |
| padding-right:63px;
| |
| margin-right:-63px;
| |
| }
| |
|
| |
| /* Fame Milestone Rewards */
| |
| .Other p:nth-child(3) a:nth-child(2) {
| |
| padding-right:23px;
| |
| margin-right:-23px;
| |
| }
| |
|
| |
| /* Fame Milestone Rewards */
| |
| .Other p:nth-child(4) a:nth-child(2) {
| |
| padding-right:95px;
| |
| margin-right:-95px;
| |
| }
| |
|
| |
| /* Rate Modifiers */
| |
| .Other p:nth-child(5) a:nth-child(2) {
| |
| padding-right:115px;
| |
| margin-right:-115px;
| |
| }
| |
|
| |
| /* Nation Transfer */
| |
| .Other p:nth-child(6) a:nth-child(2) {
| |
| padding-right:87px;
| |
| margin-right:-87px;
| |
| }
| |
|
| |
| /* Multi Factor Authentication */
| |
| .Other p:nth-child(7) a:nth-child(2) {
| |
| padding-right:0;
| |
| margin-right:-7px;
| |
| }
| |
|
| |
| /* Multi Factor Authentication */
| |
| .Other p:nth-child(8) a:nth-child(2) {
| |
| padding-right:131px;
| |
| margin-right:-131px;
| |
| }
| |
|
| |
| /* Common Error Messages */
| |
| .Other p:nth-child(9) a:nth-child(2) {
| |
| padding-right:22px;
| |
| margin-right:-22px;
| |
| }
| |
|
| |
| /* Media */
| |
| .Other p:nth-child(10) a:nth-child(2) {
| |
| padding-right:159px;
| |
| margin-right:-159px;
| |
| }
| |
|
| |
| /* Fixing Links */
| |
| /* Useful Links */
| |
| /* Official Website */
| |
| .Usefull p:nth-child(2) a span {
| |
| color:white!important;
| |
| padding-top:5px;
| |
| padding-bottom:6px;
| |
| padding-right:5px;
| |
| margin-right:-5px
| |
| }
| |
|
| |
| /* CR Store */
| |
| .Usefull p:nth-child(3) a span {
| |
| color:white!important;
| |
| padding-top:5px;
| |
| padding-bottom:7px;
| |
| padding-right:53px;
| |
| margin-right:-53px
| |
| }
| |
|
| |
| /* DrDelay's Tools */
| |
| .Usefull p:nth-child(4) a span {
| |
| color:white!important;
| |
| padding-top:5px;
| |
| padding-bottom:6px;
| |
| padding-right:10px;
| |
| margin-right:-10px
| |
| }
| |
|
| |
| /* Discord */
| |
| /* Discord Commands */
| |
| .Discord p:nth-child(2) a {
| |
| color:white!important;
| |
| padding-top:5px;
| |
| padding-bottom:7px;
| |
| padding-left:22px;
| |
| margin-left:-22px;
| |
| padding-right:22px;
| |
| margin-right:-22px
| |
| }
| |
|
| |
| /* Discord Linked account */
| |
| .Discord p:nth-child(3) a {
| |
| color:white!important;
| |
| padding-top:5px;
| |
| padding-bottom:7px;
| |
| padding-left:36px;
| |
| margin-left:-36px;
| |
| padding-right:36px;
| |
| margin-right:-36px;
| |
| }
| |
|
| |
| /* Discord Chat */
| |
| .Discord p:nth-child(4) a {
| |
| color:white!important;
| |
| padding-top:5px;
| |
| padding-bottom:6px;
| |
| padding-left:44px;
| |
| margin-left:-44px;
| |
| padding-right:44px;
| |
| margin-right:-44px;
| |
| }
| |
|
| |
| /* Discord Chat */
| |
| .Discord p:nth-child(5) a {
| |
| color:white!important;
| |
| padding-top:5px;
| |
| padding-bottom:6px;
| |
| padding-left:5px;
| |
| margin-left:0;
| |
| padding-right:5px;
| |
| margin-right:0;
| |
| }
| |
|
| |
| /* Borders Experimental */
| |
| /* Border Pedia Top
| |
| .PediaTable {
| |
| border-top: 1px solid white;
| |
| border-left: 1px solid white;
| |
| border-right: 1px solid white;
| |
| margin-left:20%;
| |
| margin-right:20%;
| |
| padding-left:1em;
| |
| padding-right:1em;
| |
| border-top-left-radius: 3em;
| |
| border-top-right-radius: 3em;
| |
| }
| |
|
| |
| /* Border Pedia Bottom
| |
| .MainPedia {
| |
| border-bottom: 1px solid white;
| |
| border-left: 1px solid white;
| |
| border-right: 1px solid white;
| |
| margin-left:25%;
| |
| margin-right:25%;
| |
| padding-left:5em;
| |
| padding-right:5em;
| |
| border-bottom-left-radius: 3em;
| |
| border-bottom-right-radius: 3em;
| |
| box-shadow: 0 30px 40px rgba(0,0,0,.1);
| |
| }
| |
|
| |
| /* Border You might also like Top
| |
| .YouMAL.Title {
| |
| border-top: 1px solid white;
| |
| border-left: 1px solid white;
| |
| border-right: 1px solid white;
| |
| margin-left:17%;
| |
| margin-right:17%;
| |
| padding-top:0.5em;
| |
| padding-bottom:0.5em;
| |
| border-top-left-radius: 3em;
| |
| border-top-right-radius: 3em;
| |
| }
| |
|
| |
| /* Border Shops Top
| |
| .Shops.Title {
| |
| border-top: 1px solid white;
| |
| border-left: 1px solid white;
| |
| border-right: 1px solid white;
| |
| margin-left:16%;
| |
| margin-right:16%;
| |
| padding-top:0.5em;
| |
| padding-bottom:0.5em;
| |
| border-top-left-radius: 3em;
| |
| border-top-right-radius: 3em;
| |
| }
| |
|
| |
| */
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| /* CSS placed here will affect registered users only */ | | /* CSS placed here will affect registered users only */ |
| /* Some useless for me stuff in edit box */ | | /* Some useless for me stuff in edit box */ |