diff options
author | cbdev <cb@cbcdn.com> | 2021-07-15 00:14:33 +0200 |
---|---|---|
committer | cbdev <cb@cbcdn.com> | 2021-07-15 00:14:33 +0200 |
commit | 590870b9ec56f22cd7d7b785b6464ff1b6c46b9d (patch) | |
tree | 5b55bc6e2587baa2724a457176ec973678e5b874 /assets | |
download | cargohold-590870b9ec56f22cd7d7b785b6464ff1b6c46b9d.tar.gz cargohold-590870b9ec56f22cd7d7b785b6464ff1b6c46b9d.tar.bz2 cargohold-590870b9ec56f22cd7d7b785b6464ff1b6c46b9d.zip |
Initial skeleton
Diffstat (limited to 'assets')
-rw-r--r-- | assets/cargohold.css | 134 |
1 files changed, 134 insertions, 0 deletions
diff --git a/assets/cargohold.css b/assets/cargohold.css new file mode 100644 index 0000000..1e56769 --- /dev/null +++ b/assets/cargohold.css @@ -0,0 +1,134 @@ +html, body { + margin: 0; + padding: 0; + text-align: center; + color: #ccd; +} + +html { + background-color: #425; +} + +#selector-label { + background-color: #333; + border-radius: 1em; + padding: 2em; + cursor: pointer; + display: inline-block; + min-width: 30%; + margin: 1em; + position: relative; +} + +#dirlisting { + padding: 2em; +} + +#storage { + margin: 2em; +} + +#storage > progress { + width: 30%; +} + +#upload { + width: 50%; + margin: 0 auto; + padding: 2em; +} + +#files { + /*display: none;*/ + position: absolute; + left: 0; + opacity: 0; + top: 0; + bottom: 0; + width: 100%; +} + +#file-submit { + background-color: #333; + border-radius: 1em; + padding: 2em; + display: inline-block; + min-width: 30%; + border: none; + color: #ccd; + margin: 1em; +} + +#header { + background-color: #728; + padding: 0.5em; + text-align: left; + font-size: 120%; + font-weight: bold; + font-family: sans; +} + +#container { + display: inline-block; + width: 85%; +} + +.tab-wrap > input { + display: none; +} + +.tab-wrap { + justify-content: center; + display: flex; + flex-wrap: wrap; + position: relative; + list-style: none; + padding: 2rem 1rem; +} + +.tab:checked:nth-of-type(1) ~ .tab-content:nth-of-type(1), .tab:checked:nth-of-type(2) ~ .tab-content:nth-of-type(2) { + opacity: 1; + transition: 0.5s opacity ease-in, 0.8s transform ease; + position: relative; + top: 0; + z-index: 100; + margin-top: 3rem; +} + +.tab:checked + label { + color: #23cb97; + background-color: #246; + border-bottom: 2px solid #23cb97; +} + +.tab + label { + max-width: 20%; + background-color: #333; + font-weight: normal; + font-size: 150%; + line-height: 1.4rem; + font-weight: 800; + color: white; + cursor: pointer; + display: block; + text-decoration: none; + flex-grow: 2; + text-align: center; + user-select: none; + transition: 0.3s background-color ease, 0.3s box-shadow ease; + height: 2rem; + padding: 0.5rem 1.5rem; + border-bottom: 2px solid rgba(255, 255, 255, 0.25); + margin-left: 1em; + margin-right: 1em; +} + +.tab-content { + z-index: -1; + position: absolute; + display: block; + width: 100%; + opacity: 0; + border-radius: 1em; + background-color: #8885; +} |