From ddce03a67708249eec129eb36744be460345bd75 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 15 Jun 2021 16:23:44 +0800
Subject: ...

---
 FrontEnd/src/views/common/index.css | 273 ++++++++++++++++++++++++++++++++++++
 1 file changed, 273 insertions(+)
 create mode 100644 FrontEnd/src/views/common/index.css

(limited to 'FrontEnd/src/views/common/index.css')

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;
+  }
+}
-- 
cgit v1.2.3