/ odyseebuddy_extension / styles.css
styles.css
1 /* Copyright 2023 biolithic. All rights reserved. */ 2 3 .scbtToggleButton2 { 4 right: 0px; 5 position: absolute; 6 top: 0px; 7 height: 50px; 8 width: 50px; 9 background: #CA004B; 10 font-size: xx-large; 11 color: silver; 12 line-height: 0.5rem; 13 z-index: 11111111; 14 } 15 16 .scbtToggleButton2 div { 17 width: 35px; 18 height: 5px; 19 background-color: black; 20 margin: 6px 0px 6px 0.5rem; 21 } 22 23 .scbtToggleButton2:hover, 24 .scbtToggleButton2:focus, 25 .scbtToggleButton2:active 26 { 27 background: darkgray; 28 } 29 30 .scbtSideMenu button:hover, 31 .scbtSideMenu button:focus, 32 .scbtSideMenu button:active, 33 .scbtSideMenu button.focused, 34 35 .scbtChatMenu button:hover, 36 .scbtChatMenu button:focus, 37 .scbtChatMenu button:active, 38 .scbtChatMenu button.focused, 39 40 .scbtChatToggleMenu button:hover, 41 .scbtChatToggleMenu button:focus, 42 .scbtChatToggleMenu button:active, 43 .scbtChatToggleMenu button.focused, 44 45 .scbtOptionsSavedWrapper .round-button:hover, 46 .scbtOptionsSavedWrapper .round-button:focus, 47 .scbtOptionsSavedWrapper .round-button:active, 48 .scbtOptionsSavedWrapper .round-button.focused, 49 50 .az2:hover, 51 .az2:focus, 52 .az2:active, 53 .az2.focused, 54 55 .az3:hover, 56 .az3:focus, 57 .az3:active, 58 .az3.focused, 59 60 .az4:hover, 61 .az4:focus, 62 .az4:active, 63 .az4.focused, 64 65 .az5:hover, 66 .az5:focus, 67 .az5:active, 68 .az5.focused, 69 70 .az6:hover, 71 .az6:focus, 72 .az6:active, 73 .az6.focused 74 { 75 background: #CA004B !important; 76 border: 1px solid #fff; 77 } 78 79 .scbt-options-wrapper, 80 .scbtOptionsMenu, 81 .scbtMentionMenu, 82 .scbtChatMenu, 83 .scbtChatTitle, 84 .scbtChatWrapper, 85 .scbtToggleButton, 86 .scbtToggleButton2, 87 .scbtSideMenu, 88 .scbtChatToggleMenu, 89 .scbt-mobile .scbt7, 90 .scbt-mobile .scbt10, 91 .scbt-mobile .scbt16, 92 .scbt-mobile .scbt17, 93 #scbtLoading 94 { 95 display: none; 96 } 97 98 .scbt-mobile .scbtToggleButton2, 99 .scbt-options-wrapper.scbt-bl, 100 .scbtSideMenu.scbt-bl, 101 .scbtChatToggleMenu.scbt-bl, 102 .scbtOptionsMenu.scbt-bl, 103 .scbtChatWrapper.scbt-bl, 104 .scbtChatTitle.scbt-bl 105 { 106 display: block; 107 } 108 109 .scbt-options-wrapper.scbt-fl, 110 .scbtChatMenu.scbt-fl 111 { 112 display: flex; 113 } 114 115 .scbt-chat-timestamp, 116 .scbt-chat-author, 117 .scbt-options-title, 118 .round-button, 119 .scbtChatPreviousContent span, 120 .scbtToggleButton2, 121 .scbtSideMenu button, 122 .scbtChatToggleMenu span, 123 .scbtCloseButton, 124 .scbtChatMenu button, 125 .scbtOptionsMenu button, 126 .scbt-kick .scbt-speed li 127 { 128 cursor: pointer; 129 } 130 131 .sr-only { 132 position: absolute; 133 width: 1px; 134 height: 1px; 135 padding: 0; 136 margin: -1px; 137 overflow: hidden; 138 clip: rect(0, 0, 0, 0); 139 white-space: nowrap; 140 border-width: 0; 141 } 142 143 #scbtSnackbar { 144 visibility: hidden; 145 min-width: 250px; 146 background-color: #333; 147 text-align: center; 148 border-radius: 2px; 149 padding: 16px; 150 position: fixed; 151 z-index: 1111111; 152 color: #ccc; 153 right: 0px; 154 bottom: 5px; 155 font-size: medium; 156 } 157 158 #scbtSnackbar.show { 159 visibility: visible; 160 -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; 161 animation: fadein 0.5s, fadeout 0.5s 2.5s; 162 } 163 164 .scbtOptionsMenuForm { 165 clear: both; 166 } 167 168 .scbtOptionsMenuForm input { 169 font-size: 2rem; 170 } 171 172 .scbtOptionsMenuForm input[type="text"] { 173 174 } 175 176 .scbtSideMenu, 177 .scbtChatToggleMenu { 178 position: fixed; 179 top: 305px; 180 z-index: 10000000; 181 background: black; 182 right: 0px; 183 } 184 185 .scbtChatToggleMenu { 186 top: 355px; 187 } 188 189 .scbtSideMenu button, 190 .scbtChatToggleMenu button { 191 display: inline-block; 192 width: 40px; 193 height: 45px; 194 font-size: 1.75rem; 195 color: #fff; 196 } 197 198 .scbtChatWrapper { 199 position: absolute; 200 background: #222; 201 height: 300px; 202 z-index: 10000; 203 overflow-y: scroll; 204 top: 400px; 205 } 206 207 .scbtCloseButton { 208 position: absolute; 209 right: 40px; 210 z-index: 10000000; 211 } 212 213 .scbtCloseButton:hover { 214 opacity: 1; 215 } 216 217 .scbtCloseButton:before, 218 .scbtCloseButton:after { 219 position: absolute; 220 left: 15px; 221 content: ' '; 222 height: 33px; 223 width: 2px; 224 background-color: #ddd; 225 } 226 227 .scbtCloseButton:before { 228 transform: rotate(45deg); 229 } 230 231 .scbtCloseButton:after { 232 transform: rotate(-45deg); 233 } 234 235 .scbtChatTitle { 236 position: absolute; 237 color: red; 238 z-index: 1000000; 239 background: #222; 240 left: 0px; 241 top: 380px; 242 } 243 244 .scbtChatMenu { 245 position: absolute; 246 top: 350px; 247 right: 0px; 248 z-index: 1000; 249 min-width: fit-content; 250 width: 100%; 251 background: lightgrey; 252 height: 50px; 253 align-items: center; 254 justify-content: space-between; 255 } 256 257 .scbtChatSearchInputText { 258 width: 30%; 259 height: 50px; 260 background: lightgray; 261 color: #000; 262 } 263 264 .scbtChatMenu button { 265 justify-content: space-between; 266 height: 50px; 267 background: black; 268 color: white; 269 min-width: 60px; 270 padding-left: 0.5rem; 271 display: flex; 272 } 273 274 .scbtChatMenu button.scbt-multiple { 275 background: green; 276 } 277 278 .scbt-deactivated { 279 opacity: .4; 280 } 281 282 .scbtLoading { 283 display: none; 284 background: #666; 285 position: absolute; 286 margin: 0 auto; 287 height: 60px; 288 width: 60px; 289 z-index: 10000; 290 top: 50%; 291 left: 50%; 292 text-align: center; 293 } 294 295 296 .scbt-desktop .scbtSideMenu { 297 top: 0px; 298 } 299 300 .scbt-desktop .scbtChatToggleMenu { 301 top: 45px; 302 } 303 304 .scbt-desktop .scbtSideMenu button, 305 .scbt-desktop .scbtChatToggleMenu button { 306 font-size: 1.25rem; 307 width: fit-content; 308 } 309 310 .scbt-desktop .scbtChatMenu { 311 top: 0px; 312 right: 235px; 313 width: fit-content; 314 } 315 316 .scbt-desktop .scbtChatWrapper { 317 top: 100px; 318 max-width: 400px; 319 right: 0px; 320 left: initial; 321 height: 85vh; 322 } 323 324 .scbt-desktop .scbtChatTitle { 325 left: unset; 326 right: 80px; 327 top: 70px; 328 } 329 330 .scbtOptionsMenuForm > div { 331 max-height: 100px; 332 overflow-y: scroll; 333 overflow-x: hidden; 334 } 335 336 .scbtOptionsMenuForm > div::-webkit-scrollbar { 337 width: 20px; 338 } 339 340 .scbtOptionsMenuForm > div::-webkit-scrollbar-track { 341 box-shadow: inset 0 0 5px grey; 342 border-radius: 10px; 343 } 344 345 .scbtOptionsMenuForm > div::-webkit-scrollbar-thumb { 346 background: #CA004B; 347 border-radius: 10px; 348 } 349 350 .scbtOptionsMenuForm > div::-webkit-scrollbar-thumb:hover { 351 background: #D4D4D4; 352 } 353 354 355 356 357 358 .scbt-odysee.scbt-mobile .scbtSideMenu, 359 .scbt-odysee.scbt-mobile .scbtChatToggleMenu { 360 top: 0px; 361 right: unset; 362 left: 0px; 363 } 364 365 .scbtChatToggleMenu { 366 top: 355px; 367 } 368 369 370 .scbtOptionsThemeTitle, 371 .scbtOptionsHighlightTitle, 372 .scbtOptionsMuteTitle, 373 .scbtOptionsHideTitle, 374 .scbtOptionsFeaturesTitle, 375 .scbtOptionsSavedTitle, 376 .scbtOptionsImportTitle { 377 overflow: auto; 378 } 379 380 .scbt-odysee .scbtChatPreviousContent { 381 text-align: left; 382 display: block; 383 } 384 385 .scbt-odysee.scbt-mobile .scbtChatToggleMenu { 386 top: 42px; 387 } 388 389 .scbt-odysee .scbtOptionsMenu { 390 position: relative; 391 z-index: 11111; 392 background: #CA004B; 393 } 394 395 396 .scbt-odysee #scbthighlighted8Wrapper, 397 .scbt-odysee #scbthighlighted9Wrapper, 398 .scbt-odysee #scbthighlighted11Wrapper { 399 visibility: hidden; 400 } 401 402 403 #scbtMentionMenu { 404 display: none; 405 position: absolute; 406 z-index: 100; 407 bottom: 70px; 408 right: 5px; 409 } 410 411 #scbtMentionMenu.scbt-bl { 412 display: block; 413 background: #777; 414 padding: 0.5rem; 415 } 416 417 #scbtMentionMenu li { 418 list-style-type: none; 419 } 420 421 #scbtMentionMenu li:active, 422 #scbtMentionMenu li:hover, 423 #scbtMentionMenu li:focus { 424 color: #85C742; 425 } 426 427 #scbtMentionMenu ul { 428 padding-left: 0px; 429 padding-right: 75px; 430 width: 100%; 431 } 432 433 #scbtMentionMenu .emoji-picker { 434 width: fit-content; 435 } 436 437 #scbtMentionMenu .emoji-picker__content { 438 overflow-y: scroll; 439 } 440 441 .emoji-picker__wrapper-shown { 442 display: block !important; 443 position: absolute; 444 transform: translate(1089px, 15px, 0px); 445 inset: auto auto 0px 0px; 446 } 447 448 .scbt-odysee.scbt-mobile .scbtSideMenu, 449 .scbt-odysee.scbt-mobile .scbtChatToggleMenu { 450 width: -webkit-fill-available; 451 } 452 453 .scbt-odysee.scbt-mobile .scbtSideMenu button, 454 .scbt-odysee.scbt-mobile .scbtChatToggleMenu button { 455 width: 10%; 456 } 457 458 .scbt-odysee.scbt-mobile .scbtToggleButton2, 459 .scbt-odysee.scbt-mobile .scbtChatTitle, 460 .scbt-odysee.scbt-mobile .scbtChatMenu, 461 .scbt-odysee.scbt-mobile .scbtChatWrapper { 462 position: fixed; 463 } 464 465 .scbt-odysee.scbt-mobile .scbtChatTitle { 466 top: 37%; 467 font-size: .7rem; 468 display: block; 469 } 470 471 .scbt-odysee.scbt-mobile .scbtChatMenu { 472 top: 39%; 473 } 474 475 .scbt-odysee.scbt-mobile .scbtChatWrapper { 476 top: 47%; 477 width: 100%; 478 border: 1px black solid; 479 } 480 481 .scbt-odysee .scbtOptionsMenuForm input { 482 height: 45px; 483 width: 45px; 484 color: #000; 485 background: #555; 486 } 487 488 .scbt-odysee .scbt-options-wrapper { 489 background-color: #777; 490 } 491 492 .scbt-odysee .scbtOptionsMenuForm .scbtChatLog { 493 display: block; 494 width: 200px; 495 } 496 497 .scbt-odysee .scbtChatWrapper { 498 background-color: #ccc; 499 } 500 501 .scbt-odysee .scbtChatSearchFullButton, .scbt-odysee .scbtCloseButton::before, .scbt-odysee .scbtCloseButton::after { 502 color: #000; 503 } 504 505 .scbt-odysee .scbtChatTitle { 506 top: 5.5rem; 507 right: 2px; 508 } 509 510 .scbt-odysee .scbt-chat-timestamp, .scbt-odysee .scbt-chat-username { 511 opacity: .7; 512 } 513 514 .scbt-odysee .scbtChatPreviousContent p, .scbt-odysee .scbtChatPreviousContent button { 515 display: block; 516 clear: both; 517 } 518 519 .fill-height-or-more { 520 min-height: 100%; 521 display: flex; 522 flex-direction: column; 523 } 524 .fill-height-or-more > div { 525 flex: 1; 526 display: flex; 527 flex-direction: column; 528 justify-content: center; 529 max-height: 150px; 530 overflow-y: scroll; 531 } 532 .some-area > div { 533 border-bottom: 1px solid black; 534 } 535 .some-area > div:nth-child(even) { 536 537 } 538 .some-area > div:nth-child(odd) { 539 540 } 541 .some-area > div p { 542 margin: 0; 543 } 544 .fill-height-or-more { 545 width: 0px; 546 } 547 .fill-height-or-more.has-content { 548 width: fit-content; 549 }