diff options
Diffstat (limited to 'FrontEnd/src/views/common/index.css')
| -rw-r--r-- | FrontEnd/src/views/common/index.css | 273 |
1 files changed, 273 insertions, 0 deletions
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css new file mode 100644 index 00000000..bfd82b58 --- /dev/null +++ b/FrontEnd/src/views/common/index.css @@ -0,0 +1,273 @@ +.image-cropper-container {
+ position: relative;
+ box-sizing: border-box;
+ user-select: none;
+}
+
+.image-cropper-container img {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.image-cropper-mask-container {
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ overflow: hidden;
+}
+
+.image-cropper-mask {
+ position: absolute;
+ box-shadow: 0 0 0 10000px rgba(255, 255, 255, 0.8);
+ touch-action: none;
+}
+
+.image-cropper-handler {
+ position: absolute;
+ width: 26px;
+ height: 26px;
+ border: black solid 2px;
+ border-radius: 50%;
+ background: white;
+ touch-action: none;
+}
+
+.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);
+}
+
+.app-bar-brand {
+ display: flex;
+ align-items: center;
+}
+
+.app-bar-brand-icon {
+ height: 2em;
+}
+
+.app-bar-main-area {
+ display: flex;
+ flex-grow: 1;
+}
+
+.app-bar-link-area {
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+}
+
+.app-bar-user-area {
+ display: flex;
+ align-items: center;
+ flex-shrink: 0;
+ margin-left: auto;
+}
+
+.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;
+}
+
+.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-skeleton {
+ padding: 0 1em;
+}
+
+.cru-skeleton-line {
+ height: 1em;
+ background-color: #e6e6e6;
+ margin: 0.7em 0;
+ border-radius: 0.2em;
+}
+.cru-skeleton-line.last {
+ width: 50%;
+}
+
+.cru-full-page {
+ position: fixed;
+ z-index: 1031;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ background-color: white;
+ padding-top: 56px;
+}
+
+.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-full-page-content-container {
+ overflow: scroll;
+}
+
+.cru-menu {
+ min-width: 200px;
+}
+
+.cru-menu-item {
+ font-size: 1.2em;
+ padding: 0.5em 1.5em;
+ 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;
+}
+.cru-menu-item.color-light:hover {
+ color: white;
+ background-color: #f8f9fa;
+}
+.cru-menu-item.color-dark {
+ color: #212529;
+}
+.cru-menu-item.color-dark:hover {
+ color: white;
+ background-color: #212529;
+}
+
+.cru-menu-item-icon {
+ margin-right: 1em;
+}
+
+.cru-menu-divider {
+ border-top: 1px solid #e9ecef;
+}
+
+.cru-tab-pages-action-area {
+ display: flex;
+ align-items: center;
+}
+
+.cru-search-input {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.alert-container {
+ position: fixed;
+ z-index: 1070;
+}
+
+@media (min-width: 576px) {
+ .alert-container {
+ bottom: 0;
+ right: 0;
+ }
+}
+@media (max-width: 575.98px) {
+ .alert-container {
+ bottom: 0;
+ right: 0;
+ left: 0;
+ text-align: center;
+ }
+}
|