src/renderer/styles/index.scss
/* App */
$tile: #5500ff;
$app_width: 200px;
$app_height: 124px;
$app_background_opacity: 0.6;
/* Colors */
$app_highlight: #392a84;
$theme_bg_light: #FFF;
$theme_bg_dark: #000;
$text_light: #555;
$text_dark: #EFEFEF;
$icon_dark: #3aa0d7;
$icon_hover_dark: rgba(179, 112, 223, 0.9);
// $icon_dark: #456072;
$icon_light: $app_highlight;
$icon_hover_light: rgba(150, 32, 157, 0.9);
$icon_red: rgba(255, 87, 51, 0.95);
$icon_shadow: rgba(10, 10, 10, .7);
$border_dragging: #569aff;
$border_dragging: $app_highlight;
$default_reticle_fill: #ccc;
$help_text: #666;
$help_text_bg: #EEE;
$help_text_border: #DDD;
$chooser_border: #111;
$chooser_highlight: #c7c7c7;
$chooser_highlight_hover: #2466d8;
$scrollbar_bg: #555;
$scrollbar_shadow: rgba(0, 0, 0, .3);
:root {
// App theme
--app-bg-color-initial: #{rgba($theme_bg_light, $app_background_opacity)};
--app-bg-color-initial: #{rgba($theme_bg_light, .6)};
--app-bg-color: unset;
--app-highlight-color-initial: #{$icon_light};
--app-highlight-color: unset;
--app-icon-hover-color: #{$icon_hover_light};
--app-text-color: #{$text_light};
--app-bg-opacity: #{$app_background_opacity};
--app-chooser-bg-color: #{rgba($theme_bg_light, 1)};
// ANY LIGHT/DARK MODE SETTINGS ^v
@media (prefers-color-scheme: dark) {
--app-bg-color-initial: #{rgba($theme_bg_dark, .6)};
--app-highlight-color-initial: #{$icon_dark};
--app-icon-hover-color: #{$icon_hover_dark};
}
// Settings
--crosshair-scale: 1;
--crosshair-width: 100px;
--crosshair-height: 100px;
--crosshair-opacity: 1;
--reticle-fill-color: #{$default_reticle_fill};
--reticle-scale: 100;
--tilt-angle: 0deg;
--svg-fill-color: inherit;
--svg-stroke-color: inherit;
--svg-stroke-width: inherit;
}
* {
box-sizing: border-box;
user-select: none;
}
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: transparent;
overflow: hidden;
}
/* Use OS default fonts */
body {
color: var(--app-text-color, $text_dark);
font-size: 11px;
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';
}
#crosshair,
#chooser-container {
pointer-events: auto; // set pointer
}
::selection {
background: transparent;
color: inherit;
}
/* Application Style */
.container {
overflow: hidden;
position: relative;
background: none;
border-radius: 5px;
width: 100%;
height: 100%;
cursor: none;
}
// Blue "Hover" border
.container,
#chooser-container {
// user-select: none;
// While dropping file
&.dropping {
&.main-window * {
pointer-events: none;
}
&:before {
content: '';
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
border: 4px dashed $border_dragging;
pointer-events: none;
z-index: 30;
}
}
}
.background {
transition: background 1s ease;
border-radius: 5px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -10;
display: none;
background: var(--app-bg-color, var(--app-bg-color-initial));
border: 1px solid var(--app-highlight-color, var(--app-highlight-color-initial));
}
#titlebar {
position: absolute;
top: 5px;
right: 0;
left: 0;
z-index: 10;
height: 20px;
}
/* Icon Styles */
.feather {
// stroke:whitesmoke;
width: 20px;
height: 20px;
transition: all .15s ease-in-out;
stroke: var(--app-highlight-color, var(--app-highlight-color-initial));
&:hover {
stroke: var(--app-icon-hover-color);
}
// transform: scale( var(--crosshair-scale, 1) )
}
// Child window background
.shadow {
.background {
background: var(--app-bg-color);
}
.feather {
stroke: $icon_shadow;
}
}
.button {
-webkit-app-region: no-drag;
cursor: pointer;
border: none;
outline: none;
background-color: transparent;
pointer-events: auto;
user-select: none;
display: none;
position: absolute;
z-index: 20;
}
.close-button {
display: block; // display in chooser
top: 0;
right: 0;
padding: 4px 4px 2px 4px;
}
.main-window .close-button {
display: none;
right: auto;
left: 0;
}
.settings-button {
bottom: 0;
right: 0;
padding: 4px 4px 2px 4px;
}
.center-button {
bottom: 0;
left: 0;
padding: 4px 4px 2px 4px;
// filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.5));
}
.info-button {
top: 0;
right: 0;
padding: 1px 1px 2px 4px;
.feather {
width: 18px;
height: 18px;
}
&.move,
&.resize {
cursor: move;
&:active {
cursor: crosshair;
}
.feather {
stroke: var(--app-highlight-color, var(--app-highlight-color-initial));
}
}
.info-icon {
.feather {
stroke: $icon_red;
fill: white;
}
}
}
#crosshair {
// Default width
width: var(--crosshair-width);
height: var(--crosshair-height);
opacity: var(--crosshair-opacity);
display: flex;
position: relative;
transform: rotate( var(--tilt-angle) );
transition: transform .1s ease-in-out;
svg {
fill: var(--svg-fill-color);
stroke: var(--svg-stroke-color);
stroke-width: var(--svg-stroke-width);
}
.reticle {
transform: scale( calc( var(--reticle-scale) / 100 ));
position: absolute;
z-index: 10;
svg {
display: none;
width: 100%;
height: 100%;
* {
fill: var(--reticle-fill-color);
}
}
// Selectively show/hide
&.dot {
#dot {
display: block;
}
}
&.cross {
#cross {
display: block;
}
}
}
}
.crosshair-wrapper {
// This controls what is draggable
transform: scale(var(--crosshair-scale, 1));
// transform: scale(calc( calc(100%/125) * 100));
position: relative;
height: 100%;
width: 100%;
min-height: 100px;
min-width: 150px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px auto;
}
#crosshairImg {
width: 100%;
height: auto;
user-select: none;
}
// If draggable then app is unlocked
.draggable {
.container {
cursor: inherit;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
// dont drag app if were dropping a file
&:not(.dropping) {
#titlebar,
.info-button.move, // icon-move
#crosshair,
#crosshair * {
// This is the magic to make things draggable
-webkit-app-region: drag;
cursor: move;
&:active {
cursor: crosshair;
}
}
}
}
.background {
display: block;
}
// Show buttons (except close) when unlocked
.button {
display: block;
}
// Show close button on linux/windows
&.mac .main-window .close-button {
display: none;
}
&.mac {
// Whole window draggable on mac, Windows bugs out when dragging
.container:not(.dropping) .crosshair-wrapper {
// This is the magic to make things draggable
-webkit-app-region: drag;
cursor: move;
&:active {
cursor: crosshair;
}
}
}
}
/*
* Settings
*/
label {
display: block;
margin-top: 10px;
margin-bottom: 4px;
&:first-of-type {
margin-top: 0;
}
}
/* Crosshair chooser */
#chooser-container {
height: 100vh;
width: 100vw;
padding: 4px;
background: var(--app-chooser-bg-color);
border: 3px solid $chooser_border;
}
#chooser-container {
padding-top: 25px;
border-radius: 5px;
}
#chooser-wrapper {
height: 100%;
}
#crosshair-chooser {
height: 100%;
width: 100%;
overflow-y: auto;
&::-webkit-scrollbar-track {
box-shadow: none;
border: none;
background-color: transparent;
}
&::-webkit-scrollbar {
margin-right: 1px;
width: 12px;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
opacity: 0.9;
border-radius: 10px;
box-shadow: inset 0 0 6px $scrollbar-shadow;
background-color: $scrollbar-bg;
}
p {
display: inline-block;
}
.crosshair-option {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
}
.group-label {
display: block;
padding: 0 0.5em;
font-size: 20px;
margin-bottom: 0;
&:first-of-type {
margin-top: 0;
}
}
// Collection wrapper
&>div {
width: 100%;
padding: 0 0.5em 0;
margin-left: -0.25em;
margin-right: -0.25em;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: start;
p {
max-width: 88px;
}
}
img {
cursor: pointer;
box-sizing: content-box;
margin: 0.5em;
padding: 0.5em;
height: 64px;
border: 1px dashed $chooser_highlight;
border-radius: 3px;
transition: border-color .2s ease-in;
background-color: rgba(#FFF, .5);
&.current,
&:hover {
border-color: $chooser_highlight_hover;
}
&.current {
border-style: solid;
border-width: 3px;
}
}
}
.d-none {
display: none;
}
.d-inline-block {
display: inline-block;
}
.d-flex {
display: flex;
justify-content: space-between;
}
.hidden {
display: none;
pointer-events: none;
}