diff options
Diffstat (limited to 'FrontEnd/src/views/common/index.css')
| -rw-r--r-- | FrontEnd/src/views/common/index.css | 426 |
1 files changed, 224 insertions, 202 deletions
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css index bfd82b58..a4ce8cf3 100644 --- a/FrontEnd/src/views/common/index.css +++ b/FrontEnd/src/views/common/index.css @@ -1,245 +1,272 @@ -.image-cropper-container {
- position: relative;
- box-sizing: border-box;
- user-select: none;
-}
+:root {
+ --cru-background-color: #f8f9fa;
+ --cru-background-1-color: #e9ecef;
+ --cru-background-2-color: #dee2e6;
-.image-cropper-container img {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
-}
+ --cru-disable-color: #ced4da;
-.image-cropper-mask-container {
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- overflow: hidden;
+ --cru-primary-color: rgb(0, 123, 255);
+ --cru-primary-l1-color: rgb(26, 136, 255);
+ --cru-primary-l2-color: rgb(51, 149, 255);
+ --cru-primary-l3-color: rgb(77, 163, 255);
+ --cru-primary-d1-color: rgb(0, 111, 230);
+ --cru-primary-d2-color: rgb(0, 98, 204);
+ --cru-primary-d3-color: rgb(0, 86, 179);
+ --cru-primary-f1-color: rgb(0, 111, 230);
+ --cru-primary-f2-color: rgb(0, 98, 204);
+ --cru-primary-f3-color: rgb(0, 86, 179);
+ --cru-primary-r1-color: rgb(26, 136, 255);
+ --cru-primary-r2-color: rgb(51, 149, 255);
+ --cru-primary-r3-color: rgb(77, 163, 255);
+ --cru-primary-t-color: rgb(255, 255, 255);
+ --cru-primary-t1-color: rgb(230, 230, 230);
+ --cru-primary-t2-color: rgb(204, 204, 204);
+ --cru-primary-t3-color: rgb(179, 179, 179);
+ --cru-primary-enhance-color: rgb(77, 163, 255);
+ --cru-primary-enhance-l1-color: rgb(94, 172, 255);
+ --cru-primary-enhance-l2-color: rgb(112, 181, 255);
+ --cru-primary-enhance-l3-color: rgb(130, 190, 255);
+ --cru-primary-enhance-d1-color: rgb(43, 145, 255);
+ --cru-primary-enhance-d2-color: rgb(10, 128, 255);
+ --cru-primary-enhance-d3-color: rgb(0, 112, 232);
+ --cru-primary-enhance-f1-color: rgb(94, 172, 255);
+ --cru-primary-enhance-f2-color: rgb(112, 181, 255);
+ --cru-primary-enhance-f3-color: rgb(130, 190, 255);
+ --cru-primary-enhance-r1-color: rgb(43, 145, 255);
+ --cru-primary-enhance-r2-color: rgb(10, 128, 255);
+ --cru-primary-enhance-r3-color: rgb(0, 112, 232);
+ --cru-primary-enhance-t-color: rgb(0, 0, 0);
+ --cru-primary-enhance-t1-color: rgb(26, 26, 26);
+ --cru-primary-enhance-t2-color: rgb(51, 51, 51);
+ --cru-primary-enhance-t3-color: rgb(77, 77, 77);
+ --cru-secondary-color: rgb(128, 128, 128);
+ --cru-secondary-l1-color: rgb(141, 141, 141);
+ --cru-secondary-l2-color: rgb(153, 153, 153);
+ --cru-secondary-l3-color: rgb(166, 166, 166);
+ --cru-secondary-d1-color: rgb(115, 115, 115);
+ --cru-secondary-d2-color: rgb(102, 102, 102);
+ --cru-secondary-d3-color: rgb(90, 90, 90);
+ --cru-secondary-f1-color: rgb(115, 115, 115);
+ --cru-secondary-f2-color: rgb(102, 102, 102);
+ --cru-secondary-f3-color: rgb(90, 90, 90);
+ --cru-secondary-r1-color: rgb(141, 141, 141);
+ --cru-secondary-r2-color: rgb(153, 153, 153);
+ --cru-secondary-r3-color: rgb(166, 166, 166);
+ --cru-secondary-t-color: rgb(255, 255, 255);
+ --cru-secondary-t1-color: rgb(230, 230, 230);
+ --cru-secondary-t2-color: rgb(204, 204, 204);
+ --cru-secondary-t3-color: rgb(179, 179, 179);
+ --cru-danger-color: rgb(255, 0, 0);
+ --cru-danger-l1-color: rgb(255, 26, 26);
+ --cru-danger-l2-color: rgb(255, 51, 51);
+ --cru-danger-l3-color: rgb(255, 77, 77);
+ --cru-danger-d1-color: rgb(230, 0, 0);
+ --cru-danger-d2-color: rgb(204, 0, 0);
+ --cru-danger-d3-color: rgb(179, 0, 0);
+ --cru-danger-f1-color: rgb(230, 0, 0);
+ --cru-danger-f2-color: rgb(204, 0, 0);
+ --cru-danger-f3-color: rgb(179, 0, 0);
+ --cru-danger-r1-color: rgb(255, 26, 26);
+ --cru-danger-r2-color: rgb(255, 51, 51);
+ --cru-danger-r3-color: rgb(255, 77, 77);
+ --cru-danger-t-color: rgb(255, 255, 255);
+ --cru-danger-t1-color: rgb(230, 230, 230);
+ --cru-danger-t2-color: rgb(204, 204, 204);
+ --cru-danger-t3-color: rgb(179, 179, 179);
+ --cru-success-color: rgb(0, 128, 0);
+ --cru-success-l1-color: rgb(0, 166, 0);
+ --cru-success-l2-color: rgb(0, 204, 0);
+ --cru-success-l3-color: rgb(0, 243, 0);
+ --cru-success-d1-color: rgb(0, 115, 0);
+ --cru-success-d2-color: rgb(0, 102, 0);
+ --cru-success-d3-color: rgb(0, 90, 0);
+ --cru-success-f1-color: rgb(0, 115, 0);
+ --cru-success-f2-color: rgb(0, 102, 0);
+ --cru-success-f3-color: rgb(0, 90, 0);
+ --cru-success-r1-color: rgb(0, 166, 0);
+ --cru-success-r2-color: rgb(0, 204, 0);
+ --cru-success-r3-color: rgb(0, 243, 0);
+ --cru-success-t-color: rgb(255, 255, 255);
+ --cru-success-t1-color: rgb(230, 230, 230);
+ --cru-success-t2-color: rgb(204, 204, 204);
+ --cru-success-t3-color: rgb(179, 179, 179);
}
-.image-cropper-mask {
- position: absolute;
- box-shadow: 0 0 0 10000px rgba(255, 255, 255, 0.8);
- touch-action: none;
+.cru-primary {
+ --cru-theme-color: var(--cru-primary-color);
+ --cru-theme-l1-color: var(--cru-primary-l1-color);
+ --cru-theme-l2-color: var(--cru-primary-l2-color);
+ --cru-theme-l3-color: var(--cru-primary-l3-color);
+ --cru-theme-d1-color: var(--cru-primary-d1-color);
+ --cru-theme-d2-color: var(--cru-primary-d2-color);
+ --cru-theme-d3-color: var(--cru-primary-d3-color);
+ --cru-theme-f1-color: var(--cru-primary-f1-color);
+ --cru-theme-f2-color: var(--cru-primary-f2-color);
+ --cru-theme-f3-color: var(--cru-primary-f3-color);
+ --cru-theme-r1-color: var(--cru-primary-r1-color);
+ --cru-theme-r2-color: var(--cru-primary-r2-color);
+ --cru-theme-r3-color: var(--cru-primary-r3-color);
+ --cru-theme-t-color: var(--cru-primary-t-color);
+ --cru-theme-t1-color: var(--cru-primary-t1-color);
+ --cru-theme-t2-color: var(--cru-primary-t2-color);
+ --cru-theme-t3-color: var(--cru-primary-t3-color);
}
-.image-cropper-handler {
- position: absolute;
- width: 26px;
- height: 26px;
- border: black solid 2px;
- border-radius: 50%;
- background: white;
- touch-action: none;
+.cru-primary-enhance {
+ --cru-theme-color: var(--cru-primary-enhance-color);
+ --cru-theme-l1-color: var(--cru-primary-enhance-l1-color);
+ --cru-theme-l2-color: var(--cru-primary-enhance-l2-color);
+ --cru-theme-l3-color: var(--cru-primary-enhance-l3-color);
+ --cru-theme-d1-color: var(--cru-primary-enhance-d1-color);
+ --cru-theme-d2-color: var(--cru-primary-enhance-d2-color);
+ --cru-theme-d3-color: var(--cru-primary-enhance-d3-color);
+ --cru-theme-f1-color: var(--cru-primary-enhance-f1-color);
+ --cru-theme-f2-color: var(--cru-primary-enhance-f2-color);
+ --cru-theme-f3-color: var(--cru-primary-enhance-f3-color);
+ --cru-theme-r1-color: var(--cru-primary-enhance-r1-color);
+ --cru-theme-r2-color: var(--cru-primary-enhance-r2-color);
+ --cru-theme-r3-color: var(--cru-primary-enhance-r3-color);
+ --cru-theme-t-color: var(--cru-primary-enhance-t-color);
+ --cru-theme-t1-color: var(--cru-primary-enhance-t1-color);
+ --cru-theme-t2-color: var(--cru-primary-enhance-t2-color);
+ --cru-theme-t3-color: var(--cru-primary-enhance-t3-color);
}
-.app-bar {
- display: flex;
- align-items: center;
- height: 56px;
- position: fixed;
- z-index: 1030;
- top: 0;
- left: 0;
- right: 0;
- background-color: var(--tl-primary-color);
- transition: background-color 1s;
-}
-.app-bar a {
- color: var(--tl-text-on-primary-inactive-color);
- text-decoration: none;
- margin: 0 1em;
-}
-.app-bar a:hover {
- color: var(--tl-text-on-primary-color);
-}
-.app-bar a.active {
- color: var(--tl-text-on-primary-color);
+.cru-secondary {
+ --cru-theme-color: var(--cru-secondary-color);
+ --cru-theme-l1-color: var(--cru-secondary-l1-color);
+ --cru-theme-l2-color: var(--cru-secondary-l2-color);
+ --cru-theme-l3-color: var(--cru-secondary-l3-color);
+ --cru-theme-d1-color: var(--cru-secondary-d1-color);
+ --cru-theme-d2-color: var(--cru-secondary-d2-color);
+ --cru-theme-d3-color: var(--cru-secondary-d3-color);
+ --cru-theme-f1-color: var(--cru-secondary-f1-color);
+ --cru-theme-f2-color: var(--cru-secondary-f2-color);
+ --cru-theme-f3-color: var(--cru-secondary-f3-color);
+ --cru-theme-r1-color: var(--cru-secondary-r1-color);
+ --cru-theme-r2-color: var(--cru-secondary-r2-color);
+ --cru-theme-r3-color: var(--cru-secondary-r3-color);
+ --cru-theme-t-color: var(--cru-secondary-t-color);
+ --cru-theme-t1-color: var(--cru-secondary-t1-color);
+ --cru-theme-t2-color: var(--cru-secondary-t2-color);
+ --cru-theme-t3-color: var(--cru-secondary-t3-color);
}
-.app-bar-brand {
- display: flex;
- align-items: center;
+.cru-success {
+ --cru-theme-color: var(--cru-success-color);
+ --cru-theme-l1-color: var(--cru-success-l1-color);
+ --cru-theme-l2-color: var(--cru-success-l2-color);
+ --cru-theme-l3-color: var(--cru-success-l3-color);
+ --cru-theme-d1-color: var(--cru-success-d1-color);
+ --cru-theme-d2-color: var(--cru-success-d2-color);
+ --cru-theme-d3-color: var(--cru-success-d3-color);
+ --cru-theme-f1-color: var(--cru-success-f1-color);
+ --cru-theme-f2-color: var(--cru-success-f2-color);
+ --cru-theme-f3-color: var(--cru-success-f3-color);
+ --cru-theme-r1-color: var(--cru-success-r1-color);
+ --cru-theme-r2-color: var(--cru-success-r2-color);
+ --cru-theme-r3-color: var(--cru-success-r3-color);
+ --cru-theme-t-color: var(--cru-success-t-color);
+ --cru-theme-t1-color: var(--cru-success-t1-color);
+ --cru-theme-t2-color: var(--cru-success-t2-color);
+ --cru-theme-t3-color: var(--cru-success-t3-color);
}
-.app-bar-brand-icon {
- height: 2em;
+.cru-danger {
+ --cru-theme-color: var(--cru-danger-color);
+ --cru-theme-l1-color: var(--cru-danger-l1-color);
+ --cru-theme-l2-color: var(--cru-danger-l2-color);
+ --cru-theme-l3-color: var(--cru-danger-l3-color);
+ --cru-theme-d1-color: var(--cru-danger-d1-color);
+ --cru-theme-d2-color: var(--cru-danger-d2-color);
+ --cru-theme-d3-color: var(--cru-danger-d3-color);
+ --cru-theme-f1-color: var(--cru-danger-f1-color);
+ --cru-theme-f2-color: var(--cru-danger-f2-color);
+ --cru-theme-f3-color: var(--cru-danger-f3-color);
+ --cru-theme-r1-color: var(--cru-danger-r1-color);
+ --cru-theme-r2-color: var(--cru-danger-r2-color);
+ --cru-theme-r3-color: var(--cru-danger-r3-color);
+ --cru-theme-t-color: var(--cru-danger-t-color);
+ --cru-theme-t1-color: var(--cru-danger-t1-color);
+ --cru-theme-t2-color: var(--cru-danger-t2-color);
+ --cru-theme-t3-color: var(--cru-danger-t3-color);
}
-.app-bar-main-area {
- display: flex;
- flex-grow: 1;
+.cru-color-primary {
+ color: var(--cru-primary-color);
}
-.app-bar-link-area {
- display: flex;
- align-items: center;
- flex-shrink: 0;
+.cru-color-secondary {
+ color: var(--cru-secondary-color);
}
-.app-bar-user-area {
- display: flex;
- align-items: center;
- flex-shrink: 0;
- margin-left: auto;
+.cru-color-success {
+ color: var(--cru-success-color);
}
-.small-screen .app-bar-main-area {
- position: absolute;
- top: 56px;
- left: 0;
- right: 0;
- transform-origin: top;
- transition: transform 0.6s, background-color 1s;
- background-color: var(--tl-primary-color);
- flex-direction: column;
-}
-.small-screen .app-bar-main-area.app-bar-collapse {
- transform: scale(1, 0);
-}
-.small-screen .app-bar-main-area a {
- text-align: left;
- padding: 0.5em 0.5em;
-}
-.small-screen .app-bar-link-area {
- flex-direction: column;
- align-items: stretch;
-}
-.small-screen .app-bar-user-area {
- flex-direction: column;
- align-items: stretch;
- margin-left: unset;
-}
-.small-screen .app-bar-avatar {
- align-self: flex-end;
+.cru-color-danger {
+ color: var(--cru-danger-color);
}
-.app-bar-toggler {
- margin-left: auto;
- font-size: 2em;
- margin-right: 1em;
- color: var(--tl-text-on-primary-color);
- cursor: pointer;
- user-select: none;
+.cru-text-center {
+ text-align: center;
}
-.cru-skeleton {
- padding: 0 1em;
+.cru-text-end {
+ text-align: end;
}
-.cru-skeleton-line {
- height: 1em;
- background-color: #e6e6e6;
- margin: 0.7em 0;
- border-radius: 0.2em;
-}
-.cru-skeleton-line.last {
- width: 50%;
+.cru-float-right {
+ float: right;
}
-.cru-full-page {
- position: fixed;
- z-index: 1031;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- background-color: white;
- padding-top: 56px;
+.cru-align-text-bottom {
+ vertical-align: text-bottom;
}
-.cru-full-page-top-bar {
- height: 56px;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- z-index: 1;
- background-color: var(--tl-primary-color);
- display: flex;
- align-items: center;
+.cru-align-middle {
+ vertical-align: middle;
}
-.cru-full-page-content-container {
- overflow: scroll;
+.cru-clearfix::after {
+ clear: both;
}
-.cru-menu {
- min-width: 200px;
+.cru-fill-parent {
+ width: 100%;
+ height: 100%;
}
-.cru-menu-item {
- font-size: 1.2em;
- padding: 0.5em 1.5em;
+.icon-button {
+ font-size: 1.4rem;
cursor: pointer;
}
-.cru-menu-item.color-primary {
- color: #0d6efd;
-}
-.cru-menu-item.color-primary:hover {
- color: white;
- background-color: #0d6efd;
-}
-.cru-menu-item.color-secondary {
- color: #6c757d;
-}
-.cru-menu-item.color-secondary:hover {
- color: white;
- background-color: #6c757d;
-}
-.cru-menu-item.color-success {
- color: #198754;
-}
-.cru-menu-item.color-success:hover {
- color: white;
- background-color: #198754;
-}
-.cru-menu-item.color-info {
- color: #0dcaf0;
-}
-.cru-menu-item.color-info:hover {
- color: white;
- background-color: #0dcaf0;
-}
-.cru-menu-item.color-warning {
- color: #ffc107;
-}
-.cru-menu-item.color-warning:hover {
- color: white;
- background-color: #ffc107;
-}
-.cru-menu-item.color-danger {
- color: #dc3545;
-}
-.cru-menu-item.color-danger:hover {
- color: white;
- background-color: #dc3545;
-}
-.cru-menu-item.color-light {
- color: #f8f9fa;
+
+.icon-button.large {
+ font-size: 1.6rem;
}
-.cru-menu-item.color-light:hover {
- color: white;
- background-color: #f8f9fa;
+
+.icon-button.primary-enhance {
+ color: var(--cru-primary-enhance-color);
}
-.cru-menu-item.color-dark {
- color: #212529;
+
+.cru-avatar {
+ width: 60px;
+ height: 60px;
}
-.cru-menu-item.color-dark:hover {
- color: white;
- background-color: #212529;
+
+.cru-avatar.large {
+ width: 100px;
+ height: 100px;
}
-.cru-menu-item-icon {
- margin-right: 1em;
+.cru-avatar.small {
+ width: 40px;
+ height: 40px;
}
-.cru-menu-divider {
- border-top: 1px solid #e9ecef;
+.cru-round {
+ border-radius: 50%;
}
.cru-tab-pages-action-area {
@@ -247,11 +274,6 @@ align-items: center;
}
-.cru-search-input {
- display: flex;
- flex-wrap: wrap;
-}
-
.alert-container {
position: fixed;
z-index: 1070;
|