* Adjusted theme colors to add more contrast on white theme while making black more OLED friendly

* Links now get an underline on hover
* Cleaned up CSS variable names, added another theme color for more control
* Cleaned up unused CSS, removed scrollbars popping up, tons of other little UI tweaks
* Renamed shared notes to inbox
* Tweaked form display, seperated login and create accouts
* Put login/sign up form on home page
* Created more legitimate marketing for home page
* Tons up updates to note page and note input panel
* Better support for two users editing a note
* MUCH better diff handling, web sockets restore notes with unsaved diffs
* Moved all squire text modifier functions into a mixin class
* It now says saving when closing a note
* Lots of cleanup and better handiling of events on mount and destroy
* Scroll behavior modified to load notes when closer to bottom of page
* Pretty decent shared notes and sharable link support
* Updated help text
* Search now includes tag suggestions and attachment suggestions
* Cleaned up scratch pad a ton, allow for users to create new scratch pads
* Created a 404 Page and a Shared note page
* So many other small improvements. Oh my god, what is wrong with me, not doing commits!?
This commit is contained in:
Max G
2020-06-07 20:57:35 +00:00
parent 09cccf1983
commit d349fb8328
31 changed files with 1605 additions and 1095 deletions

View File

@@ -17,10 +17,11 @@
:root {
--background_color: #fff;
--body_bg_color: #f5f6f7;
--small_element_bg_color: #fff;
--text_color: #3d3d3d;
--outline_color: rgba(34,36,38,.15);
--border_color: rgba(34,36,38,.20);
--dark_border_color: #DFE1E6;
--border_color: #DFE1E6;
/* Global purple menu styles */
--menu-border: #534c68;
@@ -34,7 +35,9 @@
html {
/*scrollbar-width: none;*/
}
a:hover {
text-decoration: underline;
}
div.ui.basic.segment.no-fluf-segment {
margin-top: 0px;
}
@@ -59,21 +62,21 @@ div.ui.basic.segment.no-fluf-segment {
/* OVERWRITE DEFAULT SEMANTIC STYLES FOR CUSTOM/NIGHT MODES*/
body {
color: var(--text_color);
background-color: var(--background_color);
background-color: var(--body_bg_color);
font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
.ui.segment {
color: var(--text_color);
background-color: var(--background_color);
border-color: var(--border_color);
background-color: var(--small_element_bg_color);
border-color: var(--dark_border_color);
}
.button-sub {
display: inline-block;
width: 100%;
font-size: 0.9em;
color: white;
opacity: 0.8;
color: grey;
opacity: 0.9;
padding: 4px 0 0 0;
text-align: center;
}
@@ -83,71 +86,43 @@ body {
.ui.form textarea:not([type]),
.ui.form textarea:not([type]):focus {
color: var(--text_color);
background-color: var(--background_color);
border-color: var(--border_color);
background-color: var(--small_element_bg_color);
border-color: var(--dark_border_color);
}
.ui.basic.label, .ui.header, .ui.header div.sub.header {
color: var(--text_color);
background-color: var(--background_color);
border-color: var(--border_color);
background-color: transparent;
border-color: var(--dark_border_color);
}
.ui.icon.input > i.icon {
color: var(--text_color);
}
div.ui.basic.green.label {
background-color: var(--background_color) !important;
background-color: var(--small_element_bg_color) !important;
}
.ui.basic.button, .ui.basic.buttons .button {
background-color: var(--background_color) !important;
background-color: var(--small_element_bg_color) !important;
color: var(--text_color) !important;
border: 1px solid;
border-color: var(--border_color) !important;
border-color: var(--dark_border_color) !important;
box-shadow: none;
}
.ui.basic.button:focus, .ui.basic.button:hover {
background-color: var(--background_color) !important;
background-color: var(--small_element_bg_color) !important;
color: var(--text_color) !important;
box-shadow: none;
}
.ui.tabular.menu .item {
background-color: var(--background_color) !important;
background-color: var(--small_element_bg_color) !important;
color: var(--text_color) !important;
}
.ui.tabular.menu .item.active {
background-color: var(--background_color) !important;
background-color: var(--small_element_bg_color) !important;
color: var(--text_color) !important;
border-color: var(--border_color) !important;
border-color: var(--dark_border_color) !important;
}
/* OVERWRITE DEFAULT SEMANTIC STYLES FOR CUSTOM/NIGHT MODES*/
/* Styles for public display pages */
.fun {
color: rgba(0, 0, 0, 0.87);
color: var(--text_color);
}
.fun h1 {
font-size: 2em;
}
.fun h2 {
font-size: 1.9em;
}
.fun h3 {
font-size: 1.7em;
}
.fun p {
/*font-size: 1.5em;*/
}
.fun blockquote {
border-left: 5px solid cornflowerblue;
padding-left: 25px;
margin-left: 5px;
}
/* Styles for public display pages */
a:hover {
text-decoration: underline;
}
/*//
// Purple Global Menu
//*/
@@ -255,6 +230,8 @@ a:hover {
word-wrap: break-word;
/*border-bottom: 1px solid #ccc;*/
scrollbar-width: none;
scrollbar-color: transparent transparent;
caret-color: #21BA45;
}
.squire-box::selection,
.squire-box::-moz-selection {
@@ -271,19 +248,15 @@ a:hover {
.squire-box a {
cursor: pointer;
}
.note-card-text i:not(.icon),
.squire-box i {
padding: 0.5em 0.99em;
border-radius: 1px;
display: inline-block;
font-style: normal;
background-color: rgba(113, 113, 113, 0.1);
}
.night-mode .note-card-text i:not(.icon),
.night-mode .squire-box i {
background-color: rgba(255, 255, 255, 0.2);
}
.note-card-text pre,
.squire-box pre {
word-wrap: break-word;
}
.note-card-text p,
.squire-box p {
margin-bottom: 0;