#settings { margin-top: 55px; margin-left: 15px; } label { margin: 0; } .new-style .block { display: block; } .new-style .center-block { margin: 0 auto; } .new-style .center { text-align: center; } .new-style .w-70 { width: 70%; } .new-style .w-200 { width: 200px; } .new-style .m-t-20 { margin-top: 20px; } .new-style .m-t-10 { margin-top: 10px; } .new-style .grid label { min-width: 200px; } .new-style button.button i.fa.fa-pencil { margin-left: 3px; } .new-style #account-settings .grid label { min-width: 120px; } .new-style #account-settings .grid .warning { display: block; width: calc(100% - 20px - 5px); text-align: right; } .new-style .grid .warning { display: inline-block; vertical-align: top; width: 150px; padding: 5px 10px; text-align: left; } .new-style .warning #pw_strength { width: 140px; height: 8px; margin: 6px 0px 0px 0px; } /* this is because the input[type=text] is also 200px wide but has 12px of padding and 2px worth of borders. These don't apply to buttons however. */ .new-style .input-size { width: 214px; } .user-avatar-section, .realm-icon-section { position: relative; } .user-avatar-section { float: right; } .user-avatar-section .avatar-controls { margin-top: 20px; box-shadow: none; } .realm-icon-section { float: none; display: inline-block; } .user-avatar-section .inline-block, .realm-icon-section .inline-block { margin: 10px 20px 0px 0px; vertical-align: top; border-radius: 4px; box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1); } .admin-realm-description { height: 16em; width: 36em; } .padded-container { padding: 20px; } .side-padded-container { padding: 0px 20px; } .table.table-condensed.table-striped { margin: 0px; } .wrapped-table { table-layout: fixed; word-break: break-all; word-wrap: break-word; white-space: -moz-pre-wrap !important; white-space: -webkit-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; white-space: normal; } .wrapped-cell { width: 20%; } .table tbody { border-bottom: 1px solid hsl(0, 0%, 86%); } .table-condensed td { vertical-align: middle; } td .button { margin: 2px 0px; box-shadow: none; } .settings-section { display: none; width: calc(100% - 40px); margin: 20px; } #organization .settings-section { display: inline-block; } .settings-wrapper { display: none; } .settings-section.show, .settings-wrapper.show, .settings-wrapper.show .settings-section { display: block; } .settings-section .settings-section-title { font-size: 1.2em; font-weight: 300; padding: 10px; } .settings-section .settings-section-title.transparent { background-color: transparent; color: inherit; } .settings-section form { margin: 0; } .settings-section .no-padding { padding: 0; } .settings-section .table.table-condensed.table-striped tbody { border-bottom: none; } .settings-section .table-striped thead th { background-color: inherit; color: inherit; border-top: 1px solid hsl(0, 0%, 86%) !important; border-bottom: 1px solid hsl(0, 0%, 86%) !important; } #admin-user-list .table tr:first-of-type td, #admin-bot-list .table tr:first-of-type td { border-top: none; } .settings-section input[type=text].search { float: right; margin: 2px 5px 2px 0px; padding: 2px 5px; font-size: 0.9em; } .settings-section .settings-section-title { padding: 4px; } .settings-section .settings-section-title .table-title { display: inline-block; padding: 6px 0px; margin-left: 5px; } .settings-section .settings-section-title .table-title i { margin-right: 5px; } .settings-section .tip { position: relative; display: block; background-color: hsl(46, 63%, 95%); border: 1px solid hsl(49, 20%, 84%); border-radius: 4px; padding: 10px; margin: 10px 0px; font-size: 1rem; line-height: 1.5; color: hsl(0, 0%, 40%); } .settings-section .tip::before { content: "\f0a2"; display: inline; margin-right: 8px; font-family: FontAwesome, "Yantramanav", Humbug; font-weight: 600; } .dynamic-input { display: inline-block; padding: 5px; background-color: #FFF; border: 1px solid hsl(0, 0%, 80%); border-radius: 3px; transition: box-shadow 0.3s ease; min-width: 208px; } .dynamic-input:hover { outline: none; box-shadow: 0px 0px 4px hsla(199, 79%, 56%, 1.0); } .dynamic-input div, .dynamic-input label { display: inline-block; margin: 0; } .dynamic-input div { margin-right: -2px; } .dynamic-input [contenteditable=true] { outline: none; } .dynamic-input div:empty::after { content: "username"; color: hsl(0, 0%, 66%); } .dynamic-input.bot_user_name div:empty::after { content: "bot_user_name"; color: hsl(0, 0%, 66%); } .button, .input-group { margin: 20px 0px; } .input-group.thinner { margin: 10px 0px; } .no-margin { margin: 0px; } .admin-restricted-to-domain input[type=checkbox] + .inline, input[type=checkbox] + .inline-block { margin-left: 10px; } .admin-realm-form h3 { margin-bottom: 0px; } .organization-settings-parent div:first-of-type { margin-top: 10px; } .organization-submission { margin-top: 0px; } #default_language { margin-left: 20px; } #user-settings-avatar, #realm-icon-section { border-radius: 5px; box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1); } input[type=checkbox].inline-block { margin: -2px 0px 0px 0px; } #attachments_list .attachment-item { border-bottom: 1px solid hsl(0, 0%, 93%); } #attachments_list .attachment-item .list-container { position: relative; padding: 10px; width: 100%; } #attachments_list .attachment-item .list-container .remove-attachment { margin-top: 10px; margin-right: 5px; font-size: 1.2em; color: hsl(0, 56%, 73%); } #attachments_list .attachment-item .list-container .file-icon { display: inline-block; vertical-align: top; margin-right: 8px; width: 40px; height: 40px; font-weight: 600; color: #fff; background: -webkit-linear-gradient(-45deg, hsl(168, 53%, 52%), hsl(168, 69%, 67%)); background: linear-gradient(-45deg, hsl(168, 53%, 52%), hsl(168, 69%, 67%)); box-sizing: border-box; border-radius: 4px; } #attachments_list .attachment-item .list-container .file-icon .extension { font-size: 1.1em; text-align: center; margin-top: 10px; } #attachments_list .attachment-item .list-container .file-icon .extension.small { margin-top: 11px; font-size: 0.8em; } #attachments_list .attachment-item .list-container .file-icon .extension.no-extension { margin-top: 12px; } #attachments_list .attachment-item .list-container .information { display: inline-block; vertical-align: top; margin-top: -4px; } #attachments_list .attachment-messages { height: 25px; } #attachments_list .attachment-messages .ind-message { display: inline-block; border-radius: 4px; overflow: hidden; border: 1px solid hsl(0, 0%, 66%); transition: all 0.2s ease; } #attachments_list .attachment-messages .ind-message > div { display: inline-block; vertical-align: top; } #attachments_list .attachment-messages .ind-message .message-id { padding: 2px 4px 1px 4px; background-color: hsl(0, 0%, 66%); color: #fff; } #attachments_list .attachment-messages .ind-message:hover { border: 1px solid hsl(0, 0%, 53%); } #attachments_list .attachment-messages .ind-message:hover .message-id { background-color: hsl(0, 0%, 53%); } #attachments_list .attachment-messages .ind-message { color: hsl(0, 0%, 66%); text-decoration: none; } #attachments_list .attachment-messages .message-id { display: inline-block; padding: 2px 4px 1px 2px; } #attachments_list .attachment-messages .message-date { display: inline-block; padding: 2px 4px 1px 2px; } .grey-bg { background: hsl(0, 0%, 89%); padding: 10px; margin: 20px auto; box-shadow: 0px 0px 2px hsla(0, 0%, 0%, 0.5); position: relative; font-size: 14px; } .green-bg { background-color: hsl(120, 29%, 84%); } .new-default-stream-section-title { font-size: 18px; font-weight: 300; padding-bottom: 10px; } .remove-alert-word { margin-top: 1px; } @media (max-width: 480px) { #pw_strength { margin: auto; } #organization .settings-section .organization-settings .admin-realm-form, #settings .settings-section .account-settings-form, #settings .settings-section .new-bot-form, #settings .settings-section .new-alert-word-form, #emoji-settings .new-emoji-form, #filter-settings .new-filter-form, #settings .settings-section .notification-settings-form, #settings .settings-section .display-settings-form, #settings .settings-section .edit-bot-form-box { width: 100%; } #organization .settings-section .admin-realm-form .control-label, #settings .settings-section .account-settings-form .control-label, #settings .settings-section .new-bot-form .control-label, #settings .settings-section .new-alert-word-form .control-label, #emoji-settings .new-emoji-form .control-label, #filter-settings .new-filter-form .control-label, #settings .settings-section .edit-bot-form-box .control-label { display: block; width: 120px; padding: 0px; padding-top: 0; text-align: center; margin: auto; float: none; } #organization .settings-section .admin-realm-form .controls, #settings .settings-section .account-settings-form .controls, #settings .settings-section .new-bot-form .controls, #settings .settings-section .new-alert-word-form button, #emoji-settings .new-emoji-form .controls, #filter-settings .new-filter-form .controls, #settings .settings-section .edit-bot-form-box .controls { margin: auto; text-align: center; } } #organization .settings-section .settings-section-icon, #settings .settings-section .settings-section-icon { margin-right: 8px; } #notification-settings .notification-reminder { text-align: left; } #realm_notifications_stream_label > button { margin: 0px 5px; } .control-label-disabled { color: hsl(0, 0%, 82%); } .disableable { margin-left: 25px; } .admin-realm-message-content-edit-limit-minutes { width: 5ch; text-align: right; } .admin-realm-message-retention-days { width: 5ch; text-align: right; } #account-settings-status { text-align: center; width: 50%; margin: auto; margin-bottom: 20px; } .admin_emoji_table { margin: 20px auto; } .emoji_image { width: 50px; display: block; } .emoji_image img { max-width: 100%; } .admin_filters_table { margin-top: 20px; } #admin-filter-pattern-status, #admin-filter-format-status { margin: 20px 0 0 0; } .progressive-table-wrapper { max-height: calc(95vh - 200px); overflow: auto; } .bots_list { display: none; list-style-type: none; margin-left: 0px; } .bots_list .image { vertical-align: top; } .bots_list .bot-information-box .details { display: inline-block; width: calc(100% - 75px); } .bots_list .name { font-weight: 600; font-size: 1.3rem; margin: 10px 0px 5px 0px; overflow: hidden; max-height: 1em; text-overflow: ellipsis; white-space: pre; } .bots_list .regenerate_bot_api_key { position: relative; margin-left: 5px; color: hsl(0, 0%, 66%); transition: all 0.3s ease; } .bots_list .regenerate_bot_api_key:hover { color: hsl(0, 0%, 27%); } .bots_list .edit-bot-buttons { padding-top: 5px; } .bots_list .edit-bot-buttons button { background-color: transparent; } .bots_list .edit-bot-buttons .btn { padding: 4px; } .bots_list .edit-bot-buttons .sea-green { color: hsl(177, 70%, 46%); } .bots_list .edit-bot-buttons .blue { color: hsl(203, 77%, 56%); } .bots_list .edit-bot-buttons .danger-red { color: hsl(0, 56%, 73%); } .bots_list .bot-information-box { position: relative; display: inline-block; width: calc(50% - 10px); max-height: 220px; margin: 5px; background-color: #fff; border: 1px solid hsl(0, 0%, 86%); border-radius: 4px; box-sizing: border-box; overflow: auto; } .bots_list img.avatar { margin: 10px 5px 10px 10px; height: 50px; width: 50px; border-radius: 4px; vertical-align: top; box-shadow: 0px 0px 4px hsla(0, 0%, 0%, 0.1); } .bots_list .email { margin-bottom: 5px; } .bots_list .email .value, .bots_list .api_key .api-key-value-and-button { display: block; margin-left: 0px; white-space: -moz-pre-wrap !important; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; word-break: break-all; white-space: normal; } .bots_list .api_key .api-key-value-and-button { font-family: "Inconsolata", Menlo, monospace; font-size: 0.85em; } .bots_list .bot_info { padding: 10px; } .bot_info .field { font-weight: 300; text-transform: uppercase; font-weight: 600; color: hsl(0, 0%, 66%); } .edit_bot h3 { margin: 0px; font-weight: 400; } #bots_lists_navbar .active a { background-color: hsl(0, 0%, 98%); } #inactive_bots_list .bot_info .reactivate_bot { margin-top: 5px; } .edit_bot_form { font-size: 100%; margin: 0px; padding: 0px; } .edit_bot_form label { text-transform: uppercase; font-weight: 600; color: hsl(0, 0%, 66%); margin-top: 5px; } .edit_bot_form .buttons { margin: 10px 0px 5px 0px; } .edit_bot_email { font-weight: 400; font-size: 18px; text-align: left; margin-top: 0px; margin-bottom: 10px; overflow: hidden; max-height: 1.1em; text-overflow: ellipsis; white-space: pre; } #create_bot_form .control-label, #create_alert_word_form .control-label, #get_api_key_box .control-label, .admin-emoji-form .control-label, .admin-filter-form .control-label, .default-stream-form .control-label, .edit_bot_form .control-label { width: 10em; text-align: right; margin-right: 20px; } #upload_avatar_spinner, #upload_icon_spinner { font-size: 14px; margin: auto; } .bot_name_header { width: 8em; } #attachments_list { list-style-type: none; margin: auto; background-color: #fff; } #alert_words_list { margin: 0; } #alert_words_list li { list-style-type: none; } #alert_words_list li.alert-word-item:last-child { background: none; margin-top: 8px; } #alert_words_list .edit-alert-word-buttons, #attachments_list .edit-attachment-buttons { position: absolute; right: 20px; top: 5px; } #alert_words_list .alert_word_listing .value { display: block; white-space: -moz-pre-wrap !important; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; word-break: break-all; white-space: normal; } .open-user-form { min-width: initial !important; } #user-settings-avatar { border-radius: 5px; box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1); width: 200px; height: 200px; transition: all 0.3s ease; } #user-settings-avatar:hover { -webkit-filter: brightness(0.5); } #realm-settings-icon { border-radius: 5px; box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1); width: 100px; height: 100px; } /* -- new settings overlay -- */ #settings_page { min-height: 550px; } #settings_page { height: 95vh; width: 97vw; max-width: 1024px; margin: 2.5vh auto; background-color: #fff; overflow: hidden; border-radius: 4px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: transform 0.2s ease; } #settings_page .sidebar { float: left; position: relative; width: 250px; height: 100%; min-height: 550px; overflow-y: auto; border-top-left-radius: 4px; border-right: 1px solid hsl(0, 0%, 93%); } #settings_page .sidebar .tab-container { background-color: #fff; padding: 6px; border-bottom: 1px solid hsl(0, 0%, 86%); } #settings_page .sidebar .settings-list { position: relative; } #settings_page .content-wrapper { position: absolute; left: 251px; /* the width of the settings sidbar this is right of is 250px + 1px border. */ width: calc(100% - 250px - 1px); height: 100%; overflow: hidden; } #settings_page .content-wrapper .settings-header { width: 100%; height: 43px; border-bottom: 1px solid hsl(0, 0%, 86%); } #settings_page .content-wrapper .settings-header h1 .section { font-weight: 400; color: hsl(0, 0%, 40%); } #settings_page .settings-header.mobile { display: none; border-bottom: 1px solid hsl(0, 0%, 86%); } .settings-header.mobile .icon-vector-chevron-left { float: left; position: relative; top: 14px; left: 10px; } #settings_page .content-wrapper #settings_content { position: relative; width: 100%; height: calc(100% - 45px); float: left; overflow-y: auto; overflow-x: hidden; background-color: hsl(0, 0%, 98%); } #settings_page .table-striped thead th { background-color: inherit; color: inherit; } #settings_page input.search { font-size: 0.9rem; margin: 0px 0px 20px 0px; } #settings_page .form-sidebar { position: absolute; top: 45px; right: 0px; transform: translateX(303px); width: 300px; height: calc(100% - 45px); background-color: #fff; border-left: 1px solid hsl(0, 0%, 86%); pointer-events: none; transition: all 0.3s ease; } #settings_page .form-sidebar.show { pointer-events: auto; transform: translateX(0px); } #settings_page .form-sidebar input[type=text] { width: calc(100% - 10px - 4px); } #settings_page .form-sidebar input[type=submit], #settings_page .form-sidebar button { border-radius: 4px; outline: none; } #settings_page .form-sidebar select { width: 100%; } #settings_page .form-sidebar .title, #settings_page .form-sidebar .content { padding: 20px; } #settings_page .form-sidebar .title { background-color: hsl(0, 0%, 98%); padding: 10px 20px; border-bottom: 1px solid hsl(0, 0%, 86%); } #settings_page .form-sidebar .title h1 { display: inline-block; font-size: 1.3rem; margin: 0px; } #settings_page .form-sidebar .title .exit { float: right; font-size: 2rem; font-weight: 300; margin-top: 11px; cursor: pointer; } #settings_page .sidebar .header { height: auto; position: relative; width: calc(100% - 20px); padding: 10px; text-align: center; text-transform: uppercase; background-color: hsl(180, 6%, 93%); border-bottom: 1px solid hsl(0, 0%, 86%); } #settings_page .settings-header { padding-top: 1px; } #settings_page .settings-header h1 { text-align: center; font-size: 1.1em; line-height: 1; margin: 15px; text-transform: uppercase; } #settings_page .settings-header .exit { font-weight: 600; position: absolute; top: 10px; right: 10px; color: hsl(0, 0%, 66%); cursor: pointer; } #settings_page .settings-header .exit-sign { float: right; position: relative; top: 3px; margin-left: 3px; font-size: 1.5rem; font-weight: 600; cursor: pointer; } #deactivation_user_modal.fade.in { top: calc(50% - 120px); } #deactivate_self_modal { box-shadow: 0px 0px 75px hsla(0, 0%, 0%, 0.5); outline: 10000px solid hsla(0, 0%, 0%, 0.3); border: none; border-radius: 0px; } #id_realm_notifications_stream .dropdown-search > input[type=text] { margin: 9px; } #id_realm_notifications_stream .dropdown-list-body { height: auto; max-height: 200px; overflow-y: auto; margin-top: 0; display: block; } input[type=text]#settings_search { width: calc(100% - 10px - 2px); margin: 0px; color: hsl(0, 0%, 33%); font-size: 0.9rem; padding: 3px 5px; outline: none; border: 1px solid hsl(0, 0%, 86%); border-radius: 4px; } input[type=text]:focus#settings_search { box-shadow: none; border: 1px solid hsl(0, 0%, 73%); border-bottom: 1px solid hsl(0, 0%, 86%); } input[type=text]#settings_search { width: calc(100% - 10px - 2px); margin: 0px; } #settings_page .sidebar ul { list-style: none; margin: 0; padding: 0; } #settings_page .sidebar li { padding: 5px 0px; outline: none; cursor: pointer; transition: all 0.2s ease; border-bottom: 1px solid hsl(0, 0%, 93%); } #settings_page .sidebar li.border-top { border-top: 1px solid hsl(0, 0%, 93%); border-bottom: none; } #settings_page .sidebar li.no-border { border-color: transparent; } #settings_page .sidebar li.active { background-color: hsl(0, 0%, 93%); } #settings_page .sidebar li.active { border-bottom: 1px solid transparent; } #settings_page .sidebar li .text, #settings_page .sidebar li .icon { display: inline-block; vertical-align: top; } #settings_page .sidebar li .text { width: calc(100% - 55px); padding: 10px 12px 10px 0px; } #settings_page .sidebar li .icon { width: 18px; height: 18px; margin: 10px 10px; font-size: 1.4em; color: hsl(0, 0%, 53%); background-size: cover; background-repeat: no-repeat; } #settings_page .sidebar li.admin { display: none; } #settings_page .sidebar li.admin .icon { text-align: center; } #settings_page .sidebar li:last-of-type .text { border-bottom: none; } #settings_page .sidebar .sidebar-bottom-anchor { width: 100%; position: absolute; bottom: 0px; } /* -- end new settings overlay -- */ @media (max-width: 953px) { .user-avatar-section, .realm-icon-section { float: none; display: block; } .user-avatar-section .avatar-controls { display: inline-block; margin-top: 10px; } #settings_content .warning { display: none; } } @media (max-width: 786px) { #user-settings-avatar { width: 220px; height: 220px; } } @media (max-width: 700px) { #settings_page .settings-header.mobile { display: block; } #settings_page .content-wrapper .settings-header { display: none; } #settings_page .content-wrapper #settings_content { height: 100%; } #settings_page .content-wrapper.right { top: 47px; } } #show_api_key_box { padding-bottom: 20px; } #organization #deactivation_stream_modal h3 { overflow-wrap: break-word; } #organization .centered-footer { text-align: center; padding: 10px 15px; } #organization .new-realm-domain { width: 130px; margin-bottom: auto; padding: 0px 2px; } #organization #submit-add-realm-domain { width: 75px; } #muted_topics_table { margin-bottom: 0px; width: 90%; margin: 0 auto; } #muted_topics_table tbody { border-bottom: none; } #admin-user-list .last_active { width: 100px; } thead .actions { min-width: 230px; } #settings_page .display-settings-form select { width: 245px; } #attachments_list:empty { padding: 10px; } .required-text:empty::after { content: attr(data-empty); display: block; font-style: italic; color: hsl(0, 0%, 66%); } /* This is a hack; essentially the issue is that if the ::after element is on a table, then the width of the ::after @ 100% will be the width of the first table column, so we'll just make the ::after 200% to add more space. This is NOT a pattern that should be repeated or built on for other cases. */ .required-text.thick:empty::after { width: 200%; } #payload_url_inputbox input[type=text] { width: 340px; }