Hugging Face's logo

Spaces:
huggingface
/
okta-saml-integration-guide
Running

App Files Community
CharlieBoyer HF Staff commited on
Commit
8c797e4
·
verified ·
1 Parent(s): 3c94026

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +222 -16
style.css CHANGED
@@ -1,28 +1,234 @@
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
  h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  }
10
 
11
  p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
  body {
8
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
9
+ line-height: 1.6;
10
+ color: #1f2937;
11
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
12
+ min-height: 100vh;
13
+ padding: 2rem 1rem;
14
+ }
15
+
16
+ .header {
17
+ background: white;
18
+ padding: 1rem 2rem;
19
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
20
+ border-radius: 12px;
21
+ margin-bottom: 2rem;
22
+ max-width: 900px;
23
+ margin-left: auto;
24
+ margin-right: auto;
25
+ }
26
+
27
+ .clearfix::after {
28
+ content: "";
29
+ display: table;
30
+ clear: both;
31
+ }
32
+
33
+ .logo-container img {
34
+ height: 50px;
35
+ display: block;
36
+ }
37
+
38
+ .okta-instructions {
39
+ max-width: 900px;
40
+ margin: 0 auto;
41
+ background: white;
42
+ padding: 3rem;
43
+ border-radius: 12px;
44
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
45
  }
46
 
47
  h1 {
48
+ font-size: 2rem;
49
+ font-weight: 700;
50
+ color: #111827;
51
+ margin-bottom: 1.5rem;
52
+ line-height: 1.3;
53
+ }
54
+
55
+ h2 {
56
+ font-size: 1.5rem;
57
+ font-weight: 600;
58
+ color: #1f2937;
59
+ margin-top: 2.5rem;
60
+ margin-bottom: 1rem;
61
+ padding-bottom: 0.5rem;
62
+ border-bottom: 2px solid #e5e7eb;
63
+ }
64
+
65
+ h3 {
66
+ font-size: 1.25rem;
67
+ font-weight: 600;
68
+ color: #374151;
69
+ margin-top: 2rem;
70
+ margin-bottom: 0.75rem;
71
  }
72
 
73
  p {
74
+ margin-bottom: 1rem;
75
+ color: #4b5563;
76
+ }
77
+
78
+ ul, ol {
79
+ margin-bottom: 1.5rem;
80
+ padding-left: 1.5rem;
81
+ }
82
+
83
+ li {
84
+ margin-bottom: 0.75rem;
85
+ color: #4b5563;
86
+ }
87
+
88
+ li p {
89
+ margin-bottom: 0.5rem;
90
+ }
91
+
92
+ ul ul, ol ul {
93
+ margin-top: 0.5rem;
94
+ margin-bottom: 0.5rem;
95
+ }
96
+
97
+ a {
98
+ color: #667eea;
99
+ text-decoration: none;
100
+ font-weight: 500;
101
+ transition: color 0.2s ease;
102
+ }
103
+
104
+ a:hover {
105
+ color: #764ba2;
106
+ text-decoration: underline;
107
  }
108
 
109
+ kbd {
110
+ background: #f3f4f6;
111
+ border: 1px solid #d1d5db;
112
+ border-radius: 4px;
113
+ padding: 0.2rem 0.5rem;
114
+ font-family: 'Monaco', 'Courier New', monospace;
115
+ font-size: 0.9em;
116
+ color: #374151;
117
+ white-space: nowrap;
118
  }
119
 
120
+ hr {
121
+ border: none;
122
+ border-top: 1px solid #e5e7eb;
123
+ margin: 2rem 0;
124
  }
125
+
126
+ .okta-callout {
127
+ padding: 1.25rem;
128
+ border-radius: 8px;
129
+ margin: 1.5rem 0;
130
+ display: flex;
131
+ gap: 1rem;
132
+ }
133
+
134
+ .okta-warning {
135
+ background: #fef3c7;
136
+ border-left: 4px solid #f59e0b;
137
+ }
138
+
139
+ .okta-callout .icon-warning::before {
140
+ content: "⚠️";
141
+ font-size: 1.5rem;
142
+ display: block;
143
+ }
144
+
145
+ .okta-callout p {
146
+ margin-bottom: 0.75rem;
147
+ }
148
+
149
+ .okta-callout strong {
150
+ color: #92400e;
151
+ font-weight: 600;
152
+ }
153
+
154
+ .okta-callout ul {
155
+ margin-bottom: 0;
156
+ margin-top: 0.5rem;
157
+ }
158
+
159
+ .okta-callout li {
160
+ color: #78350f;
161
+ }
162
+
163
+ strong {
164
+ font-weight: 600;
165
+ color: #111827;
166
+ }
167
+
168
+ ol {
169
+ counter-reset: item;
170
+ list-style: none;
171
+ padding-left: 0;
172
+ }
173
+
174
+ ol > li {
175
+ counter-increment: item;
176
+ position: relative;
177
+ padding-left: 2.5rem;
178
+ margin-bottom: 1.5rem;
179
+ }
180
+
181
+ ol > li::before {
182
+ content: counter(item);
183
+ position: absolute;
184
+ left: 0;
185
+ top: 0;
186
+ width: 1.75rem;
187
+ height: 1.75rem;
188
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
189
+ color: white;
190
+ border-radius: 50%;
191
+ display: flex;
192
+ align-items: center;
193
+ justify-content: center;
194
+ font-weight: 600;
195
+ font-size: 0.9rem;
196
+ }
197
+
198
+ ul li::marker {
199
+ color: #667eea;
200
+ }
201
+
202
+ @media (max-width: 768px) {
203
+ body {
204
+ padding: 1rem 0.5rem;
205
+ }
206
+
207
+ .header {
208
+ padding: 1rem;
209
+ border-radius: 8px;
210
+ }
211
+
212
+ .okta-instructions {
213
+ padding: 1.5rem;
214
+ border-radius: 8px;
215
+ }
216
+
217
+ h1 {
218
+ font-size: 1.5rem;
219
+ }
220
+
221
+ h2 {
222
+ font-size: 1.25rem;
223
+ }
224
+
225
+ ol > li {
226
+ padding-left: 2rem;
227
+ }
228
+
229
+ ol > li::before {
230
+ width: 1.5rem;
231
+ height: 1.5rem;
232
+ font-size: 0.8rem;
233
+ }
234
+ }