stkit 17.0.0__py3-none-any.whl

stk/static/css/app.css

@@ -0,0 +1,229 @@
+/* Native cross-document view transitions for MPA navigation.
+   Chrome 126+/Safari 18.2+ animate; Firefox ignores and snaps (graceful). */
+@view-transition {
+    navigation: auto;
+}
+@media (prefers-reduced-motion: reduce) {
+    @view-transition {
+        navigation: none;
+    }
+}
+
+html, body {
+    height: 100%;
+}
+
+/* ===== Typography ===== */
+body,
+.v-application {
+    font-family: 'Be Vietnam Pro', sans-serif !important;
+}
+
+.v-toolbar-title,
+.v-card-title,
+.text-display-large, .text-display-medium, .text-display-small,
+.text-headline-large, .text-headline-medium, .text-headline-small,
+.text-title-large, .text-title-medium, .text-title-small,
+.font-weight-bold,
+.v-list-item-title {
+    font-family: 'Plus Jakarta Sans', sans-serif !important;
+    letter-spacing: -0.02em !important;
+}
+
+.v-toolbar-title {
+    text-transform: uppercase;
+    font-weight: 800 !important;
+}
+
+.v-btn {
+    font-family: 'Plus Jakarta Sans', sans-serif !important;
+    text-transform: uppercase !important;
+    font-weight: 700 !important;
+    letter-spacing: 0 !important;
+}
+
+.v-data-table th,
+.v-chip,
+.v-label,
+.text-body-small, .text-label-small,
+.v-field__input,
+.v-pagination {
+    font-family: 'Inter', sans-serif !important;
+}
+
+/* ===== Brutalist Cards ===== */
+.v-card {
+    border: 2px solid #1a1a1a !important;
+    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
+}
+
+.v-theme--dark .v-card {
+    border-color: rgba(255, 255, 255, 0.15) !important;
+}
+
+.v-card > .v-toolbar {
+    border-bottom: 2px solid #1a1a1a;
+}
+
+.v-theme--dark .v-card > .v-toolbar {
+    border-bottom-color: rgba(255, 255, 255, 0.15);
+}
+
+/* ===== Brutalist Buttons ===== */
+.v-btn--variant-elevated.v-btn--color-primary,
+.v-btn--variant-elevated.bg-primary {
+    border: 2px solid #1a1a1a;
+    box-shadow: 3px 3px 0 0 rgba(0,0,0,1) !important;
+}
+
+.v-btn--variant-elevated.v-btn--color-primary:hover,
+.v-btn--variant-elevated.bg-primary:hover {
+    transform: translate(-1px, -1px);
+    box-shadow: 4px 4px 0 0 rgba(0,0,0,1) !important;
+}
+
+.v-btn--variant-elevated.v-btn--color-primary:active,
+.v-btn--variant-elevated.bg-primary:active {
+    transform: translate(1px, 1px);
+    box-shadow: 1px 1px 0 0 rgba(0,0,0,1) !important;
+}
+
+.v-theme--dark .v-btn--variant-elevated.v-btn--color-primary,
+.v-theme--dark .v-btn--variant-elevated.bg-primary {
+    border-color: rgba(255, 255, 255, 0.3);
+    box-shadow: 3px 3px 0 0 rgba(255,255,255,0.15) !important;
+}
+
+.v-btn--variant-tonal,
+.v-btn--variant-outlined {
+    border: 2px solid #1a1a1a !important;
+    box-shadow: 2px 2px 0 0 rgba(0,0,0,1);
+}
+
+.v-theme--dark .v-btn--variant-tonal,
+.v-theme--dark .v-btn--variant-outlined {
+    border-color: rgba(255, 255, 255, 0.2) !important;
+    box-shadow: 2px 2px 0 0 rgba(255,255,255,0.1);
+}
+
+/* ===== Inputs ===== */
+.v-field--variant-outlined .v-field__outline {
+    --v-field-border-width: 2px;
+}
+
+.v-field--focused {
+    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.2) !important;
+}
+
+.v-field--focused .v-field__outline {
+    --v-field-border-opacity: 1;
+}
+
+/* ===== Data Table ===== */
+.v-data-table th {
+    font-weight: 700 !important;
+    text-transform: uppercase;
+    font-size: 0.7rem !important;
+    letter-spacing: 0.08em;
+    border-bottom: 2px solid #1a1a1a !important;
+}
+
+.v-theme--dark .v-data-table th {
+    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
+}
+
+.v-data-table tbody tr:hover {
+    background-color: rgba(0, 0, 0, 0.04) !important;
+}
+
+/* ===== Chips ===== */
+.v-chip {
+    font-weight: 600 !important;
+    text-transform: uppercase;
+    font-size: 0.7rem !important;
+    letter-spacing: 0.04em;
+}
+
+/* ===== Dialogs ===== */
+.v-overlay__content > .v-card {
+    border: 3px solid #1a1a1a !important;
+    box-shadow: 8px 8px 0 0 rgba(0,0,0,1) !important;
+}
+
+.v-theme--dark .v-overlay__content > .v-card {
+    border-color: rgba(255, 255, 255, 0.2) !important;
+    box-shadow: 8px 8px 0 0 rgba(255,255,255,0.08) !important;
+}
+
+/* ===== Snackbar ===== */
+.v-snackbar__wrapper {
+    border: 2px solid #1a1a1a !important;
+    border-radius: 0 !important;
+    box-shadow: 4px 4px 0 0 rgba(0,0,0,1) !important;
+}
+
+/* ===== App Bar ===== */
+.v-app-bar {
+    border-bottom: 3px solid #1a1a1a !important;
+}
+
+.v-theme--dark .v-app-bar {
+    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
+}
+
+/* ===== Navigation Drawer ===== */
+.v-navigation-drawer {
+    border-right: 2px solid #1a1a1a !important;
+}
+
+.v-theme--dark .v-navigation-drawer {
+    border-right-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+.nav-header .app-title {
+    font-family: 'Plus Jakarta Sans', sans-serif;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: -0.02em;
+}
+
+.v-navigation-drawer .nav-items .nav-section-title {
+    font-family: 'Inter', sans-serif;
+    font-size: 0.65rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+}
+
+/* ===== Scrollbars ===== */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.15);
+    border-radius: 0;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, 0.25);
+}
+
+/* ===== Links ===== */
+/* Vuetify 4 ships its styles in cascade layers, so these unlayered rules win
+   over any Vuetify rule regardless of specificity. Exclude components that
+   render as an anchor (`v-btn` with href, list items) or their own text colour
+   is replaced by this one. */
+a:not(.v-btn, .v-list-item, .v-tab, .v-chip) {
+    color: rgb(var(--v-theme-primary));
+    transition: opacity 0.15s;
+}
+
+a:not(.v-btn, .v-list-item, .v-tab, .v-chip):hover {
+    opacity: 0.8;
+}

