From 3f4c0720e1e3421431e7baa20882a4a4512a7fab Mon Sep 17 00:00:00 2001 From: ivar Date: Sun, 19 Oct 2025 23:41:23 +0200 Subject: Initial --- src/wwwroot/styles/_core.scss | 49 +++++++++++++++++++ src/wwwroot/styles/_sidebar.scss | 46 ++++++++++++++++++ src/wwwroot/styles/index.css | 102 +++++++++++++++++++++++++++++++++++++++ src/wwwroot/styles/index.scss | 9 ++++ src/wwwroot/styles/login.css | 85 ++++++++++++++++++++++++++++++++ src/wwwroot/styles/login.scss | 36 ++++++++++++++ 6 files changed, 327 insertions(+) create mode 100644 src/wwwroot/styles/_core.scss create mode 100644 src/wwwroot/styles/_sidebar.scss create mode 100644 src/wwwroot/styles/index.css create mode 100644 src/wwwroot/styles/index.scss create mode 100644 src/wwwroot/styles/login.css create mode 100644 src/wwwroot/styles/login.scss (limited to 'src/wwwroot/styles') diff --git a/src/wwwroot/styles/_core.scss b/src/wwwroot/styles/_core.scss new file mode 100644 index 0000000..4867a2f --- /dev/null +++ b/src/wwwroot/styles/_core.scss @@ -0,0 +1,49 @@ +:root { + --background: #f6f7f8; + --color: #444f54; +} + +* { + box-sizing: border-box; +} + +[disabled], +.disabled { + pointer-events: none; + filter: opacity(0.4); +} + +html, +body { + color: var(--color); + background-color: var(--background) !important; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + + &.ios { + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + height: initial !important; + } +} + +body { + height: unset !important; +} + +.k-grid-norecords-template, +.k-grid-norecords { + font-size: 26px; + display: flex; + justify-content: center; + height: 75px; + align-items: center; + margin: auto; + user-select: none; + background-color: #fff; + background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E"); +} + +.link { + color: cornflowerblue; + cursor: pointer; +} diff --git a/src/wwwroot/styles/_sidebar.scss b/src/wwwroot/styles/_sidebar.scss new file mode 100644 index 0000000..ca69fb2 --- /dev/null +++ b/src/wwwroot/styles/_sidebar.scss @@ -0,0 +1,46 @@ +:root { + --top-navbar-height: 53px; + --sidebar-width: 10rem; +} + +#navbar { + height: var(--top-navbar-height); + max-height: var(--top-navbar-height); + + .item.image { + max-width: 250px; + max-height: 100%; + padding: 5px !important; + + img { + width: 100%; + height: 100%; + object-fit: contain; + } + } +} + +#sidebar { + margin-top: var(--top-navbar-height) !important; + max-height: calc(100% - var(--top-navbar-height)) !important; + height: calc(100% - var(--top-navbar-height)) !important; +} + +main { + margin-top: var(--top-navbar-height); +} + +@media (min-width: 768px) { + #sidebar { + visibility: visible; + transform: translate3d(0, 0, 0); + width: var(--sidebar-width) !important; + } + main { + padding: 15px; + margin-left: var(--sidebar-width); + } + #sidebar-menu-toggler { + display: none !important; + } +} diff --git a/src/wwwroot/styles/index.css b/src/wwwroot/styles/index.css new file mode 100644 index 0000000..88e1d2a --- /dev/null +++ b/src/wwwroot/styles/index.css @@ -0,0 +1,102 @@ +:root { + --background: #f6f7f8; + --color: #444f54; +} + +* { + box-sizing: border-box; +} + +[disabled], +.disabled { + pointer-events: none; + filter: opacity(0.4); +} + +html, +body { + color: var(--color); + background-color: var(--background) !important; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +} +html.ios, +body.ios { + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + height: initial !important; +} + +body { + height: unset !important; +} + +.k-grid-norecords-template, +.k-grid-norecords { + font-size: 26px; + display: flex; + justify-content: center; + height: 75px; + align-items: center; + margin: auto; + -webkit-user-select: none; + user-select: none; + background-color: #fff; + background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E"); +} + +.link { + color: cornflowerblue; + cursor: pointer; +} + +:root { + --top-navbar-height: 53px; + --sidebar-width: 10rem; +} + +#navbar { + height: var(--top-navbar-height); + max-height: var(--top-navbar-height); +} +#navbar .item.image { + max-width: 250px; + max-height: 100%; + padding: 5px !important; +} +#navbar .item.image img { + width: 100%; + height: 100%; + object-fit: contain; +} + +#sidebar { + margin-top: var(--top-navbar-height) !important; + max-height: calc(100% - var(--top-navbar-height)) !important; + height: calc(100% - var(--top-navbar-height)) !important; +} + +main { + margin-top: var(--top-navbar-height); +} + +@media (min-width: 768px) { + #sidebar { + visibility: visible; + transform: translate3d(0, 0, 0); + width: var(--sidebar-width) !important; + } + + main { + padding: 15px; + margin-left: var(--sidebar-width); + } + + #sidebar-menu-toggler { + display: none !important; + } +} +.k-calendar-view .k-state-disabled { + color: white; + background-color: red; + border-radius: 0 !important; +} \ No newline at end of file diff --git a/src/wwwroot/styles/index.scss b/src/wwwroot/styles/index.scss new file mode 100644 index 0000000..c5c7e3a --- /dev/null +++ b/src/wwwroot/styles/index.scss @@ -0,0 +1,9 @@ +@import "core"; +@import "sidebar"; + + +.k-calendar-view .k-state-disabled { + color: white; + background-color: red; + border-radius: 0 !important; +} diff --git a/src/wwwroot/styles/login.css b/src/wwwroot/styles/login.css new file mode 100644 index 0000000..461c4b5 --- /dev/null +++ b/src/wwwroot/styles/login.css @@ -0,0 +1,85 @@ +:root { + --background: #f6f7f8; + --color: #444f54; +} + +* { + box-sizing: border-box; +} + +[disabled], +.disabled { + pointer-events: none; + filter: opacity(0.4); +} + +html, +body { + color: var(--color); + background-color: var(--background) !important; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +} +html.ios, +body.ios { + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + height: initial !important; +} + +body { + height: unset !important; +} + +.k-grid-norecords-template, +.k-grid-norecords { + font-size: 26px; + display: flex; + justify-content: center; + height: 75px; + align-items: center; + margin: auto; + -webkit-user-select: none; + user-select: none; + background-color: #fff; + background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E"); +} + +.link { + color: cornflowerblue; + cursor: pointer; +} + +main { + height: 100vh; + max-width: 450px; + margin: 0 auto; + padding-top: 25px; +} + +.header { + pointer-events: none; + -webkit-user-select: none; + user-select: none; + display: flex; +} +.header .image { + justify-self: center !important; + max-width: 300px !important; + width: unset !important; +} + +footer { + width: 100%; + height: 80px; + display: flex; + justify-content: center; + position: absolute; + align-items: center; + bottom: 0; +} + +@media (max-width: 457px) { + main { + padding-top: 0; + } +} \ No newline at end of file diff --git a/src/wwwroot/styles/login.scss b/src/wwwroot/styles/login.scss new file mode 100644 index 0000000..c8b19fa --- /dev/null +++ b/src/wwwroot/styles/login.scss @@ -0,0 +1,36 @@ +@import "core"; + +main { + height: 100vh; + max-width: 450px; + margin: 0 auto; + padding-top: 25px; +} + +.header { + pointer-events: none; + user-select: none; + display: flex; + + .image { + justify-self: center !important; + max-width: 300px !important; + width: unset !important; + } +} + +footer { + width: 100%; + height: 80px; + display: flex; + justify-content: center; + position: absolute; + align-items: center; + bottom: 0; +} + +@media(max-width: 457px) { + main { + padding-top: 0; + } +} -- cgit v1.3