-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhundred-styles.css
More file actions
122 lines (111 loc) · 5.68 KB
/
hundred-styles.css
File metadata and controls
122 lines (111 loc) · 5.68 KB
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
/* hundred-styles.css - 100 Distinct CSS Styles */
/* 1–10: Typography & Text */
body { font-family: 'Segoe UI', Arial, sans-serif; color: #24292e; background: #f8fafc; }
h1 { font-size: 2.5rem; color: #1a73e8; }
h2 { font-size: 2rem; color: #185abc; }
h3 { font-size: 1.5rem; color: #333; font-style: italic; }
p { line-height: 1.7; margin-bottom: 1em; }
a { color: #2563eb; text-decoration: underline; transition: color 0.2s; }
a:hover { color: #ea580c; }
.text-center { text-align: center; }
.text-bold { font-weight: bold; }
.text-italic { font-style: italic; }
/* 11–20: Buttons */
.btn { padding: 0.6em 1.5em; border-radius: 6px; border: none; cursor: pointer; font-size: 1rem; }
.btn-primary { background: #2563eb; color: #fff; }
.btn-secondary { background: #64748b; color: #fff; }
.btn-success { background: #22c55e; color: #fff; }
.btn-danger { background: #ef4444; color: #fff; }
.btn-outline { background: transparent; border: 2px solid #2563eb; color: #2563eb; }
.btn:active { transform: scale(0.97); }
.btn[disabled] { background: #cbd5e1; color: #7d8597; cursor: not-allowed; }
.btn-large { font-size: 1.3rem; padding: 1em 2em; }
.btn-small { font-size: 0.85rem; padding: 0.3em 0.7em; }
/* 21–30: Cards & Containers */
.card { box-shadow: 0 4px 24px rgba(60,72,88,0.06); border-radius: 12px; background: #fff; padding: 2rem; margin: 1.5rem 0; }
.card-header { font-size: 1.3rem; margin-bottom: 0.7rem; }
.card-footer { font-size: 0.9rem; color: #64748b; border-top: 1px solid #e5e7eb; padding-top: 0.7rem; }
.container { max-width: 900px; margin: 0 auto; padding: 2rem; }
.shadow-lg { box-shadow: 0 10px 40px rgba(30,41,59,0.17); }
.rounded { border-radius: 16px; }
.bg-light { background: #f3f4f6; }
.bg-dark { background: #334155; color: #fff; }
.border { border: 1px solid #e5e7eb; }
/* 31–40: Forms */
input, select, textarea { padding: 0.7em; border-radius: 6px; border: 1px solid #cbd5e1; font-size: 1rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #2563eb; }
label { display: block; margin-bottom: 0.4em; font-weight: 500; }
.form-group { margin-bottom: 1.2em; }
input[type="checkbox"] { width: 1.1em; height: 1.1em; }
input[type="radio"] { width: 1.1em; height: 1.1em; }
input.error, textarea.error { border-color: #ef4444; }
input.success, textarea.success { border-color: #22c55e; }
::-webkit-input-placeholder { color: #94a3b8; }
::-moz-placeholder { color: #94a3b8; }
:-ms-input-placeholder { color: #94a3b8; }
::placeholder { color: #94a3b8; }
/* 41–50: Lists & Tables */
ul { padding-left: 1.3em; }
ul li { margin-bottom: 0.5em; }
ol { padding-left: 1.6em; }
ol li { margin-bottom: 0.4em; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { border: 1px solid #e5e7eb; padding: 0.7em; }
.table th { background: #f1f5f9; color: #334155; }
.table-striped tr:nth-child(even) { background: #f9fafb; }
.table-hover tr:hover { background: #e0e7ef; }
.table .text-right { text-align: right; }
/* 51–60: Images & Media */
.img-responsive { max-width: 100%; height: auto; }
.img-circle { border-radius: 50%; }
.img-shadow { box-shadow: 0 2px 14px rgba(30,41,59,0.13); }
.avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.media { display: flex; align-items: flex-start; }
.media-img { margin-right: 1rem; }
.media-body { flex: 1; }
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-container iframe, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* 61–70: Animations & Effects */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn 1s ease-in; }
@keyframes slideDown { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.slide-down { animation: slideDown 0.7s cubic-bezier(.5,1.8,.5,1) both; }
@keyframes pop { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.pop { animation: pop 0.5s cubic-bezier(.6,-0.28,.74,.05) both; }
.transition { transition: all 0.3s cubic-bezier(.5,1.8,.5,1); }
.hover-zoom:hover { transform: scale(1.07); }
.hover-shadow:hover { box-shadow: 0 8px 28px rgba(30,41,59,0.18); }
/* 71–80: Flex & Grid */
.flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.justify-center { justify-content: center; }
.align-center { align-items: center; }
.space-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1.5rem; }
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
/* 81–90: Utilities & Helpers */
.m-0 { margin: 0 !important; }
.mt-2 { margin-top: 0.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.p-0 { padding: 0 !important; }
.pt-4 { padding-top: 1.5rem; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.cursor-pointer { cursor: pointer; }
/* 91–100: Custom & Fun */
.rainbow-text { background: linear-gradient(90deg, #f87171, #fbbf24, #34d399, #60a5fa, #a78bfa, #f472b6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.blur { filter: blur(2px); }
.glow { text-shadow: 0 0 8px #38bdf8, 0 0 12px #fbbf24; }
.rotate { transform: rotate(-4deg); }
.skew { transform: skewY(4deg); }
.shadow-pop { box-shadow: 0 2px 22px #f472b6; }
.border-gradient { border-image: linear-gradient(45deg, #60a5fa, #f472b6) 1; border-width: 2px; border-style: solid; }
.circle { width: 80px; height: 80px; border-radius: 50%; background: #7dd3fc; display: inline-block; }
.bg-hero { background: linear-gradient(120deg, #f1f6f9 0%, #c5e0e7 100%); }
.star { color: #fbbf24; font-size: 1.8em; }
/*Woohoo! Mathsite Strikes Again!*/