markus / MarkusLogview / MARKUS_LOGVIEW / Content / layout.css @ b4a1c7ff
이력 | 보기 | 이력해설 | 다운로드 (10.7 KB)
| 1 | 84578b97 | djkim | html, body { |
|---|---|---|---|
| 2 | padding-bottom: 0px; |
||
| 3 | background: #eceff1; |
||
| 4 | font-family: sans-serif; |
||
| 5 | color: #494d4e; |
||
| 6 | } |
||
| 7 | .container-fluid {
|
||
| 8 | padding: 0 8rem; |
||
| 9 | } |
||
| 10 | |||
| 11 | .page-title {
|
||
| 12 | font-size: 2.3rem; |
||
| 13 | font-weight: bold; |
||
| 14 | border-left: 4px solid #30313e; |
||
| 15 | padding-left: 15px; |
||
| 16 | display: block; |
||
| 17 | margin: 1rem 0; |
||
| 18 | } |
||
| 19 | .navbar-inverse .navbar-collapse, .navbar-inverse { |
||
| 20 | background-color: #30313e; |
||
| 21 | /*border-bottom: 1px solid #efefef;*/
|
||
| 22 | } |
||
| 23 | |||
| 24 | .row.wrapper > div { |
||
| 25 | padding: 0 5px; |
||
| 26 | } |
||
| 27 | .row.wrapper { |
||
| 28 | margin-top: 10px; |
||
| 29 | } |
||
| 30 | |||
| 31 | .navbar-brand {
|
||
| 32 | font-weight: 500; |
||
| 33 | } |
||
| 34 | .navbar-collapse.collapse { |
||
| 35 | padding:0; |
||
| 36 | } |
||
| 37 | .navbar-inverse .navbar-brand { |
||
| 38 | color: #fff; |
||
| 39 | font-size: 20px; |
||
| 40 | letter-spacing: 1px; |
||
| 41 | font-weight: bold; |
||
| 42 | padding-left: 0; |
||
| 43 | } |
||
| 44 | |||
| 45 | .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus, .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { |
||
| 46 | color: #fff; |
||
| 47 | background-color: inherit; |
||
| 48 | } |
||
| 49 | |||
| 50 | .container-fluid.body-content { |
||
| 51 | background-color: #eceff1; |
||
| 52 | height: 100%; |
||
| 53 | } |
||
| 54 | |||
| 55 | @media screen and ( max-width: 1200px){ |
||
| 56 | .table-wrapper{
|
||
| 57 | margin-bottom:10px; |
||
| 58 | } |
||
| 59 | .container-fluid.body-content, .container-fluid { |
||
| 60 | padding: 0 2.3rem; |
||
| 61 | font-size:12px; |
||
| 62 | } |
||
| 63 | .setup-text{
|
||
| 64 | display:none; |
||
| 65 | } |
||
| 66 | .logout-text{
|
||
| 67 | display:none; |
||
| 68 | } |
||
| 69 | .glyphicon.glyphicon-log-out, .glyphicon.glyphicon-save { |
||
| 70 | display: block !important; |
||
| 71 | font-size:14px; |
||
| 72 | } |
||
| 73 | body {
|
||
| 74 | min-width: 485px; |
||
| 75 | } |
||
| 76 | } |
||
| 77 | @media screen and (max-width: 640px) { |
||
| 78 | .dataTables_wrapper .dataTables_filter{ |
||
| 79 | text-align:right !important; |
||
| 80 | } |
||
| 81 | |||
| 82 | } |
||
| 83 | .table-wrapper {
|
||
| 84 | background: #fff; padding: 15px; border-radius: 1px; box-shadow: 1px 1px 1px rgba(180,180,180,0.27); position:relative; |
||
| 85 | } |
||
| 86 | |||
| 87 | .convertPDFList {
|
||
| 88 | background: #fff; |
||
| 89 | padding: 15px; |
||
| 90 | border-radius: 3px; |
||
| 91 | } |
||
| 92 | |||
| 93 | a.active-menu { |
||
| 94 | color: #fff !important; |
||
| 95 | } |
||
| 96 | |||
| 97 | a.loginUserView { |
||
| 98 | position: relative; |
||
| 99 | display: block; |
||
| 100 | padding: 15px 0; |
||
| 101 | float: right; |
||
| 102 | padding-left: 20px; |
||
| 103 | } |
||
| 104 | |||
| 105 | .custom-menu {
|
||
| 106 | z-index: 1000; |
||
| 107 | position: absolute; |
||
| 108 | background-color: #f5f5f5; |
||
| 109 | border: 1px solid rgba(100,100,100,0.4); |
||
| 110 | border-radius: 3px; |
||
| 111 | cursor:pointer; |
||
| 112 | } |
||
| 113 | |||
| 114 | .DeleteDocumentButton {
|
||
| 115 | background: #f5f5f5; |
||
| 116 | border: none; |
||
| 117 | font-size: 13px; |
||
| 118 | padding: 5px 12px; |
||
| 119 | } |
||
| 120 | table.dataTable tbody th, table.dataTable tbody td { |
||
| 121 | padding: 8px 4px; |
||
| 122 | cursor:pointer; |
||
| 123 | } |
||
| 124 | |||
| 125 | .dataTables_filter input[type=search] { |
||
| 126 | display: block; |
||
| 127 | width: 100%; |
||
| 128 | height: 32px; |
||
| 129 | padding: 6px 12px; |
||
| 130 | font-size: 12px; |
||
| 131 | line-height: 1.42857143; |
||
| 132 | color: #555; |
||
| 133 | background-color: #fff; |
||
| 134 | background-image: none; |
||
| 135 | border: 1px solid #ccc; |
||
| 136 | border-radius: 2px; |
||
| 137 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); |
||
| 138 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); |
||
| 139 | -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; |
||
| 140 | -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; |
||
| 141 | transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; |
||
| 142 | } |
||
| 143 | |||
| 144 | table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1, |
||
| 145 | table.dataTable.stripe tbody tr.odd.selected, table.dataTable.display tbody tr.odd.selected, |
||
| 146 | table.dataTable tbody tr.selected, table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1, |
||
| 147 | table.dataTable.hover tbody tr:hover.selected, table.dataTable.display tbody tr:hover.selected { |
||
| 148 | background-color: rgba(40, 42, 60, 0.8117647058823529); |
||
| 149 | color: #fff; |
||
| 150 | } |
||
| 151 | |||
| 152 | table.dataTable.stripe tbody tr.selected td, table.dataTable.display tbody tr.selected td, table.dataTable tbody tr.selected, table.dataTable.display tbody tr.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.selected > .sorting_1 { |
||
| 153 | background-color: rgba(40, 42, 60, 0.8117647058823529); |
||
| 154 | color: #fff; |
||
| 155 | } |
||
| 156 | |||
| 157 | table.dataTable.stripe tbody tr.selected td .glyphicon, table.dataTable.display tbody tr.selected td .glyphicon, table.dataTable tbody tr.selected, table.dataTable.display tbody tr.selected .glyphicon, table.dataTable.order-column.stripe tbody tr.selected .glyphicon { |
||
| 158 | background-color: rgba(40, 42, 60, 0.8117647058823529); |
||
| 159 | color: #fff; |
||
| 160 | } |
||
| 161 | |||
| 162 | table.dataTable.stripe tbody tr:hover.selected td, table.dataTable.display tbody tr:hover.selected td, table.dataTable tbody tr:hover.selected, table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr:hover.selected > .sorting_1 { |
||
| 163 | background-color: rgba(40, 42, 60, 0.8117647058823529); |
||
| 164 | color: #fff; |
||
| 165 | } |
||
| 166 | |||
| 167 | .table-hover > tbody > tr.selected:hover { |
||
| 168 | background-color: rgba(40, 42, 60, 0.8117647058823529); |
||
| 169 | color: #fff; |
||
| 170 | } |
||
| 171 | |||
| 172 | .loadingBackground {
|
||
| 173 | position: absolute; |
||
| 174 | width: 100%; |
||
| 175 | height: 100%; |
||
| 176 | background: rgba(255,255,255,0.745); |
||
| 177 | top: 0; |
||
| 178 | z-index:2; |
||
| 179 | left:0; |
||
| 180 | } |
||
| 181 | .loader {
|
||
| 182 | border: 5px solid #f3f3f3; |
||
| 183 | border-radius: 50%; |
||
| 184 | border-top: 5px solid #1c1d29; |
||
| 185 | width: 40px; |
||
| 186 | height: 40px; |
||
| 187 | -webkit-animation: spin 2s linear infinite; |
||
| 188 | animation: spin 1s linear infinite; |
||
| 189 | position: absolute; |
||
| 190 | left: 50%; |
||
| 191 | top: 50%; |
||
| 192 | margin-left: -20px; |
||
| 193 | margin-top: -20px; |
||
| 194 | } |
||
| 195 | |||
| 196 | /* Safari */
|
||
| 197 | @-webkit-keyframes spin { |
||
| 198 | 0% {
|
||
| 199 | -webkit-transform: rotate(0deg); |
||
| 200 | } |
||
| 201 | |||
| 202 | 100% {
|
||
| 203 | -webkit-transform: rotate(360deg); |
||
| 204 | } |
||
| 205 | } |
||
| 206 | |||
| 207 | @keyframes spin { |
||
| 208 | 0% {
|
||
| 209 | transform: rotate(0deg); |
||
| 210 | } |
||
| 211 | |||
| 212 | 100% {
|
||
| 213 | transform: rotate(360deg); |
||
| 214 | } |
||
| 215 | } |
||
| 216 | |||
| 217 | .custom-menu {
|
||
| 218 | padding: 6px 10px; |
||
| 219 | font-size: 13px; |
||
| 220 | letter-spacing: 0px; |
||
| 221 | background: #fff; |
||
| 222 | box-shadow: 1px 2px 3px #dfdfdf; |
||
| 223 | } |
||
| 224 | |||
| 225 | .checkbox:before { |
||
| 226 | -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75); |
||
| 227 | -moz-transition: -moz-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75); |
||
| 228 | transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75); |
||
| 229 | -webkit-transform: rotate(-45deg) scale(0, 0); |
||
| 230 | -moz-transform: rotate(-45deg) scale(0, 0); |
||
| 231 | -ms-transform: rotate(-45deg) scale(0, 0); |
||
| 232 | -o-transform: rotate(-45deg) scale(0, 0); |
||
| 233 | transform: rotate(-45deg) scale(0, 0); |
||
| 234 | content: ""; |
||
| 235 | position: absolute; |
||
| 236 | left: 2.3rem; |
||
| 237 | top: 1.4rem; |
||
| 238 | z-index: 1; |
||
| 239 | width: 0.95rem; |
||
| 240 | height: 0.575rem; |
||
| 241 | border: 2px solid #282a3c; |
||
| 242 | border-top-style: none; |
||
| 243 | border-right-style: none; |
||
| 244 | } |
||
| 245 | |||
| 246 | .checkbox:checked:before { |
||
| 247 | -webkit-transform: rotate(-45deg) scale(1, 1); |
||
| 248 | -moz-transform: rotate(-45deg) scale(1, 1); |
||
| 249 | -ms-transform: rotate(-45deg) scale(1, 1); |
||
| 250 | -o-transform: rotate(-45deg) scale(1, 1); |
||
| 251 | transform: rotate(-45deg) scale(1, 1); |
||
| 252 | } |
||
| 253 | |||
| 254 | .checkbox:after { |
||
| 255 | content: ""; |
||
| 256 | position: absolute; |
||
| 257 | top: 1.2rem; |
||
| 258 | left: 2rem; |
||
| 259 | width: 1.6rem; |
||
| 260 | height: 1.6rem; |
||
| 261 | background: #fff; |
||
| 262 | border: 1px solid #dfdfdf; |
||
| 263 | cursor: pointer; |
||
| 264 | } |
||
| 265 | .dt-body-center{
|
||
| 266 | position:relative; |
||
| 267 | } |
||
| 268 | .dt-body-center input[type=checkbox]{ |
||
| 269 | width:0; |
||
| 270 | height:0; |
||
| 271 | } |
||
| 272 | .col-xs-11.col-sm-4.alert.alert-success.animated.fadeInDown { |
||
| 273 | width: 15%; |
||
| 274 | background-color: #28a745 !important; |
||
| 275 | color: #fff; |
||
| 276 | font-size: 15px; |
||
| 277 | } |
||
| 278 | |||
| 279 | .inside {
|
||
| 280 | position: absolute; |
||
| 281 | left: -999em; |
||
| 282 | top: 0px; |
||
| 283 | transition: 0.2s; |
||
| 284 | } |
||
| 285 | |||
| 286 | .inside .inner { |
||
| 287 | position: absolute; |
||
| 288 | top: -999em; |
||
| 289 | transition: 0.2s; |
||
| 290 | left: 100px; |
||
| 291 | } |
||
| 292 | |||
| 293 | .popup_menu {
|
||
| 294 | left: -500px; |
||
| 295 | top: -500px; |
||
| 296 | font-size: 13px; |
||
| 297 | position: absolute; |
||
| 298 | } |
||
| 299 | |||
| 300 | .popup_menu .options { |
||
| 301 | margin: 0; |
||
| 302 | padding: 0; |
||
| 303 | box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5); |
||
| 304 | } |
||
| 305 | |||
| 306 | .popup_menu .options li { |
||
| 307 | position: relative; |
||
| 308 | transition: 0.1s; |
||
| 309 | padding: 7px 15px; |
||
| 310 | list-style: none; |
||
| 311 | text-align: center; |
||
| 312 | background: #3f4152; |
||
| 313 | color: #fff; |
||
| 314 | border-bottom: 1px dashed #656b82; |
||
| 315 | cursor: pointer; |
||
| 316 | text-align: left; |
||
| 317 | } |
||
| 318 | |||
| 319 | .popup_menu .options li.slide:after { |
||
| 320 | position: absolute; |
||
| 321 | right: 10px; |
||
| 322 | top: 12px; |
||
| 323 | content: ""; |
||
| 324 | display: block; |
||
| 325 | width: 0; |
||
| 326 | height: 0; |
||
| 327 | border-top: 5px solid transparent; |
||
| 328 | border-left: 5px solid #767c93; |
||
| 329 | border-bottom: 5px solid transparent; |
||
| 330 | } |
||
| 331 | |||
| 332 | .popup_menu .options li .text:first-letter { |
||
| 333 | text-decoration: underline; |
||
| 334 | } |
||
| 335 | |||
| 336 | .popup_menu .options li:hover { |
||
| 337 | background: #545a71; |
||
| 338 | transform: scale(1.05); |
||
| 339 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); |
||
| 340 | } |
||
| 341 | |||
| 342 | .popup_menu .options li:hover:after { |
||
| 343 | border-left: 5px solid #cbd1e8; |
||
| 344 | } |
||
| 345 | |||
| 346 | .popup_menu .options li:hover .inside { |
||
| 347 | left: 100px; |
||
| 348 | } |
||
| 349 | |||
| 350 | .popup_menu .options li:hover .inside li:hover .inner { |
||
| 351 | top: 0px; |
||
| 352 | } |
||
| 353 | |||
| 354 | .popup_menu .options li:first-child { |
||
| 355 | border-radius: 2px 2px 0 0; |
||
| 356 | } |
||
| 357 | |||
| 358 | .popup_menu .options li:last-child { |
||
| 359 | border-radius: 0px 0px 2px 2px; |
||
| 360 | border-bottom: none; |
||
| 361 | } |
||
| 362 | |||
| 363 | .text > span.glyphicon{ |
||
| 364 | font-size:11px; |
||
| 365 | margin-right:5px; |
||
| 366 | } |
||
| 367 | |||
| 368 | |||
| 369 | .userInactiveBtn {
|
||
| 370 | border: none; |
||
| 371 | padding: 7px 10px; |
||
| 372 | font-weight: 500; |
||
| 373 | border-radius: 2px; |
||
| 374 | color: #f37a7a; |
||
| 375 | font-size: 12px; |
||
| 376 | } |
||
| 377 | |||
| 378 | .userActiveBtn {
|
||
| 379 | border: none; |
||
| 380 | padding: 7px 14px; |
||
| 381 | font-weight: 500; |
||
| 382 | border-radius: 2px; |
||
| 383 | color: #65bf6f; |
||
| 384 | width: 55px; |
||
| 385 | font-size: 12px; |
||
| 386 | } |
||
| 387 | |||
| 388 | span.userInactive { |
||
| 389 | color: #f37a7a; |
||
| 390 | } |
||
| 391 | span.userActive { |
||
| 392 | color: #65bf6f; |
||
| 393 | } |
||
| 394 | .dataTables_wrapper .dataTables_paginate .paginate_button { |
||
| 395 | font-size: 12px; |
||
| 396 | } |
||
| 397 | |||
| 398 | div#rangeDatepicker { |
||
| 399 | display: inline-block; |
||
| 400 | float: left; |
||
| 401 | margin-top: -4px; |
||
| 402 | } |
||
| 403 | div#rangeDatepicker input { |
||
| 404 | margin: 0; |
||
| 405 | max-width: 100%; |
||
| 406 | padding: 6.5px 12px; |
||
| 407 | font-size: 12px; |
||
| 408 | line-height: 1.42857143; |
||
| 409 | color: #555; |
||
| 410 | background-color: #fff; |
||
| 411 | background-image: none; |
||
| 412 | border: 1px solid #ccc; |
||
| 413 | border-radius: 2px; |
||
| 414 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); |
||
| 415 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); |
||
| 416 | -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; |
||
| 417 | -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; |
||
| 418 | transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; |
||
| 419 | margin-top: 4px; |
||
| 420 | margin-left: 15px; |
||
| 421 | } |
||
| 422 | #flight-datepicker input { |
||
| 423 | font-size: 12px; |
||
| 424 | height: 28px; |
||
| 425 | } |
||
| 426 | |||
| 427 | .padding-right-none{
|
||
| 428 | padding-right:0; |
||
| 429 | } |
||
| 430 | .padding-left-none{
|
||
| 431 | padding-left: 0; |
||
| 432 | } |
