481 lines
11 KiB
Sass
481 lines
11 KiB
Sass
@import _material-colors
|
|
|
|
[onclick]
|
|
cursor: pointer
|
|
|
|
.nodisplay
|
|
display: none
|
|
|
|
html
|
|
font-family: sans-serif
|
|
background: radial-gradient(circle, #7EB643, #619A35)
|
|
background-attachment: fixed
|
|
direction: ltr
|
|
|
|
$pageWidthConstraintValue: 900px
|
|
|
|
@media screen and (max-width: #{$pageWidthConstraintValue})
|
|
.pageWidthConstraint
|
|
max-width: 100%
|
|
|
|
@media screen and (min-width: #{$pageWidthConstraintValue})
|
|
.pageWidthConstraint
|
|
max-width: $pageWidthConstraintValue
|
|
$margin: calc( calc( 100% - #{$pageWidthConstraintValue} ) / 2 )
|
|
margin-left: $margin
|
|
margin-right: $margin
|
|
|
|
a, a:visited, a:active
|
|
border-bottom-style: dotted
|
|
|
|
a:hover
|
|
border-bottom-style: solid
|
|
|
|
*:link, a, a:hover, a:visited, a:active
|
|
color: material-color(light-green, 200)
|
|
border-bottom-color: material-color(light-green, 700)
|
|
border-bottom-width: 0.075em
|
|
text-decoration: none
|
|
|
|
html , body
|
|
margin: 0px
|
|
padding: 0px
|
|
|
|
h1
|
|
margin-top: 0px
|
|
margin-bottom: 0px
|
|
padding-top: 0.8em
|
|
padding-bottom: 0em
|
|
padding-left: 0.6em
|
|
padding-right: 0.6em
|
|
font-weight: 400
|
|
|
|
header
|
|
color: material-color(light-green, 50)
|
|
background: darken(material-color(light-green, 900), 10%)
|
|
|
|
.badge
|
|
white-space: nowrap
|
|
padding-left: 0.2em
|
|
padding-right: 0.2em
|
|
margin-left: 0.2em
|
|
margin-right: 0.2em
|
|
color: material-color(blue-grey, 100)
|
|
background-color: material-color(blue-grey, 700)
|
|
border-color: material-color(blue-grey, 600)
|
|
border-radius: 0.2em
|
|
border-width: 0.0925em
|
|
border-style: solid
|
|
|
|
section
|
|
padding-top: 0.25em
|
|
padding-left: 0.25em
|
|
padding-right: 0.25em
|
|
padding-bottom: 1.5em
|
|
|
|
.card
|
|
overflow: hidden
|
|
color: material-color(blue-grey, 100)
|
|
background-color: material-color(blue-grey, 900)
|
|
border-color: material-color(blue-grey, 800)
|
|
border-radius: 0.5em
|
|
border-width: 0.1em
|
|
border-style: solid
|
|
|
|
.card:not(:first-child)
|
|
margin-top: 0.75em
|
|
|
|
.card:not(:last-child)
|
|
margin-bottom: 0.75em
|
|
|
|
.cardBody
|
|
padding: 0.5em
|
|
|
|
.card .cardPic
|
|
width: 100%
|
|
|
|
.card.minicard
|
|
width: 30%
|
|
padding-bottom: 0.3em
|
|
|
|
.card.minicard>.cardBody
|
|
@extend .center
|
|
@extend .noticeablyLargerText
|
|
margin-left: 0.2em
|
|
margin-right: 0.2em
|
|
|
|
.minicardHolder
|
|
display: flex
|
|
flex-direction: row
|
|
flex-wrap: wrap
|
|
justify-content: space-evenly
|
|
align-items: baseline
|
|
|
|
.cardBottom.minicardHolder
|
|
background: material-color(blue-grey, 700)
|
|
padding-top: 0.8em
|
|
padding-bottom: 0.8em
|
|
|
|
footer
|
|
padding-top: 0.45em
|
|
padding-bottom: 1.5em
|
|
padding-left: 0.5em
|
|
padding-right: 0.5em
|
|
color: material-color(light-green, 50)
|
|
background: darken(material-color(light-green, 900), 12%)
|
|
|
|
.justify
|
|
text-align: justify
|
|
text-justify: inter-word
|
|
|
|
.left
|
|
text-align: left
|
|
|
|
.right
|
|
text-align: right
|
|
|
|
.center
|
|
text-align: center
|
|
|
|
.noticeablyLargerText
|
|
font-size: 125%
|
|
|
|
dl.cardlisting
|
|
margin-top: 0px
|
|
margin-bottom: 0px
|
|
display: flex
|
|
flex-wrap: wrap
|
|
|
|
$dtdivision: 150px
|
|
$dddivision: calc( 100% - 150px )
|
|
|
|
dl.cardlisting dt, dl.cardlisting dd
|
|
align-items: baseline
|
|
margin: 0px
|
|
|
|
dl.cardlisting dt
|
|
flex: 0 0 $dtdivision
|
|
max-width: $dtdivision
|
|
|
|
dl.cardlisting dd
|
|
flex: 0 0 $dddivision
|
|
max-width: $dddivision
|
|
|
|
$dtddspacing: 0.35em
|
|
|
|
@mixin notlastdl
|
|
border-bottom-color: darken(material-color(blue-grey, 900), 10%)
|
|
border-bottom-style: dotted
|
|
border-bottom-width: 0.0975em
|
|
padding-bottom: $dtddspacing
|
|
|
|
@mixin notfirstdl
|
|
padding-top: $dtddspacing
|
|
|
|
#main:not(.noSidebars)
|
|
& dl.cardlisting dt:not(:last-of-type), & dl.cardlisting dd:not(:last-of-type)
|
|
@include notlastdl
|
|
|
|
#main.noSidebars
|
|
& dl.cardlisting dt:not(.cardTags), & dl.cardlisting dd:not(.cardTags)
|
|
@include notlastdl
|
|
|
|
dl.cardlisting dt:not(:first-of-type), dl.cardlisting dd:not(:first-of-type)
|
|
@include notfirstdl
|
|
|
|
.markdown p
|
|
margin-top: 0px
|
|
|
|
.markdown p:not(:last-of-type)
|
|
margin-bottom: 1ex
|
|
|
|
.markdown p:last-of-type
|
|
margin-bottom: 0px
|
|
|
|
.extraLineSpacing
|
|
line-height: 2
|
|
|
|
.fullscreenOverlay
|
|
position: fixed
|
|
background: #000000CC
|
|
z-index: 95
|
|
top: 0
|
|
left: 0
|
|
width: 100%
|
|
height: 100%
|
|
& .closeButton
|
|
position: fixed
|
|
top: 0
|
|
right: 0
|
|
z-index: 99
|
|
padding: 1em
|
|
background: material-color(red, 500)
|
|
color: material-color(blue, 50)
|
|
border-bottom-left-radius: 0.5em
|
|
|
|
#galleryImage
|
|
position: fixed
|
|
z-index: 96
|
|
width: 100%
|
|
height: 100%
|
|
background-position: center
|
|
background-repeat: no-repeat
|
|
background-size: contain
|
|
|
|
#imageQualities
|
|
z-index: 97
|
|
position: fixed
|
|
overflow: hidden
|
|
background: #00000099
|
|
color: material-color(white)
|
|
border-bottom-right-radius: 0.5em
|
|
& .quality:not(:first-of-type)
|
|
border-top-width: 1px
|
|
border-top-color: #FFFFFF44
|
|
border-top-style: solid
|
|
& .quality
|
|
& *
|
|
padding: 0.25em
|
|
& i.fa
|
|
border-right-width: 1px
|
|
border-right-color: #FFFFFF44
|
|
border-right-style: solid
|
|
|
|
#imageQualities>div>a
|
|
color: material-color(white)
|
|
border-bottom-style: none
|
|
|
|
section h3
|
|
margin-top: 0px
|
|
margin-bottom: 0.5em
|
|
|
|
#downloadPane a
|
|
line-height: 2
|
|
margin-left: 0.5em
|
|
margin-right: 0.5em
|
|
|
|
@media screen and (max-width: calc( #{$pageWidthConstraintValue} + 24em ))
|
|
#sideCard, #sideCardRight, #sideCardShadow, #sideCardRightShadow
|
|
display: none
|
|
|
|
#main:not(.noSidebars)
|
|
& .cardNotes, & .cardLink
|
|
display: none
|
|
|
|
$space_left_for_sidebar: calc( calc( calc( calc( 100vw - #{$pageWidthConstraintValue} ) / 2 ) - 1em ) - 2em )
|
|
$space_left_for_sidebar_with_padding: calc( #{$space_left_for_sidebar} - 1em )
|
|
|
|
#sideCardShadow
|
|
position: fixed
|
|
width: 1em
|
|
height: 100vh
|
|
left: $space_left_for_sidebar
|
|
top: 0
|
|
background: linear-gradient(to right, #0F1F09, transparent)
|
|
z-index: 10
|
|
#sideCard
|
|
position: fixed
|
|
background: #0F1F09
|
|
border-right: solid 0.085em #4C6D28
|
|
z-index: 9
|
|
top: 0
|
|
left: 0
|
|
height: calc( 100vh - 1em )
|
|
width: $space_left_for_sidebar_with_padding
|
|
color: #C7DB60
|
|
padding: 0.5em
|
|
overflow-y: scroll
|
|
direction: rtl
|
|
&>*
|
|
direction: ltr
|
|
&>h2
|
|
margin-bottom: 0px
|
|
&>.controlButtons
|
|
padding-top: 0.5em
|
|
&>a
|
|
display: block
|
|
border: 0.085em solid #C7DB5E
|
|
border-radius: 0.2em
|
|
padding: 0.5em
|
|
margin: 0.5em
|
|
&>a.selected
|
|
background-color: #4C6D28
|
|
&>.fastNavigation
|
|
width: 100%
|
|
display: flex
|
|
flex-wrap: wrap
|
|
justify-content: space-evenly
|
|
align-content: space-evenly
|
|
&>.fastNavigationCard
|
|
background-position: center
|
|
background-size: cover
|
|
width: 3em
|
|
height: 3em
|
|
border-radius: 0.2em
|
|
border-color: #7DB643
|
|
border-style: solid
|
|
cursor: pointer
|
|
&>.fastNavigationCard:not(.displaying)
|
|
border-width: 0em
|
|
margin: 0.4em
|
|
&>.fastNavigationCard.displaying
|
|
border-width: 0.2em
|
|
margin: 0.2em
|
|
|
|
#sideCardRightShadow
|
|
position: fixed
|
|
width: 1em
|
|
height: 100vh
|
|
right: $space_left_for_sidebar
|
|
top: 0
|
|
background: linear-gradient(to left, #0F1F09, transparent)
|
|
z-index: 10
|
|
#sideCardRight
|
|
position: fixed
|
|
background: #0F1F09
|
|
border-left: solid 0.085em #4C6D28
|
|
z-index: 9
|
|
top: 0
|
|
right: 0
|
|
height: calc( 100vh - 1em )
|
|
width: $space_left_for_sidebar_with_padding
|
|
color: #C7DB60
|
|
padding: 0.5em
|
|
overflow-y: scroll
|
|
&>.rightCard:not(:first-child):not(.collapsed)
|
|
margin-top: 0.4em
|
|
&>.rightCard:not(:last-child):not(.collapsed)
|
|
margin-bottom: 0.4em
|
|
&>.rightCard.collapsed
|
|
height: 0px
|
|
transform: scaleY(0)
|
|
margin-top: 0px
|
|
margin-bottom: 0px
|
|
padding-top: 0px
|
|
padding-bottom: 0px
|
|
&>.rightCard
|
|
transition: transform 50ms ease-in-out, margin 50ms ease-in-out, padding 50ms ease-in-out, height 50ms ease-in-out
|
|
background-color: #204113
|
|
border-radius: 0.4em
|
|
padding: 0.3em
|
|
overflow: hidden
|
|
height: auto
|
|
&>.title
|
|
&>img.detailPic
|
|
overflow: hidden
|
|
border-radius: 0.2em
|
|
width: 2em
|
|
height: 2em
|
|
object-fit: cover
|
|
object-position: 50% 50%
|
|
cursor: pointer
|
|
&>.titleText
|
|
display: inline-block
|
|
max-width: calc( #{$space_left_for_sidebar_with_padding} - 2em )
|
|
font-size: 1.25rem
|
|
white-space: nowrap
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
cursor: pointer
|
|
&>dl
|
|
display: flex
|
|
flex-wrap: wrap
|
|
margin-top: 0.5em
|
|
margin-bottom: 0.5em
|
|
&>dt
|
|
display: inline-block
|
|
width: 1.5em
|
|
margin-left: 0px
|
|
text-align: center
|
|
&>dt:not(:last-of-type), &>dd:not(:last-of-type)
|
|
margin-bottom: 1em
|
|
&>dd
|
|
display: inline-block
|
|
width: calc( 100% - 2em )
|
|
margin-left: 0px
|
|
&>.link
|
|
font-size: 0.6rem
|
|
&>.notes
|
|
font-size: 80%
|
|
|
|
#availableFilters
|
|
width: 100%
|
|
height: 100%
|
|
display: flex
|
|
flex-wrap: wrap
|
|
flex-direction: column
|
|
justify-content: space-around
|
|
align-content: space-around
|
|
|
|
&>hr
|
|
width: 30em
|
|
border: 0.085px solid #7DB643
|
|
|
|
&>.taggroup
|
|
max-width: 50em
|
|
max-height: 50em
|
|
display: flex
|
|
flex-wrap: wrap
|
|
flex-direction: row
|
|
justify-content: space-around
|
|
align-content: space-around
|
|
|
|
&>.badge
|
|
margin: 0.3em
|
|
|
|
@mixin rotation
|
|
transform-origin: center
|
|
|
|
.rotate270
|
|
transform: rotate(270deg)
|
|
@include rotation
|
|
|
|
.rotate180
|
|
transform: rotate(180deg)
|
|
@include rotation
|
|
|
|
.rotate90
|
|
transform: rotate(90deg)
|
|
@include rotation
|
|
|
|
img.icon32
|
|
$sz: 32px
|
|
max-width: $sz
|
|
max-height: $sz
|
|
|
|
img.icon48
|
|
$sz: 48px
|
|
max-width: $sz
|
|
max-height: $sz
|
|
|
|
img.icon64
|
|
$sz: 64px
|
|
max-width: $sz
|
|
max-height: $sz
|
|
|
|
#colorAccuracy
|
|
& table
|
|
table-layout: fixed
|
|
width: 100%
|
|
& thead
|
|
background: darken(material-color(blue-grey, 900), 10%)
|
|
& tr:first-of-type
|
|
height: 6em
|
|
& tbody
|
|
& tr
|
|
background: material-color(blue-grey, 800)
|
|
& tr:hover
|
|
background: material-color(blue-grey, 700)
|
|
& td
|
|
@extend .center
|
|
font-size: 70%
|
|
& .featureMissing
|
|
color: material-color(red, 50)
|
|
background: darken(material-color(deep-orange, 900), 13%)
|
|
|
|
.whiteText
|
|
color: material-color(white)
|
|
|
|
.blackText
|
|
color: material-color(black)
|