212 lines
5 KiB
CSS
212 lines
5 KiB
CSS
@font-face {
|
|
font-family: 'Montserrat';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: local('Montserrat-Regular'), url(../fonts/montserrat.ttf) format('truetype');
|
|
}
|
|
|
|
.fedmenu-bottom-left {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
left: 10px;
|
|
}
|
|
|
|
.fedmenu-bottom-right {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
}
|
|
.fedmenu-bottom-left:hover .fedmenu-bottom-left.fedmenu-active {
|
|
bottom: 2px;
|
|
left: 2px;
|
|
}
|
|
.fedmenu-bottom-right:hover .fedmenu-bottom-right.fedmenu-active {
|
|
bottom: 2px;
|
|
right: 2px;
|
|
}
|
|
|
|
#fedmenu-tray {
|
|
width: 48px;
|
|
z-index: 1010;
|
|
}
|
|
|
|
.fedmenu-button {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
margin-top: 0px;
|
|
margin-bottom: 8px;
|
|
padding-bottom: 0px;
|
|
|
|
width: 32px;
|
|
height: 32px;
|
|
|
|
-webkit-filter: drop-shadow(4px 4px 4px #222);
|
|
filter: drop-shadow(4px 4px 4px #222);
|
|
|
|
/* Awesome */
|
|
transition-property: width, height, bottom, left, background-size, filter, margin-top, margin-bottom, padding-bottom;
|
|
transition-duration: 0.10s;
|
|
transition-timing-function: linear;
|
|
}
|
|
.fedmenu-button:hover, .fedmenu-button.fedmenu-active {
|
|
margin-top: -8px;
|
|
margin-bottom: 0px;
|
|
padding-bottom: -8px;
|
|
|
|
width: 48px;
|
|
height: 48px;
|
|
|
|
-webkit-filter: drop-shadow(4px 4px 6px #222);
|
|
filter: drop-shadow(4px 4px 6px #222);
|
|
}
|
|
|
|
.fedmenu-button div.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
#fedmenu-main-button div.img { background-image: url("../img/logo.png"); }
|
|
#fedmenu-user-button div.img { border-radius: 50%; /* Make avatars into a circle */ }
|
|
|
|
#fedmenu-wrapper {
|
|
position: fixed;
|
|
height: 100%;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1008;
|
|
display: none;
|
|
}
|
|
|
|
#fedmenu-wrapper.fedmenu-active,.fedmenu-exit {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.fedmenu-exit {
|
|
float: right;
|
|
width: 26px;
|
|
height: 26px;
|
|
text-align: center;
|
|
line-height: 28px;
|
|
font-family: sans-serif;
|
|
font-size: 16pt;
|
|
color: #FFF;
|
|
background-color: #db3279;
|
|
border-radius: 50%;
|
|
|
|
-webkit-filter: drop-shadow(4px 4px 4px #222);
|
|
filter: drop-shadow(4px 4px 4px #222);
|
|
|
|
/* Awesome */
|
|
transition-property: width, height, margin, line-height, font-size;
|
|
transition-duration: 0.10s;
|
|
transition-timing-function: linear;
|
|
}
|
|
|
|
.fedmenu-exit:hover {
|
|
margin-top: -6px;
|
|
margin-right: -6px;
|
|
|
|
width: 38px;
|
|
height: 38px;
|
|
line-height: 40px;
|
|
font-size: 22pt;
|
|
|
|
-webkit-filter: drop-shadow(4px 4px 6px #222);
|
|
filter: drop-shadow(4px 4px 6px #222);
|
|
}
|
|
|
|
#fedmenu-wrapper.fedmenu-active {
|
|
display: block;
|
|
background-color: rgba(0,0,0,0.3);
|
|
-webkit-box-shadow: inset 0 0 400px rgba(0,0,0,1);
|
|
box-shadow: inset 0 0 400px rgba(0,0,0,1);
|
|
|
|
}
|
|
|
|
.fedmenu-content {
|
|
position: fixed;
|
|
top: 100%;
|
|
|
|
/* Vary these two parameters for responsive-ness */
|
|
left: 30%;
|
|
width: 40%;
|
|
|
|
background: url('../img/panda-wave.png') no-repeat right bottom;
|
|
|
|
background-color: #FFF;
|
|
margin-bottom: 20px;
|
|
padding: 19px;
|
|
border: 0px none;
|
|
|
|
-webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.23);
|
|
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.23);
|
|
z-index: 1009;
|
|
}
|
|
|
|
.fedmenu-content.fedmenu-active {
|
|
top: 15%;
|
|
transition-property: top;
|
|
transition-duration: 0.4s;
|
|
transition-delay: 0.3s;
|
|
transition-timing-function: ease-out;
|
|
}
|
|
|
|
.fedmenu-content > h1 {
|
|
font-family: Montserrat;
|
|
font-weight: bold;
|
|
border-bottom: 2px solid;
|
|
color: #294172;
|
|
}
|
|
|
|
.fedmenu-panel {
|
|
font-family: Montserrat;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
font-size: 12pt;
|
|
padding: 15px;
|
|
}
|
|
.fedmenu-panel ul {
|
|
margin-top: 10px;
|
|
padding-left: 0px;
|
|
}
|
|
.fedmenu-panel li {
|
|
list-style: none;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.fedmenu-panel a,
|
|
.fedmenu-panel a:hover {
|
|
color: #3C6EB4;
|
|
}
|
|
|
|
.fedmenu-header {
|
|
display: inline;
|
|
font-weight: bold;
|
|
font-size: 12pt;
|
|
color: #294172;
|
|
border-bottom: 1px solid;
|
|
}
|
|
|
|
/* Responsive stuff... */
|
|
@media all and (max-width: 1450px) { .fedmenu-content { left: 25%; width: 50%; }}
|
|
@media all and (max-width: 1200px) { .fedmenu-content { left: 20%; width: 60%; }}
|
|
@media all and (max-width: 1000px) { .fedmenu-content { left: 15%; width: 70%; }}
|
|
@media all and (max-width: 860px) { .fedmenu-content { left: 10%; width: 80%; }}
|
|
@media all and (max-width: 740px) { .fedmenu-content { left: 5%; width: 85%; }}
|
|
@media all and (max-width: 600px) { .fedmenu-content { left: 0%; width:100%; }}
|
|
@media all and (max-width: 800px) { .fedmenu-content.fedmenu-active { top: 10%; }}
|
|
@media all and (max-width: 700px) { .fedmenu-content.fedmenu-active { top: 10%; }}
|
|
@media all and (max-width: 600px) { .fedmenu-content.fedmenu-active { top: 5%; }}
|
|
@media all and (max-width: 500px) {
|
|
.fedmenu-content.fedmenu-active { top: 0%; }
|
|
.fedmenu-content > h1 { font-size: 80%; padding: 5px }
|
|
.fedmenu-panel .fedmenu-header { font-size: 90%; }
|
|
.fedmenu-panel { padding: 7px; font-size: 5pt; }
|
|
.fedmenu-content {
|
|
padding: 9px;
|
|
background-image: none;
|
|
}
|
|
}
|