591 lines
11 KiB
CSS
591 lines
11 KiB
CSS
|
:root
|
||
|
|
{ --cloud-blue: #0080dd
|
||
|
|
; --border-blue: #0af
|
||
|
|
; --super-light-gray: #f8f8f8
|
||
|
|
; --cancel-red: #c00
|
||
|
|
; --confirm-green: #4b0
|
||
|
|
}
|
||
|
|
|
||
|
|
Thumbnail
|
||
|
|
{ background: url('placeholder.svg') 50% 50% no-repeat
|
||
|
|
; background-size: 100% 100%
|
||
|
|
; margin: 0 1rem 1rem 0
|
||
|
|
; width: 5rem
|
||
|
|
; height: 5rem
|
||
|
|
; position: relative
|
||
|
|
; display: block
|
||
|
|
; float: left
|
||
|
|
}
|
||
|
|
|
||
|
|
Thumbnail img
|
||
|
|
{ width: 5rem
|
||
|
|
; height: 5rem
|
||
|
|
; display: inline-block
|
||
|
|
; position: absolute
|
||
|
|
; border: 0.2rem solid lightgray
|
||
|
|
; background: lightgray
|
||
|
|
}
|
||
|
|
|
||
|
|
Thumbnail[data-nr='10'] img
|
||
|
|
{ border-color: var(--border-blue) }
|
||
|
|
|
||
|
|
Thumbnail ThumbnailCaption
|
||
|
|
{ display: inline-block
|
||
|
|
; position: absolute
|
||
|
|
; background: lightgray
|
||
|
|
; font-weight: bold
|
||
|
|
; padding: 0.15rem 0.3rem
|
||
|
|
; bottom: -0.4rem
|
||
|
|
; right: 0.35rem
|
||
|
|
; font-size: 0.5rem
|
||
|
|
; color: #555
|
||
|
|
; border-radius: 0.6rem
|
||
|
|
}
|
||
|
|
|
||
|
|
Thumbnail .button
|
||
|
|
{ display: none
|
||
|
|
; position: absolute
|
||
|
|
; font-size: 1.1rem
|
||
|
|
; padding: 0 0.35rem 0.2rem 0.35rem
|
||
|
|
; margin: 0.25rem
|
||
|
|
}
|
||
|
|
|
||
|
|
Thumbnail:hover .button
|
||
|
|
{ display: inline-block }
|
||
|
|
|
||
|
|
Thumbnail .button .fa
|
||
|
|
{ text-shadow: 1.5pt 1.5pt 1pt white
|
||
|
|
, -1.5pt -1.5pt 1pt white
|
||
|
|
, -1.5pt 1.5pt 1pt white
|
||
|
|
, 1.5pt -1.5pt 1pt white
|
||
|
|
}
|
||
|
|
|
||
|
|
Thumbnail .button .fa
|
||
|
|
, .button Icon
|
||
|
|
{ pointer-events: none }
|
||
|
|
|
||
|
|
Thumbnail .arrow
|
||
|
|
{
|
||
|
|
; margin: -1.5rem
|
||
|
|
; position: absolute
|
||
|
|
; top: 50%
|
||
|
|
; display: none
|
||
|
|
}
|
||
|
|
|
||
|
|
Upload
|
||
|
|
{ position: relative
|
||
|
|
}
|
||
|
|
|
||
|
|
Upload .fa
|
||
|
|
{ color: var(--cloud-blue)
|
||
|
|
}
|
||
|
|
|
||
|
|
Upload input[type='file']
|
||
|
|
{ top: 0
|
||
|
|
; left: 0
|
||
|
|
; position: absolute
|
||
|
|
; display: block
|
||
|
|
; width: 2.1rem
|
||
|
|
; height: 2.1rem
|
||
|
|
; overflow: hidden
|
||
|
|
; cursor: pointer
|
||
|
|
}
|
||
|
|
|
||
|
|
Copy .fa
|
||
|
|
{ color: var(--confirm-green)
|
||
|
|
; font-size: 0.66em
|
||
|
|
}
|
||
|
|
Remove .fa
|
||
|
|
{ color: var(--cancel-red) }
|
||
|
|
|
||
|
|
AbortRemoval .fa
|
||
|
|
{ color: #333 }
|
||
|
|
|
||
|
|
Move .fa
|
||
|
|
{ color: #333 }
|
||
|
|
|
||
|
|
Thumbnail[data-nr='10'] Move
|
||
|
|
{ display: none !important }
|
||
|
|
|
||
|
|
Zoom .fa
|
||
|
|
{ color: #333 }
|
||
|
|
|
||
|
|
Thumbnail.moving
|
||
|
|
{ position: absolute !important
|
||
|
|
; pointer-events: none
|
||
|
|
; z-index: 1
|
||
|
|
; margin-left: 0 !important
|
||
|
|
}
|
||
|
|
|
||
|
|
MovePlaceholder
|
||
|
|
{ border: 0.25rem solid white
|
||
|
|
; cursor: move
|
||
|
|
; background: lightgray
|
||
|
|
; margin-top: -1rem
|
||
|
|
; margin-left: 1rem
|
||
|
|
; height: 7rem
|
||
|
|
; width: 3rem
|
||
|
|
; float: right
|
||
|
|
; color: gray
|
||
|
|
; text-align: center
|
||
|
|
; line-height: 6.5rem
|
||
|
|
; font-size: 2rem
|
||
|
|
}
|
||
|
|
|
||
|
|
MovePlaceholder:hover
|
||
|
|
{ background: #8f0 }
|
||
|
|
|
||
|
|
.has_moving Thumbnail
|
||
|
|
{ margin-right: 3rem }
|
||
|
|
|
||
|
|
.has_moving Thumbnail MovePlaceholder
|
||
|
|
{ margin-right: -3rem }
|
||
|
|
|
||
|
|
.has_moving Thumbnail .button
|
||
|
|
{ display: none }
|
||
|
|
|
||
|
|
@keyframes flash_border_red
|
||
|
|
{ from { border-color: lightgray }
|
||
|
|
to { border-color: #c44 }
|
||
|
|
}
|
||
|
|
|
||
|
|
.failed
|
||
|
|
{ border-width: 0.25rem
|
||
|
|
; animation-duration: 0.3s
|
||
|
|
; animation-name: flash_border_red
|
||
|
|
; animation-direction: alternate
|
||
|
|
; animation-iteration-count: 2
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes flash_border_orange
|
||
|
|
{ from { border-color: lightgray }
|
||
|
|
to { border-color: #f52 }
|
||
|
|
}
|
||
|
|
|
||
|
|
.removed
|
||
|
|
{ animation-duration: 0.3s
|
||
|
|
; animation-name: flash_border_orange
|
||
|
|
; animation-direction: alternate
|
||
|
|
; animation-iteration-count: 2
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes flash_border_green
|
||
|
|
{ from { border-color: lightgray }
|
||
|
|
to { border-color: #8f0 }
|
||
|
|
}
|
||
|
|
|
||
|
|
.updated
|
||
|
|
{ animation-duration: 0.3s
|
||
|
|
; animation-name: flash_border_green
|
||
|
|
; animation-direction: alternate
|
||
|
|
; animation-iteration-count: 2
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes flash_background_green
|
||
|
|
{ from { background-color: lightgray }
|
||
|
|
to { background-color: #8f0 }
|
||
|
|
}
|
||
|
|
|
||
|
|
.changed_numeration Thumbnail:not([data-nr='10']) ThumbnailCaption
|
||
|
|
{ animation-duration: 0.3s
|
||
|
|
; animation-name: flash_background_green
|
||
|
|
; animation-direction: alternate
|
||
|
|
; animation-iteration-count: 2
|
||
|
|
}
|
||
|
|
|
||
|
|
ProductElement
|
||
|
|
{ display: inline-block
|
||
|
|
; width: 100%
|
||
|
|
; min-height: 7rem
|
||
|
|
; clear: both
|
||
|
|
; float: none
|
||
|
|
; padding: 0.5rem
|
||
|
|
}
|
||
|
|
|
||
|
|
ProductElement ProductDescription
|
||
|
|
{ float: left
|
||
|
|
; padding: 0 1rem
|
||
|
|
; width: 10rem
|
||
|
|
; display: block
|
||
|
|
}
|
||
|
|
|
||
|
|
ProductDescription ProductTitle
|
||
|
|
{ font-size: 0.6rem
|
||
|
|
; display: block
|
||
|
|
; text-overflow: hidden
|
||
|
|
; clear: both
|
||
|
|
}
|
||
|
|
|
||
|
|
ProductDescription ProductAmount
|
||
|
|
{ color: gray
|
||
|
|
; display: block
|
||
|
|
}
|
||
|
|
|
||
|
|
ThumbnailsRow
|
||
|
|
{ display: block
|
||
|
|
; margin-left: 10rem
|
||
|
|
; min-height: 5rem
|
||
|
|
}
|
||
|
|
|
||
|
|
ThumbnailsRow RowDescription
|
||
|
|
{ font-size: 0.75rem
|
||
|
|
; clear: both
|
||
|
|
; text-align: right
|
||
|
|
; display: inline-block
|
||
|
|
; min-width: 6rem
|
||
|
|
; margin-left: -7rem
|
||
|
|
; float: left
|
||
|
|
; position: relative
|
||
|
|
}
|
||
|
|
|
||
|
|
RowDescription > Remove
|
||
|
|
{ display: inline-block
|
||
|
|
; clear: none
|
||
|
|
; position: absolute
|
||
|
|
}
|
||
|
|
|
||
|
|
RowDescription > Copy
|
||
|
|
{ display: inline-block
|
||
|
|
; left: 2rem
|
||
|
|
; position: absolute
|
||
|
|
}
|
||
|
|
|
||
|
|
RowDescription RowTitle
|
||
|
|
{ width: 8rem
|
||
|
|
; display: block
|
||
|
|
; margin-left: -2rem
|
||
|
|
; clear: both
|
||
|
|
}
|
||
|
|
|
||
|
|
RowDescription input[type='checkbox']
|
||
|
|
{ display: inline-block
|
||
|
|
; width: auto
|
||
|
|
; float: right
|
||
|
|
}
|
||
|
|
|
||
|
|
AddPhotos
|
||
|
|
{ display: block
|
||
|
|
; position: relative
|
||
|
|
; clear: both
|
||
|
|
; width: 1.5rem
|
||
|
|
; height: 1.5rem
|
||
|
|
; float: right
|
||
|
|
}
|
||
|
|
|
||
|
|
AddPhotos .fa
|
||
|
|
{ color: gray }
|
||
|
|
|
||
|
|
AddPhotos:hover .fa
|
||
|
|
{ color: #0080dd }
|
||
|
|
|
||
|
|
|
||
|
|
Remove ConfirmationDialog
|
||
|
|
{ position: relative
|
||
|
|
; width: 3rem
|
||
|
|
; height: 1.45rem
|
||
|
|
; display: inline-block
|
||
|
|
; top: 0.15rem
|
||
|
|
; right: -1.85rem
|
||
|
|
; background: lightgray
|
||
|
|
; border-radius: 1rem
|
||
|
|
; z-index: 2
|
||
|
|
; box-shadow: 1.5pt 1.5pt 1pt red
|
||
|
|
, -1.5pt -1.5pt 1pt red
|
||
|
|
, -1.5pt 1.5pt 1pt red
|
||
|
|
, 1.5pt -1.5pt 1pt red
|
||
|
|
}
|
||
|
|
|
||
|
|
Remove ConfirmationDialog .button
|
||
|
|
{ margin: 0
|
||
|
|
; display: inline-block
|
||
|
|
; float: left
|
||
|
|
; height: 1.5rem
|
||
|
|
; width: 1.5rem
|
||
|
|
; font-size: 1rem
|
||
|
|
; line-height: 1.4rem
|
||
|
|
; position: relative
|
||
|
|
}
|
||
|
|
|
||
|
|
Remove ConfirmationDialog .button .fa
|
||
|
|
{ text-shadow: none }
|
||
|
|
|
||
|
|
Remove AbortRemoval:hover:after
|
||
|
|
{ content: ''
|
||
|
|
; display: inline-block
|
||
|
|
; position: absolute
|
||
|
|
; top: 0.1rem
|
||
|
|
; left: 0.1rem
|
||
|
|
; height: 1.25rem
|
||
|
|
; width: 1.25rem
|
||
|
|
; border-radius: 1rem
|
||
|
|
; background: white
|
||
|
|
; opacity: 0.5
|
||
|
|
}
|
||
|
|
|
||
|
|
Remove ConfirmRemoval:hover:after
|
||
|
|
{ display: inline-block
|
||
|
|
; position: absolute
|
||
|
|
; content: ''
|
||
|
|
; top: 0.1rem
|
||
|
|
; left: 0.1rem
|
||
|
|
; height: 1.25rem
|
||
|
|
; width: 1.25rem
|
||
|
|
; border-radius: 1rem
|
||
|
|
; background: red
|
||
|
|
; opacity: 0.25
|
||
|
|
}
|
||
|
|
|
||
|
|
.button
|
||
|
|
, select
|
||
|
|
{ cursor: pointer }
|
||
|
|
|
||
|
|
.top { top: 0 }
|
||
|
|
.left { left: 0 }
|
||
|
|
.right { right: 0 }
|
||
|
|
.bottom { bottom: 0 }
|
||
|
|
|
||
|
|
select
|
||
|
|
, button
|
||
|
|
, input:not([type='file'])
|
||
|
|
{ border: 0.1rem solid lightgray
|
||
|
|
; font-size: 0.75rem
|
||
|
|
; width: 6rem
|
||
|
|
; height: 1.5rem
|
||
|
|
; -webkit-outline: 0
|
||
|
|
; -moz-outline: 0
|
||
|
|
; outline: 0
|
||
|
|
; outline-width: 0
|
||
|
|
; display: block
|
||
|
|
; padding: 0.15rem
|
||
|
|
}
|
||
|
|
|
||
|
|
hr
|
||
|
|
{ border-top: 1rem solid var(--super-light-gray)
|
||
|
|
; padding-top: 1rem
|
||
|
|
; clear: both
|
||
|
|
; display: block
|
||
|
|
; width: 20rem
|
||
|
|
}
|
||
|
|
|
||
|
|
ProductTitle hr
|
||
|
|
{ border: 0
|
||
|
|
; padding: 0
|
||
|
|
; width: auto
|
||
|
|
}
|
||
|
|
|
||
|
|
NewVariant
|
||
|
|
{ float: left
|
||
|
|
; position: relative
|
||
|
|
; left: 9rem
|
||
|
|
; width: 13.95rem
|
||
|
|
}
|
||
|
|
|
||
|
|
NewVariant ConfirmationDialog input[name='variant_name']
|
||
|
|
{ width: 10.95rem /* visual bug: if set to 11 seems TOO wide */
|
||
|
|
; float: left
|
||
|
|
; margin-right: 0.75rem
|
||
|
|
}
|
||
|
|
|
||
|
|
NewVariant button
|
||
|
|
{ width: 1.5rem }
|
||
|
|
|
||
|
|
NewVariant ConfirmationDialog
|
||
|
|
{ position: relative }
|
||
|
|
|
||
|
|
NewVariant AbortNewVariant
|
||
|
|
{ float: right }
|
||
|
|
|
||
|
|
AbortNewVariant .fa
|
||
|
|
{ color: var(--cancel-red) }
|
||
|
|
|
||
|
|
ConfirmNewVariant
|
||
|
|
{ float: left }
|
||
|
|
|
||
|
|
ConfirmNewVariant .fa
|
||
|
|
{ color: var(--confirm-green) }
|
||
|
|
|
||
|
|
.hidden
|
||
|
|
, .zero
|
||
|
|
, ProductElement:not(.targeted) Upload
|
||
|
|
, ProductElement:not(.targeted) Move
|
||
|
|
, ProductElement:not(.targeted) Remove
|
||
|
|
, ProductElement:not(.targeted) > hr
|
||
|
|
, ProductElement:not(.targeted) ThumbnailsRow:not(:first-of-type)
|
||
|
|
, ProductElement:not(.targeted) Accounts
|
||
|
|
, ProductElement:not(.targeted) NewVariant
|
||
|
|
, ProductElement:not(.targeted) RowDescription
|
||
|
|
, Variants select
|
||
|
|
, Accounts .button
|
||
|
|
, Accounts AddPhotos
|
||
|
|
, ThumbnailsRow Thumbnail:first-of-type Remove
|
||
|
|
{ display: none !important
|
||
|
|
}
|
||
|
|
|
||
|
|
ProductElement.targeted
|
||
|
|
{ border-top: 2rem solid var(--super-light-gray)
|
||
|
|
; border-bottom: 2rem solid var(--super-light-gray)
|
||
|
|
; padding-top: 3rem
|
||
|
|
; padding-bottom: 3rem
|
||
|
|
; margin-bottom: 4rem
|
||
|
|
}
|
||
|
|
|
||
|
|
ProductElement.targeted:last-of-type
|
||
|
|
{ margin-bottom: -0.4rem }
|
||
|
|
|
||
|
|
ProductElement:first-of-type
|
||
|
|
{ margin-top: 0 }
|
||
|
|
|
||
|
|
form
|
||
|
|
{ display: inline-block
|
||
|
|
; left: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
Thumbnail.zoomed
|
||
|
|
{ position: fixed
|
||
|
|
; top: 2rem
|
||
|
|
; left: 2rem
|
||
|
|
; z-index: 1
|
||
|
|
; width: 800px
|
||
|
|
; height: 800px
|
||
|
|
}
|
||
|
|
|
||
|
|
Thumbnail.zoomed .button
|
||
|
|
{ display: none }
|
||
|
|
|
||
|
|
Thumbnail.zoomed Zoom
|
||
|
|
, Thumbnail.zoomed .arrow
|
||
|
|
{ display: inline-block !important
|
||
|
|
; z-index: 3
|
||
|
|
}
|
||
|
|
|
||
|
|
Thumbnail.zoomed img
|
||
|
|
{ width: 800px
|
||
|
|
; height: 800px
|
||
|
|
}
|
||
|
|
|
||
|
|
ProgressBarElement
|
||
|
|
{ display: block
|
||
|
|
; width: 0
|
||
|
|
; height: 2pt
|
||
|
|
; margin-top: -2pt
|
||
|
|
; background: var(--border-blue)
|
||
|
|
; opacity: 0.25
|
||
|
|
; pointer-events: none
|
||
|
|
; transition-duration: 0.25s
|
||
|
|
; transition-timing-function: ease-out
|
||
|
|
}
|
||
|
|
|
||
|
|
.transparent
|
||
|
|
{ filter: alpha(opacity=0)
|
||
|
|
; opacity: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
main
|
||
|
|
{ margin-top: 2rem }
|
||
|
|
|
||
|
|
nav
|
||
|
|
{ position: fixed
|
||
|
|
; z-index: 10
|
||
|
|
; display: inline-block
|
||
|
|
; top: 0
|
||
|
|
; left: 0
|
||
|
|
; height: 2rem
|
||
|
|
; min-width: 10rem
|
||
|
|
; width: 100%
|
||
|
|
; background: lightgray
|
||
|
|
; box-shadow: 0 2pt 5pt lightgray
|
||
|
|
}
|
||
|
|
|
||
|
|
nav form
|
||
|
|
{ display: block
|
||
|
|
; min-width: 10rem
|
||
|
|
; width: 100%
|
||
|
|
}
|
||
|
|
|
||
|
|
nav input
|
||
|
|
{ font-size: 1.3rem !important
|
||
|
|
; height: 2rem !important
|
||
|
|
; float: left
|
||
|
|
}
|
||
|
|
nav input[type='search']
|
||
|
|
{ display: block
|
||
|
|
; background: var(--super-light-gray) !important
|
||
|
|
; border-color: var(--super-light-gray) !important
|
||
|
|
; min-width: 10rem
|
||
|
|
; width: 50% !important
|
||
|
|
}
|
||
|
|
|
||
|
|
nav input[type='checkbox']
|
||
|
|
{ display: none }
|
||
|
|
|
||
|
|
nav input[type='checkbox'] + label
|
||
|
|
{ float: right
|
||
|
|
; background: var(--super-light-gray)
|
||
|
|
; border: 0
|
||
|
|
; min-width: 5rem
|
||
|
|
; display: block
|
||
|
|
; padding: 0.25rem 0.5rem
|
||
|
|
; height: 2rem
|
||
|
|
; float: left
|
||
|
|
}
|
||
|
|
nav input[type='checkbox']:checked + label
|
||
|
|
{ background: #ad0
|
||
|
|
}
|
||
|
|
|
||
|
|
nav input[type='submit']
|
||
|
|
{ background: var(--super-light-gray) !important
|
||
|
|
; width: 2rem
|
||
|
|
; text-align: center
|
||
|
|
; border: 0
|
||
|
|
; line-height: 1.3rem
|
||
|
|
; font-size: 1rem
|
||
|
|
}
|
||
|
|
|
||
|
|
nav span
|
||
|
|
{ float: left
|
||
|
|
; border: 0
|
||
|
|
; min-width: 3rem
|
||
|
|
; display: block
|
||
|
|
; padding: 0.25rem 0.5rem
|
||
|
|
; height: 2rem
|
||
|
|
; float: left
|
||
|
|
; text-align: center
|
||
|
|
}
|
||
|
|
|
||
|
|
nav button
|
||
|
|
{ display: block
|
||
|
|
; background: var(--super-light-gray) !important
|
||
|
|
; float: right
|
||
|
|
; width: 2rem
|
||
|
|
; height: 2rem
|
||
|
|
; text-align: center
|
||
|
|
; border: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
nav button .fa
|
||
|
|
{ font-size: 1rem
|
||
|
|
; line-height: 1.5rem
|
||
|
|
}
|
||
|
|
|
||
|
|
RowDescription Remove ConfirmationDialog
|
||
|
|
{ right: auto
|
||
|
|
; left: -0.45rem
|
||
|
|
}
|
||
|
|
|
||
|
|
RowDescription Remove ConfirmationDialog .button i
|
||
|
|
{ left: -0.35rem
|
||
|
|
; position: relative
|
||
|
|
}
|
||
|
|
|
||
|
|
Thumbnail WrongDimensions
|
||
|
|
{ background: var(--cancel-red)
|
||
|
|
; color: white
|
||
|
|
; position: absolute
|
||
|
|
; display: block
|
||
|
|
; z-index: 20
|
||
|
|
; text-align: center
|
||
|
|
; width: 5rem
|
||
|
|
; top: -1.15rem
|
||
|
|
; font-size: 0.75rem
|
||
|
|
}
|