%PDF-
%PDF-
Mini Shell
Mini Shell
@import "variables.less";
.appbar
{
background-color: #212021;
bottom: 0px;
color: #fff;
font-size: .9em;
height: 60px;
left: 0px;
line-height: normal;
margin: 0;
max-height: 100%;
overflow: hidden;
padding: 10px 0;
position: fixed;
right: 0px;
text-align: right;
width: 100%;
z-index: 100;
-ms-touch-action: manipulation;
&.top {
bottom: auto !important;
top:0px;
}
a.etc,
a.etc:hover,
a.etc:visited
{
color: #fff;
cursor: pointer;
display: block;
font-size: 32px;
/* add some extra padding to make it easier to touch */
height: 60px;
position: absolute;
right: 8px;
text-decoration: none;
top: 0px;
width: 90px;
z-index: 100;
}
.clear
{
clear: both;
}
.theme-options
{
display: block;
float:left;
margin: 0px;
position: relative;
width: 80%;
}
.theme-options>ul
{
padding-right: 8px;
}
.theme-options li
{
display: block;
margin: 8px;
float: left;
line-height: 32px;
height: 32px;
width: 32px;
}
.theme-options li > a, .theme-options li > a:hover,
.theme-options li > a:visited
{
display: block;
padding: 0px;
text-decoration: none;
height: 32px;
width: 32px;
}
.base-theme-options
{
display: block;
float: left;
margin: 0px;
position: relative;
width: 20%;
}
.base-theme-options>ul
{
padding-left:2px;
}
.base-theme-options li
{
display: block;
margin: 8px;
float: left;
line-height: 32px;
height: 32px;
width: 32px;
}
.base-theme-options li > a, .base-theme-options li > a:hover,
.base-theme-options li > a:visited
{
display: block;
padding: 0px;
text-decoration: none;
height: 32px;
width: 32px;
}
.base-theme-options li > a.dark.accent
{
background-color: #000;
}
.theme-options h2,
.base-theme-options h2
{
font-size:2em;
font-weight:normal;
padding: 8px 8px 12px;
text-align:left;
}
.charm-title
{
font-size: 10px;
display: block;
text-align: center;
}
.links
{
font-size: 2em;
padding: 24px 0 0 8px;
text-align: left;
a, a:link
{
text-decoration:none;
}
}
&.small
{
height: 28px;
a.etc,
a.etc:hover, a.etc:visited
{
font-size: 16px;
height: 60px;
width: 90px;
}
}
}
.light .appbar { background-color:#dfdfdf; color:#000; }
.dark .appbar { background-color:#212021; }
.light .appbar-buttons li a { color:#000; }
.light .appbar-buttons a>img { background-image:url('images/metroIcons_light.jpg'); }
.light .appbar a.etc, .light .appbar a.etc:hover,
.light .appbar a.etc:visited { color:#000; }
.small .appbar-buttons
{
a>img
{
height:@absBtnHeight;
width:@absBtnWidth;
}
/* default width is 3 buttons */
width: @absBtnWidthP * 3;
&.one { width: @absBtnWidthP; }
&.two { width: @absBtnWidthP * 2; }
&.three { width: @absBtnWidthP * 3; }
&.four { width: @absBtnWidthP * 4; }
&.five { width: @absBtnWidthP * 5; }
&.six { width: @absBtnWidthP * 6; }
&.seven { width: @absBtnWidthP * 7; }
&.eight { width: @absBtnWidthP * 8; }
&.nine { width: @absBtnWidthP * 9; }
&.ten { width: @absBtnWidthP * 10; }
}
.appbar-buttons
{
margin: 0 auto;
overflow: hidden;
position: relative;
padding: 0 0 2px;
text-align: right;
/* default width is 3 buttons */
width: @abBtnWidthP * 3;
&.one { width: @abBtnWidthP; }
&.two { width: @abBtnWidthP * 2; }
&.three { width: @abBtnWidthP * 3; }
&.four { width: @abBtnWidthP * 4; }
&.five { width: @abBtnWidthP * 5; }
&.six { width: @abBtnWidthP * 6; }
&.seven { width: @abBtnWidthP * 7; }
&.eight { width: @abBtnWidthP * 8; }
&.nine { width: @abBtnWidthP * 9; }
&.ten { width: @abBtnWidthP * 10; }
a>img
{
background-image:url('images/metroIcons.jpg');
background-repeat:no-repeat;
border:none;
height:@abBtnHeight;
width:@abBtnWidth;
}
a.small > img
{
height:@absBtnHeight;
width:@absBtnWidth;
}
a {
&.search > img { background-position: -12px -12px; }
&.home > img { background-position: -104px -12px; }
&.twitter > img { background-position: -196px -12px; }
&.calendar > img { background-position: -288px -12px; }
&.storm > img { background-position: -380px -12px; }
&.down > img { background-position: -472px -12px; }
&.camera > img { background-position: -12px -99px; }
&.camcorder > img { background-position: -104px -99px; }
&.qmark > img,
&.about > img { background-position: -196px -99px; }
&.share > img { background-position: -288px -99px; }
&.rain > img { background-position: -380px -99px; }
&.cancel > img,
&.close > img { background-position: -472px -99px; }
&.delete > img,
&.trash > img { background-position: -12px -188px; }
&.tag > img { background-position: -104px -188px; }
&.addcontact > img { background-position: -196px -188px; }
&.save> img { background-position: -288px -188px; }
&.snow > img { background-position: -380px -188px; }
&.msg > img { background-position: -472px -188px; }
&.email > img { background-position: -12px -274px; }
&.clock > img { background-position: -104px -274px; }
&.edit > img { background-position: -196px -274px; }
&.circle > img { background-position: -288px -274px; }
&.moon > img { background-position: -380px -274px; }
&.calc > img { background-position: -12px -362px; }
&.gear > img { background-position: -104px -362px; }
&.plus > img { background-position: -196px -362px; }
&.dot > img { background-position: -288px -362px; }
&.restart > img,
&.return > img { background-position: -380px -362px; }
&.add > img { background-position: -472px -362px; }
&.phone > img { background-position: -12px -453px; }
&.film > img { background-position: -104px -453px; }
&.back > img { background-position: -196px -453px; }
&.car > img { background-position: -288px -453px; }
&.forward > img { background-position: -380px -453px; }
&.selectmany > img { background-position: -472px -453px; }
&.stop > img { background-position: -12px -538px; }
&.contacts > img { background-position: -104px -538px; }
&.select > img { background-position: -196px -538px; }
&.sun > img { background-position: -288px -538px; }
&.dpad > img { background-position: -380px -538px; }
&.play > img { background-position: -472px -538px; }
}
li {
display: inline;
padding: 0 @abBtnPadding;
float:left;
list-style: none;
}
li a {
font-weight: bold;
background-color: transparent;
color: #fff;
}
li a:active, ul#menu li.selected a, .appbar-buttons li a:hover
{
text-decoration: none;
}
}
.small .appbar-buttons .search > img,
.appbar-buttons .small.search > img { background-position: -562px -6px; }
.small .appbar-buttons .home > img,
.appbar-buttons .small.home > img { background-position: -608px -6px; }
.small .appbar-buttons .twitter > img,
.appbar-buttons .small.twitter > img { background-position: -654px -6px; }
.small .appbar-buttons .calendar > img,
.appbar-buttons .small.calendar > img { background-position: -700px -6px; }
.small .appbar-buttons .storm > img,
.appbar-buttons .small.storm > img { background-position: -746px -6px; }
.small .appbar-buttons .down > img,
.appbar-buttons .small.down > img { background-position: -792px -6px; }
.small .appbar-buttons .camera > img,
.appbar-buttons .small.camera > img { background-position: -562px -50px; }
.small .appbar-buttons .camcorder > img,
.appbar-buttons .small.camcorder > img { background-position: -608px -50px; }
.small .appbar-buttons .qmark > img,
.appbar-buttons .small.qmark > img,
.small .appbar-buttons .about > img,
.appbar-buttons .small.about > img { background-position: -654px -50px; }
.small .appbar-buttons .share > img,
.appbar-buttons .small.share > img { background-position: -700px -50px; }
.small .appbar-buttons .rain > img,
.appbar-buttons .small.rain > img { background-position: -746px -50px; }
.small .appbar-buttons .cancel > img,
.appbar-buttons .small.cancel > img,
.small .appbar-buttons .close > img,
.appbar-buttons .small.close > img { background-position: -792px -50px; }
.small .appbar-buttons .delete > img,
.appbar-buttons .small.delete > img,
.small .appbar-buttons .trash > img,
.appbar-buttons .small.trash > img { background-position: -562px -94px; }
.small .appbar-buttons .tag > img,
.appbar-buttons .small.tag > img { background-position: -608px -94px; }
.small .appbar-buttons .addcontact > img,
.appbar-buttons .small.addcontact > img { background-position: -654px -94px; }
.small .appbar-buttons .save> img,
.appbar-buttons .small.save> img { background-position: -700px -94px; }
.small .appbar-buttons .snow > img,
.appbar-buttons .small.snow > img { background-position: -746px -94px; }
.small .appbar-buttons .msg > img,
.appbar-buttons .small.msg > img { background-position: -792px -94px; }
.small .appbar-buttons .email > img,
.appbar-buttons .small.email > img { background-position: -562px -137px; }
.small .appbar-buttons .clock > img,
.appbar-buttons .small.clock > img { background-position: -608px -137px; }
.small .appbar-buttons .edit > img,
.appbar-buttons .small.edit > img { background-position: -654px -137px; }
.small .appbar-buttons .circle > img,
.appbar-buttons .small.circle > img { background-position: -700px -137px; }
.small .appbar-buttons .moon > img,
.appbar-buttons .small.moon > img { background-position: -746px -137px; }
.small .appbar-buttons .calc > img,
.appbar-buttons .small.calc > img { background-position: -562px -181px; }
.small .appbar-buttons .gear > img,
.appbar-buttons .small.gear > img { background-position: -608px -181px; }
.small .appbar-buttons .plus > img,
.appbar-buttons .small.plus > img { background-position: -654px -181px; }
.small .appbar-buttons .dot > img,
.appbar-buttons .small.dot > img { background-position: -700px -181px; }
.small .appbar-buttons .restart > img,
.appbar-buttons .small.restart > img,
.small .appbar-buttons .return > img,
.appbar-buttons .small.return > img { background-position: -746px -181px; }
.small .appbar-buttons .add > img,
.appbar-buttons .small.add > img { background-position: -792px -181px; }
.small .appbar-buttons .phone > img,
.appbar-buttons .small.phone > img { background-position: -562px -226px; }
.small .appbar-buttons .film > img,
.appbar-buttons .small.film > img { background-position: -608px -226px; }
.small .appbar-buttons .back > img,
.appbar-buttons .small.back > img { background-position: -654px -226px; }
.small .appbar-buttons .car > img,
.appbar-buttons .small.car > img { background-position: -700px -226px; }
.small .appbar-buttons .forward > img,
.appbar-buttons .small.forward > img { background-position: -746px -226px; }
.small .appbar-buttons .selectmany > img,
.appbar-buttons .small.selectmany > img { background-position: -792px -226px; }
.small .appbar-buttons .stop > img,
.appbar-buttons .small.stop > img { background-position: -562px -269px; }
.small .appbar-buttons .contacts > img,
.appbar-buttons .small.contacts > img { background-position: -608px -269px; }
.small .appbar-buttons .select > img,
.appbar-buttons .small.select > img { background-position: -654px -269px; }
.small .appbar-buttons .sun > img,
.appbar-buttons .small.sun > img { background-position: -700px -269px; }
.small .appbar-buttons .dpad > img,
.appbar-buttons .small.dpad > img { background-position: -746px -269px; }
.small .appbar-buttons .play > img,
.appbar-buttons .small.play > img { background-position: -792px -269px; }
/* Media queries */
@media screen and (max-width: 1025px)
{
.appbar .theme-options h2,
.appbar .base-theme-options h2,
.appbar .links
{
font-size:1.7em;
padding: 8px 8px 2px;
text-align:left;
}
.appbar .base-theme-options li, .appbar .base-theme-options li a,
.appbar .theme-options li, .appbar .theme-options li a
{
display:block;
height:32px;
margin:4px;
width:32px;
}
}
@media screen and (max-width: 801px)
{
.appbar .theme-options h2,
.appbar .base-theme-options h2,
.appbar .links
{
font-size: 1.3em;
}
.appbar .theme-options>ul
{
padding-right: 6px;
}
}
@media screen and (max-width: 641px)
{
.appbar .theme-options
{
width: 70%;
}
.appbar .base-theme-options
{
width: 30%;
}
}
Zerion Mini Shell 1.0