191 lines
3.1 KiB
SCSS
191 lines
3.1 KiB
SCSS
// Variables
|
|
|
|
$nav_width: 25px;
|
|
$nav_height: 33px;
|
|
$ui_controls_width: 25px;
|
|
$ui_controls_height: 25px;
|
|
|
|
// Fonts
|
|
|
|
@import "fonts";
|
|
|
|
// Placeholders
|
|
|
|
%hide-text {
|
|
text-indent: 100%;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#slb_viewer_wrap {
|
|
.slb_theme_slb_default {
|
|
//General
|
|
a,
|
|
a:hover {
|
|
border-bottom:none;
|
|
color:#000;
|
|
text-decoration:underline;
|
|
}
|
|
|
|
.slb_viewer_layout {
|
|
top: 20px;
|
|
}
|
|
|
|
.slb_container {
|
|
box-shadow: 0 0 64px -40px #fcfcfc;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.slb_loading {
|
|
@extend %hide-text;
|
|
}
|
|
|
|
.slb_template_tag_ui {
|
|
transition: opacity .5s;
|
|
}
|
|
|
|
//UI
|
|
.slb_controls {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
width: 75%;
|
|
text-align: right;
|
|
[dir="rtl"] & {
|
|
right: inherit;
|
|
left: 0px;
|
|
}
|
|
|
|
.slb_template_tag_ui {
|
|
@extend %hide-text;
|
|
width: $ui_controls_width;
|
|
height: $ui_controls_height;
|
|
float: right;
|
|
margin-left: 2px;
|
|
opacity: 0.5;
|
|
[dir="rtl"] & {
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
.slb_template_tag_ui:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.slb_slideshow .slb_template_tag {
|
|
background: url('../images/ui_slideshow_play.png') 0 0 no-repeat;
|
|
}
|
|
|
|
.slb_close .slb_template_tag {
|
|
background: url('../images/ui_close.png') 0 0 no-repeat;
|
|
}
|
|
}
|
|
|
|
&.slideshow_active .slb_controls .slb_slideshow .slb_template_tag {
|
|
background: url('../images/ui_slideshow_pause.png') 0 0 no-repeat;
|
|
}
|
|
|
|
//Navigation
|
|
$ui_nav_pos: 45%;
|
|
%ui_nav {
|
|
@extend %hide-text;
|
|
position: absolute;
|
|
top: 20%;
|
|
height: 71%;
|
|
width: 45%;
|
|
min-width: $nav_width;
|
|
min-height: $nav_height;
|
|
background-repeat: no-repeat;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
//Content
|
|
.slb_content {
|
|
min-height: $nav_height + $ui_controls_height;
|
|
min-width: $nav_width * 2;
|
|
|
|
.slb_prev .slb_template_tag,
|
|
[dir="rtl"] & .slb_next .slb_template_tag {
|
|
left: 4px;
|
|
right: inherit;
|
|
background-image: url('../images/nav_prev.png');
|
|
background-position: left $ui_nav_pos;
|
|
}
|
|
|
|
.slb_next .slb_template_tag,
|
|
[dir="rtl"] & .slb_prev .slb_template_tag {
|
|
right: 4px;
|
|
left: inherit;
|
|
background-image: url('../images/nav_next.png');
|
|
background-position: right $ui_nav_pos;
|
|
}
|
|
|
|
.slb_prev, .slb_next {
|
|
.slb_template_tag {
|
|
@extend %ui_nav;
|
|
&:hover {
|
|
opacity: 1
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.slb_details {
|
|
line-height: 1.4em;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
.slb_data {
|
|
caption-side: bottom;
|
|
}
|
|
|
|
.slb_nav {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
//Title
|
|
$title-size: 23px;
|
|
|
|
.slb_data_title, .slb_group_status {
|
|
font-family: 'Yanone Kaffeesatz', arial, sans-serif;
|
|
font-size: $title-size;
|
|
margin-right: .2em;
|
|
display: inline-block;
|
|
[dir="rtl"] & {
|
|
margin-left: .2em;
|
|
margin-right: 0px;
|
|
}
|
|
}
|
|
|
|
.slb_group_status {
|
|
color: #777;
|
|
font-style: italic;
|
|
font-size: $title-size * .8;
|
|
}
|
|
|
|
.slb_data_desc {
|
|
display: block;
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
//Media
|
|
|
|
//Small screen
|
|
@media screen and (max-width: 480px) {
|
|
.slb_container {
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
}
|
|
.slb_controls {
|
|
top: 3px;
|
|
right: 3px;
|
|
}
|
|
|
|
%ui_nav {
|
|
top: 17%;
|
|
height: 79%;
|
|
}
|
|
}
|
|
}
|
|
} |