mirror of
https://github.com/TotalFreedomMC/Website.git
synced 2024-12-22 16:25:12 +00:00
Attempt to fix the modal-msg responsibility
This commit is contained in:
aggelosQQ
parent
6eeb4f6b61
commit
4b23a8930d
5 changed files with 164 additions and 424 deletions
367
css/main.css
367
css/main.css
|
|
@ -1,348 +1,125 @@
|
||||||
* {
|
* { margin: 0; padding: 0; }
|
||||||
margin: 0;
|
|
||||||
padding: 0; }
|
|
||||||
|
|
||||||
body {
|
body { font-family: 'Raleway', sans-serif; font-weight: 300; color: #fff; background: #222 url(../images/cover-1.png) center no-repeat fixed; background-size: cover; }
|
||||||
font-family: 'Raleway', sans-serif;
|
|
||||||
font-weight: 300;
|
|
||||||
color: #fff;
|
|
||||||
background: #222 url(../images/cover-1.png) center no-repeat fixed;
|
|
||||||
background-size: cover; }
|
|
||||||
|
|
||||||
#rules-title,
|
#rules-title, .button { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; z-index: 100; padding: 10px 55px; background: rgba(255, 255, 255, 0.1); color: #c8c8c8; }
|
||||||
.button {
|
|
||||||
-webkit-transition: all 0.2s ease;
|
|
||||||
-moz-transition: all 0.2s ease;
|
|
||||||
-ms-transition: all 0.2s ease;
|
|
||||||
-o-transition: all 0.2s ease;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
z-index: 100;
|
|
||||||
padding: 10px 55px;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
color: #c8c8c8; }
|
|
||||||
#rules-title:hover,
|
|
||||||
.button:hover {
|
|
||||||
background: rgba(200, 200, 200, 0.2); }
|
|
||||||
|
|
||||||
#online {
|
#rules-title:hover, .button:hover { background: rgba(200, 200, 200, 0.2); }
|
||||||
font-weight: 200; }
|
|
||||||
|
|
||||||
#rules-title {
|
#online { font-weight: 200; }
|
||||||
border-radius: 0px; }
|
|
||||||
|
|
||||||
.admins ul,
|
#rules-title { border-radius: 0px; }
|
||||||
.cover-1,
|
|
||||||
.cover-2,
|
|
||||||
.cover-3 .section-title,
|
|
||||||
.rank {
|
|
||||||
text-align: center;
|
|
||||||
position: relative; }
|
|
||||||
|
|
||||||
.brand-logo {
|
.admins ul, .cover-1, .cover-2, .cover-3 .section-title, .rank { text-align: center; position: relative; }
|
||||||
margin-top: 5px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
font-weight: 100; }
|
|
||||||
|
|
||||||
.button-collapse {
|
.brand-logo { margin-top: 5px; margin-bottom: 5px; font-weight: 100; }
|
||||||
margin-top: 5px;
|
|
||||||
margin-bottom: 10px; }
|
|
||||||
|
|
||||||
.cover-1 {
|
.button-collapse { margin-top: 5px; margin-bottom: 10px; }
|
||||||
font-size: 1.5em;
|
|
||||||
color: rgba(255, 255, 255, 0.4);
|
|
||||||
height: 100vh; }
|
|
||||||
|
|
||||||
.cover-1 a,
|
.cover-1 { font-size: 1.5em; color: rgba(255, 255, 255, 0.4); height: 100vh; }
|
||||||
.cover-1 h3 {
|
|
||||||
margin-top: 23%; }
|
|
||||||
|
|
||||||
.cover-2 {
|
.cover-1 a, .cover-1 h3 { margin-top: 23%; }
|
||||||
background: url(../images/cover-2.png) center fixed;
|
|
||||||
background-size: cover;
|
|
||||||
height: auto;
|
|
||||||
padding-bottom: 40px; }
|
|
||||||
|
|
||||||
.rule {
|
.cover-2 { background: url(../images/cover-2.png) center fixed; background-size: cover; height: auto; padding-bottom: 40px; }
|
||||||
z-index: 100;
|
|
||||||
display: none;
|
|
||||||
padding: 30px; }
|
|
||||||
|
|
||||||
#rules-title,
|
.rule { z-index: 100; display: none; padding: 30px; }
|
||||||
.admins > ul > a {
|
|
||||||
padding: 10px;
|
|
||||||
display: inline-block; }
|
|
||||||
|
|
||||||
#rules-title {
|
#rules-title, .admins > ul > a { padding: 10px; display: inline-block; }
|
||||||
font-size: 1.9em;
|
|
||||||
background: rgba(180, 180, 180, 0.1);
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
-webkit-transition: all 0.2s ease;
|
|
||||||
-moz-transition: all 0.2s ease;
|
|
||||||
-ms-transition: all 0.2s ease;
|
|
||||||
-o-transition: all 0.2s ease;
|
|
||||||
transition: all 0.2s ease; }
|
|
||||||
|
|
||||||
#rules-title:hover {
|
#rules-title { font-size: 1.9em; background: rgba(180, 180, 180, 0.1); cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }
|
||||||
background: rgba(150, 150, 150, 0.2);
|
|
||||||
-webkit-transform: scale(1.03, 1.03);
|
|
||||||
-ms-transform: scale(1.03, 1.03);
|
|
||||||
transform: scale(1.03, 1.03); }
|
|
||||||
|
|
||||||
.admins > ul > a,
|
#rules-title:hover { background: rgba(150, 150, 150, 0.2); -webkit-transform: scale(1.03, 1.03); -ms-transform: scale(1.03, 1.03); transform: scale(1.03, 1.03); }
|
||||||
i.rules-icon {
|
|
||||||
-webkit-transition: all 0.2s ease;
|
|
||||||
-moz-transition: all 0.2s ease;
|
|
||||||
-ms-transition: all 0.2s ease;
|
|
||||||
-o-transition: all 0.2s ease;
|
|
||||||
transition: all 0.2s ease; }
|
|
||||||
|
|
||||||
i.rules-icon {
|
.admins > ul > a, i.rules-icon { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }
|
||||||
position: relative;
|
|
||||||
float: right;
|
|
||||||
color: rgba(150, 150, 150, 0.3);
|
|
||||||
-webkit-transition: all 0.2s ease;
|
|
||||||
-moz-transition: all 0.2s ease;
|
|
||||||
-ms-transition: all 0.2s ease;
|
|
||||||
-o-transition: all 0.2s ease;
|
|
||||||
transition: all 0.2s ease; }
|
|
||||||
i.rules-icon:hover {
|
|
||||||
color: #969696; }
|
|
||||||
|
|
||||||
.cover-2 h2,
|
i.rules-icon { position: relative; float: right; color: rgba(150, 150, 150, 0.3); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }
|
||||||
.cover-2 p {
|
|
||||||
width: 75%;
|
|
||||||
font-weight: 300;
|
|
||||||
margin: 0 auto; }
|
|
||||||
|
|
||||||
.cover-2 p {
|
i.rules-icon:hover { color: #969696; }
|
||||||
font-size: 1.2em;
|
|
||||||
height: auto; }
|
|
||||||
|
|
||||||
.section-title {
|
.cover-2 h2, .cover-2 p { width: 75%; font-weight: 300; margin: 0 auto; }
|
||||||
font-size: 2.5em;
|
|
||||||
color: white;
|
|
||||||
z-index: 100;
|
|
||||||
font-weight: 100; }
|
|
||||||
|
|
||||||
.cover-3 {
|
.cover-2 p { font-size: 1.2em; height: auto; }
|
||||||
background: url(../images/cover-3.png) no-repeat fixed;
|
|
||||||
background-size: cover; }
|
|
||||||
|
|
||||||
.admins > ul > a {
|
.section-title { font-size: 2.5em; color: white; z-index: 100; font-weight: 100; }
|
||||||
margin: 5px;
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
-webkit-transition: all 0.2s ease;
|
|
||||||
-moz-transition: all 0.2s ease;
|
|
||||||
-ms-transition: all 0.2s ease;
|
|
||||||
-o-transition: all 0.2s ease;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
border-radius: 5px;
|
|
||||||
z-index: 200;
|
|
||||||
font-size: 0.9em; }
|
|
||||||
|
|
||||||
.admins > ul > a:hover {
|
.cover-3 { background: url(../images/cover-3.png) no-repeat fixed; background-size: cover; }
|
||||||
background: rgba(70, 70, 70, 0.15);
|
|
||||||
-webkit-transform: translateY(-3px);
|
|
||||||
-ms-transform: translateY(-3px);
|
|
||||||
transform: translateY(-3px); }
|
|
||||||
|
|
||||||
.admins ul {
|
.admins > ul > a { margin: 5px; background: rgba(0, 0, 0, 0.3); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; border-radius: 5px; z-index: 200; font-size: 0.9em; }
|
||||||
z-index: 101; }
|
|
||||||
|
|
||||||
.admins a li {
|
.admins > ul > a:hover { background: rgba(70, 70, 70, 0.15); -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); }
|
||||||
color: rgba(255, 255, 255, 0.5);
|
|
||||||
font-size: 1.1em;
|
|
||||||
z-index: 102;
|
|
||||||
font-weight: 300; }
|
|
||||||
|
|
||||||
.rank {
|
.admins ul { z-index: 101; }
|
||||||
font-size: 1.6em;
|
|
||||||
z-index: 103;
|
|
||||||
font-weight: 200; }
|
|
||||||
|
|
||||||
.rest > li > a,
|
.admins a li { color: rgba(255, 255, 255, 0.5); font-size: 1.1em; z-index: 102; font-weight: 300; }
|
||||||
.useful a {
|
|
||||||
padding: 10px;
|
|
||||||
z-index: 100;
|
|
||||||
text-align: center; }
|
|
||||||
|
|
||||||
.cover-1,
|
.rank { font-size: 1.6em; z-index: 103; font-weight: 200; }
|
||||||
.cover-2,
|
|
||||||
.cover-3 {
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
|
|
||||||
|
|
||||||
.rest > li > a {
|
.rest > li > a, .useful a { padding: 10px; z-index: 100; text-align: center; }
|
||||||
font-size: 1.35em;
|
|
||||||
font-weight: 300;
|
|
||||||
color: rgba(255, 255, 255, 0.6);
|
|
||||||
border-radius: 10px;
|
|
||||||
-webkit-transition: all 0.2s ease;
|
|
||||||
-moz-transition: all 0.2s ease;
|
|
||||||
-ms-transition: all 0.2s ease;
|
|
||||||
-o-transition: all 0.2s ease;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
display: inline-block; }
|
|
||||||
|
|
||||||
.rest > li > a:hover {
|
.cover-1, .cover-2, .cover-3 { border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
|
||||||
background: rgba(100, 100, 100, 0.2);
|
|
||||||
color: #fff; }
|
|
||||||
|
|
||||||
.rest > li {
|
.rest > li > a { font-size: 1.35em; font-weight: 300; color: rgba(255, 255, 255, 0.6); border-radius: 10px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; display: inline-block; }
|
||||||
margin-top: 50px;
|
|
||||||
display: inline-block;
|
|
||||||
-webkit-transition: all 0.2s ease;
|
|
||||||
-moz-transition: all 0.2s ease;
|
|
||||||
-ms-transition: all 0.2s ease;
|
|
||||||
-o-transition: all 0.2s ease;
|
|
||||||
transition: all 0.2s ease; }
|
|
||||||
|
|
||||||
.rest > li:hover {
|
.rest > li > a:hover { background: rgba(100, 100, 100, 0.2); color: #fff; }
|
||||||
-webkit-transform: translateX(5px);
|
|
||||||
-ms-transform: translateX(5px);
|
|
||||||
transform: translateX(5px); }
|
|
||||||
|
|
||||||
.useful a {
|
.rest > li { margin-top: 50px; display: inline-block; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }
|
||||||
display: inline-block;
|
|
||||||
font-size: 1.05em;
|
|
||||||
color: rgba(255, 255, 255, 0.6);
|
|
||||||
border: 2px solid rgba(200, 200, 200, 0.3);
|
|
||||||
margin-right: 10px;
|
|
||||||
border-radius: 50px;
|
|
||||||
width: 200px;
|
|
||||||
-webkit-transition: all 0.2s ease;
|
|
||||||
-moz-transition: all 0.2s ease;
|
|
||||||
-ms-transition: all 0.2s ease;
|
|
||||||
-o-transition: all 0.2s ease;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
margin-bottom: 10px; }
|
|
||||||
|
|
||||||
.useful h3 {
|
.rest > li:hover { -webkit-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); }
|
||||||
font-weight: 100; }
|
|
||||||
|
|
||||||
.useful > a > li > i {
|
.useful a { display: inline-block; font-size: 1.05em; color: rgba(255, 255, 255, 0.6); border: 2px solid rgba(200, 200, 200, 0.3); margin-right: 10px; border-radius: 50px; width: 200px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; margin-bottom: 10px; }
|
||||||
font-size: 2em;
|
|
||||||
margin-bottom: 10px; }
|
|
||||||
|
|
||||||
.useful a:hover {
|
.useful a:hover { background: rgba(100, 100, 100, 0.1); color: #fff; -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); }
|
||||||
background: rgba(100, 100, 100, 0.1);
|
|
||||||
color: #fff;
|
|
||||||
-webkit-transform: translateY(-5px);
|
|
||||||
-ms-transform: translateY(-5px);
|
|
||||||
transform: translateY(-5px); }
|
|
||||||
|
|
||||||
#note {
|
.useful h3 { font-weight: 100; }
|
||||||
text-align: center;
|
|
||||||
color: #ccc;
|
|
||||||
border-radius: 150px;
|
|
||||||
padding: 15px;
|
|
||||||
z-index: 1; }
|
|
||||||
|
|
||||||
#note h5 {
|
.useful a > li > i { font-size: 2em; margin-bottom: 10px; }
|
||||||
margin-bottom: -20px; }
|
|
||||||
|
|
||||||
#note a {
|
#note { text-align: center; color: #ccc; border-radius: 150px; padding: 15px; z-index: 1; }
|
||||||
color: #c8c8c8;
|
|
||||||
font-weight: 700; }
|
|
||||||
|
|
||||||
.nav-wrapper {
|
#note h5 { margin-bottom: -20px; }
|
||||||
margin: -8px;
|
|
||||||
background: rgba(20, 20, 20, 0.5); }
|
|
||||||
.nav-wrapper li > a {
|
|
||||||
font-weight: 200;
|
|
||||||
font-size: .9em; }
|
|
||||||
|
|
||||||
.cover-2 a {
|
#note a { color: #c8c8c8; font-weight: 700; }
|
||||||
font-size: 1.17em;
|
|
||||||
color: rgba(255, 255, 255, 0.3); }
|
|
||||||
|
|
||||||
.head-icon {
|
.nav-wrapper { margin: -8px; background: rgba(20, 20, 20, 0.5); }
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
float: left;
|
|
||||||
margin-right: 5px;
|
|
||||||
border-radius: 2px; }
|
|
||||||
|
|
||||||
small {
|
.nav-wrapper li > a { font-weight: 200; font-size: .9em; }
|
||||||
font-size: 0.9em; }
|
|
||||||
|
|
||||||
.modal {
|
.cover-2 a { font-size: 1.17em; color: rgba(255, 255, 255, 0.3); }
|
||||||
background: rgba(10, 10, 10, 0.8);
|
|
||||||
color: #ccc; }
|
|
||||||
|
|
||||||
.modal a {
|
.head-icon { width: 20px; height: 20px; float: left; margin-right: 5px; border-radius: 2px; }
|
||||||
color: #c8c8c8; }
|
|
||||||
|
|
||||||
.modal ul {
|
small { font-size: 0.9em; }
|
||||||
display: inline-block; }
|
|
||||||
|
|
||||||
.modal li {
|
.modal { background: rgba(10, 10, 10, 0.8); color: #ccc; }
|
||||||
display: inline-block;
|
|
||||||
padding: 10px;
|
|
||||||
margin: 4px;
|
|
||||||
background: rgba(100, 100, 100, 0.2);
|
|
||||||
-webkit-transition: all 0.2s ease;
|
|
||||||
-moz-transition: all 0.2s ease;
|
|
||||||
-ms-transition: all 0.2s ease;
|
|
||||||
-o-transition: all 0.2s ease;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 0.8em; }
|
|
||||||
|
|
||||||
.modal li:hover {
|
.modal a { color: #c8c8c8; }
|
||||||
background: rgba(150, 150, 150, 0.3); }
|
|
||||||
|
|
||||||
.modal h4 {
|
.modal ul { display: inline-block; }
|
||||||
margin-bottom: 38px;
|
|
||||||
font-size: 1.2em;
|
|
||||||
font-weight: 400; }
|
|
||||||
|
|
||||||
.modal-msg {
|
.modal ul li { display: inline-block; padding: 10px; margin: 4px; background: rgba(100, 100, 100, 0.2); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; border-radius: 5px; font-size: 0.8em; }
|
||||||
background: rgba(34, 34, 34, 0.3);
|
|
||||||
display: inline-block;
|
|
||||||
margin: 100px auto;
|
|
||||||
padding: 20px 40px; }
|
|
||||||
.modal-msg h5 {
|
|
||||||
font-weight: 100;
|
|
||||||
font-size: 0.85em;
|
|
||||||
border-bottom: 3px solid rgba(204, 204, 204, 0.3);
|
|
||||||
padding-bottom: 20px; }
|
|
||||||
.modal-msg span {
|
|
||||||
font-size: 0.9em;
|
|
||||||
font-weight: 200; }
|
|
||||||
|
|
||||||
.modal > .modal-footer {
|
.modal ul li:hover { background: rgba(150, 150, 150, 0.3); }
|
||||||
background: rgba(50, 50, 50, 0.3); }
|
|
||||||
.modal > .modal-footer .modal-close {
|
|
||||||
font-size: .9em;
|
|
||||||
text-transform: none; }
|
|
||||||
|
|
||||||
.waves-effect.waves-brown .waves-ripple {
|
.modal h4 { margin-bottom: 38px; font-size: 1.2em; font-weight: 200; }
|
||||||
background-color: rgba(230, 230, 230, 0.3); }
|
|
||||||
|
|
||||||
.typed-cursor {
|
.modal-msg { background: rgba(34, 34, 34, 0.3); display: inline-block; margin: 100px auto; padding: 20px 40px; }
|
||||||
display: none; }
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
.modal-msg h5 { font-weight: 100; font-size: 0.85em; border-bottom: 3px solid rgba(204, 204, 204, 0.3); padding-bottom: 20px; }
|
||||||
.cover-2 h2,
|
|
||||||
.cover-2 p {
|
.modal-msg span { font-size: 0.9em; font-weight: 200; }
|
||||||
width: 100%; }
|
|
||||||
.online-part {
|
.modal > .modal-footer { background: rgba(50, 50, 50, 0.3); }
|
||||||
padding: 25% .7%; }
|
|
||||||
.rule {
|
.modal > .modal-footer .modal-close { font-size: .9em; text-transform: none; }
|
||||||
padding: 15px; }
|
|
||||||
.admins > ul > a {
|
.waves-effect.waves-brown .waves-ripple { background-color: rgba(230, 230, 230, 0.3); }
|
||||||
display: block;
|
|
||||||
border-radius: 0; }
|
.typed-cursor { display: none; }
|
||||||
.head-icon {
|
|
||||||
width: 20px;
|
@media only screen and (max-width: 768px) { .cover-2 h2, .cover-2 p { width: 100%; }
|
||||||
height: 20px;
|
.online-part { padding: 25% .7%; }
|
||||||
margin-right: 0;
|
.rule { padding: 15px; }
|
||||||
float: left;
|
.admins > ul > a { display: block; border-radius: 0; }
|
||||||
border-radius: 50%; }
|
.head-icon { width: 20px; height: 20px; margin-right: 0; float: left; border-radius: 50%; }
|
||||||
.modal li {
|
.modal li { display: block; width: 100%; padding: 5px 70px; }
|
||||||
display: block;
|
.modal-msg { margin: 25px 0; } }
|
||||||
width: 95%; } }
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
{
|
|
||||||
"version": 3,
|
|
||||||
"mappings": "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",
|
|
||||||
"sources": ["../scss/main.scss","../scss/_mixins.scss"],
|
|
||||||
"names": [],
|
|
||||||
"file": "main.css"
|
|
||||||
}
|
|
||||||
|
|
@ -1,72 +1,32 @@
|
||||||
#note a,
|
#note a, a { color: #c8c8c8; }
|
||||||
a {
|
|
||||||
color: #c8c8c8; }
|
|
||||||
|
|
||||||
#note,
|
#note, .admins, .page-title, .rank { text-align: center; }
|
||||||
.admins,
|
|
||||||
.page-title,
|
|
||||||
.rank {
|
|
||||||
text-align: center; }
|
|
||||||
|
|
||||||
.brand-logo,
|
.brand-logo, h2 { font-family: 'Raleway', sans-serif; }
|
||||||
h2 {
|
|
||||||
font-family: 'Raleway', sans-serif; }
|
|
||||||
|
|
||||||
* {
|
* { margin: 0; padding: 0; }
|
||||||
margin: 0;
|
|
||||||
padding: 0; }
|
|
||||||
|
|
||||||
body {
|
body { margin-bottom: 50px; background: url(../images/staff-bg.png) center fixed #222; color: #ccc; }
|
||||||
margin-bottom: 50px;
|
|
||||||
background: url(../images/staff-bg.png) center fixed #222;
|
|
||||||
color: #ccc; }
|
|
||||||
|
|
||||||
.nav-wrapper {
|
.nav-wrapper { background: rgba(0, 0, 0, 0.2); }
|
||||||
background: rgba(0, 0, 0, 0.2); }
|
|
||||||
|
|
||||||
.admins {
|
.admins { width: 85%; margin: 0 auto; background: rgba(100, 100, 100, 0.1); padding: 15px; border-radius: 10px; }
|
||||||
width: 85%;
|
|
||||||
margin: 0 auto;
|
|
||||||
background: rgba(100, 100, 100, 0.1);
|
|
||||||
padding: 15px;
|
|
||||||
border-radius: 10px; }
|
|
||||||
.admins li {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 10px;
|
|
||||||
background: rgba(100, 100, 100, 0.2);
|
|
||||||
margin: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
-webkit-transition: all 0.13s ease-in-out;
|
|
||||||
-moz-transition: all 0.13s ease-in-out;
|
|
||||||
-ms-transition: all 0.13s ease-in-out;
|
|
||||||
-o-transition: all 0.13s ease-in-out;
|
|
||||||
transition: all 0.13s ease-in-out; }
|
|
||||||
.admins li:hover {
|
|
||||||
background: rgba(200, 200, 200, 0.2); }
|
|
||||||
|
|
||||||
h2 {
|
.admins li { display: inline-block; padding: 10px; background: rgba(100, 100, 100, 0.2); margin: 5px; border-radius: 5px; -webkit-transition: all 0.13s ease-in-out; -moz-transition: all 0.13s ease-in-out; -ms-transition: all 0.13s ease-in-out; -o-transition: all 0.13s ease-in-out; transition: all 0.13s ease-in-out; }
|
||||||
font-size: 1.5em; }
|
|
||||||
|
|
||||||
#note h5 {
|
.admins li:hover { background: rgba(200, 200, 200, 0.2); }
|
||||||
margin-bottom: -15px; }
|
|
||||||
|
|
||||||
#note a {
|
h2 { font-size: 1.5em; }
|
||||||
font-weight: 700; }
|
|
||||||
|
|
||||||
.page-title {
|
#note h5 { margin-bottom: -15px; }
|
||||||
font-size: 3.8em;
|
|
||||||
font-weight: 300; }
|
|
||||||
|
|
||||||
.brand-logo {
|
#note a { font-weight: 700; }
|
||||||
font-size: 2em;
|
|
||||||
font-weight: 200; }
|
|
||||||
|
|
||||||
.typed-cursor {
|
.page-title { font-size: 3.8em; font-weight: 300; }
|
||||||
display: none; }
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
.brand-logo { font-size: 2em; font-weight: 200; }
|
||||||
.admins {
|
|
||||||
width: 95%; }
|
.typed-cursor { display: none; }
|
||||||
.admins li {
|
|
||||||
display: block;
|
@media only screen and (max-width: 768px) { .admins { width: 95%; }
|
||||||
border-radius: 0; } }
|
.admins li { display: block; border-radius: 0; } }
|
||||||
|
|
|
||||||
|
|
@ -48,7 +48,7 @@
|
||||||
<div id="onlineplayers" class="modal modal-fixed-footer">
|
<div id="onlineplayers" class="modal modal-fixed-footer">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<h4 id="players-online">
|
<h4 id="players-online">
|
||||||
</h5>
|
</h4>
|
||||||
<ul id="players"></ul>
|
<ul id="players"></ul>
|
||||||
|
|
||||||
<div class="modal-msg">
|
<div class="modal-msg">
|
||||||
|
|
|
||||||
134
scss/main.scss
134
scss/main.scss
|
|
@ -160,56 +160,62 @@ i.rules-icon {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
@include transition(all .2s ease);
|
@include transition(all .2s ease);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
&:hover {
|
||||||
.rest>li>a:hover {
|
background: rgba(100, 100, 100, .2);
|
||||||
background: rgba(100, 100, 100, .2);
|
color: #fff
|
||||||
color: #fff
|
}
|
||||||
}
|
}
|
||||||
.rest>li {
|
.rest>li {
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@include transition(all .2s ease);
|
@include transition(all .2s ease);
|
||||||
|
&:hover {
|
||||||
|
transform: translateX(5px)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.rest>li:hover {
|
|
||||||
transform: translateX(5px)
|
.useful {
|
||||||
}
|
a {
|
||||||
.useful a {
|
display: inline-block;
|
||||||
display: inline-block;
|
font-size: 1.05em;
|
||||||
font-size: 1.05em;
|
color: rgba(255, 255, 255, .6);
|
||||||
color: rgba(255, 255, 255, .6);
|
border: 2px solid rgba(200, 200, 200, .3);
|
||||||
border: 2px solid rgba(200, 200, 200, .3);
|
margin-right: 10px;
|
||||||
margin-right: 10px;
|
border-radius: 50px;
|
||||||
border-radius: 50px;
|
width: 200px;
|
||||||
width: 200px;
|
@include transition(all .2s ease);
|
||||||
@include transition(all .2s ease);
|
margin-bottom: 10px;
|
||||||
margin-bottom: 10px
|
|
||||||
}
|
&:hover {
|
||||||
.useful h3 {
|
background: rgba(100, 100, 100, .1);
|
||||||
font-weight: 100;
|
color: #fff;
|
||||||
}
|
transform: translateY(-5px)
|
||||||
.useful>a>li>i {
|
}
|
||||||
font-size: 2em;
|
}
|
||||||
margin-bottom: 10px
|
|
||||||
}
|
h3 {
|
||||||
.useful a:hover {
|
font-weight: 100;
|
||||||
background: rgba(100, 100, 100, .1);
|
}
|
||||||
color: #fff;
|
a>li>i {
|
||||||
transform: translateY(-5px)
|
font-size: 2em;
|
||||||
|
margin-bottom: 10px
|
||||||
|
}
|
||||||
}
|
}
|
||||||
#note {
|
#note {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
border-radius: 150px;
|
border-radius: 150px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
z-index: 1
|
z-index: 1;
|
||||||
}
|
h5 {
|
||||||
#note h5 {
|
margin-bottom: -20px
|
||||||
margin-bottom: -20px
|
}
|
||||||
}
|
a {
|
||||||
#note a {
|
color: #c8c8c8;
|
||||||
color: #c8c8c8;
|
font-weight: 700
|
||||||
font-weight: 700
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-wrapper {
|
.nav-wrapper {
|
||||||
margin: -8px;
|
margin: -8px;
|
||||||
background: rgba(20, 20, 20, .5);
|
background: rgba(20, 20, 20, .5);
|
||||||
|
|
@ -235,30 +241,30 @@ small {
|
||||||
}
|
}
|
||||||
.modal {
|
.modal {
|
||||||
background: rgba(10, 10, 10, .8);
|
background: rgba(10, 10, 10, .8);
|
||||||
color: #ccc
|
color: #ccc;
|
||||||
}
|
a {
|
||||||
.modal a {
|
color: #c8c8c8
|
||||||
color: #c8c8c8
|
}
|
||||||
}
|
ul {
|
||||||
.modal ul {
|
display: inline-block;
|
||||||
display: inline-block;
|
li {
|
||||||
}
|
display: inline-block;
|
||||||
.modal li {
|
padding:10px;
|
||||||
display: inline-block;
|
margin:4px;
|
||||||
padding:10px;
|
background: rgba(100, 100, 100, .2);
|
||||||
margin:4px;
|
@include transition(all .2s ease);
|
||||||
background: rgba(100, 100, 100, .2);
|
border-radius: 5px;
|
||||||
@include transition(all .2s ease);
|
font-size: 0.8em;
|
||||||
border-radius: 5px;
|
&:hover {
|
||||||
font-size: 0.8em;
|
background: rgba(150, 150, 150, .3);
|
||||||
}
|
}
|
||||||
.modal li:hover {
|
}
|
||||||
background: rgba(150, 150, 150, .3);
|
}
|
||||||
}
|
h4 {
|
||||||
.modal h4 {
|
margin-bottom: 38px;
|
||||||
margin-bottom: 38px;
|
font-size: 1.2em;
|
||||||
font-size: 1.2em;
|
font-weight: 200;
|
||||||
font-weight: 400;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-msg {
|
.modal-msg {
|
||||||
|
|
@ -322,6 +328,10 @@ small {
|
||||||
}
|
}
|
||||||
.modal li {
|
.modal li {
|
||||||
display: block;
|
display: block;
|
||||||
width:95%;
|
width:100%;
|
||||||
|
padding: 5px 70px;
|
||||||
|
}
|
||||||
|
.modal-msg {
|
||||||
|
margin: 25px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue