custom-css.scss (13109B)
1 .scrollable { 2 overflow-y: auto !important; 3 overflow-x: hidden !important; 4 height: 100%; 5 scrollbar-width: thin; 6 scrollbar-color: $scrollbar-color $scrollbar-bg-color; 7 } 8 9 .scrollable * { 10 /* don't allow the children of the scrollable element to be selected as an anchor node */ 11 overflow-anchor: none; 12 } 13 14 .scrollable::-webkit-scrollbar { 15 width: 5px; 16 background: $scrollbar-bg-color; 17 } 18 19 .scrollable::-webkit-scrollbar-thumb { 20 background: $scrollbar-color; 21 } 22 23 #anchor { 24 /* allow the final child to be selected as an anchor node */ 25 overflow-anchor: auto; 26 27 /* anchor nodes are required to have non-zero area */ 28 height: 1px; 29 } 30 31 .non-scrollable-container { 32 overflow: hidden; 33 } 34 35 36 .auto-scrollable-container { 37 overflow: auto; 38 } 39 40 .uk-badge.red { 41 background: #f0506e; 42 } 43 44 .h-100 { 45 height: 100% !important; 46 } 47 48 .menu { 49 width: 20rem; 50 padding: 1.5rem; 51 } 52 53 blockquote { 54 margin: 0 0 10px 0 !important; 55 font-size: 16px !important; 56 line-height: 1.5 !important; 57 border-left: 4px solid #ddd !important; 58 padding-left: 2px !important; 59 font-style: italic !important; 60 color: var(--global-emphasis-color) !important; 61 } 62 63 displayname { 64 font-weight: bold !important; 65 } 66 67 .uk-active, .uk-nav-default > li > a:hover, .uk-nav-default > li > a:focus, .uk-nav-header, h1 { 68 font-weight: bold !important; 69 } 70 71 em { 72 color: black !important; 73 } 74 75 .uk-nav-default > li > a { 76 color: $active-menu !important; 77 } 78 79 .error { 80 color: #992E2E; 81 font-family: 'Roboto', sans-serif; 82 font-style: normal; 83 font-weight: 500; 84 font-size: 16px; 85 line-height: 56px; 86 display: flex; 87 align-items: center; 88 text-align: center; 89 letter-spacing: 0.02em; 90 font-feature-settings: 'ordn' on; 91 margin: 0; 92 } 93 94 .uk-search, .uk-inline { 95 position: relative; 96 } 97 98 .uk-search input, .uk-inline input { 99 text-indent: 30px; 100 } 101 102 .uk-search > #ma-icon, .uk-inline > #ma-icon { 103 position: absolute; 104 top: 12px; 105 left: 13px; 106 font-size: 18px; 107 } 108 109 ul { 110 list-style: none; 111 } 112 113 ul > li > a:hover { 114 text-decoration: none !important; 115 } 116 117 ul > li > a { 118 padding: 5px 0; 119 } 120 121 .uk-nav-header { 122 padding: 5px 0; 123 text-transform: uppercase; 124 font-size: .875rem; 125 } 126 127 ul > li > a { 128 display: block; 129 text-decoration: none; 130 } 131 132 li { 133 display: list-item; 134 text-align: -webkit-match-parent; 135 } 136 137 138 @import "sun-loading-animation.scss"; 139 @import "lightbox.scss"; 140 141 .daydream-title { 142 //position: relative; 143 //margin-left: calc(50% - 295px / 2 - 0.5px); 144 margin: 0 auto 1rem; 145 146 width: 18.875rem; 147 } 148 149 .login-page-bg { 150 transform: scale(1.03); 151 position: absolute; 152 top: calc(50% - 100vh / 2); 153 left: calc(50% - 100vw / 2); 154 width: 100vw; 155 height: 100vh; 156 157 background: url(images/login_bg.webp) no-repeat center center fixed; 158 -webkit-background-size: cover; 159 -moz-background-size: cover; 160 -o-background-size: cover; 161 background-size: cover; 162 filter: blur(5px); 163 } 164 165 /* Safari 7.1+ */ 166 167 _::-webkit-full-page-media, _:future, :root .login-page-bg { 168 background: url(images/login_bg.jpg) no-repeat center center fixed; 169 } 170 171 .login-bg { 172 position: relative; 173 width: 481px; 174 margin: 48px auto 0; 175 height: calc(100% - 48px); 176 box-sizing: border-box; 177 178 /* 4dp — Elevation */ 179 box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14); 180 border-radius: 25px; 181 182 padding: 48px 56px 48px 56px; 183 } 184 185 .login-bg::before { 186 content: ""; 187 display: block; 188 height: 100%; 189 position: absolute; 190 top: 0; 191 left: 0; 192 width: 100%; 193 background: #1A1A1A; 194 opacity: 0.5; 195 mix-blend-mode: multiply; 196 border-radius: 25px; 197 } 198 199 .login-content { 200 position: relative; 201 } 202 203 .login-title { 204 font-family: 'Roboto', sans-serif; 205 font-style: normal; 206 font-weight: bold; 207 font-size: 48px; 208 line-height: 56px; 209 display: flex; 210 align-items: center; 211 text-align: center; 212 letter-spacing: 0.02em; 213 font-feature-settings: 'ordn' on; 214 215 color: #FFFFFF; 216 217 /* 6dp — Elevation */ 218 219 text-shadow: 0 3px 5px rgba(0, 0, 0, 0.2), 0 1px 18px rgba(0, 0, 0, 0.12), 0 6px 10px rgba(0, 0, 0, 0.14); 220 } 221 222 .login-button { 223 border: none; 224 width: 100%; 225 height: 61px; 226 margin-top: 56px; 227 228 background: #6E992E; 229 /* 4dp — Elevation */ 230 231 box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14); 232 transition: all 0.3s ease 0s; 233 border-radius: 45px; 234 235 font-family: 'Roboto', sans-serif; 236 font-style: normal; 237 font-weight: normal; 238 font-size: 24px; 239 line-height: 24px; 240 241 text-align: center; 242 letter-spacing: 0.15px; 243 244 /* Background */ 245 246 color: #FFFFFF; 247 } 248 249 .login-button:hover { 250 box-shadow: 0 15px 20px rgba(0, 0, 0, 0.4); 251 transform: translateY(-7px); 252 } 253 254 .login-input-first > input.login-input { 255 margin-top: 0 !important; 256 } 257 258 .login-input-first > .login-icons { 259 bottom: calc(50% - 6px * 2); 260 } 261 262 input.login-input { 263 //height: 48px; 264 width: 100%; 265 background: rgba(0, 0, 0, 0.65); 266 border-radius: 15px 15px 0 0; 267 border: none; 268 padding-left: 16px; 269 padding-top: 12px; 270 padding-bottom: 12px; 271 272 border-bottom: 2px solid #FFFFFF; 273 box-sizing: border-box; 274 margin-top: 48px; 275 276 /* Subtitle 1 / Roboto Regular */ 277 278 font-family: 'Roboto', sans-serif; 279 font-style: normal; 280 font-weight: normal; 281 font-size: 16px; 282 line-height: 24px; 283 284 /* Gray 4 */ 285 286 color: #BDBDBD; 287 } 288 289 input:placeholder-shown { 290 border: none; 291 border-bottom: 2px solid #FFFFFF; 292 } 293 294 input.login-input:invalid { 295 border-bottom: 2px solid #992E2E; 296 } 297 298 .login-icons { 299 font-size: 24px !important; 300 color: white; 301 position: absolute; 302 bottom: calc(50% - 19px * 2); 303 left: 16px; 304 } 305 306 .login-inline { 307 position: relative; 308 } 309 310 .login-inline > input { 311 padding-left: 64px; 312 } 313 314 html { 315 overflow: hidden; 316 height: 100vh; 317 width: 100vw; 318 } 319 320 body { 321 overflow: hidden; 322 height: 100vh; 323 width: 100vw; 324 } 325 326 .thumbnail-container { 327 height: 37.5rem; 328 329 img { 330 max-height: 100%; 331 max-width: 100%; 332 } 333 } 334 335 .room-title { 336 width: 100%; 337 overflow: hidden; 338 //padding-bottom: 2.5rem; 339 flex: 0 1 7.875rem; 340 box-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.04), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04), 0 1rem 1.5rem rgba(0, 0, 0, 0.06); 341 -moz-box-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.04), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04), 0 1rem 1.5rem rgba(0, 0, 0, 0.06); 342 -webkit-box-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.04), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04), 0 1rem 1.5rem rgba(0, 0, 0, 0.06); 343 margin-bottom: 0.3125rem; 344 345 div { 346 width: 100%; 347 height: 100%; 348 padding-left: 9.375rem; 349 padding-top: 1.1875rem; 350 351 h1 { 352 font-family: Roboto, sans-serif; 353 font-style: normal; 354 font-weight: bold; 355 font-size: 2.125rem; 356 line-height: 2.5rem; 357 letter-spacing: 0.015625rem; 358 } 359 } 360 } 361 362 .message-input { 363 flex: 0 1 4.375rem; 364 display: flex; 365 flex-direction: row; 366 367 border-top: 2px solid #4D4D4D; 368 369 .encryption-bg { 370 background: #EB9C00; 371 width: 42px; 372 height: 42px; 373 margin: 14px 67px 14px 48px; 374 375 box-shadow: 0 0 1px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.04), 0 10px 20px rgba(0, 0, 0, 0.04); 376 377 border-radius: 50%; 378 379 span { 380 margin: 9px; 381 } 382 } 383 384 textarea { 385 flex-grow: 1; 386 //background-color: #f5f5f5; 387 // Reset 388 border: 0; 389 390 &:focus { 391 outline: 0; 392 } 393 394 395 } 396 } 397 398 textarea::-webkit-input-placeholder { 399 padding-top: 20px; 400 } 401 402 textarea::-moz-input-placeholder { 403 padding-top: 20px; 404 } 405 406 textarea:-moz-input-placeholder { 407 padding-top: 20px; 408 } 409 410 textarea:-ms-input-placeholder { 411 padding-top: 20px; 412 } 413 414 415 .message-scrollarea { 416 flex: 1 1 auto; 417 } 418 419 .event-list { 420 height: 100%; 421 display: flex; 422 flex-direction: column; 423 width: 100%; 424 } 425 426 .message-container { 427 width: 100%; 428 max-width: 67.0625rem; 429 430 margin: 0 auto; 431 } 432 433 434 .roomlist { 435 width: 100%; 436 max-width: 31.5rem; 437 display: flex; 438 flex-direction: column; 439 position: relative; 440 z-index: 0; 441 442 .list { 443 width: 100%; 444 flex-grow: 1; 445 height: auto !important; 446 z-index: -1; 447 border-right: 1px solid #CCCCCC; 448 } 449 450 .top-bar { 451 width: 100%; 452 453 height: 138px; 454 455 .userdata { 456 width: 100%; 457 height: 5.875rem; 458 459 background-color: $accent-color; 460 461 padding-left: 1.5625rem; 462 padding-right: 1.1875rem; 463 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 464 -moz-box-sizing: border-box; /* Firefox, other Gecko */ 465 box-sizing: border-box; /* Opera/IE 8+ */ 466 } 467 468 .search { 469 width: 100%; 470 471 div { 472 height: 2.75rem; 473 474 display: flex; 475 flex-direction: row; 476 align-items: center; 477 478 padding-left: 1.5625rem; 479 padding-right: 1.1875rem; 480 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 481 -moz-box-sizing: border-box; /* Firefox, other Gecko */ 482 box-sizing: border-box; /* Opera/IE 8+ */ 483 z-index: 1; 484 485 width: 100%; 486 box-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.04), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04), 0 1rem 1.5rem rgba(0, 0, 0, 0.06); 487 -moz-box-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.04), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04), 0 1rem 1.5rem rgba(0, 0, 0, 0.06); 488 -webkit-box-shadow: 0 0 0.0625rem rgba(0, 0, 0, 0.04), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04), 0 1rem 1.5rem rgba(0, 0, 0, 0.06); 489 490 .material-icons { 491 margin-top: 0.625rem; 492 margin-bottom: 0.625rem; 493 } 494 495 .search-input { 496 /* 497 * 1. Define consistent box sizing. 498 * 3. Remove `border-radius` in iOS. 499 * 4. Change font properties to `inherit` in all browsers 500 * 5. Show the overflow in Edge. 501 * 6. Remove default style in iOS. 502 * 7. Vertical alignment 503 * 8. Take the full container width 504 * 9. Style 505 */ 506 /* 1 */ 507 box-sizing: border-box; 508 /* 3 */ 509 border-radius: 0; 510 /* 4 */ 511 font: inherit; 512 /* 5 */ 513 overflow: visible; 514 /* 6 */ 515 -webkit-appearance: none; 516 /* 7 */ 517 vertical-align: middle; 518 /* 8 */ 519 width: 100%; 520 /* 9 */ 521 border: none; 522 523 524 margin-top: 0.625rem; 525 margin-bottom: 0.625rem; 526 margin-left: 3.206875rem; 527 528 /* H6 / Roboto Medium */ 529 530 font-family: 'Roboto', sans-serif; 531 font-style: normal; 532 font-weight: 500; 533 font-size: 20px; 534 line-height: 23px; 535 display: flex; 536 align-items: center; 537 letter-spacing: 0.15px; 538 539 color: $search-grey; 540 541 &:focus { 542 // Chrome override 543 outline: none 0; 544 } 545 546 547 /* 548 * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X. 549 */ 550 551 &::-webkit-search-cancel-button, 552 &::-webkit-search-decoration { 553 -webkit-appearance: none; 554 } 555 556 /* 557 * Removes placeholder transparency in Firefox. 558 */ 559 560 &::-moz-placeholder { 561 opacity: 1; 562 } 563 564 } 565 } 566 } 567 568 } 569 570 .bottom-bar { 571 height: 4.375rem; 572 width: 100%; 573 position: relative; 574 border-top: 2px solid #4D4D4D; 575 576 .toggleWrapper { 577 height: 100%; 578 // Following later becomes button stuff 579 580 div { 581 position: relative; 582 left: 40%; 583 top: 5%; 584 } 585 } 586 } 587 } 588 589 // TODO make room-list-item responsive 590 .room-list-item { 591 &:hover { 592 background-color: #d9d9d9; 593 } 594 595 a { 596 &:hover { 597 text-decoration: none !important; 598 } 599 600 background-color: #F2F2F2; 601 height: 5rem; 602 603 .content { 604 margin-left: 35px; 605 height: 5rem; 606 display: flex; 607 flex-direction: row; 608 width: 100%; 609 max-width: 28.8125rem; 610 611 img.avatar { 612 border-radius: 50%; 613 box-shadow: 0 0 1px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.04), 0 10px 20px rgba(0, 0, 0, 0.04); 614 } 615 616 .avatar { 617 margin-right: 28px; 618 width: 48px; 619 height: 48px; 620 box-sizing: border-box; 621 margin-bottom: 16px; 622 margin-top: 16px; 623 } 624 625 div { 626 margin-bottom: 3px; 627 628 .name { 629 /* RoomList Names */ 630 631 font-family: Roboto, sans-serif; 632 font-style: normal; 633 font-weight: 500; 634 font-size: 18px; 635 line-height: 23px; 636 margin: 0 !important; 637 margin-top: 18px !important; 638 text-overflow: ellipsis; 639 overflow: hidden; 640 white-space: nowrap; 641 642 /* Black */ 643 644 color: #000000; 645 646 width: 100%; 647 max-width: 22rem; 648 } 649 650 p.latest-msg { 651 font-family: Roboto, sans-serif; 652 font-style: normal; 653 font-weight: normal; 654 font-size: 14px; 655 line-height: 28px; 656 text-overflow: ellipsis; 657 overflow: hidden; 658 white-space: nowrap; 659 660 letter-spacing: 0.5px; 661 margin: 0 !important; 662 663 /* Search Grey */ 664 color: #737373; 665 666 width: 100%; 667 max-width: 22rem; 668 display: inline-block; 669 } 670 } 671 } 672 673 } 674 } 675