forked from OpenNeo/impress
363 lines
8.2 KiB
Sass
363 lines
8.2 KiB
Sass
|
@import ../shared/jquery.jgrowl
|
||
|
|
|
||
|
|
$object-padding: 6px
|
||
|
|
$nc-icon-size: 16px
|
||
|
|
|
||
|
|
$preview-dimension: 400px
|
||
|
|
$sidebar-margin: 20px
|
||
|
|
$sidebar-width: 400px
|
||
|
|
$sidebar-unit-horizontal-padding: 24px
|
||
|
|
$sidebar-unit-inner-width: $sidebar-width - $sidebar-unit-horizontal-padding * 2
|
||
|
|
|
||
|
|
body.outfits-edit
|
||
|
|
#preview-toolbar
|
||
|
|
margin-bottom: .5em
|
||
|
|
text-align: left
|
||
|
|
form
|
||
|
|
display: inline
|
||
|
|
margin-right: 2em
|
||
|
|
#pet-info form
|
||
|
|
display: inline
|
||
|
|
#pet-state-form
|
||
|
|
ul
|
||
|
|
list-style: none
|
||
|
|
&, li
|
||
|
|
display: inline
|
||
|
|
input
|
||
|
|
display: none
|
||
|
|
label
|
||
|
|
+awesome-button
|
||
|
|
margin: 0 .25em
|
||
|
|
li.selected label
|
||
|
|
+awesome-button-color($marked_button_color)
|
||
|
|
#sharing
|
||
|
|
float: right
|
||
|
|
position: relative
|
||
|
|
#short-url-response
|
||
|
|
font-size: 87.5%
|
||
|
|
display: none
|
||
|
|
position: absolute
|
||
|
|
right: 0
|
||
|
|
top: -2em
|
||
|
|
width: 20em
|
||
|
|
#share-button-wrapper
|
||
|
|
display: inline
|
||
|
|
#share-button
|
||
|
|
img
|
||
|
|
margin:
|
||
|
|
bottom: -0.25em
|
||
|
|
right: .25em
|
||
|
|
height: 16px
|
||
|
|
width: 16px
|
||
|
|
&:active
|
||
|
|
top: 1px
|
||
|
|
#preview
|
||
|
|
clear: both
|
||
|
|
#preview-swf
|
||
|
|
float: left
|
||
|
|
height: $preview-dimension
|
||
|
|
margin-bottom: 1em
|
||
|
|
position: relative
|
||
|
|
width: $preview-dimension
|
||
|
|
#preview-swf-overlay
|
||
|
|
+opacity(0)
|
||
|
|
background: black
|
||
|
|
height: 100%
|
||
|
|
left: 0
|
||
|
|
position: absolute
|
||
|
|
top: 0
|
||
|
|
width: 100%
|
||
|
|
#preview-sidebar
|
||
|
|
float: left
|
||
|
|
height: $preview-dimension
|
||
|
|
margin-left: $sidebar-margin
|
||
|
|
margin-bottom: 1em
|
||
|
|
width: $container_width - $preview-dimension - $sidebar-margin
|
||
|
|
&.viewing-outfits
|
||
|
|
#preview-closet
|
||
|
|
display: none
|
||
|
|
#preview-outfits
|
||
|
|
display: block
|
||
|
|
#preview-closet
|
||
|
|
h2
|
||
|
|
margin: 0
|
||
|
|
.object
|
||
|
|
background: $module-bg-color
|
||
|
|
img
|
||
|
|
+opacity(0.5)
|
||
|
|
&.worn
|
||
|
|
background: transparent
|
||
|
|
img
|
||
|
|
+opacity(1)
|
||
|
|
&.no-assets
|
||
|
|
background: $error-bg-color
|
||
|
|
color: $error-color
|
||
|
|
padding-bottom: 1.25em
|
||
|
|
.no-assets-message
|
||
|
|
display: block
|
||
|
|
.no-assets-message
|
||
|
|
background: $error-bg-color - #080808
|
||
|
|
bottom: 0
|
||
|
|
color: $error-color - #080808
|
||
|
|
cursor: pointer
|
||
|
|
display: none
|
||
|
|
font-size: 75%
|
||
|
|
left: 0
|
||
|
|
position: absolute
|
||
|
|
width: 100%
|
||
|
|
#no-assets-full-message
|
||
|
|
+border-radius(5px)
|
||
|
|
background: $error-bg-color + #111111
|
||
|
|
border: 1px solid $error-border-color + #111111
|
||
|
|
color: $error-color + #111111
|
||
|
|
font-size: 75%
|
||
|
|
left: -9999px
|
||
|
|
padding: .25em
|
||
|
|
position: absolute
|
||
|
|
top: -9999px
|
||
|
|
width: 30em
|
||
|
|
#preview-search-form
|
||
|
|
clear: both
|
||
|
|
text-align: left
|
||
|
|
h2
|
||
|
|
+inline-block
|
||
|
|
margin: 0 1em 0 0
|
||
|
|
input
|
||
|
|
+inline-block
|
||
|
|
#preview-search-form-pagination
|
||
|
|
+inline-block
|
||
|
|
margin-left: 2em
|
||
|
|
a, span
|
||
|
|
margin: 0 .25em
|
||
|
|
.current
|
||
|
|
font-weight: bold
|
||
|
|
#preview-search-form-clear
|
||
|
|
display: none
|
||
|
|
font-size: 87.5%
|
||
|
|
margin-left: 2em
|
||
|
|
#preview-search-form-loading
|
||
|
|
display: none
|
||
|
|
font:
|
||
|
|
size: 75%
|
||
|
|
style: italic
|
||
|
|
margin-left: 2em
|
||
|
|
#preview-search-form-no-results
|
||
|
|
display: none
|
||
|
|
#preview-search-form-help
|
||
|
|
font-size: 87.5%
|
||
|
|
margin-left: 2em
|
||
|
|
.search-helper
|
||
|
|
font-family: inherit
|
||
|
|
.possible-error
|
||
|
|
@extend .error
|
||
|
|
display: none
|
||
|
|
#fullscreen-copyright
|
||
|
|
display: none
|
||
|
|
&.fullscreen
|
||
|
|
$fullscreen-search-border: 1px 1px 0
|
||
|
|
height: 100%
|
||
|
|
#container
|
||
|
|
+box-sizing(border-box)
|
||
|
|
height: 100%
|
||
|
|
margin: 0 auto
|
||
|
|
min-width: 800px
|
||
|
|
padding-top: 2.5em
|
||
|
|
position: relative
|
||
|
|
width: 80%
|
||
|
|
h1
|
||
|
|
display: none
|
||
|
|
#short-url-response
|
||
|
|
position: static
|
||
|
|
#preview
|
||
|
|
width: 100%
|
||
|
|
#preview-sidebar
|
||
|
|
+border-radius(10px)
|
||
|
|
border: 1px solid $soft-border-color
|
||
|
|
float: right
|
||
|
|
height: 100%
|
||
|
|
margin: 0
|
||
|
|
overflow: auto
|
||
|
|
position: relative
|
||
|
|
width: $sidebar-width
|
||
|
|
> div
|
||
|
|
padding:
|
||
|
|
left: $sidebar-unit-horizontal-padding
|
||
|
|
right: $sidebar-unit-horizontal-padding
|
||
|
|
#preview-search-form
|
||
|
|
bottom: 1em
|
||
|
|
left: 0
|
||
|
|
overflow: auto
|
||
|
|
padding: .5em 1em
|
||
|
|
position: absolute
|
||
|
|
width: 100%
|
||
|
|
#preview-search-form-help
|
||
|
|
div
|
||
|
|
+inline-block
|
||
|
|
width: 48%
|
||
|
|
#footer
|
||
|
|
bottom: 0
|
||
|
|
left: 0
|
||
|
|
position: absolute
|
||
|
|
width: 100%
|
||
|
|
ul, p, li
|
||
|
|
display: inline
|
||
|
|
ul
|
||
|
|
margin-right: 2em
|
||
|
|
|
||
|
|
.object
|
||
|
|
padding: $object-padding
|
||
|
|
position: relative
|
||
|
|
ul
|
||
|
|
display: none
|
||
|
|
left: 0
|
||
|
|
list-style: none
|
||
|
|
position: absolute
|
||
|
|
top: 0
|
||
|
|
li
|
||
|
|
margin-bottom: .25em
|
||
|
|
a
|
||
|
|
+awesome-button
|
||
|
|
+awesome-button-color(#aaaaaa)
|
||
|
|
+opacity(0.9)
|
||
|
|
font-size: 80%
|
||
|
|
&:hover
|
||
|
|
ul, .object-info
|
||
|
|
display: block
|
||
|
|
|
||
|
|
// the difference between the horizontal edge of the object element and the
|
||
|
|
// image edge
|
||
|
|
$object-img-diff: ($object-width - $object-img-size) / 2 + $object-padding
|
||
|
|
|
||
|
|
.nc-icon
|
||
|
|
background: url(/assets/images/nc.png) no-repeat
|
||
|
|
height: $nc-icon-size
|
||
|
|
position: absolute
|
||
|
|
right: $object-img-diff
|
||
|
|
text-indent: -9999px
|
||
|
|
top: $object-img-size - $nc-icon-size
|
||
|
|
width: $nc-icon-size
|
||
|
|
&:hover
|
||
|
|
+opacity(0.5)
|
||
|
|
|
||
|
|
.object-info
|
||
|
|
+border-radius(12px)
|
||
|
|
+opacity(0.75)
|
||
|
|
background: #aaa
|
||
|
|
color: #fff
|
||
|
|
display: none
|
||
|
|
height: 16px
|
||
|
|
position: absolute
|
||
|
|
right: $object-img-diff / 2
|
||
|
|
top: 0
|
||
|
|
width: 16px
|
||
|
|
span
|
||
|
|
font:
|
||
|
|
family: $text-font
|
||
|
|
weight: bold
|
||
|
|
position: relative
|
||
|
|
top: -2px
|
||
|
|
&:hover
|
||
|
|
+opacity(1)
|
||
|
|
|
||
|
|
$outfit-thumbnail-size: 50px
|
||
|
|
$outfit-thumbnail-original-size: 100px
|
||
|
|
$outfit-thumbnail-margin: 12px
|
||
|
|
$outfit-header-padding: 24px
|
||
|
|
$outfit-content-width: $sidebar-unit-inner-width - $outfit-thumbnail-size - $outfit-thumbnail-margin - 32px
|
||
|
|
$outfit-content-inner-width: $outfit-content-width - $outfit-header-padding
|
||
|
|
|
||
|
|
#preview-outfits
|
||
|
|
display: none
|
||
|
|
text-align: left
|
||
|
|
h2
|
||
|
|
margin-bottom: .25em
|
||
|
|
h3
|
||
|
|
margin-bottom: .5em
|
||
|
|
> ul
|
||
|
|
display: block
|
||
|
|
font-family: $main-font
|
||
|
|
list-style: none
|
||
|
|
margin-bottom: 1em
|
||
|
|
> li
|
||
|
|
+clearfix
|
||
|
|
font-size: 75%
|
||
|
|
margin-bottom: .5em
|
||
|
|
.outfit-thumbnail
|
||
|
|
float: left
|
||
|
|
height: $outfit-thumbnail-size
|
||
|
|
margin-right: $outfit-thumbnail-margin
|
||
|
|
overflow: hidden
|
||
|
|
position: relative
|
||
|
|
width: $outfit-thumbnail-size
|
||
|
|
img
|
||
|
|
height: $outfit-thumbnail-original-size
|
||
|
|
left: -$outfit-thumbnail-original-size / 4
|
||
|
|
position: absolute
|
||
|
|
top: -$outfit-thumbnail-original-size / 4
|
||
|
|
width: $outfit-thumbnail-original-size
|
||
|
|
> div
|
||
|
|
float: left
|
||
|
|
width: $outfit-content-width
|
||
|
|
button
|
||
|
|
+reset-awesome-button
|
||
|
|
+opacity(.5)
|
||
|
|
font-size: 150%
|
||
|
|
float: right
|
||
|
|
line-height: 1
|
||
|
|
margin-top: -.125em
|
||
|
|
padding: .125em .25em
|
||
|
|
&:hover
|
||
|
|
+opacity(1)
|
||
|
|
background: $module-bg-color
|
||
|
|
header
|
||
|
|
display: block
|
||
|
|
padding-left: $outfit-header-padding
|
||
|
|
.outfit-star
|
||
|
|
background:
|
||
|
|
image: url(/images/unstarred.png)
|
||
|
|
position: left top
|
||
|
|
repeat: no-repeat
|
||
|
|
bottom: -2px
|
||
|
|
/* margin-bottom doesn't work here
|
||
|
|
cursor: pointer
|
||
|
|
display: block
|
||
|
|
float: left
|
||
|
|
height: 16px
|
||
|
|
margin-left: -24px
|
||
|
|
/* makes it not take up inline space
|
||
|
|
position: relative
|
||
|
|
width: 16px
|
||
|
|
h4
|
||
|
|
cursor: pointer
|
||
|
|
font-size: 150%
|
||
|
|
&:hover
|
||
|
|
text-decoration: underline
|
||
|
|
input
|
||
|
|
+opacity(.5)
|
||
|
|
border-color: $background-color
|
||
|
|
width: $outfit-content-inner-width
|
||
|
|
&:hover
|
||
|
|
+opacity(1)
|
||
|
|
border-color: $input-border-color
|
||
|
|
.outfit-delete-confirmation
|
||
|
|
display: none
|
||
|
|
span
|
||
|
|
color: red
|
||
|
|
a
|
||
|
|
margin: 0 .25em
|
||
|
|
&.confirming-deletion
|
||
|
|
.outfit-delete
|
||
|
|
visibility: hidden
|
||
|
|
.outfit-url
|
||
|
|
display: none
|
||
|
|
.outfit-delete-confirmation
|
||
|
|
display: block
|
||
|
|
&.starred
|
||
|
|
.outfit-star
|
||
|
|
background-image: url(/images/star.png)
|
||
|
|
|
||
|
|
.preview-sidebar-nav
|
||
|
|
float: right
|
||
|
|
font-size: 85%
|
||
|
|
margin-top: 1em
|