|
| 1 | +/* |
| 2 | + MIT LICENSE |
| 3 | + 2025 Betnix All Right Reserverd |
| 4 | +*/ |
| 5 | + |
| 6 | +/* ===== Global Reset & Typography ===== */ |
| 7 | +* {margin:0; padding:0; box-sizing:border-box;} |
| 8 | +html, body {font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; background:#f5f5f7; color:#111; line-height:1.5;} |
| 9 | +h1,h2,h3,h4,h5,h6 {margin-bottom:.5em; font-weight:600; color:#222;} |
| 10 | +h1{font-size:2.5rem;} |
| 11 | +h2{font-size:2rem;} |
| 12 | +h3{font-size:1.75rem;} |
| 13 | +h4{font-size:1.5rem;} |
| 14 | +h5{font-size:1.25rem;} |
| 15 | +h6{font-size:1rem;} |
| 16 | +p{margin:0 0 1em;} |
| 17 | +small{font-size:.8rem; color:#666;} |
| 18 | +strong{font-weight:700;} |
| 19 | +em{font-style:italic;} |
| 20 | +code{font-family:monospace; background:#eee; padding:.2em .4em; border-radius:4px; font-size:.9rem;} |
| 21 | +pre{background:#f0f0f0; padding:1em; border-radius:8px; overflow-x:auto; margin-bottom:1em;} |
| 22 | +blockquote{border-left:4px solid #0078d4; padding-left:1em; color:#555; margin:1em 0; font-style:italic;} |
| 23 | +a{text-decoration:none; color:#0078d4; transition:.2s;} |
| 24 | +a:hover{color:#005a9e;} |
| 25 | + |
| 26 | +/* ===== Body Utilities ===== */ |
| 27 | +.container{max-width:1200px; margin:0 auto; padding:1em;} |
| 28 | +.text-center{text-align:center;} |
| 29 | +.text-left{text-align:left;} |
| 30 | +.text-right{text-align:right;} |
| 31 | +.bold{font-weight:700;} |
| 32 | +.italic{font-style:italic;} |
| 33 | +.uppercase{text-transform:uppercase;} |
| 34 | +.lowercase{text-transform:lowercase;} |
| 35 | +.capitalize{text-transform:capitalize;} |
| 36 | +.overflow-hidden{overflow:hidden;} |
| 37 | +.cursor-pointer{cursor:pointer;} |
| 38 | +.hidden{display:none;} |
| 39 | +.visible{display:block;} |
| 40 | +.clearfix::after{content:""; display:table; clear:both;} |
| 41 | + |
| 42 | +/* ===== Buttons ===== */ |
| 43 | +button{padding:.6em 1.2em; background:#0078d4; color:#fff; border:none; border-radius:6px; cursor:pointer; transition:.2s; box-shadow:0 2px 4px rgba(0,0,0,.2); font-size:1rem;} |
| 44 | +button:hover{background:#005a9e;} |
| 45 | +button:active{transform:translateY(1px);} |
| 46 | +button:disabled{background:#ccc; cursor:not-allowed;} |
| 47 | +button.small{padding:.4em .8em; font-size:.9rem;} |
| 48 | +button.large{padding:.8em 1.6em; font-size:1.1rem;} |
| 49 | +button.outline{background:transparent; border:2px solid #0078d4; color:#0078d4;} |
| 50 | +button.outline:hover{background:#0078d4; color:#fff;} |
| 51 | +button.tertiary{background:#f0f0f0; color:#111;} |
| 52 | +button.tertiary:hover{background:#e0e0e0;} |
| 53 | +button.icon-btn{padding:.5em; border-radius:50%; display:flex; align-items:center; justify-content:center;} |
| 54 | +button.icon-btn i{margin:0;} |
| 55 | +button.toggle{background:#f0f0f0; color:#111; border-radius:20px; padding:.5em 1em; transition:.3s;} |
| 56 | +button.toggle.active{background:#0078d4; color:#fff;} |
| 57 | + |
| 58 | +/* ===== Forms & Inputs ===== */ |
| 59 | +input, select, textarea{padding:.5em .8em; border:1px solid #ccc; border-radius:6px; outline:none; transition:.2s; width:100%; box-sizing:border-box; font-size:1rem;} |
| 60 | +input:focus, textarea:focus, select:focus{border-color:#0078d4; box-shadow:0 0 0 2px rgba(0,120,212,.2);} |
| 61 | +input[type="checkbox"], input[type="radio"]{width:auto; margin-right:.5em;} |
| 62 | +label{display:inline-block; margin-bottom:.5em; font-weight:500;} |
| 63 | +select{appearance:none; background:#fff url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='5'><path fill='black' d='M0 0l5 5 5-5z'/></svg>") no-repeat right .8em center; background-size:.65em .65em; padding-right:2em;} |
| 64 | +textarea{resize:vertical; min-height:80px;} |
| 65 | +.switch{position:relative; display:inline-block; width:50px; height:28px;} |
| 66 | +.switch input{opacity:0; width:0; height:0;} |
| 67 | +.slider{position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#ccc; transition:.4s; border-radius:28px;} |
| 68 | +.slider:before{position:absolute; content:""; height:22px; width:22px; left:3px; bottom:3px; background:white; transition:.4s; border-radius:50%;} |
| 69 | +input:checked + .slider{background:#0078d4;} |
| 70 | +input:checked + .slider:before{transform:translateX(22px);} |
| 71 | +input[type="range"]{-webkit-appearance:none; width:100%; height:6px; background:#ddd; border-radius:6px; outline:none;} |
| 72 | +input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:20px; height:20px; background:#0078d4; border-radius:50%; cursor:pointer; transition:.2s;} |
| 73 | +input[type="range"]::-webkit-slider-thumb:hover{background:#005a9e;} |
| 74 | +input[type="range"]::-moz-range-thumb{width:20px; height:20px; background:#0078d4; border-radius:50%; cursor:pointer; transition:.2s;} |
| 75 | +input[disabled], select[disabled], textarea[disabled]{background:#eee; cursor:not-allowed;} |
| 76 | + |
| 77 | +/* ===== Cards & Containers ===== */ |
| 78 | +.card{background:#fff; border-radius:12px; padding:1.5em; box-shadow:0 4px 12px rgba(0,0,0,.1); margin:1em 0; transition:.2s;} |
| 79 | +.card:hover{box-shadow:0 6px 18px rgba(0,0,0,.15);} |
| 80 | +.card.outline{border:1px solid #ddd; box-shadow:none;} |
| 81 | +.card.primary{background:#0078d4; color:#fff;} |
| 82 | +.card.secondary{background:#f0f0f0; color:#111;} |
| 83 | +.card.highlight{border-left:4px solid #0078d4; padding-left:1em;} |
| 84 | +.card-footer{margin-top:1em; font-size:.9rem; color:#666;} |
| 85 | +.container-fluid{width:100%; padding:0 1em;} |
| 86 | +.flex{display:flex; gap:1em; flex-wrap:wrap;} |
| 87 | +.flex-center{display:flex; align-items:center; justify-content:center;} |
| 88 | +.flex-between{display:flex; justify-content:space-between;} |
| 89 | +.grid{display:grid; gap:1em;} |
| 90 | +.row{display:flex; flex-wrap:wrap; margin:-.5em;} |
| 91 | +.col{flex:1; padding:.5em;} |
| 92 | +.col-1{flex:0 0 8.33%;} |
| 93 | +.col-2{flex:0 0 16.66%;} |
| 94 | +.col-3{flex:0 0 25%;} |
| 95 | +.col-4{flex:0 0 33.33%;} |
| 96 | +.col-5{flex:0 0 41.66%;} |
| 97 | +.col-6{flex:0 0 50%;} |
| 98 | +.col-7{flex:0 0 58.33%;} |
| 99 | +.col-8{flex:0 0 66.66%;} |
| 100 | +.col-9{flex:0 0 75%;} |
| 101 | +.col-10{flex:0 0 83.33%;} |
| 102 | +.col-11{flex:0 0 91.66%;} |
| 103 | +.col-12{flex:0 0 100%;} |
| 104 | + |
| 105 | +/* ===== Modals ===== */ |
| 106 | +.modal{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:999;} |
| 107 | +.modal.active{display:flex;} |
| 108 | +.modal-content{background:#fff; padding:2em; border-radius:12px; max-width:600px; width:90%; box-shadow:0 6px 18px rgba(0,0,0,.2); position:relative; transition:.3s;} |
| 109 | +.modal-lg{max-width:800px;} |
| 110 | +.modal-sm{max-width:400px;} |
| 111 | +.modal-close{position:absolute; top:1em; right:1em; cursor:pointer; font-size:1.2rem; color:#666; transition:.2s;} |
| 112 | +.modal-close:hover{color:#000;} |
| 113 | +.modal-header{font-weight:700; font-size:1.25rem; margin-bottom:.5em;} |
| 114 | +.modal-body{margin-bottom:1em;} |
| 115 | +.modal-footer{text-align:right;} |
| 116 | + |
| 117 | +/* ===== Navbar & Menu ===== */ |
| 118 | +.navbar{background:#fff; display:flex; align-items:center; padding:.8em 1em; box-shadow:0 2px 4px rgba(0,0,0,.1); position:sticky; top:0; z-index:999;} |
| 119 | +.navbar a{margin-right:1em; color:#0078d4; font-weight:500;} |
| 120 | +.navbar a:hover{color:#005a9e;} |
| 121 | +.navbar-brand{font-weight:700; font-size:1.25rem; color:#222; margin-right:auto;} |
| 122 | +.navbar-menu{display:flex; gap:1em; align-items:center;} |
| 123 | +.navbar-dropdown{position:relative;} |
| 124 | +.navbar-dropdown-content{display:none; position:absolute; top:100%; left:0; background:#fff; min-width:160px; box-shadow:0 4px 12px rgba(0,0,0,.1); border-radius:6px; z-index:100;} |
| 125 | +.navbar-dropdown:hover .navbar-dropdown-content{display:block;} |
| 126 | +.navbar-dropdown-content a{padding:.8em 1em; display:block; color:#0078d4;} |
| 127 | +.navbar-dropdown-content a:hover{background:#f0f0f0;} |
| 128 | + |
| 129 | +/* ===== Tables ===== */ |
| 130 | +.table{width:100%; border-collapse:collapse; margin:1em 0; font-size:1rem;} |
| 131 | +.table th, .table td{padding:.8em 1em; border:1px solid #ddd; text-align:left;} |
| 132 | +.table th{background:#f0f0f0; font-weight:600;} |
| 133 | +.table tr:hover{background:#f9f9f9;} |
| 134 | +.table.striped tr:nth-child(even){background:#f9f9f9;} |
| 135 | +.table-bordered{border:1px solid #ddd;} |
| 136 | +.table-responsive{overflow-x:auto;} |
| 137 | + |
| 138 | +/* ===== Lists & Badges ===== */ |
| 139 | +.list-group{list-style:none; padding:0; margin:0;} |
| 140 | +.list-group-item{padding:.8em 1em; border-bottom:1px solid #eee;} |
| 141 | +.list-group-item:last-child{border-bottom:none;} |
| 142 | +.badge{display:inline-block; padding:.2em .6em; font-size:.8rem; border-radius:12px; background:#0078d4; color:#fff;} |
| 143 | +.badge.green{background:#28a745;} |
| 144 | +.badge.red{background:#dc3545;} |
| 145 | +.badge.yellow{background:#ffc107; color:#111;} |
| 146 | +.badge.blue{background:#0078d4;} |
| 147 | +.badge.large{padding:.4em .8em; font-size:.9rem;} |
| 148 | +.badge.round{border-radius:50%; padding:.3em .5em;} |
| 149 | + |
| 150 | +/* ===== Tooltips & Popovers ===== */ |
| 151 | +.tooltip{position:relative; cursor:pointer;} |
| 152 | +.tooltip:hover::after{content:attr(data-tooltip); position:absolute; bottom:125%; left:50%; transform:translateX(-50%); background:#111; color:#fff; padding:.3em .6em; border-radius:6px; font-size:.75rem; white-space:nowrap; z-index:100; opacity:1; transition:.2s;} |
| 153 | +.tooltip::after{opacity:0; pointer-events:none;} |
| 154 | + |
| 155 | +/* ===== Progress Bars ===== */ |
| 156 | +.progress{background:#eee; border-radius:12px; overflow:hidden; height:20px;} |
| 157 | +.progress-bar{height:100%; width:0; background:#0078d4; transition:width .3s;} |
| 158 | +.progress-bar.green{background:#28a745;} |
| 159 | +.progress-bar.red{background:#dc3545;} |
| 160 | +.progress-bar.yellow{background:#ffc107; color:#111;} |
| 161 | +.progress-bar.stripes{background:repeating-linear-gradient(45deg,#0078d4,#0078d4 10px,#005a9e 10px,#005a9e 20px); animation:stripe 1s linear infinite;} |
| 162 | +@keyframes stripe{from{background-position:0 0;} to{background-position:40px 0;}} |
| 163 | + |
| 164 | +/* ===== Alerts / Notifications ===== */ |
| 165 | +.alert{padding:1em 1.2em; border-radius:8px; margin:1em 0; color:#fff;} |
| 166 | +.alert.success{background:#28a745;} |
| 167 | +.alert.error{background:#dc3545;} |
| 168 | +.alert.info{background:#0078d4;} |
| 169 | +.alert.warning{background:#ffc107; color:#111;} |
| 170 | + |
| 171 | +/* ===== Animations ===== */ |
| 172 | +.fade-in{animation:fadeIn .5s ease-in-out;} |
| 173 | +.slide-in{animation:slideIn .5s ease-in-out;} |
| 174 | +.bounce{animation:bounce 1s infinite;} |
| 175 | +@keyframes fadeIn{from{opacity:0;} to{opacity:1;}} |
| 176 | +@keyframes slideIn{from{transform:translateY(-20px); opacity:0;} to{transform:translateY(0); opacity:1;}} |
| 177 | +@keyframes bounce{0%, 100%{transform:translateY(0);}50%{transform:translateY(-10px);}} |
| 178 | + |
| 179 | +/* ===== Shadows & Effects ===== */ |
| 180 | +.shadow-sm{box-shadow:0 1px 3px rgba(0,0,0,.1);} |
| 181 | +.shadow-md{box-shadow:0 4px 6px rgba(0,0,0,.1);} |
| 182 | +.shadow-lg{box-shadow:0 10px 20px rgba(0,0,0,.15);} |
| 183 | +.transition{transition:all .3s ease-in-out;} |
| 184 | +.hover-scale:hover{transform:scale(1.03);} |
| 185 | +.rounded{border-radius:8px;} |
| 186 | +.rounded-lg{border-radius:12px;} |
| 187 | + |
| 188 | +/* ===== Flex / Grid Utilities ===== */ |
| 189 | +.flex-row{display:flex; flex-direction:row;} |
| 190 | +.flex-col{display:flex; flex-direction:column;} |
| 191 | +.justify-start{justify-content:flex-start;} |
| 192 | +.justify-center{justify-content:center;} |
| 193 | +.justify-end{justify-content:flex-end;} |
| 194 | +.align-start{align-items:flex-start;} |
| 195 | +.align-center{align-items:center;} |
| 196 | +.align-end{align-items:flex-end;} |
| 197 | +.grid-cols-1{grid-template-columns:repeat(1,1fr);} |
| 198 | +.grid-cols-2{grid-template-columns:repeat(2,1fr);} |
| 199 | +.grid-cols-3{grid-template-columns:repeat(3,1fr);} |
| 200 | +.grid-cols-4{grid-template-columns:repeat(4,1fr);} |
| 201 | +.grid-cols-5{grid-template-columns:repeat(5,1fr);} |
| 202 | +.grid-cols-6{grid-template-columns:repeat(6,1fr);} |
| 203 | +.grid-gap-1{gap:.25em;} |
| 204 | +.grid-gap-2{gap:.5em;} |
| 205 | +.grid-gap-3{gap:.75em;} |
| 206 | +.grid-gap-4{gap:1em;} |
| 207 | +.p-1{padding:.25em;} |
| 208 | +.p-2{padding:.5em;} |
| 209 | +.p-3{padding:.75em;} |
| 210 | +.p-4{padding:1em;} |
| 211 | +.m-1{margin:.25em;} |
| 212 | +.m-2{margin:.5em;} |
| 213 | +.m-3{margin:.75em;} |
| 214 | +.m-4{margin:1em;} |
| 215 | + |
| 216 | +/* ===== Media Queries ===== */ |
| 217 | +@media(max-width:1200px){.container{padding:.8em;}} |
| 218 | +@media(max-width:1024px){.grid-cols-4{grid-template-columns:repeat(2,1fr);}.flex{flex-direction:column;}} |
| 219 | +@media(max-width:768px){.grid-cols-3{grid-template-columns:repeat(2,1fr);}.navbar-menu{flex-direction:column; gap:.5em;}} |
| 220 | +@media(max-width:480px){.grid-cols-2{grid-template-columns:1fr;}.navbar a{font-size:.9rem;} .p-4{padding:.5em;}} |
| 221 | + |
| 222 | +/* ===== Themes ===== */ |
| 223 | +.theme-light{background:#f5f5f7; color:#111;} |
| 224 | +.theme-dark{background:#111; color:#f5f5f7;} |
| 225 | +.theme-dark .card{background:#222; color:#f5f5f7;} |
| 226 | +.theme-dark .navbar{background:#222; color:#f5f5f7;} |
| 227 | +.theme-dark .badge{color:#fff;} |
| 228 | +.theme-dark .alert.info{background:#005a9e;} |
| 229 | + |
| 230 | +/* ===== Misc Utilities ===== */ |
| 231 | +.display-block{display:block;} |
| 232 | +.display-inline{display:inline;} |
| 233 | +.display-inline-block{display:inline-block;} |
| 234 | +.visibility-hidden{visibility:hidden;} |
| 235 | +.visibility-visible{visibility:visible;} |
| 236 | +.z-0{z-index:0;} |
| 237 | +.z-1{z-index:1;} |
| 238 | +.z-10{z-index:10;} |
| 239 | +.z-50{z-index:50;} |
| 240 | +.float-left{float:left;} |
| 241 | +.float-right{float:right;} |
| 242 | +.clear-left{clear:left;} |
| 243 | +.clear-right{clear:right;} |
| 244 | +.clear-both{clear:both;} |
| 245 | +.position-relative{position:relative;} |
| 246 | +.position-absolute{position:absolute;} |
| 247 | +.position-fixed{position:fixed;} |
| 248 | +.position-sticky{position:sticky; top:0;} |
0 commit comments