diff --git a/res/static/style/layout.css b/res/static/style/layout.css index 4245aef..3fd4eef 100644 --- a/res/static/style/layout.css +++ b/res/static/style/layout.css @@ -56,11 +56,10 @@ html{height: 100%;} body{ background-color: #0d0d0d; /* Fallback */ - background-color: var(--background_color); + background-color: var(--body_color); background-repeat: repeat; font-family: 'Ubuntu'; margin: 0; - text-align: center; /* Center the header and body */ line-height: 1.5em; overflow-x: hidden; color: #bfbfbf; /* Fallback */ @@ -71,45 +70,111 @@ body{ /* Page layout elements */ -.header_image{ - width: 100%; - max-width: 1000px; - margin-top: 15px; +.page_wrapper { + position: absolute; + display: flex; + flex-direction: column; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; +} +.page_wrapper > .page_header { + flex-grow: 0; + flex-shrink: 0; + display: flex; + flex-direction: row; + line-height: 2em; + z-index: 101; +} +.page_wrapper > .page_header > span { + margin: 0 0.5em 0 0.5em; +} +.page_wrapper > .page_content_wrapper { + flex-grow: 1; + flex-shrink: 1; + position: relative; + display: inline-block; + width: auto; + height: auto; + margin: 0; } -.body{ +.page_wrapper > .page_content_wrapper > .page_navigation { + position: absolute; + width: 200px; + z-index: 100; + float: left; + background-color: var(--layer_1_color); + left: 0; + bottom: 0; + top: 0; + padding: 0.5em 0 0.5em 0; + text-align: left; + box-shadow: 2px 2px 8px var(--shadow_color); + transition: left 0.5s; +} +.page_wrapper > .page_content_wrapper > .page_content { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 200px; + min-width: 300px; + display: inline-block; + text-align: center; /* Center the header and body */ + overflow-y: scroll; + z-index: 50; + transition: left 0.5s; +} +@media (max-width: 500px) { + .page_wrapper > .page_content_wrapper > .page_navigation { + left: -210px; + } + .page_wrapper > .page_content_wrapper > .page_content { + left: 0; + } +} +.page_wrapper > .page_content_wrapper > .page_content > .centered { position: relative; display: inline-block; max-width: 1000px; - min-width: 300px; width: 100%; height: auto; padding: 0; - margin: 30px 0 30px 0; box-sizing: border-box; - background-color: var(--body_color); text-align: left; - box-shadow: #000000 0 0 10px, 5px; - box-shadow: var(--shadow_color) 0 0 var(--shadow_spread) var(--shadow_intensity); - z-index: 1; word-break: break-word; + clear: both; } -.navigation a { +/* Page contents */ + +.header_image{ + width: 100%; + max-width: 1000px; + margin-top: 30px; + margin-bottom: 30px; +} + +.page_wrapper > .page_content_wrapper > .page_navigation a { float: none; display: inline-block; + box-sizing: border-box; color: #bfbfbf; /* Fallback */ color: var(--text_color); text-align: center; padding: 4px 6px; - margin: 0 4px; + margin: 0.1em 0 0.1em 0; + width: 100%; text-decoration: none; font-family: "Lato Thin", sans-serif; font-weight: bold; font-size: 1.8em; transition: box-shadow 5s; } -.navigation a:hover { +.page_wrapper > .page_content_wrapper > .page_navigation a:hover { background: linear-gradient(#82c13e, #6da234); background: linear-gradient(var(--highlight_color), var(--highlight_color_dark)); box-shadow: #82c13e, 1px 1px 4px #000000; @@ -119,7 +184,7 @@ body{ transition: box-shadow 0.5s; text-decoration: none; } -.navigation .icon { +.page_wrapper > .page_content_wrapper > .page_navigation .icon { display: none; } @media screen and (max-width: 35em) { @@ -141,10 +206,17 @@ body{ } } -.highlight_headerbar, +.inset { + box-shadow: inset 1px 1px 10px -1px var(--shadow_color); +} +.checkers { + text-shadow: 0 0 20px #000000; +} + .highlight_dark, .highlight_middle, .highlight_light, +.highlight_headerbar, .highlight_green, .highlight_blue, .highlight_red { @@ -156,20 +228,19 @@ body{ overflow: hidden; text-align: center; padding: .5em; - z-index: 101; } -.highlight_headerbar { - background-color: var(--accent_color_headerbar); - box-shadow: 1px 1px 3px -1px var(--shadow_color);} .highlight_dark { - background-color: var(--accent_color_dark); - box-shadow: inset 1px 1px 8px -1px var(--shadow_color);} + background-color: var(--layer_1_color); + box-shadow: 1px 1px var(--layer_1_shadow) -2px var(--shadow_color);} .highlight_middle { - background-color: var(--accent_color_medium); - box-shadow: inset 1px 1px 6px -1px var(--shadow_color);} + background-color: var(--layer_2_color); + box-shadow: 1px 1px var(--layer_2_shadow) -2px var(--shadow_color);} .highlight_light { - background-color: var(--accent_color_light); - box-shadow: 1px 1px 4px var(--shadow_color);} + background-color: var(--layer_3_color); + box-shadow: 1px 1px var(--layer_3_shadow) -2px var(--shadow_color);} +.highlight_headerbar { + background-color: var(--layer_4_color); + box-shadow: 1px 1px var(--layer_4_shadow) -2px var(--shadow_color);} .highlight_green { background-color: rgba(0, 255, 0, 0.05); border-color: #00d000;} @@ -202,7 +273,7 @@ h3{font-size: 1.5em; font-family: "Lato Thin";} h4{font-size: 1.25em; font-family: "Lato";} h5{font-size: 1em; font-family: "Lato";} h6{font-size: .75em; font-family: "Lato";} -h3, h2{border-bottom: 1px var(--accent_color_light_border) solid;} /* Differentiate it a bit, else it just looks like bold text */ +h3, h2{border-bottom: 1px var(--layer_3_color_border) solid;} /* Differentiate it a bit, else it just looks like bold text */ p, .indent { margin: 10px; @@ -211,7 +282,7 @@ p, .indent { hr{ height: 8px; border: none; - background: linear-gradient(var(--accent_color_dark), var(--accent_color_light)); + background: linear-gradient(var(--layer_1_color), var(--layer_3_color)); margin: 16px 0 16px 0; } @@ -239,7 +310,7 @@ a:hover {color: var(--highlight_color); text-decoration: underline;} max-width: 35em; } table:not(.form) {border-collapse: collapse; width: 100%;} -tr:not(.form) {border-bottom: 1px var(--accent_color_medium_border) solid;} +tr:not(.form) {border-bottom: 1px var(--layer_2_color_border) solid;} tr > td {padding: 0.5em;} @media(max-width: 30em) { tr > td { @@ -252,7 +323,7 @@ tr > td {padding: 0.5em;} pre{ padding: 2px; - border-bottom: 1px var(--accent_color_medium_border) solid; + border-bottom: 1px var(--layer_2_color_border) solid; overflow-x: scroll; } diff --git a/res/static/style/viewer.css b/res/static/style/viewer.css index 70fff9c..3699ca2 100644 --- a/res/static/style/viewer.css +++ b/res/static/style/viewer.css @@ -49,7 +49,7 @@ position: relative; display: none; /* Becomes visible if the page is a list */ width: 100%; - background-color: var(--accent_color_dark); + background-color: var(--layer_1_color); box-shadow: 0 0 8px var(--shadow_color); text-align: center; line-height: 1em; @@ -95,7 +95,7 @@ z-index: 49; overflow: hidden; float: left; - background-color: var(--accent_color_dark); + background-color: var(--layer_1_color); left: -9em; bottom: 0; top: 0; @@ -113,7 +113,7 @@ overflow-y: scroll; overflow-x: hidden; float: left; - background-color: var(--accent_color_dark); + background-color: var(--layer_1_color); box-shadow: 2px 2px 8px var(--shadow_color); text-align: center; z-index: 48; @@ -245,7 +245,7 @@ opacity: 0; transition: visibility .5s, opacity .5s; background-color: var(--body_color); - border-color: var(--accent_color_dark_border); + border-color: var(--layer_1_color_border); max-height: 100%; max-width: 100%; top: 20%; diff --git a/res/template/account/user_files.html b/res/template/account/user_files.html index f6f93de..e44daae 100644 --- a/res/template/account/user_files.html +++ b/res/template/account/user_files.html @@ -7,12 +7,15 @@ - {{template "menu" .}} -
+ {{template "page_top" .}} +
+
These files were uploaded while logged in to your pixeldrain account, click here to view files uploaded anonymously in this browser.
+
+
{{$limit := 200}} {{$page := .URLQuery.Get "page" | pageNr}} @@ -56,6 +59,8 @@ {{end}}
+ {{template "page_bottom" .}} + {{template "analytics"}} diff --git a/res/template/account/user_home.html b/res/template/account/user_home.html index b4611ef..1204d2b 100644 --- a/res/template/account/user_home.html +++ b/res/template/account/user_home.html @@ -7,10 +7,13 @@ -
- {{template "menu" .}} + {{template "page_top" .}} -

Welcome home, {{.Username}}!

+
+

Welcome home, {{.Username}}!

+
+ +

Actions

- {{template "footer"}}
+ + {{template "page_bottom" .}} + {{template "analytics"}} diff --git a/res/template/fragments/bgpattern.html b/res/template/fragments/bgpattern.html index 3f0f4d4..ad4c3b3 100644 --- a/res/template/fragments/bgpattern.html +++ b/res/template/fragments/bgpattern.html @@ -1,3 +1,3 @@ {{define "bgpattern"}} - + {{end}} diff --git a/res/template/fragments/footer.html b/res/template/fragments/footer.html deleted file mode 100644 index 9497e84..0000000 --- a/res/template/fragments/footer.html +++ /dev/null @@ -1,9 +0,0 @@ -{{define "footer"}} -
-
- Pixeldrain is a product by Fornaxian Technologies | - Twitter: @Fornax96 - Reddit: /r/pixeldrain - Medium: Pixeldrain -
-{{end}} diff --git a/res/template/fragments/menu.html b/res/template/fragments/menu.html deleted file mode 100644 index 7e2cf7c..0000000 --- a/res/template/fragments/menu.html +++ /dev/null @@ -1,24 +0,0 @@ -{{define "menu"}} - -{{end}} diff --git a/res/template/fragments/page_wrap.html b/res/template/fragments/page_wrap.html new file mode 100644 index 0000000..26131fd --- /dev/null +++ b/res/template/fragments/page_wrap.html @@ -0,0 +1,56 @@ +{{define "page_top"}} +
+
+ + Pixeldrain ~ Free file sharing +
+ +
+
+ Home +
+ {{if .Authenticated}}{{.Username}} + My Files + {{if .Authenticated}}My Lists{{end}} + (Log out){{else}} + Login + Register + {{end}} +
+ API +
+
+{{end}} + +{{define "page_bottom"}} +
+
+
+ Pixeldrain is a product by Fornaxian Technologies | + Twitter: @Fornax96 + Reddit: /r/pixeldrain + Medium: Pixeldrain +
+
+
+
+ + +{{end}} diff --git a/res/template/home.html b/res/template/home.html index b94f6ad..22cfb9c 100644 --- a/res/template/home.html +++ b/res/template/home.html @@ -6,27 +6,30 @@ {{template "user_style" .}} - - Header image + {{template "page_top" .}} + +
+ Header image +

-
- {{template "menu" .}} -
- - -
- By uploading files to Pixeldrain you accept that a cookie will - be placed in your web browser. More information below. + + + +

-
-
-
- - - -
+ By uploading files to Pixeldrain you accept that a cookie will be + placed in your web browser. More information below. +

+
+
+ + + + +
+

What is Pixeldrain?

Pixeldrain is a file sharing website built for speed and ease of @@ -47,6 +50,7 @@ (Inspired by Canta GTK)
(Inspired by Arc GTK)
+

Questions and Answers

@@ -152,9 +156,10 @@ support@pixeldrain.com

- {{template "footer"}}
+ {{template "page_bottom"}} + diff --git a/res/template/paste.html b/res/template/paste.html index 95a1f34..ba37976 100644 --- a/res/template/paste.html +++ b/res/template/paste.html @@ -11,7 +11,7 @@ position: absolute; width: 8em; height: 100%; - background-color: var(--accent_color_medium) + background-color: var(--layer_2_color) } .textarea_container { position: absolute; @@ -26,7 +26,7 @@ height: 100%; width: 100%; /* border: none !important; */ - background: var(--accent_color_dark); + background: var(--layer_1_color); } .toolbar_button{ diff --git a/webcontroller/user_style.go b/webcontroller/user_style.go index 0a1ec2e..c467207 100644 --- a/webcontroller/user_style.go +++ b/webcontroller/user_style.go @@ -49,10 +49,15 @@ func userStyle(r *http.Request) (style template.CSS) { --background_color: %s; --body_color: %s; - --accent_color_headerbar: %s; - --accent_color_dark: %s; - --accent_color_medium: %s; - --accent_color_light: %s; + + --layer_1_color: %s; + --layer_1_shadow: %s; + --layer_2_color: %s; + --layer_2_shadow: %s; + --layer_3_color: %s; + --layer_3_shadow: %s; + --layer_4_color: %s; + --layer_4_shadow: %s; --shadow_color: %s; --shadow_spread: %s; @@ -72,10 +77,14 @@ func userStyle(r *http.Request) (style template.CSS) { selectedStyle.ScrollbarBackgroundColor.cssString(), selectedStyle.BackgroundColor.cssString(), selectedStyle.BodyColor.cssString(), - selectedStyle.AccentColorHeaderbar.cssString(), - selectedStyle.AccentColorDark.cssString(), - selectedStyle.AccentColorMedium.cssString(), - selectedStyle.AccentColorLight.cssString(), + selectedStyle.Layer1Color.cssString(), + fmt.Sprintf("%dpx", selectedStyle.Layer1Shadow), + selectedStyle.Layer2Color.cssString(), + fmt.Sprintf("%dpx", selectedStyle.Layer2Shadow), + selectedStyle.Layer3Color.cssString(), + fmt.Sprintf("%dpx", selectedStyle.Layer3Shadow), + selectedStyle.Layer4Color.cssString(), + fmt.Sprintf("%dpx", selectedStyle.Layer4Shadow), selectedStyle.ShadowColor.cssString(), fmt.Sprintf("%dpx", selectedStyle.ShadowSpread), fmt.Sprintf("%dpx", selectedStyle.ShadowIntensity), @@ -93,12 +102,17 @@ type pixeldrainStyleSheet struct { ScrollbarForegroundColor hsl ScrollbarBackgroundColor hsl - BackgroundColor hsl - BodyColor hsl - AccentColorHeaderbar hsl - AccentColorDark hsl - AccentColorMedium hsl - AccentColorLight hsl + BackgroundColor hsl + BodyColor hsl + + Layer1Color hsl // Deepest and darkest layer + Layer1Shadow int // Deep layers have little shadow + Layer2Color hsl + Layer2Shadow int + Layer3Color hsl + Layer3Shadow int + Layer4Color hsl // Highest and brightest layer + Layer4Shadow int // High layers have lots of shadow ShadowColor hsl ShadowSpread int // Pixels @@ -161,12 +175,16 @@ var defaultPixeldrainStyle = pixeldrainStyleSheet{ ScrollbarForegroundColor: hsl{0, 0, .35}, ScrollbarBackgroundColor: hsl{0, 0, 0}, - BackgroundColor: hsl{0, 0, 0}, - BodyColor: hsl{0, 0, .07}, - AccentColorHeaderbar: hsl{0, 0, .14}, - AccentColorDark: hsl{0, 0, .11}, - AccentColorMedium: hsl{0, 0, .13}, - AccentColorLight: hsl{0, 0, .14}, + BackgroundColor: hsl{0, 0, 0}, + BodyColor: hsl{0, 0, .07}, + Layer1Color: hsl{0, 0, .11}, + Layer1Shadow: 4, + Layer2Color: hsl{0, 0, .13}, + Layer2Shadow: 7, + Layer3Color: hsl{0, 0, .14}, + Layer3Shadow: 10, + Layer4Color: hsl{0, 0, .14}, + Layer4Shadow: 13, ShadowColor: hsl{0, 0, 0}, ShadowSpread: 10, @@ -184,12 +202,16 @@ var sunnyPixeldrainStyle = pixeldrainStyleSheet{ ScrollbarForegroundColor: hsl{0, 0, .30}, ScrollbarBackgroundColor: hsl{0, 0, 0}, - BackgroundColor: hsl{0, 0, 0}, - BodyColor: hsl{0, 0, 1}, - AccentColorHeaderbar: hsl{0, 0, .14}, - AccentColorDark: hsl{0, 0, 1}, - AccentColorMedium: hsl{0, 0, 1}, - AccentColorLight: hsl{0, 0, 1}, + BackgroundColor: hsl{0, 0, 0}, + BodyColor: hsl{0, 0, 1}, + Layer1Color: hsl{0, 0, 1}, + Layer1Shadow: 4, + Layer2Color: hsl{0, 0, 1}, + Layer2Shadow: 5, + Layer3Color: hsl{0, 0, 1}, + Layer3Shadow: 6, + Layer4Color: hsl{0, 0, 1}, + Layer4Shadow: 7, ShadowColor: hsl{0, 0, 0}, ShadowSpread: 10, @@ -207,12 +229,16 @@ var solarizedDarkStyle = pixeldrainStyleSheet{ ScrollbarForegroundColor: hsl{192, .95, .30}, ScrollbarBackgroundColor: hsl{0, 0, 0}, - BackgroundColor: hsl{192, 1, .05}, - BodyColor: hsl{192, .81, .14}, // hsl(192, 81%, 14%) - AccentColorHeaderbar: hsl{192, 1, .11}, // hsl(192, 100%, 11%) - AccentColorDark: hsl{192, .87, .09}, - AccentColorMedium: hsl{192, .81, .14}, - AccentColorLight: hsl{192, .95, .17}, + BackgroundColor: hsl{192, 1, .05}, + BodyColor: hsl{192, .81, .14}, // hsl(192, 81%, 14%) + Layer1Color: hsl{192, .87, .09}, + Layer1Shadow: 4, + Layer2Color: hsl{192, .81, .14}, + Layer2Shadow: 7, + Layer3Color: hsl{192, .95, .17}, + Layer3Shadow: 10, + Layer4Color: hsl{192, 1, .11}, // hsl(192, 100%, 11%) + Layer4Shadow: 13, ShadowColor: hsl{0, 0, 0}, ShadowSpread: 10, @@ -230,12 +256,16 @@ var maroonStyle = pixeldrainStyleSheet{ ScrollbarForegroundColor: hsl{0, .75, .3}, ScrollbarBackgroundColor: hsl{0, 0, 0}, - BackgroundColor: hsl{0, 1, .05}, - BodyColor: hsl{0, .6, .1}, - AccentColorHeaderbar: hsl{0, .5, .07}, - AccentColorDark: hsl{0, .5, .07}, - AccentColorMedium: hsl{0, .8, .15}, - AccentColorLight: hsl{0, .9, .2}, + BackgroundColor: hsl{0, 1, .05}, + BodyColor: hsl{0, .6, .1}, + Layer1Color: hsl{0, .5, .07}, + Layer1Shadow: 4, + Layer2Color: hsl{0, .8, .15}, + Layer2Shadow: 7, + Layer3Color: hsl{0, .9, .2}, + Layer3Shadow: 10, + Layer4Color: hsl{0, .5, .07}, + Layer4Shadow: 13, ShadowColor: hsl{0, 0, 0}, ShadowSpread: 10, @@ -253,12 +283,16 @@ var hackerStyle = pixeldrainStyleSheet{ ScrollbarForegroundColor: hsl{120, .5, .25}, ScrollbarBackgroundColor: hsl{0, 0, 0}, - BackgroundColor: hsl{0, 0, 0}, - BodyColor: hsl{0, 0, 0}, - AccentColorHeaderbar: hsl{0, 0, .14}, - AccentColorDark: hsl{120, .1, .05}, - AccentColorMedium: hsl{120, .2, .10}, - AccentColorLight: hsl{120, .3, .15}, + BackgroundColor: hsl{0, 0, 0}, + BodyColor: hsl{0, 0, 0}, + Layer1Color: hsl{120, .1, .05}, + Layer1Shadow: 4, + Layer2Color: hsl{120, .2, .10}, + Layer2Shadow: 7, + Layer3Color: hsl{120, .3, .15}, + Layer3Shadow: 10, + Layer4Color: hsl{0, 0, .14}, + Layer4Shadow: 13, ShadowColor: hsl{0, 0, 0}, ShadowSpread: 10, @@ -276,12 +310,16 @@ var cantaPixeldrainStyle = pixeldrainStyleSheet{ ScrollbarForegroundColor: hsl{150, .02, .78}, ScrollbarBackgroundColor: hsl{170, .05, .26}, - BackgroundColor: hsl{0, 0, 0}, - BodyColor: hsl{172, .06, .25}, - AccentColorHeaderbar: hsl{172, .06, .25}, // hsl(172, 6%, 25%) - AccentColorDark: hsl{170, .06, .21}, - AccentColorMedium: hsl{160, .04, .31}, - AccentColorLight: hsl{170, .02, .47}, + BackgroundColor: hsl{0, 0, 0}, + BodyColor: hsl{172, .06, .25}, + Layer1Color: hsl{170, .06, .21}, + Layer1Shadow: 4, + Layer2Color: hsl{160, .04, .31}, + Layer2Shadow: 7, + Layer3Color: hsl{170, .02, .47}, + Layer3Shadow: 10, + Layer4Color: hsl{172, .06, .25}, // hsl(172, 6%, 25%) + Layer4Shadow: 13, ShadowColor: hsl{0, 0, 0}, ShadowSpread: 10, @@ -299,12 +337,16 @@ var arcPixeldrainStyle = pixeldrainStyleSheet{ ScrollbarForegroundColor: hsl{222, .08, .44}, // hsl(222, 8%, 44%) ScrollbarBackgroundColor: hsl{223, .12, .2}, // hsl(223, 12%, 29%) - BackgroundColor: hsl{0, 0, 0}, - BodyColor: hsl{223, .12, .29}, - AccentColorHeaderbar: hsl{219, .15, .22}, // hsl(219, 15%, 22%) - AccentColorDark: hsl{215, .17, .19}, - AccentColorMedium: hsl{227, .14, .25}, // hsl(227, 14%, 25%) - AccentColorLight: hsl{223, .12, .29}, + BackgroundColor: hsl{0, 0, 0}, + BodyColor: hsl{223, .12, .29}, + Layer1Color: hsl{215, .17, .19}, + Layer1Shadow: 4, + Layer2Color: hsl{227, .14, .25}, // hsl(227, 14%, 25%) + Layer2Shadow: 7, + Layer3Color: hsl{223, .12, .29}, + Layer3Shadow: 10, + Layer4Color: hsl{219, .15, .22}, // hsl(219, 15%, 22%) + Layer4Shadow: 13, ShadowColor: hsl{0, 0, 0}, ShadowSpread: 10,