diff --git a/css/global.css b/css/global.css new file mode 100644 index 0000000..248fcee --- /dev/null +++ b/css/global.css @@ -0,0 +1 @@ +#load_screen{background:rgba(40,40,40,1);position:fixed;top:0;width:100%;height:1600px;z-index:300;opacity:1}#load_screen>#loading>#note{color:rgba(150,150,150,.6);font-size:.9em}#load_screen>#loading{color:#fff;width:50%;height:240px;margin:300px auto;text-align:center;font-size:1.5em}.progress{background:#fafafa}.skip{background:rgba(150,150,150,.4);font-size:.8em;cursor:pointer;padding:5px 45px}.skip:after{font-family:FontAwesome;content:"\f105";position:relative;right:15px;opacity:0;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out}.skip:hover:after{opacity:1;right:0;padding-left:15px}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:rgba(100,100,100,.1);border-radius:10px}::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(230,230,230,.3)}@media only screen and (max-width:768px){#load_screen>#loading{width:97%}} \ No newline at end of file diff --git a/css/main.css b/css/main.css index 0db19e3..4e29219 100644 --- a/css/main.css +++ b/css/main.css @@ -1,304 +1 @@ -* { - margin: 0; - padding: 0; -} -body { - color: #fff; - font-family: 'Catamaran', sans-serif; - background: #222 url('../images/cover-1.png') no-repeat center fixed; - background-size: cover; -} -.brand-logo { - font-family: 'Catamaran', sans-serif; - margin-top: 5px; - margin-bottom: 5px; -} -.button-collapse { - margin-top: 5px; - margin-bottom: 10px; -} -.cover-1 { - font-size: 1.5em; - color: rgba(255, 255, 255, 0.4); - text-align: center; - height: 100vh; -} -.cover-1 h3, -.cover-1 a { - margin-top: 23%; -} -.button { - padding: 15px; - background: rgba(255, 255, 255, 0.1); - border-radius: 65px; - color: rgb(200, 200, 200); - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -ms-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - z-index: 100; -} -.button:hover { - background: rgba(200, 200, 200, 0.2); -} -.cover-2 { - background: url('../images/cover-2.png') center fixed; - background-size: cover; - text-align: center; - height: auto; - padding-bottom: 40px; -} -.rule { - z-index: 100; - display: none; - padding: 30px; -} -#rules-title { - font-size: 2.2em; - z-index: 100; - display: inline-block; - background: rgba(230, 230, 230, 0.1); - padding: 10px; - cursor: pointer; - user-select: none; - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -ms-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; -} -#rules-title:hover { - background: rgba(210, 210, 210, 0.2); -} -i.rules-icon { - position: relative; - float: right; - color: rgba(150, 150, 150, 0.3); - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -ms-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; -} -i.rules-icon:hover { - color: rgba(150, 150, 150, 1); -} -.cover-2 p, -.cover-2 h2 { - width: 75%; - margin: 0 auto; -} -.cover-2 p { - font-size: 1.2em; - height: auto; -} -.section-title { - font-size: 4em; - color: rgba(255, 255, 255, 0.9); - z-index: 100; -} -.cover-3 { - background: url('../images/cover-3.png') no-repeat fixed; - background-size: cover; -} -.cover-3 .section-title { - text-align: center; -} -.admins > ul > a { - display: inline-block; - padding: 10px; - margin: 5px; - background: rgba(0, 0, 0, 0.3); - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -ms-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - border-radius: 150px; - z-index: 800; -} -.admins > ul > a:hover { - background: rgba(100, 100, 100, 0.3); -} -.admins ul { - text-align: center; - z-index: 101; -} -.admins a li { - color: rgba(255, 255, 255, 0.5); - font-size: 1.2em; - z-index: 102; -} -.rank { - font-size: 2em; - text-align: center; - z-index: 103; -} -.cover-1, -.cover-2, -.cover-3 { - border-bottom: 1px solid rgba(255, 255, 255, 0.2); -} -.rest > li > a { - font-size: 1.5em; - color: rgba(255, 255, 255, 0.6); - text-align: center; - padding: 10px; - border-radius: 50px; - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -ms-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - z-index: 100; -} -.rest > li > a:hover { - background: rgba(255, 255, 255, 0.2); - color: rgb(255, 255, 255); -} -.rest > li { - margin-top: 50px; - -webkit-transition: all 0.5s ease-in-out; - -moz-transition: all 0.5s ease-in-out; - -ms-transition: all 0.5s ease-in-out; - -o-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; -} -.rest > li:hover { - transform: translateX(5px); -} -.useful a { - display: inline-block; - font-size: 1.2em; - color: rgba(255, 255, 255, 0.6); - text-align: center; - border: 2px solid rgba(255, 255, 255, 0.6); - padding: 10px; - margin-right: 10px; - border-radius: 50px; - width: 200px; - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -ms-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - margin-bottom: 10px; - z-index: 100; -} -.useful > a > li > i { - font-size: 2em; - margin-bottom: 10px; -} -.useful a:hover { - background: rgba(255, 255, 255, 0.2); - color: rgb(255, 255, 255); - transform: translateY(-5px); -} -#note { - text-align: center; - color: #ccc; - border-radius: 150px; - padding: 15px; - z-index: 1; -} -#note h5 { - margin-bottom: -20px; -} -#note a { - color: rgb(200, 200, 200); - font-weight: bold; -} -.nav-wrapper { - background: rgba(0, 0, 0, 0.3); -} -.cover-2 a { - font-size: 1.3em; - color: rgba(255, 255, 255, 0.3); -} -.head-icon { - width: 20px; - height: 20px; - float: left; - margin-right: 5px; - border-radius: 50%; -} -.modal { - background: rgba(0, 0, 0, 0.5); - color: #ccc; -} -.modal a { - color: rgb(200, 200, 200); -} -.modal ul { - display: inline-block; -} -.modal h4 { - margin-bottom: 38px; -} -.modal > .modal-footer { - background: rgba(50, 50, 50, 0.6); -} -::-webkit-scrollbar { - width: 12px; -} - -::-webkit-scrollbar-track { - background: rgba(100,100,100,0.1); - border-radius: 10px; -} - -::-webkit-scrollbar-thumb { - border-radius: 10px; - background: rgba(230,230,230,0.3); -} -.waves-effect.waves-brown .waves-ripple { - background-color: rgba(230,230,230, 0.3); -} - -#load_screen { - background: rgba(40,40,40,1); - position: fixed; - top: 0px; - width: 100%; - height: 1600px; - z-index: 10; - opacity: 1; -} -#load_screen > #loading { - color: #fff; - width: 50%; - height: 240px; - margin: 300px auto; - text-align: center; - font-size: 1.5em; -} -.progress { - background: rgb(250,250,250); -} -@media only screen and (max-width: 768px) { -.cover-2 p, -.cover-2 h2 { - width: 100%; -} -.online-part { - padding: 25% 0.7%; -} -.rule { - padding: 15px; -} -.admins > ul > a { - display: block; - border-radius: 0; -} -.head-icon { - width: 20px; - height: 20px; - margin-right: 0; - float: left; - border-radius: 50%; -} -} \ No newline at end of file +.brand-logo,body{font-family:Catamaran,sans-serif}#rules-title,.button{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;z-index:100}.admins ul,.cover-1,.cover-2,.cover-3 .section-title,.rank{text-align:center}*{margin:0;padding:0}body{color:#fff;background:url(../images/cover-1.png) center no-repeat fixed #222;background-size:cover}.brand-logo{margin-top:5px;margin-bottom:5px}.button-collapse{margin-top:5px;margin-bottom:10px}.cover-1{font-size:1.5em;color:rgba(255,255,255,.4);height:100vh}.cover-1 a,.cover-1 h3{margin-top:23%}.button{padding:15px;background:rgba(255,255,255,.1);border-radius:65px;color:#c8c8c8;transition:all .2s ease-in-out}.button:hover{background:rgba(200,200,200,.2)}.cover-2{background:url(../images/cover-2.png) center fixed;background-size:cover;height:auto;padding-bottom:40px}.rule{z-index:100;display:none;padding:30px}#rules-title,.admins>ul>a{padding:10px;display:inline-block}#rules-title{font-size:2.2em;background:rgba(230,230,230,.1);cursor:pointer;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;transition:all .2s ease-in-out}.admins>ul>a,i.rules-icon{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out}#rules-title:hover{background:rgba(210,210,210,.2)}i.rules-icon{position:relative;float:right;color:rgba(150,150,150,.3);transition:all .2s ease-in-out}i.rules-icon:hover{color:rgba(150,150,150,1)}.cover-2 h2,.cover-2 p{width:75%;margin:0 auto}.cover-2 p{font-size:1.2em;height:auto}.section-title{font-size:4em;color:rgba(255,255,255,.9);z-index:100}.cover-3{background:url(../images/cover-3.png) no-repeat fixed;background-size:cover}.admins>ul>a{margin:5px;background:rgba(0,0,0,.3);transition:all .2s ease-in-out;border-radius:150px;z-index:200}.admins>ul>a:hover{background:rgba(100,100,100,.3)}.admins ul{z-index:101}.admins a li{color:rgba(255,255,255,.5);font-size:1.2em;z-index:102}.rank{font-size:2em;z-index:103}.rest>li>a,.useful a{padding:10px;z-index:100;text-align:center}.cover-1,.cover-2,.cover-3{border-bottom:1px solid rgba(255,255,255,.2)}.rest>li>a{font-size:1.5em;color:rgba(255,255,255,.6);border-radius:50px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.rest>li>a:hover{background:rgba(255,255,255,.2);color:#fff}.rest>li{margin-top:50px;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}.rest>li:hover{transform:translateX(5px)}.useful a{display:inline-block;font-size:1.2em;color:rgba(255,255,255,.6);border:2px solid rgba(255,255,255,.6);margin-right:10px;border-radius:50px;width:200px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;margin-bottom:10px}.useful>a>li>i{font-size:2em;margin-bottom:10px}.useful a:hover{background:rgba(255,255,255,.2);color:#fff;transform:translateY(-5px)}#note{text-align:center;color:#ccc;border-radius:150px;padding:15px;z-index:1}#note h5{margin-bottom:-20px}#note a{color:#c8c8c8;font-weight:700}.nav-wrapper{background:rgba(0,0,0,.3)}.cover-2 a{font-size:1.3em;color:rgba(255,255,255,.3)}.head-icon{width:20px;height:20px;float:left;margin-right:5px;border-radius:50%}.modal{background:rgba(0,0,0,.5);color:#ccc}.modal a{color:#c8c8c8}.modal ul{display:inline-block}.modal h4{margin-bottom:38px}.modal>.modal-footer{background:rgba(50,50,50,.6)}.waves-effect.waves-brown .waves-ripple{background-color:rgba(230,230,230,.3)}@media only screen and (max-width:768px){.cover-2 h2,.cover-2 p{width:100%}.online-part{padding:25% .7%}.rule{padding:15px}.admins>ul>a{display:block;border-radius:0}.head-icon{width:20px;height:20px;margin-right:0;float:left;border-radius:50%}} \ No newline at end of file diff --git a/css/staff.css b/css/staff.css index 2a908c6..77c9bf4 100644 --- a/css/staff.css +++ b/css/staff.css @@ -1,75 +1 @@ -* { - margin: 0; - padding: 0; -} -body { - margin-bottom: 50px; - background: #222 url('../images/staff-bg.png') center fixed; - color: #ccc; -} -.nav-wrapper { - background: rgba(0, 0, 0, 0.2); -} -a { - color: rgb(200, 200, 200); -} -.admins { - width: 85%; - margin: 0 auto; - background: rgba(100, 100, 100, 0.1); - padding: 15px; - border-radius: 10px; - text-align: center; -} -.admins li { - display: inline-block; - padding: 10px; - background: rgba(100, 100, 100, 0.2); - margin: 5px; - border-radius: 50px; - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -ms-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; -} -.admins li:hover { - background: rgba(100,100,100,0.5); -} -h2 { - font-size: 1.5em; - font-family: 'Catamaran', sans-serif; -} -#note { - text-align: center; -} -#note h5 { - margin-bottom: -15px; -} -#note a { - color: rgb(200, 200, 200); - font-weight: bold; -} -.rank { - text-align: center; -} -.page-title { - text-align: center; - font-size: 3.8em; - font-weight: 300; -} -.brand-logo { - font-family: 'Catamaran', sans-serif; - font-size: 2em; - font-weight: 200; -} - -@media only screen and (max-width: 768px) { - .admins { - width: 95%; - } - .admins li { - display: block; - border-radius: 0; - } -} \ No newline at end of file +#note a,a{color:#c8c8c8}#note,.admins,.page-title,.rank{text-align:center}.brand-logo,h2{font-family:Catamaran,sans-serif}*{margin:0;padding:0}body{margin-bottom:50px;background:url(../images/staff-bg.png) center fixed #222;color:#ccc}.nav-wrapper{background:rgba(0,0,0,.2)}.admins{width:85%;margin:0 auto;background:rgba(100,100,100,.1);padding:15px;border-radius:10px}.admins li{display:inline-block;padding:10px;background:rgba(100,100,100,.2);margin:5px;border-radius:50px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.admins li:hover{background:rgba(100,100,100,.5)}h2{font-size:1.5em}#note h5{margin-bottom:-15px}#note a{font-weight:700}.page-title{font-size:3.8em;font-weight:300}.brand-logo{font-size:2em;font-weight:200}@media only screen and (max-width:768px){.admins{width:95%}.admins li{display:block;border-radius:0}} \ No newline at end of file diff --git a/index.html b/index.html index 7c13912..1b5213a 100644 --- a/index.html +++ b/index.html @@ -1,243 +1,214 @@ - -
- - - -