add scss and rendererJS

lacymorrow · Oct 6, 2019 · 8bf47a7 · 8bf47a7
1 parent 49cc957
commit 8bf47a7
Show file tree

Hide file tree

Showing 3 changed files with 244 additions and 0 deletions.
diff --git a/index.css.map b/index.css.map
diff --git a/index.scss b/index.scss
@@ -0,0 +1,211 @@
+$border_color:        #c7c7c7;
+$border_color_focus:  #569aff;
+$border_color_hover:  #888888;
+$text_color:          #676767;
+$bg_color:            rgba(255,255,255,0.5);
+
+html,
+body {
+	padding: 0;
+	margin: 0;
+	background: transparent;
+	overflow: hidden;
+}
+
+/* Use OS default fonts */
+body {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+		Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif,
+		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+	text-rendering: optimizeLegibility;
+	font-feature-settings: "liga", "clig", "kern";
+}
+
+::selection {
+	background: transparent;
+	color: inherit;
+}
+
+.container {
+	padding-top:15px;
+	overflow: hidden;
+	position: relative;
+	background: none;
+	border-radius: 5px;
+	width: 100%;
+	height: 100%;
+	-webkit-user-select: none;
+}
+
+.background {
+	transition: background 1s ease;
+	border-radius: 5px;
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: -1;
+}
+
+.drag-me {
+	display: none;
+	transition: opacity 1s ease;
+	// border: 1px solid #eee;
+	border-top: none;
+	border-left: none;
+	background: rgba(100, 100, 100, 1);
+	width: 35px;
+	height: 38px;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	cursor: move;
+	cursor: -webkit-grab;
+	cursor: -moz-grab;
+	-webkit-user-select: none;
+	&:active {
+		cursor: move;
+		cursor: -webkit-grabbing;
+		cursor: -moz-grabbing;
+	}
+	&:before {
+		content: ".";
+		position: absolute;
+		top: 0;
+		left: 10px;
+		font-size: 20px;
+		line-height: 20px;
+		color: #eee;
+		text-shadow: 0 5px #eee, 0 10px #eee, 5px 0 #eee,
+			5px 5px #eee, 5px 10px #eee, 10px 0 #eee, 10px 5px #eee,
+			10px 10px #eee;
+	}
+}
+
+/* Application Style */
+#crosshair {
+	// Default width
+	width: 100px;
+}
+
+.crosshair-wrapper {
+	position: relative;
+	height: 100px ;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+#crosshairImg {
+	-webkit-user-select: none;
+	width: 100%;
+	height: auto;
+}
+
+.settings {
+	display: none;
+	margin: 15px;
+}
+
+.draggable {
+	.crosshair-wrapper {
+		cursor: move;
+		cursor: -webkit-grab;
+		cursor: -moz-grab;
+		-webkit-app-region: drag;
+		&:active {
+			cursor: move;
+			cursor: -webkit-grabbing;
+			cursor: -moz-grabbing;
+		}
+	}
+	.background {
+		background: rgba(255, 255, 255, 0.5);
+	}
+	.drag-me {
+		display: block;
+	}
+	.settings {
+		display: block;
+	}
+}
+
+select {
+	appearance: none;
+	-webkit-appearance: none;
+	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+	text-indent: 0.01px;
+	text-overflow: "";
+	padding: 0.5em 3em 0.5em 0.5em;
+	border: 1px solid $border_color;
+	border-radius: 0;
+	background-color: $bg_color;
+	color: $text_color;
+	outline: none;
+	display: inline-block;
+	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAACgUlEQVR4nO3cSW7bQBBGYd8n3ZTY1VplkVNl8CRlOEMWOYgXvpyVhdEAIUiySFbP7wO8L+p/sjcG7+4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEDzrMifwfnH3Hf0xjh3MM4dsh5hRX5v/O44iH8jgnSMc4eN3x03fne0IvssR4Txww8RpDEdP1sEdpRfp0cQQXznxg+fux3lOckRl8YngrgujZ80gsH5n9eOIII4Phr/JIKnKEfcOj4R6Lp1/KgRzD0iSZEdmPuli/Lls+P4ZckRRLDO0vGnn/un7fazyjFLfwMQwTIa46v/+SWCNIocPyCCuIoeP7AieyLQpzG+ce4hybFEoKuq8QMi0FHl+AERrFP1+AERLNPE+AERzNPU+IEV2Q/i34jguibHD+woz0RwWdPjB0Rwnsr4Ive5n+MmShGk+Q+XBD76J5qmxg+I4F2X4we9R9D1+EGvETD+RG8RMP4ZdpSnHiJg/Ctaj0BjfCvyI/dzRNVqBIw/Q2sRMP4CrUTA+CvUHgHjK6g1AsZXVFsEjB/B4PxjDRGojD/K99h3VkklgogvS2D8BEqN4PSNKIwf0doINl73tSmMn0EpETB+RrkjYPwC5IqA8QtinHtIGQHjFyhVBCrjO/8txWfSndgRMH4FYkXA+BXRjoDxK6QVAeNXTCMCxq+cEbnPEQHjFyR1BO9v43Jfcz83JlJFwPgFix0B41cgVgSMXxHtCBi/QloRMH7FrPP/1gZgnPub+zmwgtnK69LxrfiX3PdDwZIIGL8xcyJg/EbdEgHjN+5aBIzfiXMRMH5nphEwfqfMVl4ZHwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlO4/4NIPH7tR+MsAAAAASUVORK5CYII=);
+	background-position: calc(100% - 10px) 50%;
+	background-size: 15px;
+	background-repeat: no-repeat;
+	transition: all 0.3s ease-in-out;
+
+	/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
+	@media screen and (-webkit-min-device-pixel-ratio: 0) {
+		padding-right: 3em;
+	}
+
+	&:focus {
+		border-color: $border_color_focus;
+		box-shadow: inset 0 0 4px $border_color_focus;
+	}
+
+	&:hover {
+		border-color: $border_color_hover;
+	}
+}
+
+input[type=range]{
+  -webkit-appearance: none;
+  background: none;
+  cursor: pointer;
+
+	&::-webkit-slider-runnable-track {
+	  height: 5px;
+	  background: #ddd;
+	  border: none;
+	  border-radius: 3px;
+	}
+
+	&::-webkit-slider-thumb {
+	  -webkit-appearance: none;
+	  border: none;
+	  height: 16px;
+	  width: 16px;
+	  border-radius: 50%;
+	  background: #555;
+	  margin-top: -5px;
+	  position: relative;
+	}
+
+	&:focus {
+	  outline: none;
+	  &::-webkit-slider-thumb:after {
+	    position: absolute;
+	    top: -35px;
+	    left: 50%;
+	    transform: translateX(-50%);
+	    background: #eee;
+	    border-radius: 5px;
+	    color: #555;
+	    padding: 5px 10px;
+	    border: 2px solid #555;
+	  }
+	}
+
+	&:focus::-webkit-slider-runnable-track {
+	  background: #ccc;
+	}
+}
+
+
diff --git a/renderer.js b/renderer.js
@@ -0,0 +1,32 @@
+const {ipcRenderer} = require('electron')
+
+const crosshairsInput = document.getElementById('crosshairs')
+const crosshairImg = document.getElementById('crosshairImg')
+
+const opacityInput = document.getElementById('setting-opacity')
+const opacityOutput = document.getElementById('output-opacity')
+
+const widthInput = document.getElementById('setting-width')
+const widthOutput = document.getElementById('output-width')
+
+ipcRenderer.on('asynchronous-reply', (event, arg) => {
+  console.log(arg) // prints "pong"
+})
+
+crosshairsInput.addEventListener('change', (e) => {
+	let crosshair = crosshairsInput.value
+	crosshairImg.src = `static/crosshairs/${crosshair}.png`;
+	ipcRenderer.send('set_crosshair', crosshairsInput.value)
+});
+
+opacityInput.addEventListener('change', (e) => {
+	console.log(e.target.value)
+	opacityOutput.innerText = e.target.value;
+	ipcRenderer.send('set_opacity', e.target.value)
+});
+
+widthInput.addEventListener('change', (e) => {
+	console.log(e.target.value)
+	widthOutput.innerText = e.target.value;
+	ipcRenderer.send('set_size', e.target.value)
+});