W miejscu w którym jest fontello i napis, button nie działa. Mam ustawionego hovera na przycisk, więc kiedy najadę na przycisk to zmienia kolor z szarego na niebieski, ale kiedy najadę na napis albo fontello nie zmienia koloru.
body {
background-color: #2e2e2e;
color: #cecece;
}
/*START OF MAIN--------------------------------------------------------------------------------------------> */
#container {
width: 1700px;
height: 900px;
margin-left: auto;
margin-right: auto;
}
#main {
width: 1200px;
height: 580px;
top: 50%;
left: 50%;
transform: translate(20%, 40%);
}
#left {
float: left;
width: 380px;
min-height: 570px;
background-color: #1d1d1d;
border: 1px solid #0a0a0a;
border-radius: 4px;
box-shadow: 0px 0px 7px #0a0a0a;
margin-right: 9px;
margin-left: 9px;
}
#mid {
float: left;
width: 370px;
min-height: 570px;
background-color: #1d1d1d;
border: 1px solid #0a0a0a;
border-radius: 4px;
box-shadow: 0px 0px 7px #0a0a0a;
margin-right: 9px;
margin-left: 9px;
}
#right {
float: left;
width: 380px;
height: 570px;
text-decoration: none;
}
#profile {
float: left;
width: 380px;
min-height: 210px;
background-color: #1d1d1d;
border: 1px solid #0a0a0a;
border-radius: 4px;
box-shadow: 0px 0px 7px #0a0a0a;
margin-right: 9px;
margin-left: 9px;
margin-top: 9px;
text-decoration: none;
}
#settings {
float: left;
width: 380px;
min-height: 340px;
background-color: #1d1d1d;
border: 1px solid #0a0a0a;
border-radius: 4px;
box-shadow: 0px 0px 7px #0a0a0a;
margin-right: 9px;
margin-left: 9px;
margin-bottom: 9px;
font-family: 'Josefin Sans', sans-serif;
}
input[name="Skin-URL"] {
background-color: #272727;
color: #cecece;
outline: 1px;
border: 1px solid #272727;
border-radius: 3px;
transform: translate(5%, 1195%);
width: 324px;
height: 27px;
padding: 5px;
}
input[name="Nickname"] {
background-color: #272727;
color: #cecece;
outline: 1px;
border: 1px solid #272727;
border-radius: 3px;
transform: translate(8%, 965%);
width: 192px;
height: 27px;
padding: 5px;
}
input[name="Tag"] {
background-color: #272727;
color: #cecece;
outline: 1px;
border: 1px solid #272727;
border-radius: 3px;
transform: translate(20%, 965%);
width: 108px;
height: 27px;
padding: 5px;
}
input[name="buttonplay"] {
background-color: #272727;
color: #cecece;
border: 1px solid #272727;
border-radius: 3px;
width: 280px;
height: 33px;
text-align: center;
font-family: 'Ubuntu', sans-serif;
font-size: 16px;
transform: translate(6%, 1350%);
outline: 1px;
text-decoration: none;
cursor:pointer;
}
.play-ins {
width: 0px;
color: #ffffff;
text-decoration: none;
text-shadow: 0px 0px 2px black;
font-family: 'Ubuntu', sans-serif;
transform: translate(120%, 2210%);
margin-left: 153px;
}
.play-ins:hover {
background-color: #175cb8;
}
input:hover[name="buttonplay"] {
background-color: #175cb8;
box-shadow: 0px 1px 3px #175cb8;
}
input[name="buttonspectate"] {
background-color: #272727;
color: #cecece;
border: 1px solid #272727;
border-radius: 3px;
width: 45px;
height: 33px;
text-align: center;
font-family: 'Ubuntu', sans-serif;
transform: translate(680%, 1130%);
text-decoration: none;
outline: 1px;
cursor:pointer;
}
input:hover[name="buttonspectate"] {
background-color: #d1b006;
box-shadow: 0px 1px 3px #d1b006;
}
/*END OF INPUT---------------------------------------------------------------------------------------------> */
/*---------------------------------------------------------------------------------------------------------- */
/*START OF SETTINGS----------------------------------------------------------------------------------------> */
.settings-ins {
color: #ffffff;
font-family: 'Josefin Sans', sans-serif;
font-size: 50px;
text-align: center;
margin-top: 20px;
}
.parting {
width: 320px;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
border: 1px #0a0a0a dashed;
border-radius: 8px;
}
/*END OF SETTINGS------------------------------------------------------------------------------------------> */
/*---------------------------------------------------------------------------------------------------------- */
/*START OF LOGIN-------------------------------------------------------------------------------------------> */
#buttonlogin {
background-color: #131313;
border: 1px solid #000000;
width: 300px;
height: 50px;
border-radius: 8px;
margin-top: 10px;
margin-left: 35px;;
margin-right: auto;
font-size: 19px;
font-family: 'Josefin Sans', sans-serif;
}
.loginbuttonins {
color: #ffffff;
font-family: 'Josefin Sans', sans-serif;
color: #ffffff;
margin-top: 17px;
margin-left: 10px;
text-decoration: none;
}
.loginins , #profile >a {
font-size: 17px;
margin-left: 15px;
margin-top: 35px;
font-weight: 1px;
text-align: left;
color: #ffffff;
text-shadow: 1px 1px 2px black;
font-family: 'Roboto Mono', monospace;
text-decoration: none;
}
.loginins {
font-size: 17px;
margin-left: 15px;
margin-top: 40px;
font-weight: 1px;
text-align: left;
color: #ffffff;
text-shadow: 1px 1px 2px black;
font-family: 'Roboto Mono', monospace;
}
/*END OF LOGIN---------------------------------------------------------------------------------------------> */
/*---------------------------------------------------------------------------------------------------------- */
/*START OF SOCIALS-----------------------------------------------------------------------------------------> */
#socials {
margin-bottom: 50px;
width: 300px;
min-height: 30px;
position: absolute;
top: 50%;
left: 50%;
margin-right: 50%;
transform: translate(-50%, 1518%);
text-decoration: none;
color: #ffffff;
}
.dc {
float: left;
background-color: #738adb;
width: 170px;
height: 34px;
border-radius: 5px;
margin-right: 10px;
box-shadow: 1px 1px 3px #111111;
text-align: center;
font-family: 'Josefin Sans', sans-serif;
margin-top: -5px;
}
.dc:hover {
background-color: #5e75c2;;
}
.yt {
background-color: #FF0000;
width: 125px;
height: 34px;
border-radius: 5px;
box-shadow: 1px 1px 3px #111111;
font-family: 'Josefin Sans', sans-serif;
text-decoration: none;
margin-top: 0px;
margin-left: 180px;
}
.yt:hover {
background-color: #be0202;
}
.yt-ins {
float: left;
width: 120px;
height: 35px;
border-radius: 5px;
font-family: 'Josefin Sans', sans-serif;
margin-top: -20px;
margin-left: 20px;
text-decoration: none;
color: #ffffff;
text-shadow: 2px 2px 2px black;
}
.dc-ins {
float: left;
width: 120px;
height: 35px;
border-radius: 5px;
font-family: 'Josefin Sans', sans-serif;
margin-top: -19px;
margin-left: 35px;
text-decoration: none;
color: #ffffff;
text-shadow: 1px 1px 2px black;
}
.iconify {
float: left;
font-size: 25px;
margin-left: 10px;
margin-top: 5px;
text-decoration: none;
color: #ffffff;
text-shadow: 2px 2px 2px black;
}
/*END OF SOCIALS-------------------------------------------------------------------------------------------> */
/*---------------------------------------------------------------------------------------------------------- */
/*START OF TOGGLE1------------------------------------------------------------------------------------------>*/
input[name="chck1"] {
position: absolute;
opacity: 0;
z-index: -1;
}
.toggle-1-trail {
margin-top: 100px;
margin-left: 100px;
display: flex;
align-items: center;
width: 40px;
height: 26px;
background: #2c3e50;
border-radius: 2.5em;
transition: all 0.5s ease;
cursor: pointer;
}
.toggle-1-handler {
display: flex;
margin-left: 3px;;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
background: #1c2731;
border-radius: 50%;
transition: all 0.5s ease;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.toggle-1-handler:before {
content: "×";
color: white;
font-size: 12px;
font-weight: bold;
margin-bottom: 2px;
margin-left: -1px;
}
input[name="chck1"]:checked + .toggle-1-trail {
background: #16a085;
}
input[name="chck1"]:checked + .toggle-1-trail .toggle-1-handler {
margin-left: 43%;
background: #075f4e;
}
input[name="chck1"]:checked + .toggle-1-trail .toggle-1-handler::before {
content: "✔";
}
/*END OF TOGGLE1-------------------------------------------------------------------------------------------->*/
/*---------------------------------------------------------------------------------------------------------- */
/*START OF TOGGLE2------------------------------------------------------------------------------------------>*/
input[name="chck2"] {
position: absolute;
opacity: 0;
z-index: -1;
}
.toggle-2-trail {
margin-top: -10px;
margin-left: -100px;
display: flex;
align-items: center;
width: 40px;
height: 26px;
background: #2c3e50;
border-radius: 2.5em;
transition: all 0.5s ease;
cursor: pointer;
}
.toggle-2-handler {
display: flex;
margin-left: 3px;;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
background: #1c2731;
border-radius: 50%;
transition: all 0.5s ease;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.toggle-2-handler:before {
content: "×";
color: white;
font-size: 12px;
font-weight: bold;
margin-bottom: 2px;
margin-left: -1px;
}
input[name="chck2"]:checked + .toggle-2-trail {
background: #16a085;
}
input[name="chck2"]:checked + .toggle-2-trail .toggle-2-handler {
margin-left: 43%;
background: #075f4e;
}
input[name="chck2"]:checked + .toggle-2-trail .toggle-2-handler::before {
content: "✔";
}
/*END OF TOGGLE2-------------------------------------------------------------------------------------------->*/
/*---------------------------------------------------------------------------------------------------------- */
/*START OF TOGGLE3------------------------------------------------------------------------------------------>*/
input[name="chck3"] {
position: absolute;
opacity: 0;
z-index: -1;
}
.toggle-3-trail {
margin-top: -10px;
margin-left: -100px;
display: flex;
align-items: center;
width: 40px;
height: 26px;
background: #2c3e50;
border-radius: 2.5em;
transition: all 0.5s ease;
cursor: pointer;
}
.toggle-3-handler {
display: flex;
margin-left: 3px;;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
background: #1c2731;
border-radius: 50%;
transition: all 0.5s ease;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.toggle-3-handler:before {
content: "×";
color: white;
font-size: 12px;
font-weight: bold;
margin-bottom: 2px;
margin-left: -1px;
}
input[name="chck3"]:checked + .toggle-3-trail {
background: #16a085;
}
input[name="chck3"]:checked + .toggle-3-trail .toggle-3-handler {
margin-left: 43%;
background: #075f4e;
}
input[name="chck3"]:checked + .toggle-3-trail .toggle-3-handler::before {
content: "✔";
}
/*END OF TOGGLE3-------------------------------------------------------------------------------------------->*/
/*---------------------------------------------------------------------------------------------------------- */
/*START OF TOGGLE4------------------------------------------------------------------------------------------>*/
input[name="chck4"] {
position: absolute;
opacity: 0;
z-index: -1;
}
.toggle-4-trail {
margin-top: -150px;
margin-left: -100px;
display: flex;
align-items: center;
width: 40px;
height: 26px;
background: #2c3e50;
border-radius: 2.5em;
transition: all 0.5s ease;
cursor: pointer;
}
.toggle-4-handler {
display: flex;
margin-left: 3px;;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
background: #1c2731;
border-radius: 50%;
transition: all 0.5s ease;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.toggle-4-handler:before {
content: "×";
color: white;
font-size: 12px;
font-weight: bold;
margin-bottom: 2px;
margin-left: -1px;
}
input[name="chck4"]:checked + .toggle-4-trail {
background: #16a085;
}
input[name="chck4"]:checked + .toggle-4-trail .toggle-4-handler {
margin-left: 43%;
background: #075f4e;
}
input[name="chck4"]:checked + .toggle-4-trail .toggle-4-handler::before {
content: "✔";
}
/*END OF TOGGLE4-------------------------------------------------------------------------------------------->*/
/*---------------------------------------------------------------------------------------------------------- */
/*START OF TOGGLE5------------------------------------------------------------------------------------------>*/
input[name="chck5"] {
position: absolute;
opacity: 0;
z-index: -1;
}
.toggle-5-trail {
margin-top: -150px;
margin-left: -100px;
display: flex;
align-items: center;
width: 40px;
height: 26px;
background: #2c3e50;
border-radius: 2.5em;
transition: all 0.5s ease;
cursor: pointer;
}
.toggle-5-handler {
display: flex;
margin-left: 3px;;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
background: #1c2731;
border-radius: 50%;
transition: all 0.5s ease;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.toggle-5-handler:before {
content: "×";
color: white;
font-size: 12px;
font-weight: bold;
margin-bottom: 2px;
margin-left: -1px;
}
input[name="chck5"]:checked + .toggle-5-trail {
background: #16a085;
}
input[name="chck5"]:checked + .toggle-5-trail .toggle-5-handler {
margin-left: 43%;
background: #075f4e;
}
input[name="chck5"]:checked + .toggle-5-trail .toggle-5-handler::before {
content: "✔";
}