aboutsummaryrefslogtreecommitdiffstats
path: root/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'style.css')
-rw-r--r--style.css513
1 files changed, 513 insertions, 0 deletions
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..a7a1762
--- /dev/null
+++ b/style.css
@@ -0,0 +1,513 @@
+
+html, body {
+ margin: 0;
+ height: 100%;
+}
+
+body {
+ background: #f0f0f0;
+ color: black;
+ font-family: Roboto, sans-serif;
+ overflow: hidden;
+}
+
+.noselect {
+ user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+}
+
+#page {
+ display: flex;
+ flex: 1 0 0;
+ align-items: stretch;
+
+ user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+}
+
+#page > * {
+ flex: 1 0 0;
+}
+
+/* Disable the black outline that Chromium browsers put on focused buttons */
+input:focus,
+button:focus
+{
+ outline:0;
+}
+
+#header {
+ background: white;
+ margin: 0;
+ padding: 0;
+ height: 3rem;
+ font-size: 2em;
+ display: flex;
+ align-items: stretch;
+ user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+}
+
+#topmenu {
+ font-size: 1.3rem;
+ list-style-type: none;
+ display: flex;
+ margin: 0;
+ padding: 0;
+}
+
+#topmenu > li {
+ cursor: pointer;
+ padding: 10px;
+}
+
+#topmenu > li:hover {
+ background: #eee;
+}
+
+.logo {
+ font-family: monospace;
+ margin: 0;
+ align-self: center;
+ padding-left: 2rem;
+}
+
+#hero {
+ flex: 1.5 0 0;
+ position: relative;
+ font-size: 3.5rem;
+}
+
+.vcenter {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+#hero .bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: -5;
+}
+
+#hero > * > p {
+ color: #676d75;
+ margin: 0rem;
+ padding: 0.5rem;
+ white-space: nowrap;
+ text-align: center;
+}
+
+#hero .big {
+ font-size: 1.2em;
+}
+
+.blue {
+ color: #231179;
+ font-weight: bold;
+}
+
+form {
+ background: #fbfbfb;
+ margin: 4.5rem;
+ padding-top: 0;
+ box-shadow: 0 0.8rem 1.3rem rgba(0,0,0,0.2);
+ border-radius: 0.5rem;
+ border: 1px solid #b9b9b9;
+}
+
+.vert {
+ justify-content: center;
+ display: flex;
+ flex-direction: column;
+}
+
+.vert2 {
+ display: flex;
+ flex-direction: column;
+}
+
+.overlay {
+ display: grid;
+}
+
+.overlay > * {
+ grid-row: 1;
+ grid-column: 1;
+}
+
+form > .content {
+ margin: 2rem;
+ margin-top: 1rem;
+ margin-bottom: 1.7rem;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+form > h2 {
+ color: #4d4d4d;
+ margin: 0;
+ text-align: center;
+ padding: 1rem;
+ background: #f0f0f0;
+ border-top-left-radius: 0.5rem;
+ border-top-right-radius: 0.5rem;
+ align-content: center;
+}
+
+
+.window h3 button,
+.window > h2 button
+{
+ border: none;
+ padding: 0.3rem 1rem;
+ background: inherit;
+ border-radius: 0;
+}
+
+.window h3 button:not(.pathentry):hover {
+ background: white;
+}
+
+.window h3 .separator {
+ flex: 0 0 1px;
+ align-self: stretch;
+ background: #bbb;
+}
+
+.window > h2 > *:first-child {
+ border-top-left-radius: 0.5rem;
+}
+form p {
+ margin: 1rem 0px 0.3rem 0px;
+}
+
+.hero_form_error {
+ animation: fadein 0.2s;
+ background-color: #ff4d4d;
+ color: #ffffff;
+ padding-left: 0.5rem;
+ border-bottom-left-radius: 0.5rem;
+ border-bottom-right-radius: 0.5rem;
+ margin-top: -0.2rem;
+
+}
+@keyframes fadein {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+.content > input {
+ min-width: 300px;
+}
+
+button,
+input:not([type=file])
+{
+ border: 1px solid #bbb;
+ padding: 0.5rem 0.8rem;
+ font-size: inherit;
+ font-family: inherit;
+ border-radius: 0.3rem;
+ background: #fcfcfc;
+}
+
+input[type=button], button, input[type=submit] {
+ cursor: pointer;
+}
+
+input[type=submit] {
+ margin-top: 2rem;
+ width: 100%;
+ display: block;
+ padding: 0.7rem;
+ font-size: 1.1em;
+ box-shadow: 0 0.2rem 0.6rem #eee;
+ background: #231179;
+ color: white;
+ outline: none;
+}
+
+
+input:hover,
+button:hover
+{
+ background: white;
+}
+
+input:focus {
+ border-color: black;
+}
+
+input[type=submit]:hover {
+ background: #5b4d9d;
+}
+
+.bgbottom {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ z-index: -100;
+}
+
+
+#arrows {
+ position: relative;
+}
+
+#arrows > img {
+ position: absolute;
+ bottom: 0;
+ z-index: -200;
+}
+
+#signupform {
+ display: none;
+}
+
+.window {
+ overflow: hidden;
+ box-sizing: border-box;
+ margin: 0rem;
+ padding: 0;
+ box-shadow: 0 0.8rem 1.3rem rgba(0,0,0,0.2);
+ border-radius: 0.5rem;
+ border: 1px solid #b9b9b9;
+
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 800px;
+ height: 600px;
+
+ transition: opacity 0.3s;
+ display: flex;
+ flex-direction: column;
+}
+
+.window.focus {
+ border-color: black;
+}
+
+.foldercontents, .filecontents, .filecontentsroot {
+ background: rgba(250, 250, 250, .9);
+ flex: 1 0 0;
+}
+
+.filecontents, .filecontentsroot {
+ background: white;
+}
+
+.filecontents {
+ font-family: monospace;
+}
+
+.filecontents.imgview {
+ background-color: black;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+}
+
+.filecontentsroot, .foldercontents {
+ display: flex;
+ flex-direction: column;
+}
+
+.filecontents {
+ overflow-y: scroll;
+}
+[contenteditable] {
+ outline: 0px solid transparent;
+}
+
+pre {
+ font-size: 1.3rem;
+ min-height: 100%;
+ margin: 0.3rem;
+ box-sizing: border-box;
+}
+
+.window h3,
+.window > h2 {
+ color: #4d4d4d;
+ background: #f0f0f0;
+ margin: 0;
+
+
+ display: flex;
+ align-items: stretch;
+ font-weight: normal;
+ padding: 0rem;
+ border-bottom: 1px solid #bbb;
+}
+
+.window > h2 {
+ font-size: 1.3rem;
+ border-top-left-radius: 0.5rem;
+ border-top-right-radius: 0.5rem;
+ cursor: grab;
+
+ user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+}
+
+.window h3 {
+ font-size: 1.2rem;
+}
+
+.window.dragged {
+ /* opacity: 0.9; */
+}
+
+.files {
+ padding: 0.3rem;
+ display: grid;
+
+ grid-gap: 0rem;
+ grid-auto-rows: 8rem;
+ grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
+}
+
+.file {
+ box-sizing: border-box;
+ padding: 0.5rem;
+ cursor: pointer;
+ color: #333;
+ user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ border: 1px solid rgba(0,0,0,0);
+ border-radius: 0.1rem;
+}
+
+.file.dragged {
+ border: none;
+ pointer-events: none;
+}
+
+.file:hover:not(.dragged) {
+ background: rgba(255,255,255, 0.5);
+ color: black;
+ border-color: #ddd;
+}
+
+.file > img {
+ flex: 1 1 0;
+ min-width: 0;
+ min-height: 0;
+}
+
+.file:hover > img {
+ filter: brightness(120%);
+}
+
+.path {
+ display: flex;
+ align-items: stretch;
+ flex: 1 0 0;
+}
+
+.path > .separator {
+ user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ padding: 0 0.1rem;
+ align-self: center;
+}
+
+.pathentry:last-child {
+ cursor: inherit;
+}
+
+.pathentry:not(:last-child):hover {
+ text-decoration: underline;
+}
+
+.context {
+ background: white;
+ position: absolute;
+ z-index: 1000;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ top: 0;
+ left: 0;
+
+ border: 1px solid #ccc;
+ box-shadow: 0 0.3rem 0.5rem rgba(0,0,0,0.2);
+}
+
+.context > li {
+ padding: 0.4rem 1.5rem;
+ margin: 0;
+
+ user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+}
+
+.context > li:hover {
+ background: #2e91db;
+ color: white;
+}
+
+.backdrop {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+
+ user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ background-image: url("/img/backdrop.jpg");
+ background-size: cover;
+}
+
+.share_dialog_contents {
+ display: flex;
+ flex-direction: column;
+ background: white;
+ background: rgba(255,255,255, 0.9);
+}
+
+.window > h2 .close_button {
+ border-left: 1px solid #ccc;
+}
+
+.close_button:hover {
+ background: white;
+}
+
+
+.wndtitle {
+ display: flex;
+ align-items: center;
+ flex: 1 1 0;
+ padding-left: 0.8rem;
+}
+
+iframe {
+ margin: 0;
+ border: 0;
+}
+
+.filename {
+ word-wrap: break-word;
+ word-break: break-word;
+}