zulip/static/styles/settings.scss
Aditya Jain 8f0ccdf1c9 user settings: Fix active background links when a modal is visible.
A bug caused background links to open even when a modal in the user
settings overlay was active in the foreground. This commit fixes this
by disabling mouse events for the background when the modal is active,
and restoring them as soon as the modal starts closing.

Fixes #10654.
2018-12-09 22:32:53 -08:00

1837 lines
35 KiB
SCSS

#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;
}
.new-style .button ul {
text-align: left;
}
/* 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);
}
#change_email_modal,
#change_full_name_modal {
width: 460px;
}
.admin-realm-description {
height: 16em;
width: 100%;
max-width: 500px;
box-sizing: border-box;
}
.padded-container {
padding: 20px;
}
.side-padded-container {
padding: 0px 20px;
}
#notification_sound,
#play_notification_sound {
display: inline;
margin-right: 8px;
margin-bottom: 0px;
}
.attributions_title {
margin-top: 24px;
}
.table.table-condensed.table-striped {
margin: 0px;
}
.wrapped-table {
table-layout: fixed;
word-break: break-word;
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%, 87%);
}
.table-condensed td {
vertical-align: middle;
}
#settings_content table + .progressive-table-wrapper table tr.user_row td:first-of-type {
width: 20%;
}
#uploaded_files_table > tr > td:nth-of-type(4),
#uploaded_files_table > tr > td:nth-of-type(5),
.upload-size,
.upload-actions {
width: 15%;
}
#uploaded_files_table > tr > td:nth-of-type(1),
#admin_filters_table > tr > td:nth-of-type(1),
.upload-file-name {
width: 30%;
word-break: break-all;
}
td .button {
margin: 2px 0px;
box-shadow: none;
}
.settings-info-icon {
padding-left: 3px;
opacity: 0.9;
}
.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.4em;
font-weight: 500;
margin: 10px 0px 10px 0px;
}
.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 hsla(0, 0%, 0%, 0.2) !important;
border-bottom: 1px solid hsla(0, 0%, 0%, 0.2) !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 .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", Source Sans Pro;
font-weight: 600;
}
.dynamic-input {
display: inline-block;
padding: 5px;
background-color: hsl(0, 0%, 100%);
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%, 67%);
}
.dynamic-input.bot_user_name div:empty::after {
content: "bot_user_name";
color: hsl(0, 0%, 67%);
}
.button,
.input-group {
margin: 0 0 20px 0;
}
.input-group.thinner {
margin: 10px 0px;
}
.input-group label.checkbox + label {
cursor: pointer;
}
.dependent-block {
margin: -5px 0 15px 35px;
}
.dependent-inline-block {
display: inline-block;
margin: 0 0 0 10px !important;
}
.no-margin {
margin: 0px;
}
input[type=checkbox] + .inline-block {
margin-left: 10px;
}
.allow-subdomains,
.new-realm-domain-allow-subdomains {
margin: 0 !important;
}
.realm_domains_info {
margin-bottom: 0px;
}
.admin-realm-form h3 {
margin-bottom: 10px;
}
#settings_page .icon-button {
border-radius: 5px;
border: 1px solid hsl(0, 0%, 80%);
font-size: 14px;
padding: 3px 14px 4px 11px;
text-decoration: none;
color: hsl(0, 0%, 47%);
min-width: 80px;
line-height: 16px;
}
#settings_page .icon-button:hover {
background-color: hsl(0, 0%, 100%);
border: 1px solid hsl(0, 0%, 61%);
color: hsl(0, 0%, 18%);
}
#settings_page .icon-button:hover .icon-button-icon {
color: hsl(0, 0%, 47%);
}
#settings_page .icon-button.primary:hover {
background-color: hsl(166, 35%, 57%);
border: 1px solid hsl(166, 35%, 57%);
}
#settings_page .icon-button.primary {
background-color: hsl(156, 30%, 50%);
color: hsl(0, 0%, 100%);
border: 1px solid hsl(155, 30%, 50%);
}
#settings_page .icon-button .icon-button-icon {
vertical-align: bottom;
margin-right: 3px;
font-size: 24px;
font-weight: 600;
}
#settings_page .icon-button.primary .icon-button-icon {
font-size: 15px;
font-weight: lighter;
color: hsl(0, 0%, 100%);
}
#settings_page .save-button-controls {
display: inline;
margin-left: 15px;
}
#settings_page .save-button-controls.hide {
display: none;
}
#settings_page .save-button {
margin-right: 5px;
}
#settings_page .icon-button.save-button.saving {
background-color: hsl(156, 14%, 40%);
border-color: hsl(156, 14%, 40%);
}
#settings_page .save-button.saving .icon-button-icon {
display: none;
}
#settings_page .save-button.saving .icon-button-loading {
display: inline-block;
margin-right: 2px;
}
#settings_page .save-button .icon-button-loading {
display: none;
}
.organization-settings-parent div:first-of-type {
margin-top: 10px;
}
.org-settings-form .organization-submission {
margin-top: 0px;
}
.realm-icon-section {
margin-bottom: 20px;
}
.inline-block.organization-permissions-parent div:first-of-type {
margin-top: 10px;
}
.admin-realm-form .subsection-header h3 {
display: inline;
}
#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;
}
.remove-attachment {
margin-right: 5px !important;
font-size: 1.1em !important;
padding-left: 0px !important;
}
#download_attachment {
padding-left: 0px;
border-left: 0px;
}
.alert-word-information-box {
position: relative;
padding: 10px;
margin: 20px auto;
}
.green-bg {
background-color: hsl(120, 29%, 84%);
}
.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,
#filter-settings .new-filter-form,
#profile-field-settings .new-profile-field-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,
#filter-settings .new-filter-form .control-label,
#profile-field-settings .new-profile-field-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,
#filter-settings .new-filter-form .controls,
#profile-field-settings .new-profile-field-form .controls,
#settings .settings-section .edit-bot-form-box .controls {
margin: auto;
text-align: center;
}
#settings_page .save-button-controls {
display: block;
margin: 10px 0 0 0;
}
}
#organization .settings-section .settings-section-icon,
#settings .settings-section .settings-section-icon {
margin-right: 8px;
}
#settings_page .alert-notification:not(:empty) {
display: inline-block !important;
vertical-align: top;
height: auto !important;
width: auto !important;
background-color: transparent;
border-radius: 4px;
margin-top: 14px;
margin-left: 10px;
border: 1px solid hsl(156, 30%, 50%);
color: hsl(156, 30%, 50%);
padding: 3px 10px;
font-size: 15px;
}
#settings_page .alert-notification.alert-error {
color: hsl(2, 46%, 68%);
border-color: hsl(2, 46%, 68%);
}
#settings_page .alert-notification .loading_indicator_spinner {
width: 13px;
height: 20px;
margin: 0;
}
/* make the spinner green like the text and box. */
#settings_page .alert-notification .loading_indicator_spinner svg path {
fill: hsl(178, 100%, 40%);
}
#settings_page .alert-notification .loading_indicator_text {
margin-top: 0px;
font-size: inherit;
vertical-align: top;
}
#settings_page .alert-notification img {
margin-right: 6px;
vertical-align: middle;
margin-top: -2px;
}
#notification-settings .notification-reminder {
text-align: left;
}
#realm_notifications_stream_label > button,
#realm_signup_notifications_stream_label > button {
margin: 0px 5px;
}
.control-label-disabled {
color: hsl(0, 0%, 82%);
}
.control-label-disabled.enabled {
color: hsl(0, 0%, 20%);
}
.disableable {
margin-left: 22px;
margin-top: -10px;
}
#settings_page .admin-realm-time-limit-input {
width: 5ch;
text-align: right;
}
#settings_page .realm-time-limit-label {
vertical-align: middle;
}
.admin-realm-message-content-delete-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: 20px;
display: block;
}
.emoji_image img {
max-width: 100%;
}
.add-new-emoji-box,
.add-new-user-group-box,
.add-new-alert-word-box {
margin-bottom: 20px;
}
.add-new-emoji-box .new-emoji-form,
.add-new-user-group-box .new-user-group-form,
.add-new-alert-word-box .new-alert-word-form {
margin: 10px 0px;
}
.add-new-emoji-box input[type=text],
.add-new-user-group-box input[type=text],
.add-new-default-stream-box input[type=text] {
padding: 6px;
}
.add-new-emoji-box #emoji-file-name {
width: 0;
top: -19px;
left: 3px;
position: relative;
display: inline-block;
vertical-align: top;
white-space: nowrap;
font-style: italic;
}
#emoji_file_input_error {
vertical-align: middle;
}
.add-new-emoji-box #emoji-file-name {
color: hsl(0, 0%, 67%);
}
.add-new-profile-field-box button,
.add-new-filter-box button {
margin-left: calc(10em - -20px) !important;
}
.grey-box .wrapper {
margin: 10px 0px;
}
#settings_content .admin-table-wrapper table.admin_profile_fields_table tr td {
width: 28%;
}
.admin_profile_fields_table,
.profile_field_choices_table {
.movable-profile-field-row {
cursor: move;
.fa-ellipsis-v {
color: hsl(0, 0, 75%);
position: relative;
top: 1px;
+ i {
margin-right: 5px;
}
}
}
}
#filter-settings .admin_filters_table {
margin-top: 20px;
}
#admin-filter-pattern-status,
#admin-filter-format-status {
margin: 20px 0 0 0;
}
.progressive-table-wrapper {
position: relative;
max-height: calc(95vh - 220px);
overflow: auto;
}
#admin-default-streams-list .progressive-table-wrapper {
max-height: calc(95vh - 280px);
}
.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.1rem;
margin: 7px 5px;
overflow: hidden;
line-height: 1.3em;
text-overflow: ellipsis;
white-space: pre;
}
.bots_list .regenerate_bot_api_key {
position: relative;
margin-left: 5px;
color: hsl(0, 0%, 67%);
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 .edit-bot-buttons .copy-gold {
color: hsl(51, 90%, 50%);
}
.bots_list .bot-information-box {
position: relative;
display: inline-block;
width: calc(50% - 10px);
max-height: 220px;
margin: 5px;
border-radius: 4px;
box-sizing: border-box;
overflow: auto;
}
.bots_list img.avatar {
margin: 10px 5px 0px 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,
.bots_list .type {
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;
display: flex;
}
.bots_list .bot_info {
padding: 10px;
}
.bot_info .field {
font-weight: 300;
text-transform: uppercase;
font-weight: 600;
color: hsl(0, 0%, 67%);
}
.bot_error {
margin-top: 10px;
margin-bottom: 0 !important;
}
.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%, 67%);
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,
.admin-profile-field-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: hsl(0, 0%, 100%);
}
#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;
}
.emojiset_choices {
width: 250px;
padding: 0px 10px;
}
.emojiset_choices .emoji {
height: 22px;
width: 22px;
}
.emojiset_choices label {
border-bottom: 1px solid hsla(0, 0%, 0%, 0.2);
padding: 8px 0px 10px 0px;
}
.emojiset_choices label:last-of-type {
border-bottom: none;
}
.emojiset_choices label input[type=radio] {
position: relative;
top: -2px;
margin: 0px 5px 0px 0px;
}
.emojiset_choices label input[type=radio]:checked + span {
font-weight: 600;
}
.emojiset_choices .right {
float: right;
}
.open-user-form {
min-width: initial !important;
}
#api_key_buttons {
display: inline-flex;
}
#api_key_buttons .regenerate_api_key {
margin-right: 5px;
}
.right.show .emoji_alt_code {
font-size: 1.2em;
}
#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 #user-avatar-block {
-webkit-filter: brightness(0.4);
}
#user-settings-avatar:hover #user-avatar-source {
visibility: visible;
}
#user-avatar-source {
margin-left: 10px;
width: 200px;
height: 20px;
position: absolute;
bottom: 19%;
left: 0%;
font-size: 0.9em;
visibility: hidden;
}
.white-color {
color: hsl(0, 0%, 100%);
}
#realm-settings-icon {
border-radius: 5px;
box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1);
width: 100px;
height: 100px;
}
.invite-user-link i {
text-decoration: none;
margin-right: 5px;
}
#user-groups .user-group {
margin-bottom: 20px;
padding: 10px;
border-radius: 5px;
}
#user-groups .user-group-status {
margin-bottom: 10px;
}
#user-groups .user-group h4 {
font-weight: normal;
margin: 0px;
display: flex;
align-items: center;
justify-content: left;
}
#user-groups p {
line-height: 2;
margin: 0;
}
#user-groups .spacer {
margin: 0 2px;
}
#user-groups .subscribers,
#user-groups .user-group h4 > .name {
font-weight: bold;
}
#user-groups .user-group span[contenteditable] {
display: inline-block;
word-break: break-all;
}
#user-groups .ntm {
cursor: not-allowed;
}
#user-groups .user-group span[contenteditable]:empty::before {
opacity: 0.5;
display: inline-block;
content: attr(data-placeholder);
}
#user-groups .user-group span[contenteditable]:focus,
#user-groups .user-group span[contenteditable="true"]:hover {
border-bottom: 1px solid hsl(0, 0%, 80%);
margin-bottom: -1px;
outline: none;
}
#user-groups .user-group .pill-container .input[contenteditable]:empty::after {
content: attr(data-placeholder);
opacity: 0.5;
}
#user-groups .ntm h4 > .button {
cursor: not-allowed;
display: none;
}
#user-groups .ntm h4 > .button:hover {
border-color: hsl(4, 56%, 82%);
}
#user-groups .save-status {
background-color: transparent;
padding: 2px 5px;
border-radius: 4px;
margin-left: 10px;
border-style: solid;
border-width: 1px;
display: none;
opacity: 0;
}
#user-groups .checkmark {
height: 12px;
}
#user-groups .delete {
margin-left: auto;
}
#user-groups .save-instructions {
display: none;
opacity: 0;
color: hsl(0, 0%, 20%);
font-size: 0.9em;
}
/* -- new settings overlay -- */
#settings_page {
height: 95vh;
width: 97vw;
max-width: 1024px;
margin: 2.5vh auto;
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%;
overflow-y: auto;
border-top-left-radius: 4px;
border-right: 1px solid hsl(0, 0%, 93%);
}
#settings_page .sidebar .tab-container {
padding: 6px;
border-bottom: 1px solid hsl(0, 0%, 87%);
}
#settings_page .sidebar .normal-settings-list,
#settings_page .sidebar .org-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%, 87%);
}
#settings_page .content-wrapper .settings-header h1 .section {
font-weight: 400;
color: inherit;
opacity: 0.6;
}
#settings_page h3 {
font-size: 1.5em;
font-weight: normal;
line-height: 1.5;
}
#settings_page .settings-header.mobile {
display: none;
border-bottom: 1px solid hsl(0, 0%, 87%);
}
.settings-header.mobile .fa-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: hsla(0, 0%, 0%, 0.02);
}
#settings_page .table-striped thead th {
background-color: inherit;
color: inherit;
}
#settings_page .table-striped thead th.active {
opacity: 1;
-webkit-transition: opacity 100ms ease-out;
-moz-transition: opacity 100ms ease-out;
-o-transition: opacity 100ms ease-out;
transition: opacity 100ms ease-out;
}
.modal.fade {
/* Ensure the modal is entirely off-screen while we fade the background */
top: -50%;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
transform: translateY(-50%);
}
#settings_page .table-striped thead th.active::after {
content: " \f0d8";
white-space: pre;
display: inline-block;
font: normal normal normal 12px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#settings_page .table-striped thead th.active.descend::after {
content: " \f0d7";
}
#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: hsl(0, 0%, 100%);
border-left: 1px solid hsl(0, 0%, 87%);
pointer-events: none;
transition: all 0.3s ease;
visibility: hidden;
}
#settings_page .form-sidebar.show {
pointer-events: auto;
transform: translateX(0px);
visibility: visible;
}
#settings_page .form-sidebar input[type=text] {
width: calc(100% - 10px - 4px);
}
#settings_page .propagate-notifications-controls button,
#settings_page .form-sidebar input[type=submit],
#settings_page .form-sidebar button {
border-radius: 4px;
outline: none;
}
#settings_page .propagate_stream_notifications_change {
margin-top: 8px;
}
#settings_page .form-sidebar select {
width: 100%;
}
#settings_page .form-sidebar .title,
#settings_page .form-sidebar .content {
padding: 20px;
}
#settings_page .form-sidebar .title {
padding: 10px 20px;
background-color: hsl(0, 0%, 98%);
border-bottom: 1px solid hsl(0, 0%, 87%);
}
#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%, 87%);
}
#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%, 67%);
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;
}
#settings_page #change_password_modal {
width: auto;
}
#account-settings {
.user-role button {
cursor: default;
}
.custom_user_field .field_hint {
color: hsl(0, 0%, 67%);
}
#show_my_user_profile_modal {
width: 219px;
margin-top: 20px;
}
#show_my_user_profile_modal i {
padding-left: 2px;
vertical-align: middle;
}
}
#settings_page .custom_user_field {
padding-bottom: 20px;
}
body:not(.night-mode) #account-settings .custom_user_field .datepicker {
background-color: hsl(0, 0%, 100%);
}
#settings_page .custom_user_field textarea {
width: 320px;
height: 80px;
}
#settings_page .custom_user_field .remove_date {
opacity: 0.5;
display: none;
cursor: pointer;
position: relative;
top: 2px;
left: -20px;
}
#settings_page .custom_user_field:hover .remove_date {
display: inline-flex;
}
#settings_page .custom_user_field .remove_date:hover {
opacity: 1;
}
#settings_page .custom_user_field .person_picker {
min-width: 206px;
}
#settings_page #change_password_modal .change_password_info,
#settings_page #change_email_modal .change_email_info,
#settings_page #change_full_name_modal .change_full_name_info {
margin: 10px;
}
#confirm_dialog_modal,
#deactivation_user_modal.fade.in {
top: calc(50% - 120px);
}
.modal.fade.in {
top: 50%;
pointer-events: all;
}
#id_realm_create_stream_permission,
#id_realm_org_join_restrictions,
#id_realm_bot_creation_policy,
#id_realm_user_invite_restriction {
width: 100%;
}
.m-t-10 {
margin-top: 10px;
}
.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;
}
#do_deactivate_self_button .loader {
display: none;
vertical-align: top;
position: relative;
height: 30px;
margin-top: -10px;
top: 5px;
}
#id_realm_notifications_stream .dropdown-search > input[type=text],
#id_realm_signup_notifications_stream .dropdown-search > input[type=text] {
margin: 9px;
}
#id_realm_notifications_stream .dropdown-list-body,
#id_realm_signup_notifications_stream .dropdown-list-body {
position: relative;
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%, 87%);
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%, 87%);
}
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,
#settings_page .sidebar li .locked {
display: inline-block;
vertical-align: top;
}
#settings_page .sidebar li .text {
width: calc(100% - 90px);
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 .locked {
width: 18px;
height: 18px;
margin: 14px 8px 6px;
font-size: 1em;
color: hsl(0, 0%, 62%);
background-size: cover;
background-repeat: no-repeat;
}
#settings_page .sidebar .org-settings-list {
display: none;
}
#settings_page .sidebar li:last-of-type .text {
border-bottom: none;
}
#settings_page .sidebar .sidebar-bottom-anchor {
width: 100%;
position: absolute;
bottom: 0px;
}
.subsection-failed-status p {
background-color: hsl(0, 43%, 91%);
padding: 2px 6px;
border-radius: 4px;
margin: 0 0 0 5px;
}
@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;
}
.subsection-failed-status p {
margin: 5px 0 0 0;
}
}
@media (max-width: 786px) {
#user-settings-avatar {
width: 220px;
height: 220px;
}
}
@media (max-height: 530px) {
#settings_page .sidebar .sidebar-bottom-anchor {
position: static;
}
#settings_page .sidebar .sidebar-bottom-anchor .border-top {
border: none;
}
}
@media (max-width: 450px) {
#api_key_buttons,
#download_zuliprc {
flex-direction: column;
margin-top: 5px;
}
}
@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;
}
#settings_page .sidebar {
float: left;
position: relative;
width: 250px;
height: 100%;
}
}
#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%, 67%);
}
.required-text.thick:empty::after {
width: 100%;
}
#payload_url_inputbox input[type=text] {
width: 340px;
}
#service_name_list input[type=text] {
width: 340px;
}
.dropdown-title {
margin-bottom: 3px;
}
.invited-as-admin {
opacity: 0.5;
margin-left: 2px;
}
@-moz-document url-prefix() {
#settings_page select {
-moz-appearance: none;
background: url('../images/dropdown.png') right / 20px;
background-repeat: no-repeat;
padding-right: 20px;
}
}
.profile-field-choices {
display: inline-block;
}
.profile-field-choices hr {
margin-top: 0;
margin-bottom: 5px;
}
.profile-field-choices .choice-row {
margin-top: 5px;
}
.profile-field-choices > .choice-row:first-of-type {
margin-top: 0;
}
.profile-field-choices .choice-row input {
width: 190px;
}
.profile-field-choices .choice-row button {
margin-left: 0 !important;
}
.custom_user_field .pill-container {
padding: 2px 6px;
height: 24px;
background-color: hsl(0, 0%, 100%);
}
.custom_user_field .pill-container:focus-within {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: 1px dotted \9;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}