Lots of style changes

init/conf/config.go

@@ -1,20 +1,22 @@
 package conf
 
 type PixelWebConfig struct {
-	APIURLExternal    string `toml:"api_url_external"`
+	APIURLExternal      string `toml:"api_url_external"`
-	APIURLInternal    string `toml:"api_url_internal"`
+	APIURLInternal      string `toml:"api_url_internal"`
-	StaticResourceDir string `toml:"static_resource_dir"`
+	SessionCookieDomain string `toml:"session_cookie_domain"`
-	TemplateDir       string `toml:"template_dir"`
+	StaticResourceDir   string `toml:"static_resource_dir"`
-	DebugMode         bool   `toml:"debug_mode"`
+	TemplateDir         string `toml:"template_dir"`
-	MaintenanceMode   bool   `toml:"maintenance_mode"`
+	DebugMode           bool   `toml:"debug_mode"`
+	MaintenanceMode     bool   `toml:"maintenance_mode"`
 }
 
 const DefaultConfig = `# Pixeldrain Web UI server configuration
 
-api_url_external    = "/api" # Used in the web browser
+api_url_external      = "/api" # Used in the web browser
-api_url_internal    = "http://127.0.0.1:8080" # Used for internal API requests to the pixeldrain server, not visible to users
+api_url_internal      = "http://127.0.0.1:8080" # Used for internal API requests to the pixeldrain server, not visible to users
-static_resource_dir = "res/static"
+session_cookie_domain = ".pixeldrain.com"
-template_dir        = "res/template"
+static_resource_dir   = "res/static"
-debug_mode          = false
+template_dir          = "res/template"
-maintenance_mode    = false
+debug_mode            = false
+maintenance_mode      = false
 `

res/static/script/Toolbar.js

@@ -18,13 +18,11 @@ var Toolbar = {
 
 			document.getElementById("toolbar").style.left = "-9em";
 			document.getElementById("filepreview").style.left = "0px";
-			document.getElementById("info_popup").style.left = "1em";
 
 			this.visible = false;
 		} else {
 			document.getElementById("toolbar").style.left = "0px";
 			document.getElementById("filepreview").style.left = "8em";
-			document.getElementById("info_popup").style.left = "9em";
 
 			this.visible = true;
 		}
