%PDF-
%PDF-
Mini Shell
Mini Shell
@import "variables.less";
/* Sizes */
.live-tile, .list-tile, .copy-tile, .tile-strip .flip-list>li
{
height: @height;
margin: @margin;
outline: 1px solid transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0px;
width: @width;
&.half-tile { height:(@heightd2 - (@margin)); width: (@widthd2 - (@margin)); }
&.half-wide { width: (@widthd2 - (@margin)); }
&.two-wide { width: ((@width * 2) + (@margin * 2)); }
&.three-wide { width: ((@width * 3) + (@margin * 4)); }
&.four-wide { width: ((@width * 4) + (@margin * 6)); }
&.five-wide { width: ((@width * 5) + (@margin * 8)); }
&.six-wide { width: ((@width * 6) + (@margin * 10)); }
&.seven-wide { width: ((@width * 7) + (@margin * 12)); }
&.eight-wide { width: ((@width * 8) + (@margin * 14)); }
&.nine-wide { width: ((@width * 9) + (@margin * 16)); }
&.ten-wide { width: ((@width * 10) + (@margin * 18)); }
&.half-tall { height:(@heightd2 - (@margin)); }
&.two-tall { height:((@height * 2) + (@margin * 2)); }
&.three-tall { height:((@height * 3) + (@margin * 4)); }
&.four-tall { height:((@height * 4) + (@margin * 6)); }
&.five-tall { height:((@height * 5) + (@margin * 8)); }
&.six-tall { height:((@height * 6) + (@margin * 10)); }
&.seven-tall { height:((@height * 7) + (@margin * 12)); }
&.eight-tall { height:((@height * 8) + (@margin * 14)); }
&.nine-tall { height:((@height * 9) + (@margin * 16)); }
&.ten-tall { height:((@height * 10) + (@margin * 18)); }
}
/* flip-list tile grid sprite styles */
.live-tile > .flip-list,
.list-tile > .flip-list
{
height:100%;
width:100%;
}
.flip-list
{
>li
{
height: @heightd3;
margin: 0px;
padding: 0px;
width: @widthd3;
}
&.fourTiles > li
{
border: none;
padding: 0;
margin: 0;
height: 50%;
width: 50%;
}
&.nineTiles > li
{
height: 33%;
width: 33%;
border: none;
padding: 0;
margin: 0;
}
&.fourTiles > li > div,
&.fourTiles > li > div > a,
&.fourTiles > li > div > img,
&.nineTiles > li > div,
&.nineTiles > li > div > a,
&.nineTiles > li > div > img
{
border: none;
height:100%;
width:100%;
padding: 0;
margin: 0;
}
}
/* fourTile background positions */
.fourTiles
{
.fourTiles1 img, img.fourTiles1, .fourTiles1 a,
.tile-1 img, .tile-1 a { background-position: 0px 0px; }
.fourTiles2 img, img.fourTiles2, .fourTiles2 a,
.tile-2 img, .tile-2 a { background-position: -@widthd2 0px; }
.fourTiles3 img, img.fourTiles3, .fourTiles3 a,
.tile-3 img, .tile-3 a { background-position: 0px -@heightd2; }
.fourTiles4 img, img.fourTiles4, .fourTiles4 a,
.tile-4 img, .tile-4 a { background-position: -@widthd2 -@heightd2; }
}
/* nineTile background positions */
.nineTiles
{
.nineTiles1 img, img.nineTiles1, .nineTiles1 a,
.tile-1 img, .tile-1 a{ background-position: 0px 0px; }
.nineTiles2 img, img.nineTiles2, .nineTiles2 a,
.tile-2 img, .tile-2 a{ background-position: -@widthd3 0px; }
.nineTiles3 img, img.nineTiles3, .nineTiles3 a,
.tile-3 img, .tile-3 a{ background-position: -@widthd3r2 0px; }
.nineTiles4 img, img.nineTiles4, .nineTiles4 a,
.tile-4 img, .tile-4 a{ background-position: 0px -@heightd3; }
.nineTiles5 img, img.nineTiles5, .nineTiles5 a,
.tile-5 img, .tile-5 a{ background-position: -@widthd3 -@heightd3; }
.nineTiles6 img, img.nineTiles6,.nineTiles6 a,
.tile-6 img, .tile-6 a{ background-position: -@widthd3r2 -@heightd3; }
.nineTiles7 img, img.nineTiles7, .nineTiles7 a,
.tile-7 img, .tile-7 a{ background-position: 0px -@heightd3r2; }
.nineTiles8 img, img.nineTiles8, .nineTiles8 a,
.tile-8 img, .tile-8 a{ background-position: -@widthd3 -@heightd3r2; }
.nineTiles9 img, img.nineTiles9, .nineTiles9 a,
.tile-9 img, .tile-9 a{ background-position: -@widthd3r2 -@heightd3r2; }
}
.tile-group, .tile-strip
{
display:block;
overflow:hidden;
position:relative;
z-index:20;
-webkit-perspective:800px;
-moz-perspective:800px;
-ms-perspective:800px;
perspective:800px;
&.one-tile {
height: (@height) + (@margin * 2);
width: (@width) + (@margin * 2);
}
&.half-wide { width: (@widthd2) + (@margin); }
&.one-wide { width: (@width) + (@margin * 2); }
&.two-wide { width: (@width * 2) + (@margin * 4); }
&.three-wide { width: (@width * 3) + (@margin * 6); }
&.four-wide { width:(@width * 4) + (@margin * 8); }
&.five-wide { width:(@width * 5) + (@margin * 10); }
&.six-wide { width:(@width * 6) + (@margin * 12); }
&.seven-wide { width:(@width * 7) + (@margin * 14); }
&.eight-wide { width:(@width * 8) + (@margin * 16); }
&.nine-wide { width:(@width * 9) + (@margin * 18); }
&.ten-wide { width:(@width * 10) + (@margin * 20); }
&.half-tall { height: (@heightd2) + (@margin); }
&.one-tall { height: (@height) + (@margin * 2); }
&.two-tall { height: (@height * 2) + (@margin * 4); }
&.three-tall { height: (@height * 3) + (@margin * 6); }
&.four-tall { height:(@height * 4) + (@margin * 8); }
&.five-tall { height:(@height * 5) + (@margin * 10); }
&.six-tall { height:(@height * 6) + (@margin * 12); }
&.seven-tall { height:(@height * 7) + (@margin * 14); }
&.eight-tall { height:(@height * 8) + (@margin * 16); }
&.nine-tall { height:(@height * 9) + (@margin * 18); }
&.ten-tall { height:(@height * 10) + (@margin * 20); }
}
/* liveTile styles */
.tile-strip, .live-tile, .list-tile, .copy-tile, .slide
{
float: left;
}
.bounce
{
cursor: pointer;
outline: 1px solid transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
-o-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
backface-visibility:hidden;
&.bounce-c
{
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.95,M12=0,M21=0,M22=0.95);
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
-moz-transform: scale(0.95);
-o-transform: scale(0.95);
transform: scale(0.95);
}
&.bounce-t
{
-webkit-transform: rotateX(20deg);
-ms-transform: rotateX(20deg);
-moz-transform: rotateX(20deg);
-o-transform: rotateX(20deg);
transform: rotateX(20deg);
-webkit-transform-origin:0% 100%;
-moz-transform-origin:0% 100%;
-ms-transform-origin:0% 100%;
-o-transform-origin:0% 100%;
transform-origin:0% 100%;
}
&.bounce-b
{
-webkit-transform: rotateX(-20deg);
-ms-transform: rotateX(-20deg);
-moz-transform: rotateX(-20deg);
-o-transform: rotateX(-20deg);
transform: rotateX(-20deg);
-webkit-transform-origin:50% 0%;
-moz-transform-origin:50% 0%;
-ms-transform-origin:50% 0%;
-o-transform-origin:50% 0%;
transform-origin:50% 0%;
}
&.bounce-r
{
-webkit-transform: rotateY(20deg);
-ms-transform: rotateY(20deg);
-moz-transform: rotateY(20deg);
-o-transform: rotateY(20deg);
transform: rotateY(20deg);
-webkit-transform-origin:0% 50%;
-moz-transform-origin:0% 50%;
-ms-transform-origin:0% 50%;
-o-transform-origin:0% 50%;
transform-origin:0% 50%;
}
&.bounce-l
{
-webkit-transform: rotateY(-20deg);
-ms-transform: rotateY(-20deg);
-moz-transform: rotateY(-20deg);
-o-transform: rotateY(-20deg);
transform: rotateY(-20deg);
-webkit-transform-origin:100% 50%;
-moz-transform-origin:100% 50%;
-ms-transform-origin:100% 50%;
-o-transform-origin:100% 50%;
transform-origin:100% 50%;
}
&.bounce-tl
{
-webkit-transform: rotateX(10deg) rotateY(-10deg);
-ms-transform: rotateX(10deg) rotateY(-10deg);
-moz-transform: rotateX(10deg) rotateY(-10deg);
-o-transform: rotateX(10deg) rotateY(-10deg);
transform: rotateX(10deg) rotateY(-10deg);
}
&.bounce-tr
{
-webkit-transform: rotateX(10deg) rotateY(10deg);
-ms-transform: rotateX(10deg) rotateY(10deg);
-moz-transform: rotateX(10deg) rotateY(10deg);
-o-transform: rotateX(10deg) rotateY(10deg);
transform: rotateX(10deg) rotateY(10deg);
}
&.bounce-bl
{
-webkit-transform: rotateX(-10deg) rotateY(-10deg);
-ms-transform: rotateX(-10deg) rotateY(-10deg);
-moz-transform: rotateX(-10deg) rotateY(-10deg);
-o-transform: rotateX(-10deg) rotateY(-10deg);
transform: rotateX(-10deg) rotateY(-10deg);
}
&.bounce-br
{
-webkit-transform: rotateX(-10deg) rotateY(10deg);
-ms-transform: rotateX(-10deg) rotateY(10deg);
-moz-transform: rotateX(-10deg) rotateY(10deg);
-o-transform: rotateX(-10deg) rotateY(10deg);
transform: rotateX(-10deg) rotateY(10deg);
}
}
.live-tile, .list-tile, .copy-tile
{
color: #fff;
overflow: hidden;
position: relative;
z-index: 20;
p, .face
{
display: block;
font-size: 1em;
line-height: 1.2em;
margin: 0;
}
.face
{
padding: 0px;
}
p
{
padding: 10px;
}
&.half-tile p
{
padding:5px;
}
.face.full
{
height: 100%;
width: 100%;
}
img
{
border: none;
}
.tile-title
{
position: absolute;
bottom: 0px;
font-size: 12px;
left: 0px;
padding: 0 0 6px 2%;
text-decoration: none;
width: 98%;
z-index: 30;
}
a
{
color: #fff;
&.tile-title:link,
&.tile-title:visited,
&.tile-title:hover,
&.tile-title
{
text-decoration: none;
}
&:link, &:visited
{
color: #fff;
text-decoration: underline;
}
&:hover
{
color: #fff;
text-decoration: none;
}
}
}
.light
{
.copy-tile
{
color: #000;
&.accent
{
color:#fff;
a, a:link, a:visited, a:hover
{
color: #fff;
}
}
a, a:link, a:visited, a:hover
{
color: #000;
}
.face, .accent
{
color: #fff;
a, a:link, a:visited, a:hover
{
color: #fff;
}
}
}
}
.copy-tile p {
padding: 5px 5px 0px 5px;
font-size:.95em;
}
.noselect >div,
.noselect >.slide,
.noselect >.slide-front,
.noselect >.slide-back,
.noselect >.fade-front,
.noselect >.fade-back,
.noselect >.flip-front,
.noselect >.flip-back
{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select:none;
}
.live-tile>div,
.list-tile>div,
.live-tile>.slide,
.carousel>.slide,
.live-tile>.slide-front,
.live-tile>.slide-back,
.live-tile>.fade-front,
.live-tile>.fade-back,
.live-tile>.flip-front,
.live-tile>.flip-back
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
top:0px;
left:0px;
margin:0px;
height:100%;
width:100%;
overflow:hidden;
position:absolute;
z-index:20;
}
.list-tile>div
{
position:relative;
background-color:transparent;
}
img.full , a.full, .live-tile .full, .list-tile .full
{
display:block;
margin:0px;
height:100%;
text-decoration:none;
width:100%;
}
img.full-w, a.full-w, .live-tile .full-w, .list-tile .full-w
{
display:block;
margin:0px;
text-decoration:none;
width:100%;
}
img.full-h, a.full-h, .live-tile .full-h, .list-tile .full-h
{
display:block;
margin:0px;
height:100%;
}
.live-tile>.back, .live-tile>.slide-back,.live-tile>.fade-back,.live-tile>.flip-back, .flip-list .flip-back
{
position:absolute;
z-index:10;
}
/* ========== flip-list Styles ==========
.flip-list
---li
------div.flip-front
------div.flip-back
*/
.flip-list
{
padding:0px;
margin:0px;
}
.list-tile .flip-list
{
height:100%;
width:100%;
}
.flip-list>li>a
{
border:none;
outline:none;
text-decoration:none;
margin:0px;
padding:0px;
height:100%;
width:100%;
}
.flip-list>li img
{
border:none;
outline:none;
height:100%;
margin:0px;
padding:0px;
width:100%;
}
.flip-list>li
{
float: left;
list-style-type:none;
outline:none;
position: relative;
}
.flip-list>li>div
{
border:none;
background: white;
height: 100%;
left: 0px;
margin:0px;
overflow: hidden;
position: absolute;
padding:0px;
top: 0px;
width: 100%;
z-index:20;
}
.flip-list>li>div.flip-back
{
height:0px;
}
/* ------ Hardware Accelerated Tiles --------*/
/* flip */
.live-tile.flip.ha, .flip-list.ha
{
position:relative;
overflow:hidden;
}
.live-tile.flip .ha.flip-front, .flip-list .ha.flip-front,
.live-tile.flip .ha.flip-back, .flip-list .ha.flip-back
{
position:absolute;
z-index:20;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
backface-visibility:hidden;
}
.flip-list>li>.ha.flip-back, .flip-list>li>.ha.flip-back img
{
/* override the values set for margin and ensure the back tile is visible */
margin:0px !important;
height:100%;
}
Zerion Mini Shell 1.0