stk/static/css/layout.css

@@ -0,0 +1,330 @@
+/**
+ * Layout Styles
+ * Vuexy-inspired navigation and layout system
+ */
+
+:root {
+  --nav-width: 260px;
+  --nav-collapsed-width: 84px;
+  --navbar-height: 64px;
+  --transition-duration: 0.25s;
+  --nav-item-padding: 10px 16px;
+}
+
+/* ===== Transition Expand Animation ===== */
+.expand-enter-active,
+.expand-leave-active {
+  overflow: hidden;
+  transition: height var(--transition-duration) ease;
+}
+
+.expand-enter-from,
+.expand-leave-to {
+  height: 0 !important;
+}
+
+/* ===== Navigation Header ===== */
+.nav-header {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  height: 56px;
+  gap: 12px;
+}
+
+.nav-header .app-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  opacity: 0.7;
+}
+
+/* ===== Navigation Items Container ===== */
+.nav-items {
+  list-style: none;
+  padding: 8px 0;
+  margin: 0;
+}
+
+/* ===== Navigation Link ===== */
+.nav-link a {
+  display: flex;
+  align-items: center;
+  padding: var(--nav-item-padding);
+  text-decoration: none;
+  color: inherit;
+  transition: background-color 0.2s, color 0.2s;
+  margin: 0 8px;
+  border-radius: 6px;
+}
+
+.nav-link a:hover {
+  background-color: rgba(var(--v-theme-primary), 0.08);
+}
+
+.nav-link.active a {
+  background-color: rgba(var(--v-theme-primary), 0.16);
+  color: rgb(var(--v-theme-primary));
+}
+
+.nav-link.active .nav-item-icon {
+  color: rgb(var(--v-theme-primary));
+}
+
+/* ===== Navigation Group ===== */
+.nav-group-label {
+  display: flex;
+  align-items: center;
+  padding: var(--nav-item-padding);
+  cursor: pointer;
+  transition: background-color 0.2s;
+  margin: 0 8px;
+  border-radius: 6px;
+  user-select: none;
+}
+
+.nav-group-label:hover {
+  background-color: rgba(var(--v-theme-primary), 0.08);
+}
+
+.nav-group.active > .nav-group-label {
+  color: rgb(var(--v-theme-primary));
+}
+
+.nav-group.active > .nav-group-label .nav-item-icon {
+  color: rgb(var(--v-theme-primary));
+}
+
+.nav-group-children {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  padding-left: 16px;
+}
+
+/* Nested levels get more indentation */
+.nav-group-children .nav-group-children {
+  padding-left: 12px;
+}
+
+/* ===== Navigation Icons ===== */
+.nav-item-icon {
+  font-size: 22px;
+  margin-right: 12px;
+  opacity: 0.78;
+  flex-shrink: 0;
+  width: 22px;
+  text-align: center;
+}
+
+.nav-item-title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.9375rem;
+}
+
+/* ===== Navigation Arrow ===== */
+.nav-group-arrow {
+  font-size: 18px;
+  opacity: 0.7;
+  transition: transform 0.2s ease;
+  margin-left: auto;
+}
+
+.nav-group-arrow.rotate-90 {
+  transform: rotate(90deg);
+}
+
+/* ===== Section Title ===== */
+.nav-section-title {
+  padding: 24px 16px 8px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  opacity: 0.6;
+  margin: 0 8px;
+}
+
+.nav-section-title:first-child {
+  padding-top: 8px;
+}
+
+/* ===== Navigation Badge ===== */
+.nav-item-badge {
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin-left: 8px;
+  background-color: rgb(var(--v-theme-primary));
+  color: white;
+}
+
+.nav-item-badge.bg-error {
+  background-color: rgb(var(--v-theme-error));
+}
+
+.nav-item-badge.bg-success {
+  background-color: rgb(var(--v-theme-success));
+}
+
+.nav-item-badge.bg-warning {
+  background-color: rgb(var(--v-theme-warning));
+}
+
+/* ===== Rail/Collapsed Mode ===== */
+.v-navigation-drawer--rail .nav-item-title,
+.v-navigation-drawer--rail .nav-group-arrow,
+.v-navigation-drawer--rail .nav-item-badge,
+.v-navigation-drawer--rail .app-title {
+  display: none;
+}
+
+.v-navigation-drawer--rail .nav-section-title {
+  display: none;
+}
+
+.v-navigation-drawer--rail .nav-item-icon {
+  margin-right: 0;
+}
+
+.v-navigation-drawer--rail .nav-link a,
+.v-navigation-drawer--rail .nav-group-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 12px 0;
+  margin: 0;
+  width: 100%;
+}
+
+.v-navigation-drawer--rail .nav-group-children {
+  display: none;
+}
+
+.v-navigation-drawer--rail .nav-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 12px 0;
+  width: 100%;
+}
+
+.v-navigation-drawer--rail .nav-header .v-spacer {
+  display: none;
+}
+
+.v-navigation-drawer--rail .nav-items {
+  padding: 8px 0;
+}
+
+.v-navigation-drawer--rail .nav-link,
+.v-navigation-drawer--rail .nav-group {
+  display: flex;
+  justify-content: center;
+}
+
+/* ===== Menu Dropdown Cards ===== */
+.v-menu > .v-overlay__content > .v-card {
+  box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1) !important;
+}
+
+/* ===== Notification Styles ===== */
+.notification-list {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.notification-item {
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.notification-item:hover {
+  background-color: rgba(var(--v-theme-primary), 0.04);
+}
+
+.notification-item .visible-on-hover {
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.notification-item:hover .visible-on-hover {
+  opacity: 1;
+}
+
+/* ===== Scrollbar Styling ===== */
+.nav-items::-webkit-scrollbar {
+  width: 6px;
+}
+
+.nav-items::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.nav-items::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+}
+
+.v-theme--dark .nav-items::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+/* ===== Adaptive Logo (inverts in dark mode) ===== */
+.logo-adaptive {
+  transition: filter 0.2s ease;
+}
+
+body.dark-mode .logo-adaptive {
+  filter: invert(1) brightness(2);
+}
+
+/* ===== QR Code (inverts in dark mode) ===== */
+body.dark-mode .qr-adaptive {
+  filter: invert(1);
+}
+
+/* ===== Flash Messages ===== */
+.flash-container {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 2000;
+}
+
+.flash-message {
+  color: white;
+  padding: 12px 16px;
+  border-radius: 4px;
+  margin-bottom: 8px;
+  min-width: 250px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flash-message.success { background: #16A34A; }
+.flash-message.error { background: #DC2626; }
+.flash-message.warning { background: #EAB308; }
+.flash-message.info { background: #0EA5E9; }
+.flash-message.primary { background: #EA580C; }
+
+.flash-close {
+  background: none;
+  border: none;
+  color: white;
+  cursor: pointer;
+  font-size: 18px;
+  margin-left: 12px;
+  opacity: 0.8;
+}
+
+.flash-close:hover {
+  opacity: 1;
+}