ninja-terminals 2.0.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/public/style.css CHANGED
@@ -84,6 +84,7 @@ body {
84
84
  padding: 14px 16px 10px;
85
85
  display: flex;
86
86
  flex-direction: column;
87
+ position: relative;
87
88
  }
88
89
 
89
90
  .logo {
@@ -676,3 +677,302 @@ main {
676
677
  text-align: center;
677
678
  font-style: italic;
678
679
  }
680
+
681
+ /* ── Auth Overlay ───────────────────────────── */
682
+
683
+ #auth-overlay {
684
+ position: fixed;
685
+ inset: 0;
686
+ background: rgba(12, 12, 12, 0.97);
687
+ display: flex;
688
+ align-items: center;
689
+ justify-content: center;
690
+ z-index: 1000;
691
+ transition: opacity 0.3s ease, visibility 0.3s ease;
692
+ }
693
+
694
+ #auth-overlay.hidden {
695
+ opacity: 0;
696
+ visibility: hidden;
697
+ pointer-events: none;
698
+ }
699
+
700
+ .auth-card {
701
+ width: 380px;
702
+ max-width: 90vw;
703
+ background: var(--surface);
704
+ border: 1px solid var(--border);
705
+ border-radius: 4px;
706
+ overflow: hidden;
707
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
708
+ }
709
+
710
+ .auth-stripes {
711
+ display: flex;
712
+ height: 6px;
713
+ }
714
+ .auth-stripes .stripe { flex: 1; }
715
+ .auth-stripes .s1 { background: var(--feed-t1); }
716
+ .auth-stripes .s2 { background: var(--feed-t2); }
717
+ .auth-stripes .s3 { background: var(--feed-t3); }
718
+ .auth-stripes .s4 { background: var(--feed-t4); }
719
+
720
+ .auth-card-inner {
721
+ padding: 32px 28px;
722
+ }
723
+
724
+ .logo-text {
725
+ font-family: 'Bebas Neue', sans-serif;
726
+ font-size: 32px;
727
+ letter-spacing: 8px;
728
+ color: var(--cream);
729
+ text-align: center;
730
+ margin: 0 0 4px;
731
+ line-height: 1;
732
+ }
733
+
734
+ .auth-subtitle {
735
+ font-family: 'Space Grotesk', sans-serif;
736
+ font-size: 11px;
737
+ letter-spacing: 3px;
738
+ color: var(--text-dim);
739
+ text-transform: uppercase;
740
+ text-align: center;
741
+ margin: 0 0 28px;
742
+ }
743
+
744
+ #login-form,
745
+ #license-form {
746
+ display: flex;
747
+ flex-direction: column;
748
+ gap: 12px;
749
+ }
750
+
751
+ #auth-overlay input[type="text"],
752
+ #auth-overlay input[type="password"] {
753
+ background: var(--bg);
754
+ border: 1px solid var(--border);
755
+ border-radius: 3px;
756
+ padding: 12px 14px;
757
+ font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
758
+ font-size: 13px;
759
+ color: var(--text-bright);
760
+ transition: border-color 0.15s, box-shadow 0.15s;
761
+ }
762
+
763
+ #auth-overlay input::placeholder {
764
+ color: var(--text-dim);
765
+ }
766
+
767
+ #auth-overlay input:focus {
768
+ outline: none;
769
+ border-color: var(--feed-t1);
770
+ box-shadow: 0 0 0 2px rgba(27, 138, 158, 0.15);
771
+ }
772
+
773
+ .auth-btn {
774
+ background: var(--cream);
775
+ border: none;
776
+ border-radius: 3px;
777
+ padding: 12px 20px;
778
+ font-family: 'Bebas Neue', sans-serif;
779
+ font-size: 16px;
780
+ letter-spacing: 3px;
781
+ color: var(--bg);
782
+ cursor: pointer;
783
+ transition: background 0.15s, transform 0.1s;
784
+ }
785
+
786
+ .auth-btn:hover {
787
+ background: var(--text-bright);
788
+ }
789
+
790
+ .auth-btn:active {
791
+ transform: scale(0.98);
792
+ }
793
+
794
+ .auth-btn-secondary {
795
+ background: transparent;
796
+ border: 1px solid var(--border);
797
+ color: var(--text-dim);
798
+ }
799
+
800
+ .auth-btn-secondary:hover {
801
+ background: rgba(255, 255, 255, 0.05);
802
+ border-color: var(--text-dim);
803
+ color: var(--text);
804
+ }
805
+
806
+ .auth-error {
807
+ color: var(--state-error);
808
+ font-size: 12px;
809
+ text-align: center;
810
+ margin: 4px 0 0;
811
+ min-height: 18px;
812
+ }
813
+
814
+ .auth-divider {
815
+ display: flex;
816
+ align-items: center;
817
+ gap: 16px;
818
+ margin: 20px 0;
819
+ }
820
+
821
+ .auth-divider::before,
822
+ .auth-divider::after {
823
+ content: '';
824
+ flex: 1;
825
+ height: 1px;
826
+ background: var(--border);
827
+ }
828
+
829
+ .auth-divider span {
830
+ font-size: 11px;
831
+ color: var(--text-dim);
832
+ text-transform: uppercase;
833
+ letter-spacing: 2px;
834
+ }
835
+
836
+ .auth-footer {
837
+ margin: 24px 0 0;
838
+ font-size: 12px;
839
+ color: var(--text-dim);
840
+ text-align: center;
841
+ }
842
+
843
+ .auth-footer a {
844
+ color: var(--feed-t1);
845
+ text-decoration: none;
846
+ transition: color 0.15s;
847
+ }
848
+
849
+ .auth-footer a:hover {
850
+ color: var(--text-bright);
851
+ text-decoration: underline;
852
+ }
853
+
854
+ /* ── Logout Button ──────────────────────────── */
855
+
856
+ .logout-btn {
857
+ position: absolute;
858
+ bottom: 8px;
859
+ right: 10px;
860
+ background: none;
861
+ border: 1px solid var(--cream-dark);
862
+ color: var(--cream-dark);
863
+ font-family: 'Space Grotesk', sans-serif;
864
+ font-size: 9px;
865
+ font-weight: 600;
866
+ text-transform: uppercase;
867
+ letter-spacing: 1px;
868
+ padding: 3px 8px;
869
+ border-radius: 2px;
870
+ cursor: pointer;
871
+ transition: all 0.15s;
872
+ }
873
+
874
+ .logout-btn:hover {
875
+ background: var(--cream-dark);
876
+ color: var(--cream);
877
+ }
878
+
879
+ /* ── Learnings Modal ───────────────────────────── */
880
+
881
+ #learnings-overlay {
882
+ position: fixed;
883
+ inset: 0;
884
+ background: rgba(12, 12, 12, 0.95);
885
+ display: flex;
886
+ align-items: center;
887
+ justify-content: center;
888
+ z-index: 999;
889
+ transition: opacity 0.3s ease, visibility 0.3s ease;
890
+ }
891
+
892
+ #learnings-overlay.hidden {
893
+ opacity: 0;
894
+ visibility: hidden;
895
+ pointer-events: none;
896
+ }
897
+
898
+ .learnings-modal {
899
+ width: 700px;
900
+ max-width: 95vw;
901
+ max-height: 85vh;
902
+ background: var(--surface);
903
+ border: 1px solid var(--border);
904
+ border-radius: 4px;
905
+ display: flex;
906
+ flex-direction: column;
907
+ overflow: hidden;
908
+ }
909
+
910
+ .learnings-header {
911
+ display: flex;
912
+ justify-content: space-between;
913
+ align-items: center;
914
+ padding: 16px 20px;
915
+ border-bottom: 1px solid var(--border);
916
+ background: linear-gradient(90deg, var(--feed-t1), var(--feed-t2), var(--feed-t3), var(--feed-t4));
917
+ background-size: 300% 100%;
918
+ }
919
+
920
+ .learnings-header h2 {
921
+ font-family: 'Bebas Neue', sans-serif;
922
+ font-size: 24px;
923
+ color: var(--bg);
924
+ letter-spacing: 2px;
925
+ margin: 0;
926
+ }
927
+
928
+ .learnings-close {
929
+ background: none;
930
+ border: none;
931
+ color: var(--bg);
932
+ font-size: 28px;
933
+ cursor: pointer;
934
+ padding: 0 8px;
935
+ line-height: 1;
936
+ opacity: 0.8;
937
+ transition: opacity 0.15s;
938
+ }
939
+
940
+ .learnings-close:hover {
941
+ opacity: 1;
942
+ }
943
+
944
+ .learnings-content {
945
+ flex: 1;
946
+ overflow-y: auto;
947
+ padding: 20px;
948
+ font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
949
+ font-size: 12px;
950
+ line-height: 1.6;
951
+ color: var(--cream);
952
+ background: var(--bg);
953
+ white-space: pre-wrap;
954
+ margin: 0;
955
+ }
956
+
957
+ .learnings-footer {
958
+ display: flex;
959
+ gap: 12px;
960
+ padding: 16px 20px;
961
+ border-top: 1px solid var(--border);
962
+ justify-content: flex-end;
963
+ }
964
+
965
+ .learnings-btn {
966
+ background: none;
967
+ border: none;
968
+ color: var(--cream);
969
+ font-size: 20px;
970
+ cursor: pointer;
971
+ padding: 4px 8px;
972
+ border-radius: 3px;
973
+ transition: background 0.15s;
974
+ }
975
+
976
+ .learnings-btn:hover {
977
+ background: var(--border);
978
+ }