RumbleTalk CSS Documentation

RumbleTalk CSS Documentation

Dialog Box (Options)


1   .dialog

.dialog { min-width: 310px; }

2   .dialog-content.options-dialog

.dialog-content.options-dialog { position: relative; padding: 0; width: 300px; }

3   .options-dialog h4

.options-dialog h4 { text-align: left; margin: 0; height: 30px; }

4   .options-dialog .close-button

.options-dialog .close-button { top: 0; }

1   .options-dialog .user-statuses

.options-dialog .user-statuses { display: block; height: 50px; text-align: left; border-top: 1px solid #e6e6e6; padding: 15px 0px 0px 20px; margin: 0 -20px; }

2   #user-status-1.user-status

.options-dialog .user-statuses>* { display: inline-block; cursor: pointer; }

3   #user-status-2.user-status

.options-dialog .user-statuses>* { display: inline-block; cursor: pointer; }

4   #user-status-3.user-status

.options-dialog .user-statuses>* { display: inline-block; cursor: pointer; }

.options-dialog .items

.options-dialog .items { margin: 0 -20px; }

1   .switch.toggle-sound

.options-dialog .items > .toggle-sound { background-image: url('https://d1pfint8izqszg.cloudfront.net/images/skins/general/settings/sound.svg'); }

2   .options-dialog .items>.toggle-sound

.options-dialog .items>.toggle-sound { background-image: url("https://d1pfint8izqszg.cloudfront.net/images/skins/general/settings/sound.svg"); }

3   .switch .text

.switch .text { display: inline-block; margin: 6px 0 0 20px; }

4   input:checked+.slider

input:checked+.slider { background-color: #bfda8f; }

5   input:checked+.slider::before

input:checked+.slider::before { transform: translateX(19px); }

1   .switch.toggle-private

.options-dialog .items > .toggle-private { background-image: url('https://d1pfint8izqszg.cloudfront.net/images/skins/general/settings/private-popup.svg'); }

2   .options-dialog .items>.toggle-private

.options-dialog .items>.toggle-private { background-image: url("https://d1pfint8izqszg.cloudfront.net/images/skins/general/settings/private-popup.svg"); }

3   .switch .text

.switch .text { display: inline-block; margin: 6px 0 0 20px; }

4   input:checked+.slider

input:checked+.slider { background-color: #bfda8f; }

5   input:checked+.slider::before

input:checked+.slider::before { transform: translateX(19px); }

1   .switch.admin-mode-switch

.options-dialog .items>.admin-mode-switch { background-image: url("https://d1pfint8izqszg.cloudfront.net/images/skins/general/settings/mute-chat.svg"); }

2   .options-dialog .items>.admin-mode-switch

.options-dialog .items>.admin-mode-switch { background-image: url("https://d1pfint8izqszg.cloudfront.net/images/skins/general/settings/mute-chat.svg"); }

3   .switch .text

.switch .text { display: inline-block; margin: 6px 0 0 20px; }

4   .slider

.slider { position: absolute; top: 13px; right: 22px; background-color: #e6e6e6; transition: background-color 0.4s; border-radius: 34px; width: 39px; height: 18px; }

5   .slider::before

.slider::before { position: absolute; content: ''; height: 16px; width: 16px; left: 2px; bottom: 1px; background-color: #767676; transition: transform 0.4s; border-radius: 50%; box-shadow: 0 2px 2px 0 #999; }

1   .plus-minus.font-size

.options-dialog .items>.font-size { background-image: url("https://d1pfint8izqszg.cloudfront.net/images/skins/general/settings/font-size.svg"); }

2   .options-dialog .items>.font-size

.options-dialog .items>.font-size { background-image: url("https://d1pfint8izqszg.cloudfront.net/images/skins/general/settings/font-size.svg"); }

3   .plus-minus .text

.plus-minus .text { display: inline-block; margin: 6px 0 0 20px; }

4   .plus-minus . buttons button

.plus-minus .buttons button { display: inline; padding: 0; margin: 0; background-color: transparent; color: #767676; border: 1px solid #ddffa1; border-radius: 50%; width: 20px; height: 20px; outline: none; }

5   .plus-minus .buttons button

.plus-minus .buttons button { display: inline; padding: 0; margin: 0; background-color: transparent; color: #767676; border: 1px solid #ddffa1; border-radius: 50%; width: 20px; height: 20px; outline: none; }

1   .qr-option

.options-dialog .items>.qr-option { background-image: url("https://d1pfint8izqszg.cloudfront.net/images/skins/general/settings/qr.svg"); }

2   .options-dialog .items>.qr-option

.options-dialog .items>.qr-option { background-image: url("https://d1pfint8izqszg.cloudfront.net/images/skins/general/settings/qr.svg"); }

1   .polls.beta

.options-dialog .items>.polls { background-image: url("https://d1pfint8izqszg.cloudfront.net/images/skins/general/settings/polls.svg"); }

2   .options-dialog .items>.polls

.options-dialog .items>.polls { background-image: url("https://d1pfint8izqszg.cloudfront.net/images/skins/general/settings/polls.svg"); }

3   .beta::after

.beta::after { content: ' [beta]'; color: #e00; }

1   .export

.options-dialog .items>.export { background-image: url("https://d1pfint8izqszg.cloudfront.net/images/skins/general/settings/export.svg"); }

2   .options-dialog .items>.export

.options-dialog .items>.export { background-image: url("https://d1pfint8izqszg.cloudfront.net/images/skins/general/settings/export.svg"); }

1   .popup

.options-dialog .items>.popup { background-image: url("https://d1pfint8izqszg.cloudfront.net/images/skins/general/settings/full-screen.svg"); }

2   .options-dialog .items>.popup

.options-dialog .items>.popup { background-image: url("https://d1pfint8izqszg.cloudfront.net/images/skins/general/settings/full-screen.svg"); }

1   .clear-messages

.options-dialog .items>.clear-messages { background-image: url("https://d1pfint8izqszg.cloudfront.net/images/skins/general/settings/trash.svg"); }

2   .options-dialog .items>.clear-messages

.options-dialog .items>.clear-messages { background-image: url("https://d1pfint8izqszg.cloudfront.net/images/skins/general/settings/trash.svg"); }