|
@@ -0,0 +1,257 @@
|
|
|
+/* layout */
|
|
|
+.configuration_container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.configuration_dashboard {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 53px);
|
|
|
+ display: table;
|
|
|
+}
|
|
|
+
|
|
|
+.configuration_dashboard > div {
|
|
|
+ display: table-row;
|
|
|
+}
|
|
|
+
|
|
|
+.configuration_dashboard > div > div {
|
|
|
+ display: table-cell;
|
|
|
+ vertical-align: top;
|
|
|
+ padding: 0;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.configuration_dashboard > div > div:nth-child(1) {
|
|
|
+ width: 150px;
|
|
|
+ background: #f0eeee;
|
|
|
+ border: 1px solid #d3d3d3;
|
|
|
+}
|
|
|
+
|
|
|
+.configuration_dashboard > div > div:nth-last-child(1) {
|
|
|
+ width: 200px;
|
|
|
+ background: #f0eeee;
|
|
|
+ border: 1px solid #d3d3d3;
|
|
|
+}
|
|
|
+
|
|
|
+/* users list */
|
|
|
+.user_selectable_area {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.user_wrapper {
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ margin: 10px auto;
|
|
|
+}
|
|
|
+
|
|
|
+.user_wrapper > .user_photo {
|
|
|
+ width: 85px;
|
|
|
+ height: 85px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #a8a4d2;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.user_wrapper > .user_photo > img {
|
|
|
+ width: inherit;
|
|
|
+ height: inherit;
|
|
|
+ border-radius: inherit;
|
|
|
+}
|
|
|
+
|
|
|
+.user_wrapper:hover {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.user_wrapper:hover > .user_photo {
|
|
|
+ animation: 0.5s photo-bubble 1;
|
|
|
+}
|
|
|
+
|
|
|
+.user_photo:before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ right: 0;
|
|
|
+ margin-top: -15px;
|
|
|
+ border-style: solid;
|
|
|
+ border-width: 15px 0 15px 15px;
|
|
|
+ border-color: transparent transparent transparent #a8a4d2;
|
|
|
+ transition-duration: 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.user_wrapper.user_selected > .user_photo:before {
|
|
|
+ right: -12px;
|
|
|
+}
|
|
|
+
|
|
|
+.user_wrapper > h2 {
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 10px 0 0 0;
|
|
|
+ user-select: none;
|
|
|
+}
|
|
|
+
|
|
|
+.user_wrapper > h3 {
|
|
|
+ font-size: 10px;
|
|
|
+ margin: 0;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/* widget droppable area */
|
|
|
+.widgets_droppable_area {
|
|
|
+ width: calc(100% - 10px);
|
|
|
+ height: 100%;
|
|
|
+ margin: 0 5px;
|
|
|
+ background: linear-gradient(90deg, #d3d3d3 50%, transparent 50%), linear-gradient(90deg, #d3d3d3 50%, transparent 50%), linear-gradient(0deg, #d3d3d3 50%, transparent 50%), linear-gradient(0deg, #d3d3d3 50%, transparent 50%);
|
|
|
+ background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
|
|
|
+ background-size: 10px 1px, 10px 1px, 1px 10px, 1px 10px;
|
|
|
+ background-position: 0px 0px, 200px 100%, 0px 100px, 100% 0px;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.widgets_droppable_area > div {
|
|
|
+ width: 100% !important;
|
|
|
+ height: 100% !important;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.widgets_droppable_area.dancing_border {
|
|
|
+ animation: border-dance 4s infinite linear;
|
|
|
+}
|
|
|
+
|
|
|
+.widgets_droppable_area > p {
|
|
|
+ font-size: 16pt;
|
|
|
+ font-weight: bolder;
|
|
|
+ text-align: center;
|
|
|
+ color: #d3d3d3;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%) translateY(-50%);
|
|
|
+}
|
|
|
+
|
|
|
+/* widgets dragable area */
|
|
|
+.widgets_draggable_area {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.ui-state-disabled {
|
|
|
+ opacity: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.widgets_draggable_area.vertical_scrollable {
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.widgets_draggable_area > input {
|
|
|
+ width: 180px;
|
|
|
+ height: 30px !important;
|
|
|
+ margin: 10px auto;
|
|
|
+}
|
|
|
+
|
|
|
+.widget_wrapper {
|
|
|
+ width: 180px;
|
|
|
+ height: 100px;
|
|
|
+ border: 1px solid #d3d3d3;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 1px 1px 3px #d3d3d3, -1px -1px 3px #d3d3d3;
|
|
|
+ transition-duration: 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.widget_wrapper > h2 {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14pt;
|
|
|
+}
|
|
|
+
|
|
|
+.widget_wrapper > p {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.widget_action {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ border-radius: 0 0 0 90%;
|
|
|
+ transition-duration: 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.widget_action.widget_add {
|
|
|
+ background: #4caf50;
|
|
|
+}
|
|
|
+
|
|
|
+.widget_action.widget_trash {
|
|
|
+ background: #f44336;
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.widget_action:hover {
|
|
|
+ box-shadow: -2px 2px 4px #d3d3d3;
|
|
|
+ cursor: default;
|
|
|
+ -webkit-cursor: default;
|
|
|
+ -moz-cursor: default;
|
|
|
+}
|
|
|
+
|
|
|
+.widget_action > i {
|
|
|
+ position: absolute;
|
|
|
+ top: 5px;
|
|
|
+ right: 5px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.widget_action:hover i {
|
|
|
+ animation: 0.5s trash-bell 1;
|
|
|
+}
|
|
|
+
|
|
|
+.widget_wrapper:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ box-shadow: 3px 3px 6px #d3d3d3, -3px -3px 6px #d3d3d3;
|
|
|
+}
|
|
|
+
|
|
|
+.widget_wrapper:active {
|
|
|
+ cursor: move;
|
|
|
+ cursor: -moz-move;
|
|
|
+ cursor: -webkit-move;
|
|
|
+}
|
|
|
+
|
|
|
+/* keyframes */
|
|
|
+@keyframes photo-bubble {
|
|
|
+ 30% {
|
|
|
+ transform: scaleX(1.25) scaleY(0.75);
|
|
|
+ }
|
|
|
+ 40% {
|
|
|
+ transform: scaleX(0.75) scaleY(1.25);
|
|
|
+ }
|
|
|
+ 60% {
|
|
|
+ transform: scaleX(1.15) scaleY(0.85);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes border-dance {
|
|
|
+ 0% {
|
|
|
+ background-position: 0px 0px, 300px 100%, 0px 150px, 100% 0px;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ background-position: 300px 0px, 0px 100%, 0px 0px, 100% 150px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes trash-bell {
|
|
|
+ 0% {
|
|
|
+ transform: rotate(30deg);
|
|
|
+ }
|
|
|
+ 25% {
|
|
|
+ transform: rotate(-30deg);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ transform: rotate(30deg);
|
|
|
+ }
|
|
|
+ 75% {
|
|
|
+ transform: rotate(-30deg);
|
|
|
+ }
|
|
|
+}
|