@@ -175,7 +173,7 @@ function loadCaptcha(){
 
 var DetailsWindow = {
 	visible:       false,
-	popupDiv:      document.getElementById("info_popup"),
+	popupDiv:      document.getElementById("details_popup"),
 	detailsButton: document.getElementById("btnDetails"),
 	toggle: function () {
 		if (this.visible) {

res/static/style/layout.css

@@ -62,10 +62,11 @@ body{
 	margin: 0;
 	text-align: center; /* Center the header and body */
 	line-height: 1.5em;
-	height: 100%;
 	overflow-x: hidden;
 	color: #bfbfbf; /* Fallback */
 	color: var(--text_color);
+	box-sizing: border-box;
+	padding: 0;
 }
 
 /* Page layout elements */
@@ -83,14 +84,13 @@ body{
 	min-width: 300px;
 	width: 100%;
 	height: auto;
-	padding: 0px 8px 0px 8px;
+	padding: 0 10px 0 10px;
+	margin: 30px 0 30px 0;
 	box-sizing: border-box;
 	background-color: var(--body_color);
-	margin-top: 30px;
-	margin-bottom: 30px;
 	text-align: left;
-	box-shadow: #000000 8px 8px 50px, 5px;
+	box-shadow: #000000 0 0 10px, 5px;
-	box-shadow: var(--shadow_color) 8px 8px var(--shadow_spread) var(--shadow_intensity);
+	box-shadow: var(--shadow_color) 0 0 var(--shadow_spread) var(--shadow_intensity);
 	z-index: 1;
 	word-break: break-word;
 }
@@ -112,8 +112,8 @@ body{
 .navigation a:hover {
 	background: linear-gradient(#82c13e, #6da234);
 	background: linear-gradient(var(--highlight_color), var(--highlight_color_dark));
-	box-shadow: #82c13e, 2px 2px 8px #000000;
+	box-shadow: #82c13e, 1px 1px 4px #000000;
-	box-shadow: var(--highlight_border), 2px 2px 8px var(--shadow_color);
+	box-shadow: var(--highlight_border), 1px 1px 4px var(--shadow_color);
 	color: #000000;
 	color: var(--highlight_text_color);
 	transition: box-shadow 0.5s;
@@ -150,19 +150,43 @@ body{
 	position: relative;
 	width: auto;
 	height: auto;
-	margin: 0 -8px 0 -8px;
+	margin: 0 -10px 0 -10px;
 	box-sizing: border-box;
 	overflow: hidden;
 	text-align: center;
-	padding: 4px 0px 4px 0px;
+	padding: .5em;
 	z-index: 101;
 }
-.highlight_dark   {background-color: var(--accent_color_dark);   border-color: var(--accent_color_dark_border);   box-shadow: inset 1px 1px 12px -1px var(--shadow_color);}
+.highlight_dark   {
-.highlight_middle {background-color: var(--accent_color_medium); border-color: var(--accent_color_medium_border); box-shadow: inset 1px 1px 8px -1px var(--shadow_color);}
+	background-color: var(--accent_color_dark);
-.highlight_light  {background-color: var(--accent_color_light);  border-color: var(--accent_color_light_border);  box-shadow: 1px 1px 4px var(--shadow_color);}
+	border-color: var(--accent_color_dark_border);
-.highlight_green  {background-color: rgba(0, 255, 0, 0.05);  border-color: #00d000;}
+	box-shadow: inset 1px 1px 8px -1px var(--shadow_color);}
-.highlight_blue   {background-color: rgba(32, 32, 255, 0.2); border-color: rgb(54, 54, 255);}
+.highlight_middle {
-.highlight_red    {background-color: rgba(255, 0, 0, 0.1);  border-color: #B00000;}
+	background-color: var(--accent_color_medium);
+	border-color: var(--accent_color_medium_border);
+	box-shadow: inset 1px 1px 6px -1px var(--shadow_color);}
+.highlight_light  {
+	background-color: var(--accent_color_light);
+	border-color: var(--accent_color_light_border);
+	box-shadow: 1px 1px 4px var(--shadow_color);}
+.highlight_green  {
+	background-color: rgba(0, 255, 0, 0.05);
+	border-color: #00d000;}
+.highlight_blue   {
+	background-color: rgba(32, 32, 255, 0.2);
+	border-color: rgb(54, 54, 255);}
+.highlight_red    {
+	background-color: rgba(255, 0, 0, 0.1);
+	border-color: #B00000;}
+
+body > .highlight_dark,
+body > .highlight_middle,
+body > .highlight_light,
+body > .highlight_green,
+body > .highlight_blue,
+body > .highlight_red {
+	margin: 0;
+}
 
 .border_top    {border-top-width:    1px; border-top-style:    solid;}
 .border_bottom {border-bottom-width: 1px; border-bottom-style: solid;}
@@ -189,8 +213,11 @@ hr{
 	width: 12px;  /* for vertical scrollbars */
 	height: 12px; /* for horizontal scrollbars */
 }
-::-webkit-scrollbar-track {background: var(--accent_color_dark);}
+::-webkit-scrollbar-track {background: var(--scrollbar_background_color);}
-::-webkit-scrollbar-thumb {background-color: var(--accent_color_light);}
+::-webkit-scrollbar-thumb {
+	background-color: var(--scrollbar_foreground_color);
+	border-radius: 6px;
+}
 ::-webkit-scrollbar-corner{background: transparent;}
 
 a       {color: var(--highlight_color); text-decoration: none;}
@@ -312,7 +339,7 @@ select{
 	margin: 2px;
 	background: linear-gradient(var(--input_color), var(--input_color_dark));
 	padding: 6px 8px 6px 8px;
-	box-shadow: 2px 2px 8px var(--shadow_color);
+	box-shadow: 2px 2px 4px var(--shadow_color);
 	font-weight: bold;
 	font-size: 0.85em;
 	overflow: hidden;
@@ -340,7 +367,7 @@ select:focus{
 	color: #bfbfbf; /* Fallback */
 	color: var(--input_text_color);
 	text-decoration: none;
-	box-shadow: var(--highlight_border), 2px 2px 8px var(--shadow_color);
+	box-shadow: var(--highlight_border), 2px 2px 4px var(--shadow_color);
 }
 button:active,
 .button:active,
@@ -349,7 +376,7 @@ input[type="button"]:active,
 input[type="color"]:active,
 select:active{
 	background: linear-gradient(var(--input_color_dark), var(--input_color));
-	box-shadow: inset 5px 5px 10px var(--shadow_color);
+	box-shadow: inset 4px 4px 8px var(--shadow_color);
 	padding: 11px 3px 1px 13px; /* Exactly 5px offset compared to the inactive padding to give a depth effect */
 }
 .button_full_width      {width: calc(100% - 4px);}
@@ -376,7 +403,7 @@ input[type="number"]{
 	box-sizing: border-box;
 	border-radius: 4px;
 	background: linear-gradient(var(--input_color_dark), var(--input_color));
-	box-shadow: inset 3px 3px 6px var(--shadow_color);
+	box-shadow: inset 2px 2px 4px var(--shadow_color);
 	padding: 3px 5px;
 	color: var(--input_text_color);
 	height: 26px;

res/static/style/viewer.css

@@ -190,32 +190,15 @@ body{
 /* =====================
    || MISC COMPONENTS ||
    ===================== */
-.full_popup{
+
+.popup {
 	position: fixed;
 	visibility: hidden;
 	opacity: 0;
-	transition: visibility 1s, opacity 1s, left 1s;
+	transition: visibility 1s, opacity 1s;
-	background-color: var(--background_color);
+	background-color: var(--body_color);
-	left: 9em;
-	right: 1em;
-	bottom: 1em;
-	top: 1em;
-	overflow-y: scroll;
-	padding: 1em;
-	box-sizing: border-box;
-	text-align: left;
-	box-shadow: var(--shadow_color) 0px 0px 50px;
-	z-index: 100;
-}
-.captcha_popup{
-	position: fixed;
-	visibility: hidden;
-	opacity: 0;
-	transition: visibility 1s, opacity 1s, left 1s;
-	background-color: var(--background_color);
 	border-color: var(--accent_color_dark_border);
-	height: auto;
+	max-height: 100%;
-	width: 450px;
 	max-width: 100%;
 	top: 10%;
 	left: 50%;
@@ -224,6 +207,20 @@ body{
 	box-sizing: border-box;
 	text-align: left;
 	box-shadow: var(--shadow_color) 0px 0px 50px;
+}
+.popup .highlight_light {
+	font-size: 1.2em;
+}
+
+.details_popup{
+	overflow-y: scroll;
+	width: 1200px;
+	height: 800px;
+	z-index: 100;
+}
+.captcha_popup{
+	height: auto;
+	width: 450px;
 	z-index: 101;
 }
 #captcha_popup_captcha > div {

res/template/apidoc.html

@@ -79,10 +79,10 @@
 			{{template "api-list-post"}}
 			{{template "api-list-get"}}
 
-			<!--<h2>Filesystem Methods</h2>-->
+			<h2>Filesystem Methods</h2>
-			{{/*template "api-filesystem-path-post"*/}}
+			{{template "api-filesystem-path-post"}}
-			{{/*template "api-filesystem-path-get"*/}}
+			{{template "api-filesystem-path-get"}}
-			{{/*template "api-filesystem-path-delete"*/}}
+			{{template "api-filesystem-path-delete"}}
 
 			{{template "footer"}}
 		</div>

res/template/file_viewer.html

@@ -117,14 +117,11 @@
 			</button>
 		</div>
 
-		<div id="info_popup" class="full_popup">
+		<div id="details_popup" class="popup details_popup border_bottom">
-			<img
+			<div id="details_popup_title" class="highlight_light border_top border_bottom">
-				alt="Close"
+				File Info
-				src="/res/img/cross.png"
+				<button style="position: absolute; top: 3px; right: 3px;" class="button_red" onclick="DetailsWindow.toggle();">X</button>
-				style="position: absolute; top: 5px; right: 5px; width: 40px; height: 40px; cursor: pointer;"
+			</div>
-				onclick="DetailsWindow.toggle();"
-			/>
-			<h3>File Info</h3>
 			<span id="info_file_details"></span>
 			<span id="info_about">
 				<h3>About</h3>
@@ -158,7 +155,7 @@
 				<br/>
 			</span>
 		</div>
-		<div id="captcha_popup" class="captcha_popup border_bottom">
+		<div id="captcha_popup" class="popup captcha_popup border_bottom">
 			<div id="captcha_popup_title" class="highlight_light border_top border_bottom"></div>
 			<div id="captcha_popup_content"></div>
 			<br/>

res/template/fragments/footer.html

@@ -2,7 +2,8 @@
 <br/>
 <div class="highlight_dark border_top border_bottom">
 	Pixeldrain is a product by <a href="//fornaxian.com" target="_blank">Fornaxian Technologies</a> |
-	Twitter: <a href="https://twitter.com/Fornax96" target="_blank">@Fornax96</a>
+	Twitter:&nbsp;<a href="https://twitter.com/Fornax96" target="_blank">@Fornax96</a>
-	Reddit: <a href="https://reddit.com/r/pixeldrain" target="_blank">/r/pixeldrain</a>
+	Reddit:&nbsp;<a href="https://reddit.com/r/pixeldrain" target="_blank">/r/pixeldrain</a>
+	Medium:&nbsp;<a href="https://medium.com/pixeldrain" target="_blank">Pixeldrain</a>
 </div>
 {{end}}

res/template/home.html

@@ -22,7 +22,7 @@
 		<br/>
 		<div id="body" class="body">
 			{{template "menu" .}}
-			<div class="highlight_middle border_bottom" style="padding: 0;">
+			<div class="highlight_middle border_bottom">
 				<input id="file_input_field" type="file" name="file" multiple="multiple"/>
 				<button id="select_file_button" class="big_button button_highlight">Upload Files</button>
 				<button id="text_button" class="big_button button_highlight" onClick="window.location.href = '/t/'">Upload Text</button><br/>
@@ -47,6 +47,14 @@
 				files you can upload. A list can contain up to 10000 files.
 			</p>
 
+			<h2>Style selector</h2>
+			<input type="radio" id="style_default"        name="style"><label for="style_default">Pixeldrain Style</label><br/>
+			<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized Dark Style</label><br/>
+			<input type="radio" id="style_maroon"         name="style"><label for="style_maroon">Maroon Style</label><br/>
+			<input type="radio" id="style_hacker"         name="style"><label for="style_hacker">Hacker Style</label><br/>
+			<input type="radio" id="style_canta"          name="style"><label for="style_canta">Canta Style</label>
+			(Inspired by <a href="https://github.com/vinceliuice/Canta-theme" target="_blank">Canta GTK</a>)<br/>
+
 			<h2>Questions and Answers</h2>
 
 			<h3>For how long will my files be stored?</h3>
@@ -150,12 +158,6 @@
 				<a href="mailto:support@pixeldrain.com">support@pixeldrain.com</a>
 			</p>
 
-			<h2>Style selector</h2>
-			<input type="radio" id="style_default" name="style"><label for="style_default">Default Pixeldrain Style</label><br/>
-			<input type="radio" id="style_solarized_dark" name="style"><label for="style_solarized_dark">Solarized Dark Style</label><br/>
-			<input type="radio" id="style_maroon" name="style"><label for="style_maroon">Maroon Style</label><br/>
-			<input type="radio" id="style_hacker" name="style"><label for="style_hacker">Hacker Style</label><br/>
-
 			{{template "footer"}}
 		</div>
 

webcontroller/user_account.go

@@ -190,6 +190,7 @@ func (wc *WebController) loginForm(td *TemplateData, r *http.Request) (f forms.F
 				Value:   loginResp.APIKey,
 				Path:    "/",
 				Expires: time.Now().AddDate(50, 0, 0),
+				Domain:  wc.conf.SessionCookieDomain,
 			}
 			f.Extra.RedirectTo = "/user"
 		}

webcontroller/user_style.go

@@ -15,10 +15,14 @@ func userStyle(r *http.Request) (style template.CSS) {
 		switch cookie.Value {
 		case "solarized_dark":
 			selectedStyle = solarizedDarkStyle
+		case "sunny":
+			selectedStyle = sunnyPixeldrainStyle
 		case "maroon":
 			selectedStyle = maroonStyle
 		case "hacker":
 			selectedStyle = hackerStyle
+		case "canta":
+			selectedStyle = cantaPixeldrainStyle
 		case "default":
 			fallthrough // use default case
 		default:
@@ -28,16 +32,18 @@ func userStyle(r *http.Request) (style template.CSS) {
 
 	return template.CSS(fmt.Sprintf(
 		`:root {
-	--text_color:            %s;
+	--text_color:                 %s;
-	--input_color:           %s;
+	--input_color:                %s;
-	--input_color_dark:      %s;
+	--input_color_dark:           %s;
-	--input_text_color:      %s;
+	--input_text_color:           %s;
-	--highlight_color:       %s;
+	--highlight_color:            %s;
-	--highlight_color_dark:  %s;
+	--highlight_color_dark:       %s;
-	--highlight_text_color:  %s;
+	--highlight_text_color:       %s;
-	--danger_color:          %s;
+	--danger_color:               %s;
-	--danger_color_dark:     %s;
+	--danger_color_dark:          %s;
-	--file_background_color: %s;
+	--file_background_color:      %s;
+	--scrollbar_foreground_color: %s;
+	--scrollbar_background_color: %s;
 
 	--background_color:           %s;
 	--body_color:                 %s;
@@ -54,22 +60,24 @@ func userStyle(r *http.Request) (style template.CSS) {
 }`,
 		selectedStyle.TextColor.cssString(),
 		selectedStyle.InputColor.cssString(),
-		selectedStyle.InputColor.add(0, 0, -.08).cssString(),
+		selectedStyle.InputColor.add(0, 0, -.05).cssString(),
 		selectedStyle.InputTextColor.cssString(),
 		selectedStyle.HighlightColor.cssString(),
-		selectedStyle.HighlightColor.add(0, 0, -.08).cssString(),
+		selectedStyle.HighlightColor.add(0, 0, -.05).cssString(),
 		selectedStyle.HighlightTextColor.cssString(),
 		selectedStyle.DangerColor.cssString(),
-		selectedStyle.DangerColorDark.cssString(),
+		selectedStyle.DangerColor.add(0, 0, -.05).cssString(),
 		selectedStyle.FileBackgroundColor.cssString(),
+		selectedStyle.ScrollbarForegroundColor.cssString(),
+		selectedStyle.ScrollbarBackgroundColor.cssString(),
 		selectedStyle.BackgroundColor.cssString(),
 		selectedStyle.BodyColor.cssString(),
 		selectedStyle.AccentColorDark.cssString(),
-		selectedStyle.AccentColorDark.add(0, 0, .15).cssString(),
+		selectedStyle.AccentColorDark.add(0, 0, .1).cssString(),
 		selectedStyle.AccentColorMedium.cssString(),
-		selectedStyle.AccentColorMedium.add(0, 0, .15).cssString(),
+		selectedStyle.AccentColorMedium.add(0, 0, .1).cssString(),
 		selectedStyle.AccentColorLight.cssString(),
-		selectedStyle.AccentColorLight.add(0, 0, .15).cssString(),
+		selectedStyle.AccentColorLight.add(0, 0, .1).cssString(),
 		selectedStyle.ShadowColor.cssString(),
 		fmt.Sprintf("%dpx", selectedStyle.ShadowSpread),
 		fmt.Sprintf("%dpx", selectedStyle.ShadowIntensity),
@@ -77,14 +85,15 @@ func userStyle(r *http.Request) (style template.CSS) {
 }
 
 type pixeldrainStyleSheet struct {
-	TextColor           hsl
+	TextColor                hsl
-	InputColor          hsl // Buttons, text fields
+	InputColor               hsl // Buttons, text fields
-	InputTextColor      hsl
+	InputTextColor           hsl
-	HighlightColor      hsl // Links, highlighted buttons, list navigation
+	HighlightColor           hsl // Links, highlighted buttons, list navigation
-	HighlightTextColor  hsl // Text on buttons
+	HighlightTextColor       hsl // Text on buttons
-	DangerColor         hsl
+	DangerColor              hsl
-	DangerColorDark     hsl
+	FileBackgroundColor      hsl
-	FileBackgroundColor hsl
+	ScrollbarForegroundColor hsl
+	ScrollbarBackgroundColor hsl
 
 	BackgroundColor   hsl
 	BodyColor         hsl
@@ -143,35 +152,59 @@ func (h hsl) add(hue int, saturation float64, lightness float64) hsl {
 // Following are all the available styles
 
 var defaultPixeldrainStyle = pixeldrainStyleSheet{
-	TextColor:           hsl{0, 0, .75},
+	TextColor:                hsl{0, 0, .7},
-	InputColor:          hsl{0, 0, .38},
+	InputColor:               hsl{0, 0, .25},
-	InputTextColor:      hsl{0, 0, 1},
+	InputTextColor:           hsl{0, 0, 1},
-	HighlightColor:      hsl{89, .51, .5},
+	HighlightColor:           hsl{89, .51, .45},
-	HighlightTextColor:  hsl{0, 0, 0},
+	HighlightTextColor:       hsl{0, 0, 0},
-	DangerColor:         hsl{339, .65, .31},
+	DangerColor:              hsl{339, .65, .31},
-	DangerColorDark:     hsl{339, .64, .23},
+	FileBackgroundColor:      hsl{0, 0, .14},
-	FileBackgroundColor: hsl{89, .51, .02},
+	ScrollbarForegroundColor: hsl{0, 0, .30},
+	ScrollbarBackgroundColor: hsl{0, 0, 0},
 
-	BackgroundColor:   hsl{0, 0, .05},
+	BackgroundColor:   hsl{0, 0, 0},
-	BodyColor:         hsl{20, .05, .14},
+	BodyColor:         hsl{0, 0, .07},
-	AccentColorDark:   hsl{0, 0, .19},
+	AccentColorDark:   hsl{0, 0, .11},
-	AccentColorMedium: hsl{0, 0, .23},
+	AccentColorMedium: hsl{0, 0, .13},
-	AccentColorLight:  hsl{0, 0, .28},
+	AccentColorLight:  hsl{0, 0, .14},
 
 	ShadowColor:     hsl{0, 0, 0},
-	ShadowSpread:    50,
+	ShadowSpread:    10,
-	ShadowIntensity: 5,
+	ShadowIntensity: 0,
+}
+
+var sunnyPixeldrainStyle = pixeldrainStyleSheet{
+	TextColor:                hsl{0, 0, .1},
+	InputColor:               hsl{0, 0, 1},
+	InputTextColor:           hsl{0, 0, .1},
+	HighlightColor:           hsl{89, .51, .5},
+	HighlightTextColor:       hsl{0, 0, 0},
+	DangerColor:              hsl{339, .65, .31},
+	FileBackgroundColor:      hsl{0, 0, 1},
+	ScrollbarForegroundColor: hsl{0, 0, .30},
+	ScrollbarBackgroundColor: hsl{0, 0, 0},
+
+	BackgroundColor:   hsl{0, 0, 0},
+	BodyColor:         hsl{0, 0, 1},
+	AccentColorDark:   hsl{0, 0, 1},
+	AccentColorMedium: hsl{0, 0, 1},
+	AccentColorLight:  hsl{0, 0, 1},
+
+	ShadowColor:     hsl{0, 0, 0},
+	ShadowSpread:    10,
+	ShadowIntensity: 0,
 }
 
 var solarizedDarkStyle = pixeldrainStyleSheet{
-	TextColor:           hsl{0, 0, .75},
+	TextColor:                hsl{0, 0, .75},
-	InputColor:          hsl{192, .95, .30},
+	InputColor:               hsl{192, .95, .30},
-	InputTextColor:      hsl{0, 0, 1},
+	InputTextColor:           hsl{0, 0, 1},
-	HighlightColor:      hsl{145, .63, .42},
+	HighlightColor:           hsl{145, .63, .42},
-	HighlightTextColor:  hsl{0, 0, 1},
+	HighlightTextColor:       hsl{0, 0, 1},
-	DangerColor:         hsl{343, .63, .42},
+	DangerColor:              hsl{343, .63, .42},
-	DangerColorDark:     hsl{343, .63, .36},
+	FileBackgroundColor:      hsl{192, .87, .05},
-	FileBackgroundColor: hsl{192, .87, .05},
+	ScrollbarForegroundColor: hsl{192, .95, .30},
+	ScrollbarBackgroundColor: hsl{0, 0, 0},
 
 	BackgroundColor:   hsl{192, 1, .05},
 	BodyColor:         hsl{192, 1, .11},
@@ -179,20 +212,21 @@ var solarizedDarkStyle = pixeldrainStyleSheet{
 	AccentColorMedium: hsl{192, .81, .14},
 	AccentColorLight:  hsl{192, .95, .17},
 
-	ShadowColor:     hsl{192, .87, 0},
+	ShadowColor:     hsl{0, 0, 0},
-	ShadowSpread:    50,
+	ShadowSpread:    10,
-	ShadowIntensity: 5,
+	ShadowIntensity: 0,
 }
 
 var maroonStyle = pixeldrainStyleSheet{
-	TextColor:           hsl{0, 0, .7},
+	TextColor:                hsl{0, 0, .7},
-	InputColor:          hsl{0, .75, .2},
+	InputColor:               hsl{0, .75, .2},
-	InputTextColor:      hsl{0, 0, 1},
+	InputTextColor:           hsl{0, 0, 1},
-	HighlightColor:      hsl{0, 1, .4},
+	HighlightColor:           hsl{0, 1, .4},
-	HighlightTextColor:  hsl{0, 0, 1},
+	HighlightTextColor:       hsl{0, 0, 1},
-	DangerColor:         hsl{0, .1, .1},
+	DangerColor:              hsl{0, .1, .1},
-	DangerColorDark:     hsl{0, 0, 0},
+	FileBackgroundColor:      hsl{0, 1, .03},
-	FileBackgroundColor: hsl{0, 1, .03},
+	ScrollbarForegroundColor: hsl{0, .75, .2},
+	ScrollbarBackgroundColor: hsl{0, 0, 0},
 
 	BackgroundColor:   hsl{0, 1, .05},
 	BodyColor:         hsl{0, .6, .1},
@@ -200,20 +234,21 @@ var maroonStyle = pixeldrainStyleSheet{
 	AccentColorMedium: hsl{0, .8, .15},
 	AccentColorLight:  hsl{0, .9, .2},
 
-	ShadowColor:     hsl{192, .87, 0},
+	ShadowColor:     hsl{0, 0, 0},
-	ShadowSpread:    50,
+	ShadowSpread:    10,
-	ShadowIntensity: 5,
+	ShadowIntensity: 0,
 }
 
 var hackerStyle = pixeldrainStyleSheet{
-	TextColor:           hsl{0, 0, .8},
+	TextColor:                hsl{0, 0, .8},
-	InputColor:          hsl{0, 0, .25},
+	InputColor:               hsl{0, 0, .25},
-	InputTextColor:      hsl{0, 0, 1},
+	InputTextColor:           hsl{0, 0, 1},
-	HighlightColor:      hsl{120, 1, .5},
+	HighlightColor:           hsl{120, 1, .5},
-	HighlightTextColor:  hsl{0, 0, 0},
+	HighlightTextColor:       hsl{0, 0, 0},
-	DangerColor:         hsl{0, .65, .31},
+	DangerColor:              hsl{0, .65, .31},
-	DangerColorDark:     hsl{0, .64, .23},
+	FileBackgroundColor:      hsl{120, .8, .06},
-	FileBackgroundColor: hsl{120, .8, .06},
+	ScrollbarForegroundColor: hsl{0, 0, .25},
+	ScrollbarBackgroundColor: hsl{0, 0, 0},
 
 	BackgroundColor:   hsl{0, 0, 0},
 	BodyColor:         hsl{0, 0, 0},
@@ -221,7 +256,29 @@ var hackerStyle = pixeldrainStyleSheet{
 	AccentColorMedium: hsl{120, .2, .10},
 	AccentColorLight:  hsl{120, .3, .15},
 
-	ShadowColor:     hsl{120, 1, .08},
+	ShadowColor:     hsl{0, 0, 0},
-	ShadowSpread:    50,
+	ShadowSpread:    10,
-	ShadowIntensity: 5,
+	ShadowIntensity: 0,
+}
+
+var cantaPixeldrainStyle = pixeldrainStyleSheet{
+	TextColor:                hsl{0, 0, .8},
+	InputColor:               hsl{167, .06, .40},
+	InputTextColor:           hsl{0, 0, 1},
+	HighlightColor:           hsl{165, 1, .40},
+	HighlightTextColor:       hsl{0, 0, 0},
+	DangerColor:              hsl{40, 1, .5},
+	FileBackgroundColor:      hsl{170, .04, .29},
+	ScrollbarForegroundColor: hsl{150, .02, .78},
+	ScrollbarBackgroundColor: hsl{170, .05, .26},
+
+	BackgroundColor:   hsl{0, 0, 0},
+	BodyColor:         hsl{172, .06, .25},
+	AccentColorDark:   hsl{170, .06, .21},
+	AccentColorMedium: hsl{160, .04, .31},
+	AccentColorLight:  hsl{170, .02, .47},
+
+	ShadowColor:     hsl{0, 0, 0},
+	ShadowSpread:    10,
+	ShadowIntensity: 0,
 }