From f5e880b1f1c9a602b60312995be14a8822c2876f Mon Sep 17 00:00:00 2001 From: WolverinDEV Date: Wed, 5 May 2021 16:37:20 +0200 Subject: [PATCH] Removed some old css and fixed the modal icon for the old JQuery modals --- shared/css/load-css.tsx | 3 - shared/css/static/main-layout.scss | 28 +- shared/css/static/modal-group-assignment.scss | 112 ---- shared/css/static/modal-icons.scss | 512 ------------------ shared/css/static/modal-invite.scss | 75 --- shared/html/templates.html | 2 +- shared/img/modal_icon_old.png | Bin 0 -> 65631 bytes 7 files changed, 2 insertions(+), 730 deletions(-) delete mode 100644 shared/css/static/modal-group-assignment.scss delete mode 100644 shared/css/static/modal-icons.scss delete mode 100644 shared/css/static/modal-invite.scss create mode 100644 shared/img/modal_icon_old.png diff --git a/shared/css/load-css.tsx b/shared/css/load-css.tsx index 089744ea..ca38b822 100644 --- a/shared/css/load-css.tsx +++ b/shared/css/load-css.tsx @@ -9,11 +9,8 @@ import "./static/modals.scss" import "./static/modal-banclient.scss" import "./static/modal-banlist.scss" import "./static/modal-clientinfo.scss" -import "./static/modal-group-assignment.scss" -import "./static/modal-icons.scss" import "./static/modal-identity.scss" import "./static/modal-newcomer.scss" -import "./static/modal-invite.scss" import "./static/modal-keyselect.scss" import "./static/modal-query.scss" import "./static/modal-server.scss" diff --git a/shared/css/static/main-layout.scss b/shared/css/static/main-layout.scss index 09521d9f..6de9de29 100644 --- a/shared/css/static/main-layout.scss +++ b/shared/css/static/main-layout.scss @@ -25,18 +25,7 @@ html:root { } :global { - .hide-small { - opacity: 1; - transition: opacity $animation_length linear; - } - - .show-small { - display: none; - - opacity: 0; - transition: opacity $animation_length linear; - } - + /* Still in use for the global hang in point */ .app-container { right: 0; left: 0; @@ -46,21 +35,6 @@ html:root { padding: 0; } - @media only screen and (max-width: $small_device) { - .hide-small { - display: none; - opacity: 0; - transition: opacity $animation_length linear; - } - - .show-small { - display: block !important; - - opacity: 1 !important; - transition: opacity $animation_length linear; - } - } - $animation_seperator_length: .1s; .container-seperator { @include transition(all $animation_seperator_length ease-in-out); diff --git a/shared/css/static/modal-group-assignment.scss b/shared/css/static/modal-group-assignment.scss deleted file mode 100644 index b023b84a..00000000 --- a/shared/css/static/modal-group-assignment.scss +++ /dev/null @@ -1,112 +0,0 @@ -@import "mixin"; -@import "properties"; - -:global { - .modal-server-group-assignments { - @include user-select(none); - - min-width: 25em!important; - max-height: calc(100vh - 10rem)!important; - min-height: 10em!important; - - width: 30em!important; - - display: flex!important; - flex-direction: column!important; - justify-content: stretch!important; - - background-color: #2f2f35; - padding: .5em!important; - - .group-assignment-list { - flex-grow: 1; - flex-shrink: 1; - min-height: 6em; - - display: flex; - flex-direction: column; - justify-content: stretch; - - color: #999999; - - a { - flex-shrink: 0; - flex-grow: 0; - - .htmltag-client { - display: inline; - color: #999999; - } - } - - .group-list { - flex-shrink: 1; - flex-grow: 1; - min-height: 4em; - - padding: 3px; - overflow-y: auto; - - border: 1px #161616 solid; - border-radius: $border_radius_middle; - background-color: #28292b; - - @include chat-scrollbar-vertical(); - - .group-entry { - flex-shrink: 0; - flex-grow: 0; - - display: flex; - flex-direction: row; - justify-content: stretch; - - height: 1.75em; - - > * { - flex-shrink: 0; - flex-grow: 0; - align-self: center; - } - - a { - flex-shrink: 1; - flex-grow: 1; - - min-width: 6em; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - label { - margin-right: .25em; - } - } - - .icon-container { - align-self: center; - margin-right: 4px; - margin-left: 2px; - margin-top: -2px; - } - - a { - align-self: center; - } - } - } - - .container-buttons { - flex-grow: 0; - flex-shrink: 0; - - padding-top: 1em; - - display: flex; - flex-direction: row; - justify-content: space-between; - } - } -} \ No newline at end of file diff --git a/shared/css/static/modal-icons.scss b/shared/css/static/modal-icons.scss deleted file mode 100644 index 2db79fc2..00000000 --- a/shared/css/static/modal-icons.scss +++ /dev/null @@ -1,512 +0,0 @@ -@import "properties"; -@import "mixin"; - -:global { - .modal-icon-select { - @include user-select(none); - - display: flex!important; - flex-direction: column!important; - justify-content: stretch!important; - - width: 50em!important; - - /* - .right, .left { - .header { - text-transform: uppercase; - color: #557edc; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - */ - - .container-icons { - flex-grow: 1; - flex-shrink: 1; - - display: flex; - flex-direction: row; - justify-content: stretch; - - > div { - width: 50%; - - &:not(:first-of-type) { - margin-left: 10px; - } - } - - .content, .container-icons-list { - flex-grow: 1; - flex-shrink: 1; - - display: flex; - flex-direction: column; - } - - .container-icons-list { - position: relative; - - > div { - border-radius: 3px; - } - - .container-icons-remote, .container-icons-local { - width: 100%; - min-height: 300px; - - overflow-x: hidden; - overflow-y: auto; - - background-color: $color_list_background; - border: 1px $color_list_border solid; - - border-radius: $border_radius_large; - - padding: .5em; - - flex-direction: row; - display: flex; - flex-wrap: wrap; - align-content: baseline; - - &.container-icons-local { - font-size: 16px; - } - - .icon-container, .icon { - margin-left: 1px; - margin-right: 1px; - } - - &.icon-select { - .icon-container, .icon { - cursor: pointer; - - &:hover { - border-radius: .1em; - - background-color: rgba(0, 0, 0, 0.07); - border: 1px solid black; - } - - &.selected { - border-radius: .1em; - - background-color: rgba(0, 51, 0, 0.07); - border: 1px solid red; - } - - &:hover, &.selected { - width: 18px; - height: 18px; - - margin: -1px 0px; - } - } - } - } - - .container-loading, .container-no-permissions, .container-error { - top: 0; - bottom: 0; - left: 0; - right: 0; - - font-size: 1.1em; - color: hsla(0, 0%, 40%, 1); - - position: absolute; - background-color: rgba(0, 0, 0, 0.27); - - cursor: not-allowed; - - text-align: center; - display: flex; - flex-direction: column; - justify-content: space-around; - - > a { - padding-bottom: 30px; - } - } - - .container-loading { - z-index: 40; - } - - .container-error { - z-index: 30; - } - .container-no-permissions { - z-index: 20; - } - } - } - - .container-buttons { - margin-top: 20px; - - flex-grow: 0; - flex-shrink: 0; - - display: flex; - flex-direction: row; - justify-content: space-between; - - .spacer { - min-width: 0; - - flex-grow: 1; - flex-shrink: 1; - } - - button { - flex-grow: 0; - flex-shrink: 1; - - width: 8em; - min-width: 4em; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - margin-right: 1em; - } - - .button-select { - margin-left: 10px; - - display: flex; - align-items: center; - flex-direction: row; - justify-content: center; - - a, div { - align-self: center; - } - - > div { - font-size: 16px; - - display: flex; - flex-direction: column; - justify-content: center; - - margin-left: .5rem; - - > div { - display: flex; - } - } - } - - .button-select-no-icon { - margin-left: 10px; - } - } - } - - .modal-icon-upload { - @include user-select(none); - - width: 50em; - min-width: 300px; - - padding: 0!important; - - display: flex; - flex-direction: column; - - .container-select { - padding: 1em; - min-height: 130px; - - display: flex; - flex-direction: row; - justify-content: stretch; - - .container-icons { - flex-grow: 1; - flex-shrink: 1; - - width: min-content; - min-width: 150px; - min-height: 130px; - overflow-y: auto; - - margin-right: 1em; - - background-color: $color_list_background; - border: 1px $color_list_border solid; - - border-radius: $border_radius_large; - - padding: .5em; - display: block; - - .icon-container { - cursor: pointer; - - &:hover { - border-radius: .1em; - - background-color: rgba(0, 0, 0, 0.07); - border: 1px solid black; - } - - &.selected { - border-radius: .1em; - - background-color: rgba(0, 51, 0, 0.07); - border: 1px solid red; - } - - &:hover, &.selected { - width: 18px; - height: 18px; - - margin: -1px 0px; - } - - > img { - height: 16px; - width: 16px; - } - } - } - - .container-buttons { - flex-grow: 1; - flex-shrink: 2; - - min-width: 50px; - max-width: 200px; - - display: flex; - flex-direction: column; - justify-content: space-between; - - .buttons-manage { - display: flex; - flex-direction: column; - justify-content: flex-start; - - > button:not(:first-of-type) { - margin-top: .5em; - } - } - } - } - - .container-upload { - -webkit-box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.25); - -moz-box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.25); - box-shadow: 0px -5px 2px 0px rgba(0, 0, 0, 0.25); - - display: flex; - flex-direction: column; - - padding: .5em 1em 1em; - - .container-error, .container-success { - width: 100%; - min-height: 60px; - - border: 2px solid; - border-radius: $border_radius_middle; - - &.container-error { - border-color: rgba(128, 0, 0, 0.5); - background-color: rgba(128, 0, 0, 0.25); - } - - &.container-success { - margin-top: .5em; - - border-color: rgba(50, 143, 51, 0.25); - background-color: rgba(50, 143, 51, 0.13); - } - - padding: .5em; - - display: flex; - flex-direction: row; - justify-content: space-between; - - > * { - align-self: center; - display: inline-block; - } - - button { - width: 6em; - } - - &.hidden { - opacity: 0; - height: 0; - min-height: 0; - padding: 0; - margin: 0; - } - - @include transition(.25s ease-in-out); - } - - .container-info { - display: flex; - flex-direction: row; - justify-content: space-between; - } - - .container-process { - margin-top: .5em; - - width: 100%; - min-height: 100px; - - overflow-y: auto; - - background-color: $color_list_background; - border: 1px $color_list_border solid; - - border-radius: $border_radius_large; - - .upload-entry { - display: flex; - flex-direction: row; - justify-content: stretch; - - .container-icon { - height: 16px; - width: 16px; - flex-grow: 0; - flex-shrink: 0; - - margin: 1px 1px 1px 4px; - - align-self: center; - - display: flex; - flex-direction: column; - justify-content: center; - - > img { - height: 16px; - width: 16px; - } - } - - .progress { - position: relative; - - flex-grow: 1; - flex-shrink: 1; - - display: flex; - flex-direction: row; - justify-content: flex-start; - - min-width: 2em; - - margin: 2px 5px 2px 3px; - height: 16px; - - overflow: hidden; - font-size: .75rem; - - background-color: #222222; - border: 1px solid hsla(0, 0%, 10%, 1); - border-radius: .25rem; - - .progress-bar { - height: 100%; - - &.bg-danger { - background-color: rgba(128, 0, 0, 0.5); - } - - &.bg-success { - background-color: rgba(50, 143, 51, 0.5); - } - - @include transition(width 1s ease-in-out, background-color $button_hover_animation_time ease-in-out); - } - - .progress-message { - position: absolute; - width: 100%; - - display: flex; - flex-direction: row; - justify-content: center; - - flex-grow: 1; - flex-shrink: 1; - - min-width: 1em; - line-height: normal; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - } - } - } - - input[type="file"] { - display: none; - } - } -} - -@media screen and (max-width: 650px) { - :global { - .modal-icon-upload { - .container-select { - flex-direction: column; - - .container-icons { - width: 100%; - margin-right: 0; - } - - .container-buttons { - max-width: unset; - margin-top: 5px; - - > button { - width: 100%; - } - - .buttons-manage { - display: flex; - flex-direction: row; - justify-content: stretch; - - > button { - width: 50%; - flex-grow: 1; - flex-shrink: 1; - min-width: 0; - } - } - } - } - - .container-upload { - display: flex; - flex-direction: column; - justify-content: flex-start; - } - } - } -} \ No newline at end of file diff --git a/shared/css/static/modal-invite.scss b/shared/css/static/modal-invite.scss deleted file mode 100644 index d9f4f827..00000000 --- a/shared/css/static/modal-invite.scss +++ /dev/null @@ -1,75 +0,0 @@ -@import "mixin"; -@import "properties"; - -:global { - .modal-invite { - padding: .5em!important; - @include user-select(none); - - .general-properties { - flex: 0; - - display: flex; - flex-direction: column; - justify-content: stretch; - - .form-group { - flex: 0; - } - - .container-settings { - flex: 0; - - margin-bottom: .5em; - - display: flex; - flex-direction: row; - justify-content: space-between; - - label { - display: flex; - flex-direction: row; - justify-content: flex-start; - - > * { - align-self: center; - } - - a { - margin-left: .5em; - } - } - } - } - - .text-output { - background-color: $color_list_background; - border: 1px $color_list_border solid; - - border-radius: $border_radius_large; - - padding: .5em; - min-height: 5em; - - width: 100%; - resize: none; - - color: #999999; - - @include user-select(text); - } - - .buttons { - display: flex; - flex-direction: row; - justify-content: space-between; - - margin-top: 5px; - - .icon { - vertical-align: middle; - margin-right: 5px; - } - } - } -} \ No newline at end of file diff --git a/shared/html/templates.html b/shared/html/templates.html index a155d27c..aa514f60 100644 --- a/shared/html/templates.html +++ b/shared/html/templates.html @@ -12,7 +12,7 @@