From b73e4173a3c1e69e02ad6b4e3b43e425e57a5be9 Mon Sep 17 00:00:00 2001 From: MHSanaei Date: Thu, 9 Feb 2023 22:48:06 +0330 Subject: 3x-ui --- web/assets/css/custom.css | 152 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 152 insertions(+) create mode 100644 web/assets/css/custom.css (limited to 'web/assets/css/custom.css') diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css new file mode 100644 index 00000000..0b880045 --- /dev/null +++ b/web/assets/css/custom.css @@ -0,0 +1,152 @@ +#app { + height: 100%; +} + +.ant-space { + width: 100%; +} + +.ant-layout-sider-zero-width-trigger { + display: none; +} + +.ant-card { + border-radius: 30px; +} + +.ant-card-hoverable { + cursor: auto; +} + +.ant-card+.ant-card { + margin-top: 20px; +} + +.drawer-handle { + position: absolute; + top: 72px; + width: 41px; + height: 40px; + cursor: pointer; + z-index: 0; + text-align: center; + line-height: 40px; + font-size: 16px; + display: flex; + justify-content: center; + align-items: center; + background: #fff; + right: -40px; + box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); + border-radius: 0 4px 4px 0; +} + +@media (min-width: 769px) { + .drawer-handle { + display: none; + } +} + +.fade-in-enter, .fade-in-leave-active, .fade-in-linear-enter, .fade-in-linear-leave, .fade-in-linear-leave-active, .fade-in-linear-enter, .fade-in-linear-leave, .fade-in-linear-leave-active { + opacity: 0 +} + +.fade-in-linear-enter-active, .fade-in-linear-leave-active { + -webkit-transition: opacity .2s linear; + transition: opacity .2s linear +} + +.fade-in-linear-enter-active, .fade-in-linear-leave-active { + -webkit-transition: opacity .2s linear; + transition: opacity .2s linear +} + +.fade-in-enter-active, .fade-in-leave-active { + -webkit-transition: all .3s cubic-bezier(.55, 0, .1, 1); + transition: all .3s cubic-bezier(.55, 0, .1, 1) +} + +.zoom-in-center-enter-active, .zoom-in-center-leave-active { + -webkit-transition: all .3s cubic-bezier(.55, 0, .1, 1); + transition: all .3s cubic-bezier(.55, 0, .1, 1) +} + +.zoom-in-center-enter, .zoom-in-center-leave-active { + opacity: 0; + -webkit-transform: scaleX(0); + transform: scaleX(0) +} + +.zoom-in-top-enter-active, .zoom-in-top-leave-active { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1); + transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + -webkit-transform-origin: center top; + transform-origin: center top +} + +.zoom-in-top-enter, .zoom-in-top-leave-active { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0) +} + +.zoom-in-bottom-enter-active, .zoom-in-bottom-leave-active { + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1); + transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + -webkit-transform-origin: center bottom; + transform-origin: center bottom +} + +.zoom-in-bottom-enter, .zoom-in-bottom-leave-active { + opacity: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0) +} + +.zoom-in-left-enter-active, .zoom-in-left-leave-active { + opacity: 1; + -webkit-transform: scale(1, 1); + transform: scale(1, 1); + -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1); + transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1); + -webkit-transform-origin: top left; + transform-origin: top left +} + +.zoom-in-left-enter, .zoom-in-left-leave-active { + opacity: 0; + -webkit-transform: scale(.45, .45); + transform: scale(.45, .45) +} + +.list-enter-active, .list-leave-active { + -webkit-transition: all .3s; + transition: all .3s +} + +.list-enter, .list-leave-active { + opacity: 0; + -webkit-transform: translateY(-30px); + transform: translateY(-30px) +} + +.ant-progress-inner { + background-color: #EBEEF5; +} + +.deactive-client .ant-collapse-header{ + color:rgb(255, 255, 255) !important; + background-color: rgb(255, 127, 127); +} -- cgit v1.2.3