Initial commit
This commit is contained in:
51
Frontend/pages/home/sass/ActionDialog.scss
Normal file
51
Frontend/pages/home/sass/ActionDialog.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
.actionselector {
|
||||
width: calc(100% - 24px);
|
||||
margin: 5px 0px;
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.actiondialog {
|
||||
position: absolute;
|
||||
border: solid var(--main-color);
|
||||
border-width: 0px 2px 2px 2px;
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
overflow: auto;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
|
||||
.item {
|
||||
width: calc(100% - 20px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding: 5px 10px;
|
||||
background: var(--main-secondary-color);
|
||||
border-bottom: 1px solid var(--main-color);
|
||||
transition-duration: .2s;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--main-hover-color);
|
||||
}
|
||||
|
||||
.integration {
|
||||
margin-right: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.item.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
152
Frontend/pages/home/sass/ActionEditor.scss
Normal file
152
Frontend/pages/home/sass/ActionEditor.scss
Normal file
@@ -0,0 +1,152 @@
|
||||
.actioncontainer {
|
||||
width: calc(100% - 20px);
|
||||
margin: 10px 10px 0px 10px;
|
||||
border-bottom: 1px solid #424242;
|
||||
padding-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
|
||||
.integration {
|
||||
font-weight: 500;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.action {
|
||||
color: #d9d9d9;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.btn {
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--border-radius);
|
||||
transition-duration: .2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn.logs {
|
||||
background: #707070;
|
||||
|
||||
&:hover {
|
||||
background: #4b4b4b;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.remove {
|
||||
background: var(--color-red);
|
||||
margin-left: 5px;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-red-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fields {
|
||||
width: 100%;
|
||||
|
||||
.field {
|
||||
width: calc(100% - 5px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
|
||||
.fieldlabel {
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
margin-right: 10px;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
position: relative;
|
||||
width: calc(100% - 14px);
|
||||
margin: 0;
|
||||
padding: 2px 5px;
|
||||
|
||||
select {
|
||||
width: calc(100% + 4px);
|
||||
margin: 0;
|
||||
padding: 2px 5px;
|
||||
|
||||
&.open {
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-color: var(--main-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 5px;
|
||||
right: 1px;
|
||||
height: 300px;
|
||||
display: none;
|
||||
|
||||
.inner {
|
||||
width: 100%;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
border: 2px solid var(--main-color);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// flex-direction: column;
|
||||
|
||||
.option {
|
||||
width: calc(100% - 20px);
|
||||
height: 18px;
|
||||
padding: 4px 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--main-color);
|
||||
background: #323232;
|
||||
user-select: none;
|
||||
font-size: 12px;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
78
Frontend/pages/home/sass/ConnectionDialog.scss
Normal file
78
Frontend/pages/home/sass/ConnectionDialog.scss
Normal file
@@ -0,0 +1,78 @@
|
||||
.connectiondialog {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
z-index: 3;
|
||||
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
background: #0000005e;
|
||||
|
||||
.dialog {
|
||||
width: 300px;
|
||||
padding: 20px;
|
||||
border-radius: var(--border-radius);
|
||||
border: 2px solid var(--main-color);
|
||||
background: var(--panel-color);
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.message {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
|
||||
.link {
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.fields {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
|
||||
.field {
|
||||
width: calc(100% - 5px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
|
||||
.fieldlabel {
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
margin-right: 10px;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
|
||||
.secondary {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
102
Frontend/pages/home/sass/Connections.scss
Normal file
102
Frontend/pages/home/sass/Connections.scss
Normal file
@@ -0,0 +1,102 @@
|
||||
.connections {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.connected {
|
||||
width: calc(80% - 20px);
|
||||
height: calc(100% - 20px);
|
||||
padding: 10px;
|
||||
border-right: 2px solid var(--main-color);
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
tr {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #323232;
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.status {
|
||||
width: 100px;
|
||||
|
||||
.statuscontainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.value {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 2px solid #00000044;
|
||||
border-radius: 100%;
|
||||
|
||||
&.online {
|
||||
background: green;
|
||||
}
|
||||
|
||||
&.offline {
|
||||
background: var(--color-red);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.name {}
|
||||
|
||||
.integration {}
|
||||
|
||||
.type {}
|
||||
}
|
||||
}
|
||||
|
||||
.connectionbrowser {
|
||||
width: calc(20% - 20px);
|
||||
height: calc(100% - 20px);
|
||||
min-width: 200px;
|
||||
padding: 10px;
|
||||
background: var(--subpanel-color);
|
||||
|
||||
.available {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
transition-duration: .2s;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
height: 30px;
|
||||
border-bottom: 1px solid #323232;
|
||||
|
||||
|
||||
|
||||
.integration {
|
||||
margin-right: 10px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.connectionName {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
106
Frontend/pages/home/sass/ContextMenu.scss
Normal file
106
Frontend/pages/home/sass/ContextMenu.scss
Normal file
@@ -0,0 +1,106 @@
|
||||
.contextmenu {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
min-width: 150px;
|
||||
|
||||
display: none;
|
||||
// flex-direction: column;
|
||||
|
||||
border: 3px solid var(--main-color);
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
background: var(--panel-color);
|
||||
box-shadow: 0px 0px 5px #727272;
|
||||
overflow: hidden;
|
||||
|
||||
&:first-child {
|
||||
border-top: 0px;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
|
||||
|
||||
border-top: 1px solid var(--main-hover-color);
|
||||
cursor: pointer;
|
||||
transition-duration: .2s;
|
||||
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background: var(--main-hover-color);
|
||||
|
||||
img {
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: .7;
|
||||
pointer-events: none;
|
||||
|
||||
img {
|
||||
filter: grayscale(0);
|
||||
}
|
||||
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
.content {
|
||||
position: absolute;
|
||||
inset: 0px;
|
||||
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
padding: 0px 5px;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
||||
|
||||
transition-duration: .2s;
|
||||
filter: grayscale(0);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 5px;
|
||||
font-size: 9px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.shortcut {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
font-size: 8px;
|
||||
font-weight: 400;
|
||||
box-sizing: border-box;
|
||||
padding-right: 5px;
|
||||
color: #adadad;
|
||||
}
|
||||
}
|
||||
|
||||
.seperator {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: var(--main-color);
|
||||
}
|
||||
}
|
||||
75
Frontend/pages/home/sass/Deck.scss
Normal file
75
Frontend/pages/home/sass/Deck.scss
Normal file
@@ -0,0 +1,75 @@
|
||||
.overview {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 202px;
|
||||
right: 502px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.deck {
|
||||
width: 960px;
|
||||
height: 480px;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.group {
|
||||
display: flex;
|
||||
|
||||
.key {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 2px solid #ffffff8c;
|
||||
margin: 8px;
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
transition-duration: .1s;
|
||||
cursor: pointer;
|
||||
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--main-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
.key.selected,
|
||||
.key.selected:hover {
|
||||
border-color: var(--main-color);
|
||||
border-width: 4px;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
.key.context,
|
||||
.key.context:hover {
|
||||
border-color: var(--main-color);
|
||||
border-width: 2px;
|
||||
margin: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.group.small {
|
||||
background: #2a2a2a;
|
||||
}
|
||||
|
||||
.group.fs {
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-top-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.group.ls {
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
418
Frontend/pages/home/sass/Edit.scss
Normal file
418
Frontend/pages/home/sass/Edit.scss
Normal file
@@ -0,0 +1,418 @@
|
||||
.editcontainer {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
width: 500px;
|
||||
border-left: 2px solid var(--main-color);
|
||||
background: var(--subpanel-color);
|
||||
|
||||
.edit {
|
||||
|
||||
.split {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
bottom: 5px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
opacity: 1;
|
||||
transition-duration: .2s;
|
||||
|
||||
.row {
|
||||
width: calc(100% - 10px);
|
||||
margin-top: 5px;
|
||||
padding: 5px;
|
||||
background: #363636;
|
||||
|
||||
.label {
|
||||
color: #fff;
|
||||
margin: 0 0 5px 0;
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid #525252;
|
||||
padding-bottom: 4px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.inputs {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.row75 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.row {
|
||||
width: calc(25% - 15px);
|
||||
margin: 0px 0px 0px 5px;
|
||||
|
||||
&:first-child {
|
||||
width: calc(75% - 10px);
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttontype {
|
||||
width: calc(100% + 10px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-bottom: 2px solid var(--main-color);
|
||||
padding-bottom: 5px;
|
||||
margin-left: -5px;
|
||||
|
||||
.types {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.buttonitem {
|
||||
border: solid var(--main-hover-color);
|
||||
border-width: 2px 2px 2px 0px;
|
||||
transition-duration: .2s;
|
||||
padding: 5px 10px;
|
||||
background: var(--background);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
transition-duration: .2s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--main-hover-color);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-left-width: 2px;
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.buttonitem.selected,
|
||||
.buttonitem.selected:hover {
|
||||
background: var(--main-color);
|
||||
border-color: var(--main-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editinner {
|
||||
width: 100%;
|
||||
height: calc(100% - 36px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
.container {
|
||||
// position: absolute;
|
||||
// top: 0px;
|
||||
// bottom: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.containertitle {
|
||||
width: calc(100% - 10px);
|
||||
padding-left: 10px;
|
||||
margin: 10px 0 5px 0;
|
||||
|
||||
&.checktitle {
|
||||
display: flex;
|
||||
|
||||
.text {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.checks {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
user-select: none;
|
||||
|
||||
input {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
pointer-events: none;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.checklabel {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container.appearence {
|
||||
// left: 0px;
|
||||
// right: 50%;
|
||||
// padding-right: 10px;
|
||||
|
||||
|
||||
.advanced {
|
||||
width: calc(100% + 10px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-left: -5px;
|
||||
margin-top: 5px;
|
||||
|
||||
.subrow {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin: 0px 5px;
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
color: #a5a5a5;
|
||||
margin: 0px 0px -3px 5px;
|
||||
font-size: 10px;
|
||||
border-bottom: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
width: calc(100% - 42px);
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
padding: 2px 0px;
|
||||
width: 30px;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
|
||||
&::-webkit-inner-spin-button,
|
||||
&::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.row.text {
|
||||
.value {
|
||||
height: 17px;
|
||||
width: calc(100% - 104px);
|
||||
border-top-right-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
|
||||
.size {
|
||||
width: 80px;
|
||||
border-radius: 0px;
|
||||
border-width: 2px 0px;
|
||||
}
|
||||
|
||||
.color {
|
||||
height: 31px;
|
||||
width: 60px;
|
||||
border-top-left-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.row.background {
|
||||
.color {
|
||||
height: 31px;
|
||||
width: 100%
|
||||
}
|
||||
}
|
||||
|
||||
.row.image {
|
||||
// width: 100%;
|
||||
// height: calc(100% - 72px);
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: flex-start;
|
||||
// flex-wrap: wrap;
|
||||
|
||||
.imagemenu {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.imagetype {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.selectoritem {
|
||||
border: solid var(--main-hover-color);
|
||||
border-width: 2px 2px 2px 0px;
|
||||
transition-duration: .2s;
|
||||
padding: 5px 10px;
|
||||
background: var(--background);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
transition-duration: .2s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--main-hover-color);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-left-width: 2px;
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.selectoritem.selected,
|
||||
.selectoritem.selected:hover {
|
||||
background: var(--main-color);
|
||||
border-color: var(--main-color);
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
margin-left: 10px;
|
||||
|
||||
.infopanel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.infopanel.selected {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panels {
|
||||
width: 100%;
|
||||
|
||||
.panel {
|
||||
width: 100%;
|
||||
height: calc(100% - 10px);
|
||||
padding: 5px 0px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.panel.selected {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.panel.icons {
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
.list {
|
||||
width: calc(100% + 4px);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -2px;
|
||||
cursor: pointer;
|
||||
overflow-y: auto;
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
overflow: hidden;
|
||||
background: #343434;
|
||||
margin: 1px;
|
||||
transition-duration: .2s;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--main-hover-color);
|
||||
|
||||
.name {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
z-index: 1;
|
||||
width: calc(100% - 20px);
|
||||
height: calc(100% - 20px);
|
||||
opacity: 0;
|
||||
transition-duration: .2s;
|
||||
}
|
||||
|
||||
.name {
|
||||
position: absolute;
|
||||
max-height: 20%;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
font-size: 9px;
|
||||
padding: 2px;
|
||||
background: #00000096;
|
||||
transition-duration: .3s;
|
||||
}
|
||||
}
|
||||
|
||||
.icon.selected,
|
||||
.icon.selected:hover {
|
||||
border-color: var(--main-color);
|
||||
background: var(--main-secondary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.container.actions {}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.edit.disabled {
|
||||
pointer-events: none;
|
||||
|
||||
.split {
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
6
Frontend/pages/home/sass/Home.scss
Normal file
6
Frontend/pages/home/sass/Home.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
.blockheader {
|
||||
font-size: 18px;
|
||||
letter-spacing: 0px;
|
||||
font-weight: 500;
|
||||
color: #dfdfdf;
|
||||
}
|
||||
182
Frontend/pages/home/sass/Pages.scss
Normal file
182
Frontend/pages/home/sass/Pages.scss
Normal file
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
20
Frontend/pages/home/sass/Scrollbar.scss
Normal file
20
Frontend/pages/home/sass/Scrollbar.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #ffffff0f;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #b8b8b8;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #d6d6d6;
|
||||
}
|
||||
78
Frontend/pages/home/sass/Tabs.scss
Normal file
78
Frontend/pages/home/sass/Tabs.scss
Normal file
@@ -0,0 +1,78 @@
|
||||
.tabcontainer {
|
||||
border: 2px solid var(--main-color);
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
|
||||
background: #222222;
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
|
||||
.tabmenu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 30px;
|
||||
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
background: var(--panel-color);
|
||||
border-bottom: 2px solid var(--main-color);
|
||||
|
||||
.item {
|
||||
height: 100%;
|
||||
padding: 0px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
background: var(--main-secondary-color);
|
||||
border-right: 2px solid var(--main-color);
|
||||
|
||||
user-select: none;
|
||||
transition-duration: .2s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--main-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
.item.active,
|
||||
.item.active :hover {
|
||||
background: var(--main-color);
|
||||
cursor: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.tabpages {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
|
||||
.item {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
|
||||
transition-duration: .2s;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item.padding {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.item.active {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user