Styling for Passwords #21

mwalbeck · Jun 30, 2018 · 5124ff3 · 5124ff3
1 parent 8b9807d
commit 5124ff3
Show file tree

Hide file tree

Showing 7 changed files with 358 additions and 3 deletions.
diff --git a/core/css/apps/_notes.scss b/core/css/apps/_notes.scss
@@ -67,6 +67,7 @@
 .CodeMirror {
 	background-color: $background-normal;
 	color: $foreground-normal;
+	border-color: $decoration-normal;
 }
 
 .CodeMirror-cursor {

diff --git a/core/css/apps/_passwords.scss b/core/css/apps/_passwords.scss
@@ -0,0 +1,232 @@
+.app-passwords {
+
+    #app-navigation {
+
+        li {
+            color: $foreground-normal;
+
+            &.active {
+                color: $foreground-active;
+            }
+        }
+
+        .nav-icon-recent,
+        .nav-icon-security {
+            background-image: none;
+        }
+    }
+
+    #app-content {
+
+        // General styling for controls
+        #controls {
+
+            .crumbmenu .menu,
+            .passwords-more-menu .menu {
+                border: none;
+                border-color: $decoration-normal;
+                transition: border .25s ease-in-out, max-height .25s ease-in-out;
+            }
+
+            .crumbmenu.active .menu,
+            .passwords-more-menu.active .menu {
+                border: 1px solid $decoration-normal;
+            }
+        }
+
+        // General styling for lists in app-content window
+        .item-list {
+
+            .row {
+                border-bottom-color: $decoration-normal;
+
+                &:hover {
+                    background-color: $background-active-hover;
+                }
+
+                &.header,
+                &.header .date {
+                    color: $foreground-normal;
+                }
+
+                .date {
+                    color: $foreground-inactive;
+                }
+
+                .genericIcon {
+                    color: $foreground-normal;
+                }
+
+                &.footer:hover {
+                    background-color: $background-normal;
+                }
+            }
+
+            .row .more {
+
+                &:hover {
+                    color: $foreground-normal;
+                }
+
+                .popovermenu.bubble.menu li {
+                    color: $foreground-normal;
+                    opacity: 0.7;
+
+                    &:hover {
+                        background-color: $background-active-hover;
+                        color: $foreground-active;
+                        opacity: 1;
+                    }
+
+                    a {
+                        color: $foreground-active;
+                    }
+                }
+            }
+        }
+
+        // Styling for Backup section
+        .backup-dialog {
+
+            h1 {
+                border-color: $decoration-normal;
+                background-color: $background-dark;
+
+                &::before {
+                    color: $foreground-normal;
+                    border-color: $decoration-normal;
+                }
+            }
+        }
+
+        // Styling for help section
+        .help .handbook-page {
+
+            blockquote {
+                border-left-color: $decoration-active;
+                background-color: $background-alternate;
+            }
+
+            .md-image-container {
+
+                .md-image-link {
+                    border-color: $decoration-normal;
+                }
+
+                .md-image-caption {
+                    border-top-color: $decoration-normal;
+                    color: $foreground-inactive;
+                }
+            }
+        }
+
+        // App content sidebar
+        .app-content-right {
+            background-color: $background-normal;
+            border-left-color: $decoration-normal;
+
+            .item-details {
+
+                .infos {
+                    color: $foreground-inactive;
+
+                    .tags-container {
+                        color: #000;
+                    }
+                }
+
+                .tab-container .tab-titles .tab-title {
+                    color: $foreground-normal;
+
+                    &.active {
+                        color: $foreground-active;
+                    }
+                }
+
+                .details div:not(.header) {
+                    color: $foreground-normal;
+
+                    span {
+                        color: $foreground-normal;
+                    }
+                }
+            }
+        }
+    }
+
+    #app-popup {
+
+        // Popup for creating new password
+        #passwords-create-new {
+
+            .window {
+                background-color: $background-normal;
+
+                // Popup header styling
+                .title {
+                    color: $foreground-active !important;
+                    background-color: $background-active-alternate !important;
+                }
+
+                // Popup Content
+                form.content {
+
+                    .section-title, .open .foldout-title {
+                        border-color: $decoration-normal !important; 
+                    }
+
+                    // Notes Editor
+                    .notes-container {
+
+                        .editor-toolbar {
+
+                            a {
+                                color: $foreground-normal !important;
+
+                                &:hover {
+                                    background-color: $background-normal;
+                                    border-color: $decoration-active;
+                                }
+
+                                &.active {
+                                    background-color: $background-active;
+                                    border-color: $decoration-active;
+                                }
+                            }
+
+                            &.disabled-for-preview a:not(.no-disable) {
+                                background-color: $background-alternate;
+                                border: none;
+                            }
+                        }
+
+                        .CodeMirror .editor-preview {
+                            background-color: $background-normal;
+                        }
+
+                        .CodeMirror span.CodeMirror-selectedtext {
+                            background-color: $background-active;
+                            padding: 1px 0;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// Yes button for creating new tag
+.oc-dialog-buttonrow.twobuttons button.primary {
+    border-color: $decoration-normal;
+
+    &:hover, &:active, &:focus {
+        border-color: $decoration-active;
+    }
+}
+
+// Warning styling for reset and delete buttons in settings
+.app-passwords #app-content .app-content-left.settings section.danger input[type="button"]:hover {
+	background-color: $background-negative !important;
+	border-color: $foreground-negative !important;
+	color: $foreground-active !important;
+}
diff --git a/core/css/core/_apps.scss b/core/css/core/_apps.scss
@@ -194,6 +194,11 @@
 
 /* App Settings ------------------------------------------------------------- */
 
+#app-navigation #app-settings {
+	background-color: $background-normal;
+	border-color: $decoration-normal;
+}
+
 #app-settings-header {
 	border-color: $decoration-normal;
 	background-color: $background-normal;

diff --git a/core/css/core/_icons.scss b/core/css/core/_icons.scss
@@ -707,6 +707,11 @@ a.impersonate img.svg {
 	filter: invert(95%);
 }
 
+// Home icon in controls in passwords app
+.app-passwords #app-content #controls img[src$="/core/img/places/home.svg"] {
+	filter: invert(95%);
+}
+
 // Apps with generic icons names
 
 .app-settings {

diff --git a/core/css/core/_server.scss b/core/css/core/_server.scss
@@ -137,6 +137,7 @@ div.crumb span.icon-shared, div.crumb span.icon-public {
 	background-color: $background-normal;
 	color: $foreground-normal;
 	border: 1px solid $decoration-normal;
+	filter: none;
 
 	&::after {
 		border-bottom-color: $decoration-normal;