forked from OpenNeo/impress
Matchu
15002d19db
I wasn't sure what we were actually using it for, turns out it was mostly polyfills for CSS features that are very standard now! I didn't audit these changes very carefully tbqh because they seemed pretty simple? Fingers crossed!
215 lines
3.8 KiB
Sass
215 lines
3.8 KiB
Sass
=grayscale
|
|
// http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html
|
|
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale")
|
|
filter: gray
|
|
|
|
// Cheap hack: https://github.com/chriseppstein/compass/issues/811
|
|
$percent: 100%
|
|
-webkit-filter: unquote('grayscale(#{$percent})')
|
|
|
|
body.items-show
|
|
#item-header
|
|
border-bottom: 1px solid $module-border-color
|
|
display: block
|
|
margin-bottom: 1em
|
|
padding: 1em 0
|
|
|
|
div, img
|
|
+inline-block
|
|
|
|
div
|
|
text-align: left
|
|
|
|
a
|
|
font-size: 75%
|
|
margin-left: 1em
|
|
|
|
#item-thumbnail
|
|
border: 1px solid $module-border-color
|
|
height: 80px
|
|
margin-right: .5em
|
|
width: 80px
|
|
|
|
#item-name
|
|
margin-bottom: 0
|
|
|
|
#item-preview
|
|
+clearfix
|
|
|
|
> div, > ul
|
|
float: left
|
|
|
|
#item-preview-species
|
|
display: block
|
|
width: 400px
|
|
|
|
.pet-type, img
|
|
height: 50px
|
|
width: 50px
|
|
|
|
.pet-type
|
|
+inline-block
|
|
&.current
|
|
background: $module-bg-color
|
|
outline: 1px solid $module-border-color
|
|
&.deactivated
|
|
img
|
|
+grayscale
|
|
+opacity(0.5)
|
|
&.current
|
|
background: transparent
|
|
outline-color: $error_border_color
|
|
|
|
ul, li
|
|
display: inline
|
|
|
|
#item-preview-error
|
|
display: none
|
|
padding: 20px 10px 0
|
|
width: 380px
|
|
|
|
#item-preview-swf
|
|
height: 300px
|
|
overflow: hidden
|
|
width: 300px
|
|
|
|
#item-zones
|
|
font:
|
|
family: $text-font
|
|
size: 85%
|
|
margin-bottom: 1em
|
|
|
|
p
|
|
display: inline
|
|
|
|
&:first-child
|
|
margin-right: 1em
|
|
|
|
#trade-hangers
|
|
font-size: 85%
|
|
margin-bottom: 3em
|
|
text-align: left
|
|
|
|
p
|
|
position: relative
|
|
|
|
&:first-child
|
|
margin-bottom: .5em
|
|
|
|
&.overflows
|
|
.toggle
|
|
display: block
|
|
|
|
&.showing-more
|
|
.toggle
|
|
.less
|
|
display: block
|
|
|
|
.more
|
|
display: none
|
|
|
|
.toggle
|
|
background: white
|
|
bottom: 0
|
|
cursor: pointer
|
|
display: none
|
|
font-family: $main-font
|
|
padding: 0 1em
|
|
position: absolute
|
|
right: 0
|
|
|
|
&:hover
|
|
text-decoration: underline
|
|
|
|
.less
|
|
display: none
|
|
|
|
#item-contributors
|
|
+subtle-banner
|
|
clear: both
|
|
margin:
|
|
bottom: 0
|
|
top: 2em
|
|
|
|
header
|
|
display: inline
|
|
font-weight: bold
|
|
margin-right: .25em
|
|
|
|
footer
|
|
display: inline
|
|
|
|
ul
|
|
li::after
|
|
content: ", "
|
|
|
|
li:last-child::after
|
|
content: "."
|
|
|
|
#item-preview-header
|
|
clear: both
|
|
|
|
h3, a
|
|
+inline-block
|
|
a
|
|
font-size: 85%
|
|
margin: -1.5em 0 0 1em
|
|
|
|
.nc-icon
|
|
height: 16px
|
|
width: 16px
|
|
|
|
#closet-hangers
|
|
border: 1px solid $module-border-color
|
|
float: right
|
|
font-size: 85%
|
|
margin-bottom: 3em
|
|
margin-left: 1em
|
|
padding: 1em
|
|
width: 30em
|
|
|
|
// compete with #trade-hangers
|
|
position: relative
|
|
z-index: 2
|
|
|
|
h3
|
|
font-size: 150%
|
|
font-weight: bold
|
|
margin-bottom: .25em
|
|
|
|
#closet-hangers-ownership-groups
|
|
+clearfix
|
|
margin-bottom: .5em
|
|
|
|
div
|
|
float: left
|
|
margin: 0 5%
|
|
text-align: left
|
|
width: 40%
|
|
|
|
li
|
|
list-style: none
|
|
word-wrap: break-word
|
|
|
|
label.unlisted
|
|
font-style: italic
|
|
|
|
form
|
|
padding: .5em 0
|
|
|
|
select
|
|
width: 9em
|
|
|
|
input[type=number]
|
|
margin-right: .5em
|
|
width: 3em
|
|
|
|
&.js
|
|
#trade-hangers
|
|
p
|
|
max-height: 3em
|
|
overflow: hidden
|
|
|
|
&.showing-more
|
|
max-height: none
|
|
|