Merge branch 'redesign' into 'master'

merge

See merge request igrannonica/neuronstellar!29

1 files changed, 213 insertions, 0 deletions

diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css
new file mode 100644
index 00000000..62324d62
--- /dev/null
+++ b/frontend/src/app/_elements/folder/folder.component.css
@@ -0,0 +1,213 @@
+#folder {
+    /*position: absolute;
+    left: 50%;
+    transform: translateX(-50%);*/
+}
+
+#tabs {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    height: 3.1rem;
+}
+
+#tabs>.folder-tab:not(:first-child) {
+    margin-left: -5px;
+}
+
+.folder-tab {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    height: 2.5rem;
+    background-color: var(--ns-bg-dark-100);
+    border-color: var(--ns-primary);
+    color: var(--ns-primary);
+    border-style: solid;
+    border-width: 1px 1px 0 1px;
+}
+
+.folder-tab:not(:first-child) {
+    margin-block-start: auto;
+}
+
+.selected-tab {
+    height: 3rem;
+    background-color: var(--ns-primary);
+    color: var(--offwhite);
+}
+
+.hover-tab {
+    height: 3.2rem;
+}
+
+.selected-tab,
+.hover-tab {
+    width: fit-content !important;
+}
+
+.tab-link {
+    color: var(--offwhite) !important;
+    text-decoration: none !important;
+    cursor: pointer;
+    padding: 0.5rem;
+}
+
+.tab-link:active {
+    text-decoration: underline !important;
+}
+
+.selected-tab {
+    background-color: var(--ns-primary);
+}
+
+#searchbar {
+    height: 2.5rem;
+    background-color: var(--ns-bg-dark-100);
+    border-bottom: 1px solid var(--ns-primary);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+}
+
+.collapse-horizontal {
+    white-space: nowrap;
+    height: 2.5rem;
+    overflow-x: hidden;
+}
+
+#search-options {
+    margin-left: auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 100%;
+}
+
+#selected-content {
+    background-color: var(--ns-bg-dark-50);
+    width: 100%;
+    /*backdrop-filter: blur(2px);*/
+    border-color: var(--ns-primary);
+    border-style: solid;
+    border-width: 1px 1px 1px 1px;
+    border-top-right-radius: 4px;
+}
+
+#footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.bottom-button {
+    font-size: large;
+    position: relative;
+    background-color: var(--ns-primary);
+    width: 10rem;
+    height: 2.3rem;
+    border-color: var(--ns-primary);
+    border-style: solid;
+    border-width: 0px 1px 1px 1px;
+}
+
+.rounded-bottom {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+}
+
+.separator {
+    border-left-color: var(--ns-primary);
+    border-left-width: 1px;
+    border-left-style: solid;
+}
+
+.list-view {
+    height: 100%;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.list-item {
+    height: 3rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--ns-primary);
+    flex-shrink: 0;
+}
+
+.list-item:hover {
+    background-color: var(--ns-bg-dark-100);
+    box-shadow: 0px 3px 3px var(--ns-primary);
+}
+
+.list-item:hover>.hover-hide {
+    display: none;
+}
+
+.hover-show {
+    display: none;
+}
+
+.list-item:hover>.hover-show {
+    display: initial;
+}
+
+.list-add {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 1;
+    height: 100%;
+}
+
+.folder-inside {
+    width: 100%;
+    height: 40rem;
+    overflow-y: auto;
+}
+
+.file-content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.file-bottom-buttons {
+    position: absolute;
+    bottom: 15px;
+    right: 15px;
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+.file-button {
+    position: relative;
+    color: var(--offwhite);
+    border-radius: 4px;
+    border: 1px solid var(--ns-primary);
+    margin: 5px;
+    padding: 5px;
+    cursor: pointer;
+    z-index: 1001;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.file-button:hover {
+    background-color: var(--ns-primary);
+}
+
+.form-hidden {
+    display: none;
+}
\ No newline at end of file