Initial commit

Frontend/pages/home/sass/Pages.scss

@@ -0,0 +1,182 @@
+.item[tab="pages"] {
+
+    .pageselector {
+        position: absolute;
+        top: 0px;
+        bottom: 0px;
+        left: 0px;
+        width: 200px;
+        border-right: 2px solid var(--main-color);
+        background: var(--subpanel-color);
+
+        .pageinfo {
+            position: absolute;
+            top: 0;
+            bottom: calc(100% - 90px);
+            left: 0;
+            right: 0;
+            border-bottom: 2px solid var(--main-color);
+            padding: 10px;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            flex-wrap: wrap;
+
+            .pagename {
+                width: calc(100% - 24px);
+            }
+
+            .controls {
+                width: 100%;
+                display: flex;
+                justify-content: center;
+                align-items: flex-start;
+                margin-top: 10px;
+
+                .box {
+                    width: 30px;
+                    height: 30px;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    cursor: pointer;
+
+                    &:hover {
+                        img {
+                            filter: grayscale(1);
+                        }
+                    }
+
+                    &.left,
+                    &.right {
+                        img {
+                            width: 30px;
+                            height: 30px;
+                        }
+                    }
+
+
+                    img {
+                        filter: grayscale(0);
+                        transition-duration: .2s;
+                    }
+                }
+
+                .centered {
+                    width: calc(100% - 60px);
+                    height: 30px;
+
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+
+                    .box img {
+                        width: 20px;
+                        height: 20px;
+                    }
+                }
+            }
+        }
+
+        .list {
+            position: absolute;
+            top: 90px;
+            bottom: 0px;
+            left: 0px;
+            right: 0px;
+
+            .pageitem {
+                width: 100%;
+                height: 40px;
+                display: flex;
+                align-items: center;
+                background: #363636;
+                border-bottom: 1px solid #2c2c2c;
+                transition-duration: .2s;
+                cursor: pointer;
+
+                &:hover {
+                    background: #3e3d3d;
+                }
+
+
+                .name {
+                    width: calc(100% - 35px);
+                    margin-left: 10px;
+                    font-size: 12px;
+                }
+
+                .move {
+                    display: flex;
+                    flex-direction: column;
+                    margin-left: 6px;
+
+                    .moveitem {
+                        width: 14px;
+                        height: 14px;
+                        padding: 2px;
+                        border-radius: 2px;
+
+                        img {
+                            width: 14px;
+                            height: 14px;
+                            filter: grayscale(0);
+                            transition-duration: .2s;
+                        }
+
+                        &:hover {
+                            background: var(--subpanel-color);
+
+                            img {
+                                filter: grayscale(1);
+                            }
+                        }
+
+                        .selected {
+                            display: none;
+                        }
+                    }
+                }
+
+
+
+                &.selected {
+                    background: var(--main-color);
+
+                    .moveitem .normal {
+                        display: none;
+                    }
+
+                    .moveitem .selected {
+                        display: block;
+                    }
+
+                    .moveitem:hover {
+                        background: var(--main-hover-color);
+                    }
+                }
+            }
+
+        }
+    }
+
+    .buttoneditor {
+        position: absolute;
+        top: 0px;
+        bottom: 0px;
+        left: 202px;
+        right: 0px;
+
+
+        .edit {
+            position: absolute;
+            bottom: 0px;
+            left: 0px;
+            right: 0px;
+            height: 400px;
+
+            border-top: 2px solid var(--main-color);
+            background: var(--subpanel-color);
+        }
+    }
+}