diff --git a/client/src/App.vue b/client/src/App.vue
index 8d3b116..253a418 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -5,6 +5,8 @@
+
+
@@ -15,6 +17,7 @@
export default {
components: {
'global-site-menu': require('@/components/GlobalSiteMenu.vue').default,
+ 'global-notification':require('@/components/GlobalNotificationComponent.vue').default
},
data: function(){
return {
diff --git a/client/src/assets/semantic-helper.css b/client/src/assets/semantic-helper.css
index e1e83b7..a19ab28 100644
--- a/client/src/assets/semantic-helper.css
+++ b/client/src/assets/semantic-helper.css
@@ -21,6 +21,14 @@
--text_color: #3d3d3d;
--outline_color: rgba(34,36,38,.15);
--border_color: rgba(34,36,38,.20);
+
+ /*Global purple menu styles */
+ --menu-border: #534c68;
+ --menu-background: #221f2b;
+}
+
+html {
+ scrollbar-width: none;
}
div.ui.basic.segment.no-fluf-segment {
@@ -28,7 +36,7 @@ div.ui.basic.segment.no-fluf-segment {
}
/* OVERWRITE DEFAULT SEMANTIC STYLES FOR CUSTOM/NIGHT MODES*/
-body{
+body {
color: var(--text_color);
background-color: var(--background_color);
font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
@@ -101,6 +109,77 @@ a:hover {
text-decoration: underline;
}
+/*//
+// Purple Global Menu
+//*/
+.note-menu {
+ width: 100%;
+ /*display: block;*/
+ display: inline-table;
+ background: var(--menu-background);
+ color: white;
+ /*overflow: hidden;*/
+ border: 1px solid var(--menu-border);
+ /*height: 50px;*/
+}
+.note-menu > .nm-button {
+ padding: 10px 15px;
+ cursor: pointer;
+ text-align: center;
+ box-sizing: border-box;
+ font-size: 1.2em;
+ vertical-align: middle;
+ /*height: 40px;*/
+ display: table-cell;
+ position: relative;
+}
+.nm-button i.icon {
+ margin: 0;
+}
+.nm-button span {
+ font-size: 0.9em;
+}
+.nm-button.right {
+ float: right;
+ border-left: 1px solid var(--menu-border);
+}
+.nm-button:hover {
+ background-color: #534c68;
+ color: white;
+}
+.nm-button + .nm-button {
+ border-left: 1px solid #534c68;
+}
+/*.shrink-icons-on-mobile.note-menu span {
+ display: none;
+}*/
+
+/* Shrink button text for mobile */
+@media only screen and (max-width: 740px) {
+ .note-menu .nm-button span {
+ font-size: 0.7em;
+ line-height: 0.4em;
+ margin-left: 0;
+ }
+ .nm-button i.icon {
+ width: 100%;
+ }
+ /*prevents buttons from being jammed into corners of round phones*/
+ .shrink-icons-on-mobile.note-menu {
+ padding: 0 20px;
+ }
+ .shrink-icons-on-mobile .nm-button {
+ padding: 2px 3px;
+ }
+ .shrink-icons-on-mobile .nm-button i.icon {
+ font-size: 0.7em;
+ }
+}
+
+/*//
+// Purple Global Menu
+//*/
+
.note-status-indicator {
position: absolute;
width: 100px;
@@ -117,16 +196,17 @@ a:hover {
/* squire text styles */
.squire-box {
border: none;
- height: calc(100% - 60px);
+ height: calc(100% - 69px);
box-sizing: border-box;
- padding: 10px 15px 40px;
+ padding: 10px 15px 10px;
background: transparent;
overflow-x: scroll;
/*color: var(--text_color);*/
font-size: 1.2em;
line-height: 1.5em;
word-wrap: break-word;
- border-bottom: 1px solid #ccc;
+ /*border-bottom: 1px solid #ccc;*/
+ scrollbar-width: none;
}
/*Makes the first line real big */
.squire-box p:first-child {
diff --git a/client/src/components/ColorPicker.vue b/client/src/components/ColorPicker.vue
index 64e4621..3c6ed3f 100644
--- a/client/src/components/ColorPicker.vue
+++ b/client/src/components/ColorPicker.vue
@@ -1,27 +1,17 @@
-
-
-
-
-
+
+
+
+
+ Clear All Styles
+
+
+
-
-
+
-
+
+