$primary: #af0c06;
$secondary: #af0c06;
$player-width: 300px;
+$player-bottom-limit: 30000px;
/****************************************************/
/* FONTS */
.wrapper.text {max-width: 780px; margin:auto;}
.wrapper .rightPart{margin-top:1em;}
-@media screen and (min-width: 760px) {
- #player-container.fixed {
- position: fixed;
- top: 60px;
- width: calc(0% + 235px);
- }
- .wrapper .rightPart{
- margin-top:0;
- }
- .wrapper.sided .leftPart,
- .wrapper.sided .rightPart{
- width:45%;
- }
- .wrapper.navigation .leftPart{
- width:60%;
- }
- .wrapper.navigation .rightPart{
- width:30%;
- }
- .wrapper .leftPart{
- float:left;
- }
- .wrapper .rightPart{
- float:right;
- }
- #specialHome {
- padding-left: 0;
- }
- /*
- #specialHome .leftPart,
- #specialHome .rightPart {
- width: 100%;
- }
- */
- p.intro {
- padding-top: 0px;
- padding-bottom: 40px;
- }
-}
-
-
button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
nav.menu{
width:100%;
color: white;
background: $primary;
background: linear-gradient($primary 95%, black 100%);
- position:fixed;
- z-index:1000;
+ position: absolute;
+ z-index: 0;
top:0px;
width:100%;
font-size: 90%;
white-space: nowrap;
text-overflow: ellipsis;
overflow:hidden;
+ &:first-child {
+ margin-left: 300px;
+ }
}
#metaNav ul li#nav-search {
color: $primary;
}
-@media screen and (max-width:760px){
+@media screen and (max-width: $mobile-limit){
#bg-title { display: none; }
#metaNav .iconLabel {display:none;}
#metaNav ul li a span.nav-icon { display: inline-block; }
}
#mainHeader {
padding-bottom:1em;
+ font-size:70%;
}
-#mainHeader {
- font-size:70%;
-}
+
#mainHeader *{color:black !important;line-height:1em;}
#mainHeader #radioPanik{}
opacity: 1.0;
}
-@media screen and (max-width: 760px) {
+@media screen and (max-width: $mobile-limit) {
#All h1.top {
font-size: 60px;
padding: 0;
}
}
-@media screen and (min-width: 760px) {
- #Commons {
- float: left;
- width: 20%;
- width: -webkit-calc(0% + #{$player-width});
- width: -moz-calc(0% + #{$player-width});
- width: calc(0% + #{$player-width});
- }
- #Changing {
- position: relative;
- float: right;
- width: 78%;
- width: -webkit-calc(100% - #{$player-width} - 40px);
- width: -moz-calc(100% - #{$player-width} - 40px);
- width: calc(100% - #{$player-width} - 40px);
- }
+.contextual-menu,
+#Commons,
+#Changing {
+ box-sizing: border-box;
+ padding: 0 100px;
+ width: 100%;
+ max-width: 1400px;
+ margin: 0 auto;
+}
+
+#mainHeader {
+}
+
+@media screen and (min-width: $mobile-limit) {
#All h1.top {
font-size: 50px;
padding-left: 0;
#backgroundBox {
background: transparent 10px 15px no-repeat url(../img/logo-lautre.png);
- position: fixed;
- max-width: $player-width - 20px;
- @media screen and (max-width:760px){
+ position: absolute;
+ top: -60px;
+ @media screen and (max-width: $mobile-limit){
position: static;
max-width: none;
}
overflow: hidden;
}
-@media screen and (max-width: 760px) {
+@media screen and (max-width: $mobile-limit) {
#backgroundBox {
background-position: center 30px;
background-size: 130px;
color:#333;
position: relative;
z-index: 1;
- padding-top: 35px;
+ padding-top: 105px;
}
#Main >.wrapper{
padding-bottom:2em;
div.userContent a.tag { text-decoration: none; }
-@media screen and (max-width: 760px) {
+@media screen and (max-width: $player-bottom-limit) {
#streamSymbol{
top: 0;
}
}
div.topikcellcontent.topik-large a div {
- @media screen and (min-width: 760px) {
+ @media screen and (min-width: $mobile-limit) {
display: flex;
}
margin-top: 1ex;
margin-top: 0;
white-space: nowrap;
margin-right: 1ex;
- @media screen and (max-width: 760px) {
+ @media screen and (max-width: $mobile-limit) {
padding-bottom: 0;
}
}
width: 90vw;
}
-@media screen and (min-width:760px){
+@media screen and (min-width: $mobile-limit){
div.commands {
width: calc(90vw - 240px);
}
color: #666;
}
-@media screen and (max-width: 760px) {
+@media screen and (max-width: $mobile-limit) {
#chat span.from {
display: block;
position: static;
border: 2px solid black;
}
-@media screen and (max-width:760px){
+@media screen and (max-width: $mobile-limit){
div.top-logo {
display: none;
}