intheloop/iframe-outputs/src/style.css at 7d78b4a28a5b9bcc95d5a526499e877795920c3d · runtimed/intheloop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);

/**
The preflight styles remove default styles for many elements.
In iframe outputs, we want users to be able to render a button and see it rendered as one.
However, since preflight is based on `modern-normalize`, we want to use it to smooth out differences across browsers.
Docs: https://tailwindcss.com/docs/preflight#overview
*/
/* @import "tailwindcss/preflight.css" layer(base); */
@import "modern-normalize/modern-normalize.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

@import "tw-animate-css";
@plugin "@tailwindcss/typography";
@source "../../packages/components/src";
@source "../../src/components/ui";

:root {
  --dataframe-border: 1px solid #e5e7eb;
  --dataframe-bg: #fff;
  --dataframe-header-bg: #f9fafb;
  --dataframe-hover-bg: #f3f4f6;
}

/* Make size calculations make sense */
* {
  box-sizing: border-box;
}

html {
  /* Use system font stack */
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

body {
  /* Reset margin and prevent margin-collapsing from hiding top margins */
  margin: 0;
  /* This tiny padding ensures top margins of first child don't collapse with body */
  padding-top: 0.01px;
}

/* DataFrame styling for pandas HTML output */
.dataframe-container table.dataframe {
  border-collapse: collapse;
  margin: 0;
  font-size: 0.875rem;
  width: 100%;
  background-color: white;
}

.dataframe-container table.dataframe th,
.dataframe-container table.dataframe td {
  border: 1px solid #dee2e6;
  padding: 8px 12px;
  text-align: left;
}

.dataframe-container table.dataframe thead th {
  background-color: #f8f9fa;
  font-weight: 600;
  border-bottom: 2px solid #dee2e6;
}

.dataframe-container table.dataframe tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.dataframe-container table.dataframe tbody tr:hover {
  background-color: #f5f5f5;
}

.dataframe-container table.dataframe tbody tr th {
  background-color: #f8f9fa;
  font-weight: 500;
  text-align: right;
}

/* Handle text alignment from pandas */
.dataframe-container table.dataframe thead th[style*="text-align: right"] {
  text-align: right;
}

.dataframe-container table.dataframe tbody td {
  vertical-align: top;
}

/* Override any scoped styles that might interfere */
.dataframe-container .dataframe tbody tr th:only-of-type {
  vertical-align: middle;
}

.dataframe-container .dataframe tbody tr th {
  vertical-align: top;
}

.dataframe-container .dataframe thead th {
  text-align: right;
}

/* Make sure the table is responsive */
.dataframe-container {
  overflow-x: auto;
  max-width: 100%;
}

/* Image responsiveness and zoom styles */
.rich-output img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* Constrain large images on mobile */
@media (max-width: 640px) {
  .rich-output img {
    max-height: 300px !important;
    object-fit: contain;
  }

  .rich-output svg {
    max-width: 100% !important;
    max-height: 300px !important;
  }
}

/* SVG responsiveness */
.rich-output svg {
  max-width: 100%;
  height: auto;
}

/* Zoom modal styles */
.zoom-modal {
  backdrop-filter: blur(4px);
}

.zoom-modal img {
  max-width: 95vw;
  max-height: 95vh;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Hover effects for zoomable images */
.zoomable-image {
  transition: all 0.2s ease;
}

.zoomable-image:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Style numeric columns to align right by default */
.dataframe-container table.dataframe td:last-child,
.dataframe-container table.dataframe td[style*="text-align: right"] {
  text-align: right;
}