diff --git a/_assets/src/components/Main.vue b/_assets/src/components/Main.vue
index 2d66626f..fa7c6215 100644
--- a/_assets/src/components/Main.vue
+++ b/_assets/src/components/Main.vue
@@ -107,7 +107,6 @@ export default {
'req',
'user',
'reload',
- 'baseURL',
'multiple'
]),
isListing () {
diff --git a/_assets/src/css/base.css b/_assets/src/css/base.css
index 1a78997c..8641d0fd 100644
--- a/_assets/src/css/base.css
+++ b/_assets/src/css/base.css
@@ -1,116 +1,117 @@
body {
- font-family: 'Roboto', sans-serif;
- padding-top: 4em;
- background-color: #f8f8f8;
- user-select: none;
+ font-family: 'Roboto', sans-serif;
+ padding-top: 4em;
+ background-color: #f8f8f8;
+ user-select: none;
}
* {
- box-sizing: border-box;
+ box-sizing: border-box;
}
*,
*:hover,
*:active,
*:focus {
- outline: 0
+ outline: 0
}
a {
- text-decoration: none;
+ text-decoration: none;
}
img {
- max-width: 100%;
+ max-width: 100%;
}
audio,
video {
- width: 100%;
+ width: 100%;
}
pre {
- padding: 1em;
- border: 1px solid #e6e6e6;
- border-radius: 0.5em;
- background-color: #f5f5f5;
- white-space: pre-wrap;
- white-space: -moz-pre-wrap;
- white-space: -pre-wrap;
- white-space: -o-pre-wrap;
- word-wrap: break-word;
+ padding: 1em;
+ border: 1px solid #e6e6e6;
+ border-radius: 0.5em;
+ background-color: #f5f5f5;
+ white-space: pre-wrap;
+ white-space: -moz-pre-wrap;
+ white-space: -pre-wrap;
+ white-space: -o-pre-wrap;
+ word-wrap: break-word;
}
-input, button {
+input,
+button {
outline: 0 !important;
}
input[type="submit"],
button {
- border: 0;
- padding: .5em 1em;
- margin-left: .5em;
- border-radius: .1em;
- cursor: pointer;
- background: #2196f3;
- color: #fff;
- border: 1px solid rgba(0, 0, 0, 0.05);
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
- transition: .1s ease all;
+ border: 0;
+ padding: .5em 1em;
+ margin-left: .5em;
+ border-radius: .1em;
+ cursor: pointer;
+ background: #2196f3;
+ color: #fff;
+ border: 1px solid rgba(0, 0, 0, 0.05);
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
+ transition: .1s ease all;
}
input[type="submit"]:hover,
button:hover {
- background-color: #1E88E5;
+ background-color: #1E88E5;
}
.mobile-only {
- display: none !important;
+ display: none !important;
}
.container {
- width: 95%;
- max-width: 960px;
- margin: 1em auto 0;
+ width: 95%;
+ max-width: 960px;
+ margin: 1em auto 0;
}
i.spin {
- animation: 1s spin linear infinite;
+ animation: 1s spin linear infinite;
}
#app {
- transition: .2s ease padding;
+ transition: .2s ease padding;
}
#app.multiple {
- padding-bottom: 4em;
+ padding-bottom: 4em;
}
nav {
- width: 16em;
- position: fixed;
- top: 4em;
- left: 0;
+ width: 16em;
+ position: fixed;
+ top: 4em;
+ left: 0;
}
nav .action {
- width: 100%;
- display: block;
- border-radius: 0;
- font-size: 1.1em;
- padding: .5em;
+ width: 100%;
+ display: block;
+ border-radius: 0;
+ font-size: 1.1em;
+ padding: .5em;
}
-nav > div {
- border-top: 1px solid rgba(0, 0, 0, 0.05);
+nav>div {
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
}
nav .action>* {
- vertical-align: middle;
+ vertical-align: middle;
}
main {
- min-height: 1em;
- margin: 0 1em 0 auto;
- width: calc(100% - 19em);
+ min-height: 1em;
+ margin: 0 1em 0 auto;
+ width: calc(100% - 19em);
}
diff --git a/_assets/src/css/header.css b/_assets/src/css/header.css
index f4492a8f..7c4d2ce8 100644
--- a/_assets/src/css/header.css
+++ b/_assets/src/css/header.css
@@ -1,93 +1,101 @@
header {
- z-index: 1000;
- background-color: #fff;
- border-bottom: 1px solid rgba(0, 0, 0, 0.075);
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- padding: 0;
- display: flex;
+ z-index: 1000;
+ background-color: #fff;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.075);
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ padding: 0;
+ display: flex;
}
header a,
header a:hover {
- color: inherit;
+ color: inherit;
+}
+
+header>div:first-child>.action,
+header img {
+ margin-right: 1em;
}
header img {
- height: 2.5em;
- margin-right: 1em;
- vertical-align: middle;
+ height: 2.5em;
+}
+
+header>div:first-child>.action {
+ display: none;
}
header>div {
- display: flex;
- width: 100%;
- padding: 0.5em 0.5em 0.5em 1em;
- align-items: center;
+ display: flex;
+ width: 100%;
+ padding: 0.5em 0.5em 0.5em 1em;
+ align-items: center;
}
header .action span {
- display: none;
+ display: none;
}
header>div div {
- vertical-align: middle;
- position: relative;
+ vertical-align: middle;
+ position: relative;
}
-header > div:first-child {
- height: 4em;
+header>div:first-child {
+ height: 4em;
}
-header > div:last-child {
- justify-content: flex-end;
+header>div:last-child {
+ justify-content: flex-end;
}
+
/* * * * * * * * * * * * * * * *
* MORE?? *
* * * * * * * * * * * * * * * */
-
#more {
- display: none;
+ display: none;
}
#file-only {
- display: inline-block;
- border-right: 1px solid rgba(0, 0, 0, 0.075);
- padding-right: .3em;
- margin-right: .3em;
- transition: .2s ease opacity, visibility;
- visibility: visible;
+ display: inline-block;
+ border-right: 1px solid rgba(0, 0, 0, 0.075);
+ padding-right: .3em;
+ margin-right: .3em;
+ transition: .2s ease opacity, visibility;
+ visibility: visible;
}
#file-only.disabled {
- opacity: 0;
- visibility: hidden;
+ opacity: 0;
+ visibility: hidden;
}
#download ul.active {
- top: 0;
- right: 0;
+ top: 0;
+ right: 0;
}
#more ul.active {
- right: .5em;
- top: 4.5em;
+ right: .5em;
+ top: 4.5em;
}
+
/* * * * * * * * * * * * * * * *
* SEARCH BAR *
* * * * * * * * * * * * * * * */
#search {
- position: relative;
- height: 100%;
- width: 100%;
- max-width: 25em;
+ position: relative;
+ height: 100%;
+ width: 100%;
+ max-width: 25em;
}
#search.active {
@@ -117,26 +125,26 @@ header > div:last-child {
height: 4em;
}
-#search.active > div {
+#search.active>div {
border-radius: 0 !important;
}
#search.active i,
#search.active input {
- color: #212121;
+ color: #212121;
}
-#search #input > .action,
-#search #input > i {
- margin-right: 0.3em;
- user-select: none;
+#search #input>.action,
+#search #input>i {
+ margin-right: 0.3em;
+ user-select: none;
}
#search input {
- width: 100%;
- border: 0;
- outline: 0;
- background-color: transparent;
+ width: 100%;
+ border: 0;
+ outline: 0;
+ background-color: transparent;
}
#search #result {
@@ -212,4 +220,3 @@ header > div:last-child {
#search:-ms-input-placeholder {
color: rgba(255, 255, 255, .5);
}
-
diff --git a/_assets/src/css/listing.css b/_assets/src/css/listing.css
index 4f367266..c9feffe2 100644
--- a/_assets/src/css/listing.css
+++ b/_assets/src/css/listing.css
@@ -1,236 +1,236 @@
#listing h2 {
- margin: 0 0 0 0.5em;
- font-size: .9em;
- color: rgba(0, 0, 0, 0.38);
- font-weight: 500;
+ margin: 0 0 0 0.5em;
+ font-size: .9em;
+ color: rgba(0, 0, 0, 0.38);
+ font-weight: 500;
}
#listing .item div:last-of-type * {
- text-overflow: ellipsis;
- overflow: hidden;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
#listing>div {
- display: flex;
- padding: 0;
- flex-wrap: wrap;
- justify-content: flex-start;
- position: relative;
+ display: flex;
+ padding: 0;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ position: relative;
}
#listing .item {
- background-color: #fff;
- position: relative;
- display: flex;
- flex-wrap: nowrap;
- color: #6f6f6f;
- transition: .1s ease all;
- align-items: center;
- cursor: pointer;
+ background-color: #fff;
+ position: relative;
+ display: flex;
+ flex-wrap: nowrap;
+ color: #6f6f6f;
+ transition: .1s ease all;
+ align-items: center;
+ cursor: pointer;
}
#listing .item div:last-of-type {
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
}
#listing .item p {
- margin: 0;
+ margin: 0;
}
#listing .item .size,
#listing .item .modified {
- font-size: 0.9em;
+ font-size: 0.9em;
}
#listing .item .name {
- font-weight: bold;
+ font-weight: bold;
}
#listing .item i {
- font-size: 4em;
- margin-right: 0.1em;
- vertical-align: bottom;
+ font-size: 4em;
+ margin-right: 0.1em;
+ vertical-align: bottom;
}
.message {
- text-align: center;
- font-size: 2em;
- margin: 1em auto;
- display: block !important;
- width: 95%;
- color: rgba(0, 0, 0, 0.3);
- font-weight: 500;
+ text-align: center;
+ font-size: 2em;
+ margin: 1em auto;
+ display: block !important;
+ width: 95%;
+ color: rgba(0, 0, 0, 0.3);
+ font-weight: 500;
}
.message i {
- font-size: 2.5em;
- margin-bottom: .2em;
- display: block;
+ font-size: 2.5em;
+ margin-bottom: .2em;
+ display: block;
}
#listing.mosaic {
- padding-top: 1em;
+ padding-top: 1em;
}
#listing.mosaic .item {
- width: calc(33% - 1em);
- margin: .5em;
- padding: 0.5em;
- border-radius: 0.2em;
- box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
+ width: calc(33% - 1em);
+ margin: .5em;
+ padding: 0.5em;
+ border-radius: 0.2em;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
}
#listing.mosaic .item:hover {
- box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) !important;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) !important;
}
#listing.mosaic .header {
- display: none;
+ display: none;
}
#listing.mosaic .item div:first-of-type {
- width: 5em;
+ width: 5em;
}
#listing.mosaic .item div:last-of-type {
- width: calc(100% - 5vw);
+ width: calc(100% - 5vw);
}
#listing.list {
- flex-direction: column;
- padding-top: 3.25em;
- width: 100%;
- max-width: 100%;
- margin: 0;
+ flex-direction: column;
+ padding-top: 3.25em;
+ width: 100%;
+ max-width: 100%;
+ margin: 0;
}
#listing.list .item {
- width: 100%;
- margin: 0;
- border: 1px solid rgba(0, 0, 0, 0.1);
- padding: 1em;
- border-top: 0;
+ width: 100%;
+ margin: 0;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ padding: 1em;
+ border-top: 0;
}
#listing.list h2 {
- display: none;
+ display: none;
}
#listing .item[aria-selected=true] {
- background: #2196f3 !important;
- color: #fff !important;
+ background: #2196f3 !important;
+ color: #fff !important;
}
#listing.list .item div:first-of-type {
- width: 3em;
+ width: 3em;
}
#listing.list .item div:first-of-type i {
- font-size: 2em;
+ font-size: 2em;
}
#listing.list .item div:last-of-type {
- width: calc(100% - 3em);
- display: flex;
- align-items: center;
+ width: calc(100% - 3em);
+ display: flex;
+ align-items: center;
}
#listing.list .item .name {
- width: 50%;
+ width: 50%;
}
#listing.list .item .size {
- width: 25%;
+ width: 25%;
}
#listing .item.header {
- display: none !important;
- background-color: #ccc;
+ display: none !important;
+ background-color: #ccc;
}
#listing.list .header i {
- font-size: 1.5em;
- vertical-align: middle;
- margin-left: .2em;
+ font-size: 1.5em;
+ vertical-align: middle;
+ margin-left: .2em;
}
#listing.list .item.header {
- display: flex !important;
- background: #f8f8f8;
- position: fixed;
- width: calc(100% - 19em);
- top: 4em;
- right: 1em;
- z-index: 999;
- padding: .85em;
- border: 0;
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+ display: flex !important;
+ background: #f8f8f8;
+ position: fixed;
+ width: calc(100% - 19em);
+ top: 4em;
+ right: 1em;
+ z-index: 999;
+ padding: .85em;
+ border: 0;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
#listing.list .item.header>div:first-child {
- width: 0;
+ width: 0;
}
#listing.list .item.header .name {
- margin-right: 3em;
+ margin-right: 3em;
}
#listing.list .header a {
- color: inherit;
+ color: inherit;
}
#listing.list .item.header>div:first-child {
- width: 0;
+ width: 0;
}
#listing.list .name {
- font-weight: normal;
+ font-weight: normal;
}
#listing.list .item.header .name {
- margin-right: 3em;
+ margin-right: 3em;
}
#listing.list .header span {
- vertical-align: middle;
+ vertical-align: middle;
}
#listing.list .header i {
- opacity: 0;
- transition: .1s ease all;
+ opacity: 0;
+ transition: .1s ease all;
}
#listing.list .header p:hover i,
#listing.list .header .active i {
- opacity: 1;
+ opacity: 1;
}
#listing.list .item.header .active {
- font-weight: bold;
+ font-weight: bold;
}
#listing #multiple-selection {
- position: fixed;
- bottom: -4em;
- left: 0;
- z-index: 99999;
- width: 100%;
- background-color: #2196f3;
- height: 4em;
- display: flex !important;
- padding: 0.5em 0.5em 0.5em 1em;
- justify-content: space-between;
- align-items: center;
- transition: .2s ease bottom;
+ position: fixed;
+ bottom: -4em;
+ left: 0;
+ z-index: 99999;
+ width: 100%;
+ background-color: #2196f3;
+ height: 4em;
+ display: flex !important;
+ padding: 0.5em 0.5em 0.5em 1em;
+ justify-content: space-between;
+ align-items: center;
+ transition: .2s ease bottom;
}
#listing #multiple-selection.active {
- bottom: 0;
+ bottom: 0;
}
#listing #multiple-selection p,
#listing #multiple-selection i {
- color: #fff;
+ color: #fff;
}
diff --git a/_assets/src/css/mobile.css b/_assets/src/css/mobile.css
index 7634a646..35afb9f1 100644
--- a/_assets/src/css/mobile.css
+++ b/_assets/src/css/mobile.css
@@ -19,12 +19,19 @@
height: 100%;
width: 13em;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+ transition: .2s ease-in-out left;
+ left: -14em;
}
-
- #listing.list .item.header, main {
+ header>div:first-child>.action {
+ display: inherit;
+ }
+ header img {
+ display: none;
+ }
+ #listing.list .item.header,
+ main {
width: calc(100% - 2em);
}
-
main {
margin: 0 1em;
width: calc(100% - 2em);
diff --git a/_assets/src/css/prompts.css b/_assets/src/css/prompts.css
index d6eefc54..f5c7f739 100644
--- a/_assets/src/css/prompts.css
+++ b/_assets/src/css/prompts.css
@@ -1,67 +1,67 @@
.prompt {
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background: #fff;
- border: 1px solid rgba(0, 0, 0, 0.075);
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
- padding: 2em;
- max-width: 25em;
- width: 90%;
- max-height: 95%;
- z-index: 99999;
- animation: .1s show forwards;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background: #fff;
+ border: 1px solid rgba(0, 0, 0, 0.075);
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+ padding: 2em;
+ max-width: 25em;
+ width: 90%;
+ max-height: 95%;
+ z-index: 99999;
+ animation: .1s show forwards;
}
.overlay {
- background-color: rgba(0, 0, 0, 0.5);
- position: fixed;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- z-index: 9999;
- animation: .1s show forwards;
+ background-color: rgba(0, 0, 0, 0.5);
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ z-index: 9999;
+ animation: .1s show forwards;
}
.prompt h3 {
- margin: 0;
- font-weight: 500;
- font-size: 1.5em;
+ margin: 0;
+ font-weight: 500;
+ font-size: 1.5em;
}
.prompt p {
- font-size: .9em;
- color: rgba(0, 0, 0, 0.8);
- margin: .5em 0 1em;
+ font-size: .9em;
+ color: rgba(0, 0, 0, 0.8);
+ margin: .5em 0 1em;
}
.prompt input {
- width: 100%;
- border: 1px solid #dadada;
- line-height: 1;
- padding: .3em;
+ width: 100%;
+ border: 1px solid #dadada;
+ line-height: 1;
+ padding: .3em;
}
.prompt code {
- word-wrap: break-word;
+ word-wrap: break-word;
}
.prompt div {
- margin-top: 1em;
- display: flex;
- justify-content: flex-start;
- flex-direction: row-reverse;
+ margin-top: 1em;
+ display: flex;
+ justify-content: flex-start;
+ flex-direction: row-reverse;
}
.prompt .cancel {
- background-color: #ECEFF1;
- color: #37474F;
+ background-color: #ECEFF1;
+ color: #37474F;
}
.prompt .cancel:hover {
- background-color: #e9eaeb;
+ background-color: #e9eaeb;
}
@@ -70,83 +70,83 @@
* * * * * * * * * * * * * * * */
.file-list {
- max-height: 50vh;
- overflow: auto;
- list-style: none;
- margin: 0;
- padding: 0;
- width: 100%;
+ max-height: 50vh;
+ overflow: auto;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ width: 100%;
}
.file-list li {
- width: 100%;
- user-select: none;
- border-radius: .2em;
- padding: .3em;
+ width: 100%;
+ user-select: none;
+ border-radius: .2em;
+ padding: .3em;
}
.file-list li[aria-selected=true] {
- background: #2196f3 !important;
- color: #fff !important;
- transition: .1s ease all;
+ background: #2196f3 !important;
+ color: #fff !important;
+ transition: .1s ease all;
}
.file-list li:hover {
- background-color: #e9eaeb;
- cursor: pointer;
+ background-color: #e9eaeb;
+ cursor: pointer;
}
.file-list li:before {
- content: "folder";
- color: #6f6f6f;
- vertical-align: middle;
- line-height: 1.4;
- font-family: 'Material Icons';
- font-size: 1.75em;
- margin-right: .25em;
+ content: "folder";
+ color: #6f6f6f;
+ vertical-align: middle;
+ line-height: 1.4;
+ font-family: 'Material Icons';
+ font-size: 1.75em;
+ margin-right: .25em;
}
.file-list li[aria-selected=true]:before {
- color: white;
+ color: white;
}
.prompt#download {
- max-width: 15em;
+ max-width: 15em;
}
.prompt#download button {
- width: 100%;
- display: block;
- margin: 0 0 1em;
- background-color: #ECEFF1;
- color: #37474F;
+ width: 100%;
+ display: block;
+ margin: 0 0 1em;
+ background-color: #ECEFF1;
+ color: #37474F;
}
.prompt#download button:last-of-type {
- margin-bottom: 0;
+ margin-bottom: 0;
}
.help {
- max-width: 24em;
+ max-width: 24em;
}
.help ul {
- padding: 0;
- margin: 1em 0;
- list-style: none;
+ padding: 0;
+ margin: 1em 0;
+ list-style: none;
}
@keyframes show {
- 0% {
- display: none;
- opacity: 0;
- }
- 1% {
- display: block;
- opacity: 0;
- }
- 100% {
- display: block;
- opacity: 1;
- }
+ 0% {
+ display: none;
+ opacity: 0;
+ }
+ 1% {
+ display: block;
+ opacity: 0;
+ }
+ 100% {
+ display: block;
+ opacity: 1;
+ }
}
diff --git a/_assets/src/css/styles.css b/_assets/src/css/styles.css
index f88edfdf..924b8086 100644
--- a/_assets/src/css/styles.css
+++ b/_assets/src/css/styles.css
@@ -5,187 +5,179 @@
@import "./prompts.css";
@import "./listing.css";
-
/* * * * * * * * * * * * * * * *
* ACTION *
* * * * * * * * * * * * * * * */
.action {
- display: inline-block;
- cursor: pointer;
- transition: 0.2s ease all;
- border: 0;
- margin: 0;
- color: #546E7A;
- border-radius: 50%;
- background: transparent;
- padding: 0;
- box-shadow: 0 0 0 0;
- vertical-align: middle;
- text-align: left;
- position: relative;
+ display: inline-block;
+ cursor: pointer;
+ transition: 0.2s ease all;
+ border: 0;
+ margin: 0;
+ color: #546E7A;
+ border-radius: 50%;
+ background: transparent;
+ padding: 0;
+ box-shadow: 0 0 0 0;
+ vertical-align: middle;
+ text-align: left;
+ position: relative;
}
.action.disabled {
- opacity: 0.2;
- cursor: not-allowed;
+ opacity: 0.2;
+ cursor: not-allowed;
}
.action i {
- padding: 0.4em;
- -webkit-transition: 0.2s ease-in-out all;
- transition: 0.2s ease-in-out all;
- border-radius: 50%;
+ padding: 0.4em;
+ -webkit-transition: 0.2s ease-in-out all;
+ transition: 0.2s ease-in-out all;
+ border-radius: 50%;
}
.action:hover {
- background-color: rgba(0, 0, 0, .1);
+ background-color: rgba(0, 0, 0, .1);
}
.action ul {
- position: absolute;
- top: 0;
- color: #7d7d7d;
- list-style: none;
- margin: 0;
- padding: 0;
- flex-direction: column;
- display: flex;
+ position: absolute;
+ top: 0;
+ color: #7d7d7d;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ flex-direction: column;
+ display: flex;
}
.action ul li {
- line-height: 1;
- padding: .7em;
- transition: .1s ease background-color;
+ line-height: 1;
+ padding: .7em;
+ transition: .1s ease background-color;
}
.action ul li:hover {
- background-color: rgba(0, 0, 0, 0.04);
+ background-color: rgba(0, 0, 0, 0.04);
}
-
-
#click-overlay {
- display: none;
- position: fixed;
- cursor: pointer;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
+ display: none;
+ position: fixed;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
}
#click-overlay.active {
- display: block;
+ display: block;
}
.action .counter {
- display: block;
- position: absolute;
- bottom: 0;
- right: 0;
- background: #2196f3;
- color: #fff;
- border-radius: 50%;
- font-size: .75em;
- width: 1.5em;
- height: 1.5em;
- text-align: center;
- line-height: 1.25em;
- border: 2px solid white;
+ display: block;
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ background: #2196f3;
+ color: #fff;
+ border-radius: 50%;
+ font-size: .75em;
+ width: 1.5em;
+ height: 1.5em;
+ text-align: center;
+ line-height: 1.25em;
+ border: 2px solid white;
}
/* PREVIEWER */
#previewer {
- background-color: rgba(0, 0, 0, 0.9);
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 9999;
- overflow: hidden;
+ background-color: rgba(0, 0, 0, 0.9);
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 9999;
+ overflow: hidden;
}
#previewer .bar {
- width: 100%;
- text-align: right;
- display: flex;
- padding: 0.5em 0.5em 0.5em 1em;
- height: 3.7em;
+ width: 100%;
+ text-align: right;
+ display: flex;
+ padding: 0.5em 0.5em 0.5em 1em;
+ height: 3.7em;
}
#previewer .action:first-of-type {
- margin-right: auto;
+ margin-right: auto;
}
#previewer .action i {
- color: #fff;
+ color: #fff;
}
#previewer .action:hover {
- background-color: rgba(255, 255, 255, 0.3)
+ background-color: rgba(255, 255, 255, 0.3)
}
#previewer .action span {
- display: none;
+ display: none;
}
#previewer .preview {
- margin: 2em auto 4em;
- max-width: 80%;
- text-align: center;
- height: calc(100vh - 9.7em);
+ margin: 2em auto 4em;
+ max-width: 80%;
+ text-align: center;
+ height: calc(100vh - 9.7em);
}
#previewer .preview pre {
- text-align: left;
- overflow: auto;
+ text-align: left;
+ overflow: auto;
}
#previewer .preview pre,
#previewer .preview video,
#previewer .preview img {
- max-height: 100%;
- margin: 0;
+ max-height: 100%;
+ margin: 0;
}
#previewer .pdf {
- width: 100%;
- height: 100%;
+ width: 100%;
+ height: 100%;
}
#previewer h2.message {
- color: rgba(255,255,255,0.5)
+ color: rgba(255, 255, 255, 0.5)
}
-
-
/* * * * * * * * * * * * * * * *
* PROMPT *
* * * * * * * * * * * * * * * */
-
-
-
/* * * * * * * * * * * * * * * *
* FOOTER *
* * * * * * * * * * * * * * * */
.credits {
- font-size: 0.6em;
- margin: 3em 2.5em;
- color: #a5a5a5;
+ font-size: 0.6em;
+ margin: 3em 2.5em;
+ color: #a5a5a5;
}
.credits a,
.credits a:hover {
- color: inherit;
- cursor: pointer;
+ color: inherit;
+ cursor: pointer;
}
@@ -194,10 +186,10 @@
* * * * * * * * * * * * * * * */
@keyframes spin {
- 100% {
- -webkit-transform: rotate(-360deg);
- transform: rotate(-360deg);
- }
+ 100% {
+ -webkit-transform: rotate(-360deg);
+ transform: rotate(-360deg);
+ }
}
@import './mobile.css';