diff options
Diffstat (limited to 'apps/system/style/cards_view')
-rw-r--r-- | apps/system/style/cards_view/cards_view.css | 115 | ||||
-rw-r--r-- | apps/system/style/cards_view/close.png | bin | 0 -> 1046 bytes |
2 files changed, 115 insertions, 0 deletions
diff --git a/apps/system/style/cards_view/cards_view.css b/apps/system/style/cards_view/cards_view.css new file mode 100644 index 0000000..fe90264 --- /dev/null +++ b/apps/system/style/cards_view/cards_view.css @@ -0,0 +1,115 @@ +#cards-view { + visibility: hidden; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + transition: opacity 0.5s ease, visibility 0.5s ease; + opacity: 0; + -moz-user-select: none; + overflow: scroll; + background-color: rgba(0, 0, 0, 0.8); +} + +#cards-view.active { + visibility: inherit; + opacity: 1; +} + +#cards-view ul { + list-style: none; + margin: 0; + padding: 0; + width: 100%; + height: 100%; + white-space: nowrap; + text-align: center; +} + +#cards-view .card { + display: inline-block; + width: 100%; + height: -moz-calc(100% - 20px); + margin: 0; + margin-top: 20px; + margin-left: -25%; + position: relative; + background-size: contain; + background-position: center center; + background-repeat: no-repeat; + transform: scale(0.6); +} + +#cards-view .card h1 { + position: absolute; + top: 1.5rem; + left: 1rem; + z-index: 99999; + text-align: left; + font-size: 3.5rem; + font-weight: 300; + text-overflow: ellipsis; + overflow-x: hidden; +} + +#cards-view .card header { + top: 1.5rem; +} + +#cards-view .card[data-edit='true'] { + position: relative; + opacity: 0.8; + z-index: 99999; +} + +#cards-view .card:first-child { + position: absolute; + margin-left: 0; +} + +#cards-view .card:only-child { + margin-left: -50%; +} + +#cards-view .card:nth-child(2) { + margin-left: 75%; +} + +#cards-view .card > *:not(.close-card) { + pointer-events: none; +} + +#cards-view .card > h1 { + position: absolute; + top: 100%; + width: 100%; + line-height: 4rem; +} + +#cards-view .card > p { + position: absolute; + top: -moz-calc(100% + 4rem); + width: 100%; + font-size: 2rem; +} + +#cards-view .card > img.appIcon { + position: relative; + height: 8rem; + width: 8rem; + border-radius: .6rem; + top: 50%; + margin-top: -4rem; +} + +#cards-view .close-card { + position: absolute; + top: -1rem; + left: -1rem; + z-index: 99999; + height: 2.6rem; + width: 2.6rem; + background: url(close.png) no-repeat center center; + transform: scale(1.7); +} diff --git a/apps/system/style/cards_view/close.png b/apps/system/style/cards_view/close.png Binary files differnew file mode 100644 index 0000000..de1f82d --- /dev/null +++ b/apps/system/style/cards_view/close.png |