Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
zulip/static/styles/settings.scss

1952 lines
36 KiB
SCSS
Raw Normal View History

Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
label {
margin: 0;
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
css: Use SCSS nesting in `settings.scss` for `.new-style`.
2019-06-16 15:51:37 +02:00
.new-style {
.block {
display: block;
}
.center-block {
margin: 0 auto;
}
.center {
text-align: center;
}
.w-70 {
width: 70%;
}
.w-200 {
width: 200px;
}
.m-t-20 {
margin-top: 20px;
}
.m-t-10 {
margin-top: 10px;
}
.grid {
label {
min-width: 200px;
}
.warning {
display: inline-block;
vertical-align: top;
width: 150px;
padding: 5px 10px;
text-align: left;
}
}
#account-settings {
.grid {
label {
min-width: 120px;
}
.warning {
display: block;
width: calc(100% - 20px - 5px);
text-align: right;
}
}
}
.warning {
#pw_strength {
width: 140px;
height: 8px;
margin: 6px 0px 0px 0px;
}
}
.button {
ul {
text-align: left;
}
&.button i.fa.fa-pencil {
margin-left: 3px;
}
}
/* 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. */
.input-size {
width: 214px;
}
settings: Redesign the account settings template. This is technically part of the settings page redesign in the next commit, but it's probably useful to keep separate, since it touches totally different code.
2016-12-02 21:42:11 +01:00
}
email visibility: Enable feature and add user documentation.
2019-05-21 06:37:40 +02:00
.settings-section label > a,
settings: Restructure CSS for fa-question-circle-o. There are only two of these icons in the codebase, so it is a relatively safe change. Making this change to make it easier to add this icon to labels and other places in settings.
2019-05-21 06:26:42 +02:00
.settings-section h3 > a {
org settings: Improve labels and styling for realm logo/avatar.
2018-12-18 21:34:02 +01:00
color: inherit;
}
email visibility: Enable feature and add user documentation.
2019-05-21 06:37:40 +02:00
.settings-section label .fa-question-circle-o {
top: 1px;
left: 2px;
}
settings: Restructure CSS for fa-question-circle-o. There are only two of these icons in the codebase, so it is a relatively safe change. Making this change to make it easier to add this icon to labels and other places in settings.
2019-05-21 06:26:42 +02:00
.settings-section h3 .fa-question-circle-o {
org settings: Improve labels and styling for realm logo/avatar.
2018-12-18 21:34:02 +01:00
top: 1px;
left: 5px;
}
settings: Restructure CSS for fa-question-circle-o. There are only two of these icons in the codebase, so it is a relatively safe change. Making this change to make it easier to add this icon to labels and other places in settings.
2019-05-21 06:26:42 +02:00
.settings-section .fa-question-circle-o {
opacity: 0.4;
position: relative;
}
.settings-section .fa-question-circle-o:hover {
org settings: Improve labels and styling for realm logo/avatar.
2018-12-18 21:34:02 +01:00
opacity: 1;
}
css: Enforce one selector per line. While it's sometimes nice to put a few selectors on the same line, it is generally better to have a consistent way of formatting our selectors, and most of our code up until now lists them vertically. This change fixes the linter to enforce one selector per line, and it cleans up the places in the CSS where we had multiple selectors on the same line. The advantages of one-per-line are as followers: * cleaner diffs * easier to see when multiple areas of the app may have the same format * less likely to go over 80 cols * makes it more clear where we have deep nesting in the individual selectors * makes it easier for our linting tools to enforce whitespace violations This also fixed an old bug where we had ".landing_page h2, h4", which sets "h4" styles outside of the landing page.
2017-03-26 22:24:35 +02:00
.user-avatar-section,
settings: Add support for customizing the top-left logo. This adds a new realm_logo field, which is a horizontal-format logo to be displayed in the top-left corner of the webapp, and any other places where we might want a wide-format branding of the organization. Tweaked significantly by tabbott to rebase, fix styling, etc. Fixing the styling of this feature's loading indicator caused me to notice the loading indicator for the realm_icon feature was also ugly, so I fixed that too. Fixes #7995.
2018-08-16 01:26:55 +02:00
.realm-logo-section,
css: Enforce one selector per line. While it's sometimes nice to put a few selectors on the same line, it is generally better to have a consistent way of formatting our selectors, and most of our code up until now lists them vertically. This change fixes the linter to enforce one selector per line, and it cleans up the places in the CSS where we had multiple selectors on the same line. The advantages of one-per-line are as followers: * cleaner diffs * easier to see when multiple areas of the app may have the same format * less likely to go over 80 cols * makes it more clear where we have deep nesting in the individual selectors * makes it easier for our linting tools to enforce whitespace violations This also fixed an old bug where we had ".landing_page h2, h4", which sets "h4" styles outside of the landing page.
2017-03-26 22:24:35 +02:00
.realm-icon-section {
settings: Clean up organization and user settings pieces. This cleans up the styling of the organization and the user settings components to be more responsive and have more consistent styling with the rest of the overlays.
2017-05-17 19:07:00 +02:00
position: relative;
settings: Redesign and responsively fix account settings. This makes the avatar portion more responsive and efficient on many screen settings and also fixes some of the design incongruences present on the page.
2017-07-05 21:54:58 +02:00
}
settings: Clean up organization and user settings pieces. This cleans up the styling of the organization and the user settings components to be more responsive and have more consistent styling with the rest of the overlays.
2017-05-17 19:07:00 +02:00
settings: Add support for customizing the top-left logo. This adds a new realm_logo field, which is a horizontal-format logo to be displayed in the top-left corner of the webapp, and any other places where we might want a wide-format branding of the organization. Tweaked significantly by tabbott to rebase, fix styling, etc. Fixing the styling of this feature's loading indicator caused me to notice the loading indicator for the realm_icon feature was also ugly, so I fixed that too. Fixes #7995.
2018-08-16 01:26:55 +02:00
.realm-logo-block {
margin-bottom: 10px;
}
settings: Redesign and responsively fix account settings. This makes the avatar portion more responsive and efficient on many screen settings and also fixes some of the design incongruences present on the page.
2017-07-05 21:54:58 +02:00
.user-avatar-section {
float: right;
settings: Clean up organization and user settings pieces. This cleans up the styling of the organization and the user settings components to be more responsive and have more consistent styling with the rest of the overlays.
2017-05-17 19:07:00 +02:00
}
settings: Redesign and responsively fix account settings. This makes the avatar portion more responsive and efficient on many screen settings and also fixes some of the design incongruences present on the page.
2017-07-05 21:54:58 +02:00
.user-avatar-section .avatar-controls {
margin-top: 20px;
box-shadow: none;
settings: Redesign the account settings template. This is technically part of the settings page redesign in the next commit, but it's probably useful to keep separate, since it touches totally different code.
2016-12-02 21:42:11 +01:00
}
Clean up settings overlay "Your Account" tab display. This enforces a max-width of 1024px on the #settings overlay. This commit also cleans up the "Your Account" tab to display correctly without the avatar bleeding over to the next line.
2017-05-11 02:25:48 +02:00
.realm-icon-section {
float: none;
display: inline-block;
}
css: Enforce one selector per line. While it's sometimes nice to put a few selectors on the same line, it is generally better to have a consistent way of formatting our selectors, and most of our code up until now lists them vertically. This change fixes the linter to enforce one selector per line, and it cleans up the places in the CSS where we had multiple selectors on the same line. The advantages of one-per-line are as followers: * cleaner diffs * easier to see when multiple areas of the app may have the same format * less likely to go over 80 cols * makes it more clear where we have deep nesting in the individual selectors * makes it easier for our linting tools to enforce whitespace violations This also fixed an old bug where we had ".landing_page h2, h4", which sets "h4" styles outside of the landing page.
2017-03-26 22:24:35 +02:00
.user-avatar-section .inline-block,
settings: Add support for customizing the top-left logo. This adds a new realm_logo field, which is a horizontal-format logo to be displayed in the top-left corner of the webapp, and any other places where we might want a wide-format branding of the organization. Tweaked significantly by tabbott to rebase, fix styling, etc. Fixing the styling of this feature's loading indicator caused me to notice the loading indicator for the realm_icon feature was also ugly, so I fixed that too. Fixes #7995.
2018-08-16 01:26:55 +02:00
.realm-logo-section .inline-block,
css: Enforce one selector per line. While it's sometimes nice to put a few selectors on the same line, it is generally better to have a consistent way of formatting our selectors, and most of our code up until now lists them vertically. This change fixes the linter to enforce one selector per line, and it cleans up the places in the CSS where we had multiple selectors on the same line. The advantages of one-per-line are as followers: * cleaner diffs * easier to see when multiple areas of the app may have the same format * less likely to go over 80 cols * makes it more clear where we have deep nesting in the individual selectors * makes it easier for our linting tools to enforce whitespace violations This also fixed an old bug where we had ".landing_page h2, h4", which sets "h4" styles outside of the landing page.
2017-03-26 22:24:35 +02:00
.realm-icon-section .inline-block {
org settings: Improve labels and styling for realm logo/avatar.
2018-12-18 21:34:02 +01:00
margin: 5px 20px 0px 0px;
settings: Clean up organization and user settings pieces. This cleans up the styling of the organization and the user settings components to be more responsive and have more consistent styling with the rest of the overlays.
2017-05-17 19:07:00 +02:00
vertical-align: top;
border-radius: 4px;
org settings: Fix box-shadow in organization logos section. The box-shadow was * Not being applied to the images (the images get their box shadow from a more specific rule) * Being unintentionally applied to the upload/delete buttons * Being unintentionally applied to the container housing the buttons and error messages. The last one especially looked bad, since it added boxes where there otherwise wouldn't be a box.
2019-05-15 19:33:13 +02:00
}
.user-avatar-section .inline-block {
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1);
settings: Redesign the account settings template. This is technically part of the settings page redesign in the next commit, but it's probably useful to keep separate, since it touches totally different code.
2016-12-02 21:42:11 +01:00
}
user settings: Update alert message element in change-full-name modal.
2019-07-19 06:22:33 +02:00
#change_email_modal {
user setting: Enhance email change modal. * Disable spellcheck in email field. * Decrease width of email change modal. * Autofocus email field in email change modal.
2017-12-15 13:26:34 +01:00
width: 460px;
}
user settings: Update alert message element in change-full-name modal.
2019-07-19 06:22:33 +02:00
#change_full_name_modal {
width: 480px;
}
settings: Add support for longer, markdown-powered realm descriptions. This makes it possible to create much prettier login pages. Further work on styling may be necessary.
2017-05-11 22:52:14 +02:00
.admin-realm-description {
height: 16em;
organization-settings: Fix organization description textarea style. This makes the textarea responsive by making the width 100% and the max-width 500px so that it doesn't get *too* wide. Please close #8511 when this is merged. Fixes: #8504.
2018-03-13 01:56:44 +01:00
width: 100%;
max-width: 500px;
box-sizing: border-box;
settings: Add support for longer, markdown-powered realm descriptions. This makes it possible to create much prettier login pages. Further work on styling may be necessary.
2017-05-11 22:52:14 +02:00
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
.padded-container {
padding: 20px;
}
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
.side-padded-container {
padding: 0px 20px;
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
notifications: Add a setting for changing the notification sound. Also, add a new notification sound, "ding". It comes from https://freesound.org, where the original Zulip notification sound comes from as well. In the future, new sounds can be added by adding audio files to the `static/audio/notification_sounds` directory. Tweaked significantly by tabbott: * Avoided removing static/audio/zulip.ogg, because that file is checked for by old versions of the desktop app. * Added a views check for the sound being valid + tests. * Added additional tests. * Restructured the test_events test to be cleaner. * Removed check_bool_or_string. * Increased max length of notification_sound. * Provide available_notification_sounds in events data set if global notifications settings are requested. Fixes #8051.
2018-01-11 21:36:11 +01:00
#notification_sound,
#play_notification_sound {
display: inline;
margin-right: 8px;
margin-bottom: 0px;
}
.attributions_title {
margin-top: 24px;
}
Stream settings: sets zero margin for 'Streams Deletion' table. This removes the extra space at the bottom of the 'Stream Deletion' table, by setting the margin for the table to '0px'. Fixes #2077.
2016-10-20 23:30:45 +02:00
.table.table-condensed.table-striped {
margin: 0px;
}
Wrapped text in admin user and bot tables. Fixes: #2569.
2016-12-13 11:17:08 +01:00
.wrapped-table {
table-layout: fixed;
org settings: Fix word-wrapping CSS in "users" section. Fixes: #9225.
2018-04-26 16:30:11 +02:00
word-break: break-word;
Wrapped text in admin user and bot tables. Fixes: #2569.
2016-12-13 11:17:08 +01:00
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%;
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
.table tbody {
styles: Normalize differences in previous hex-to-HSL conversion.
2018-10-12 07:22:46 +02:00
border-bottom: 1px solid hsl(0, 0%, 87%);
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
.table-condensed td {
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
vertical-align: middle;
}
settings: Make CSS selector more specific in table rows in org settings. Fixes #7374. Since we use `table-layout: fixed`, the width of the first row are applied to all the remaining rows, thus wrapping all the columns to 20% width. This is fixed by making the selector specific to only user_rows and not the editable data row.
2017-11-21 05:21:05 +01:00
#settings_content table + .progressive-table-wrapper table tr.user_row td:first-of-type {
settings: Make col-width consistent between tables. This makes the column width consistent between tables in the organization users section by making the "Name" section 20%.
2017-08-28 19:49:39 +02:00
width: 20%;
}
user settings: fix uploaded files UI Fix UI and date uploaded
2017-12-08 14:24:32 +01:00
#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),
settings: Force strings to wrap in Filter settings table. Fixes #8140.
2018-02-05 02:51:53 +01:00
#admin_filters_table > tr > td:nth-of-type(1),
user settings: fix uploaded files UI Fix UI and date uploaded
2017-12-08 14:24:32 +01:00
.upload-file-name {
width: 30%;
settings: Force strings to wrap in Filter settings table. Fixes #8140.
2018-02-05 02:51:53 +01:00
word-break: break-all;
user settings: fix uploaded files UI Fix UI and date uploaded
2017-12-08 14:24:32 +01:00
}
linkifiers: Fix the new linkifier field widths. This makes it much more reasonable to enter a longer URL.
2018-12-19 18:15:06 +01:00
#filter-settings {
#filter_pattern,
#filter_format_string {
width: calc(100% - 10em - 6em);
}
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
td .button {
margin: 2px 0px;
box-shadow: none;
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
settings: Add style for settings informational icons.
2017-12-28 18:23:43 +01:00
.settings-info-icon {
padding-left: 3px;
opacity: 0.9;
}
settings: Adjust styling of ? icons.
2019-06-21 21:00:06 +02:00
.email-change-form .settings-info-icon,
.user-name-section .settings-info-icon {
position: relative;
top: 2px;
left: 1px;
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
.settings-section {
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
display: none;
Remove headers from templates.
2017-05-09 22:09:31 +02:00
width: calc(100% - 40px);
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
margin: 20px;
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
.settings-wrapper {
display: none;
}
.settings-section.show,
.settings-wrapper.show,
.settings-wrapper.show .settings-section {
display: block;
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
.settings-section .settings-section-title {
Normalize `.settings-section-title` headers. This normalizes the headers to all look the same and in a larger font size + weight.
2017-08-31 00:05:06 +02:00
font-size: 1.4em;
font-weight: 500;
Settings: Fix vertical spacing. Removed the top margin of input-group css to prevent the double margins. Also fixed the default-language positioning, and maintained margin consistency in organization settings. Fixes #8890.
2018-03-31 01:47:06 +02:00
margin: 10px 0px 10px 0px;
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
.settings-section .settings-section-title.transparent {
background-color: transparent;
color: inherit;
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
.settings-section form {
margin: 0;
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
.settings-section .no-padding {
padding: 0;
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
Stream settings: sets zero margin for 'Streams Deletion' table. This removes the extra space at the bottom of the 'Stream Deletion' table, by setting the margin for the table to '0px'. Fixes #2077.
2016-10-20 23:30:45 +02:00
.settings-section .table.table-condensed.table-striped tbody {
border-bottom: none;
}
settings: Improve general table styling. This generally makes the tables that have thead attributes look uniform with the tables that use the first tbody column as a thead.
2017-04-17 23:28:41 +02:00
.settings-section .table-striped thead th {
background-color: inherit;
color: inherit;
settings: Change borders from grey to translucent. This also changes the .settings-section table borders to be darker which keeps it inline with the rest of the styling.
2017-11-16 00:54:41 +01:00
border-top: 1px solid hsla(0, 0%, 0%, 0.2) !important;
border-bottom: 1px solid hsla(0, 0%, 0%, 0.2) !important;
frontend: Make table headers fixed. Tweaked by tabbott to update the users list as well. Fixes #4746.
2017-07-03 14:22:56 +02:00
}
frontend: Make ID assignments unique.
2017-07-11 11:24:51 +02:00
#admin-user-list .table tr:first-of-type td,
#admin-bot-list .table tr:first-of-type td {
frontend: Make table headers fixed. Tweaked by tabbott to update the users list as well. Fixes #4746.
2017-07-03 14:22:56 +02:00
border-top: none;
settings: Improve general table styling. This generally makes the tables that have thead attributes look uniform with the tables that use the first tbody column as a thead.
2017-04-17 23:28:41 +02:00
}
.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: Update upgrade text and styling. When we add Plus, the first sentence should change to "Available on Zulip Standard and Plus". I copied the styling of .tip out of expediency, but it's also possible that long term we'll want only 1 tip-like box styling. The hover styling is a bit random, but I tried to copy other hover styles I found in settings.scss. Note that this renames .upgrade_realm_plan_type_suggestion to .upgrade-tip.
2019-07-21 02:31:24 +02:00
.settings-section .upgrade-tip,
settings: Add notice for non-admin users about read-only access. With contributions from Brock Whittaker and Tim Abbott. Fixes #5165.
2017-06-02 06:30:00 +02:00
.settings-section .tip {
position: relative;
display: block;
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
background-color: hsl(46, 63%, 95%);
border: 1px solid hsl(49, 20%, 84%);
settings: Add notice for non-admin users about read-only access. With contributions from Brock Whittaker and Tim Abbott. Fixes #5165.
2017-06-02 06:30:00 +02:00
border-radius: 4px;
padding: 10px;
margin: 10px 0px;
font-size: 1rem;
line-height: 1.5;
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
color: hsl(0, 0%, 40%);
settings: Add notice for non-admin users about read-only access. With contributions from Brock Whittaker and Tim Abbott. Fixes #5165.
2017-06-02 06:30:00 +02:00
}
settings: Update upgrade text and styling. When we add Plus, the first sentence should change to "Available on Zulip Standard and Plus". I copied the styling of .tip out of expediency, but it's also possible that long term we'll want only 1 tip-like box styling. The hover styling is a bit random, but I tried to copy other hover styles I found in settings.scss. Note that this renames .upgrade_realm_plan_type_suggestion to .upgrade-tip.
2019-07-21 02:31:24 +02:00
.settings-section .upgrade-tip::before,
settings: Add notice for non-admin users about read-only access. With contributions from Brock Whittaker and Tim Abbott. Fixes #5165.
2017-06-02 06:30:00 +02:00
.settings-section .tip::before {
display: inline;
margin-right: 8px;
css: Rename 'Humbug' font to Source Sans Pro. That's what the font is actually called, and should help future Zulip developers save time trying to figure out what's up and why our font is unrelated to the "Humbug" font on the Internet.
2017-08-29 01:12:55 +02:00
font-family: FontAwesome, "Yantramanav", Source Sans Pro;
settings: Add notice for non-admin users about read-only access. With contributions from Brock Whittaker and Tim Abbott. Fixes #5165.
2017-06-02 06:30:00 +02:00
font-weight: 600;
}
Simplify CSS linter and clean up CSS. The CSS linter was pretty hard to reason about. It was pretty flexible about certain things, but then it would prevent seemingly innocuous code from getting checked in. This commit overhauls the pretty-printer to be more composable, where every object in the AST knows how to render itself. It also cleans up a little bit of the pre_fluff/post_fluff logic in the parser itself, so comments are more likely to be "attached" to the AST node that make sense. The linter is actually a bit more finicky about newlines, but this is mostly a good thing, as most of the variations before this commit were pretty arbitrary.
2017-11-13 17:26:11 +01:00
settings: Update upgrade text and styling. When we add Plus, the first sentence should change to "Available on Zulip Standard and Plus". I copied the styling of .tip out of expediency, but it's also possible that long term we'll want only 1 tip-like box styling. The hover styling is a bit random, but I tried to copy other hover styles I found in settings.scss. Note that this renames .upgrade_realm_plan_type_suggestion to .upgrade-tip.
2019-07-21 02:31:24 +02:00
.settings-section .upgrade-tip::before {
content: "\f135";
}
.settings-section .upgrade-tip:hover {
color: hsl(0, 0%, 20%);
border: 1px solid hsl(49, 20%, 60%);
box-shadow: 0px 0px 4px hsla(199, 79%, 56%, .2);
text-decoration: none;
}
.settings-section .tip::before {
content: "\f0a2";
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
.dynamic-input {
display: inline-block;
padding: 5px;
css: Convert colors to hsl() format. This changes most of the app-related CSS files, but leaves things like landing pages and bootstrap alone.
2017-11-13 16:34:06 +01:00
background-color: hsl(0, 0%, 100%);
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
border: 1px solid hsl(0, 0%, 80%);
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
border-radius: 3px;
transition: box-shadow 0.3s ease;
min-width: 208px;
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
.dynamic-input:hover {
outline: none;
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
box-shadow: 0px 0px 4px hsla(199, 79%, 56%, 1.0);
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
css: Enforce one selector per line. While it's sometimes nice to put a few selectors on the same line, it is generally better to have a consistent way of formatting our selectors, and most of our code up until now lists them vertically. This change fixes the linter to enforce one selector per line, and it cleans up the places in the CSS where we had multiple selectors on the same line. The advantages of one-per-line are as followers: * cleaner diffs * easier to see when multiple areas of the app may have the same format * less likely to go over 80 cols * makes it more clear where we have deep nesting in the individual selectors * makes it easier for our linting tools to enforce whitespace violations This also fixed an old bug where we had ".landing_page h2, h4", which sets "h4" styles outside of the landing page.
2017-03-26 22:24:35 +02:00
.dynamic-input div,
.dynamic-input label {
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
display: inline-block;
margin: 0;
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
.dynamic-input div {
margin-right: -2px;
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
.dynamic-input [contenteditable=true] {
outline: none;
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
.dynamic-input div:empty::after {
content: "username";
styles: Normalize differences in previous hex-to-HSL conversion.
2018-10-12 07:22:46 +02:00
color: hsl(0, 0%, 67%);
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
.dynamic-input.bot_user_name div:empty::after {
content: "bot_user_name";
styles: Normalize differences in previous hex-to-HSL conversion.
2018-10-12 07:22:46 +02:00
color: hsl(0, 0%, 67%);
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
css: Enforce one selector per line. While it's sometimes nice to put a few selectors on the same line, it is generally better to have a consistent way of formatting our selectors, and most of our code up until now lists them vertically. This change fixes the linter to enforce one selector per line, and it cleans up the places in the CSS where we had multiple selectors on the same line. The advantages of one-per-line are as followers: * cleaner diffs * easier to see when multiple areas of the app may have the same format * less likely to go over 80 cols * makes it more clear where we have deep nesting in the individual selectors * makes it easier for our linting tools to enforce whitespace violations This also fixed an old bug where we had ".landing_page h2, h4", which sets "h4" styles outside of the landing page.
2017-03-26 22:24:35 +02:00
.button,
.input-group {
Settings: Fix vertical spacing. Removed the top margin of input-group css to prevent the double margins. Also fixed the default-language positioning, and maintained margin consistency in organization settings. Fixes #8890.
2018-03-31 01:47:06 +02:00
margin: 0 0 20px 0;
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
.input-group.thinner {
margin: 10px 0px;
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
org settings: Show pointer on hovering labels of checkboxes. Fixes: #9447.
2018-05-22 14:07:10 +02:00
.input-group label.checkbox + label {
cursor: pointer;
}
org settings: Fix the spacing/indentation of dependent input elements.
2018-04-28 19:22:56 +02:00
.dependent-block {
margin: -5px 0 15px 35px;
}
org settings: Make time limit input elements inline to dropdown. (To make the capitalization pass we added `N` to ignored phrases.)
2018-05-02 19:02:51 +02:00
.dependent-inline-block {
display: inline-block;
margin: 0 0 0 10px !important;
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
.no-margin {
margin: 0px;
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
input[type=checkbox] + .inline-block {
margin-left: 10px;
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
org-settings: Fix styling of Allowed Domains modal. Fixes: #7628. Cleaned up by Brock Whittaker and Node tests fixed by Steve Howell.
2017-12-02 18:44:39 +01:00
.allow-subdomains,
.new-realm-domain-allow-subdomains {
margin: 0 !important;
}
.realm_domains_info {
margin-bottom: 0px;
}
settings: Clean up organization and user settings pieces. This cleans up the styling of the organization and the user settings components to be more responsive and have more consistent styling with the rest of the overlays.
2017-05-17 19:07:00 +02:00
.admin-realm-form h3 {
Settings: Fix vertical spacing. Removed the top margin of input-group css to prevent the double margins. Also fixed the default-language positioning, and maintained margin consistency in organization settings. Fixes #8890.
2018-03-31 01:47:06 +02:00
margin-bottom: 10px;
settings: Clean up organization and user settings pieces. This cleans up the styling of the organization and the user settings components to be more responsive and have more consistent styling with the rest of the overlays.
2017-05-17 19:07:00 +02:00
}
settings: Change save and discard button look and feel. This commit changes the way the save and discard buttons on the organization profile, settings and permissions tabs look and fades them out after a delay. It also cleans up the code a bit in the settings_org.js file. It introduces changes to the css in settings.css as well as the template for save-discard buttons. It also fixes a bug on the user settings whereby if an option that requires reload is clicked before clicking an option that does not require reload, the reload message is erased. This could create an issue where the user is not aware that a reload is required. The loader is also changed to using fa-icon as loading spinner on user settings and the colors are tweaked a little bit.
2018-03-29 02:02:01 +02:00
#settings_page .icon-button {
border-radius: 5px;
stylesheets: Fix coding style to comply with stylistic rules.
2018-07-27 00:58:50 +02:00
border: 1px solid hsl(0, 0%, 80%);
settings: Change save and discard button look and feel. This commit changes the way the save and discard buttons on the organization profile, settings and permissions tabs look and fades them out after a delay. It also cleans up the code a bit in the settings_org.js file. It introduces changes to the css in settings.css as well as the template for save-discard buttons. It also fixes a bug on the user settings whereby if an option that requires reload is clicked before clicking an option that does not require reload, the reload message is erased. This could create an issue where the user is not aware that a reload is required. The loader is also changed to using fa-icon as loading spinner on user settings and the colors are tweaked a little bit.
2018-03-29 02:02:01 +02:00
font-size: 14px;
settings: Changed checkbox and close icons on settings. Introduced a new checkmark icon in the settings page from entypo ( www.entypo.com ) to make icons more consistent between user and organization settings.
2018-04-03 13:09:52 +02:00
padding: 3px 14px 4px 11px;
settings: Change save and discard button look and feel. This commit changes the way the save and discard buttons on the organization profile, settings and permissions tabs look and fades them out after a delay. It also cleans up the code a bit in the settings_org.js file. It introduces changes to the css in settings.css as well as the template for save-discard buttons. It also fixes a bug on the user settings whereby if an option that requires reload is clicked before clicking an option that does not require reload, the reload message is erased. This could create an issue where the user is not aware that a reload is required. The loader is also changed to using fa-icon as loading spinner on user settings and the colors are tweaked a little bit.
2018-03-29 02:02:01 +02:00
text-decoration: none;
styles: Normalize differences in previous hex-to-HSL conversion.
2018-10-12 07:22:46 +02:00
color: hsl(0, 0%, 47%);
org settings: Make save-discard widget look better. This fixes some minor glitches with buttons: * Movement of the organization-settings-parent block on the appearance of widgets. * Large and odd look of save button. * Use of fadeIn and fadeOut rather than changing opacity as opacity don't actually remove them.
2018-04-30 15:01:55 +02:00
min-width: 80px;
line-height: 16px;
settings: Change save and discard button look and feel. This commit changes the way the save and discard buttons on the organization profile, settings and permissions tabs look and fades them out after a delay. It also cleans up the code a bit in the settings_org.js file. It introduces changes to the css in settings.css as well as the template for save-discard buttons. It also fixes a bug on the user settings whereby if an option that requires reload is clicked before clicking an option that does not require reload, the reload message is erased. This could create an issue where the user is not aware that a reload is required. The loader is also changed to using fa-icon as loading spinner on user settings and the colors are tweaked a little bit.
2018-03-29 02:02:01 +02:00
}
#settings_page .icon-button:hover {
styles: Convert background properties to background-color.
2018-10-08 22:31:26 +02:00
background-color: hsl(0, 0%, 100%);
settings: Change save and discard button look and feel. This commit changes the way the save and discard buttons on the organization profile, settings and permissions tabs look and fades them out after a delay. It also cleans up the code a bit in the settings_org.js file. It introduces changes to the css in settings.css as well as the template for save-discard buttons. It also fixes a bug on the user settings whereby if an option that requires reload is clicked before clicking an option that does not require reload, the reload message is erased. This could create an issue where the user is not aware that a reload is required. The loader is also changed to using fa-icon as loading spinner on user settings and the colors are tweaked a little bit.
2018-03-29 02:02:01 +02:00
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 {
settings: Changed checkbox and close icons on settings. Introduced a new checkmark icon in the settings page from entypo ( www.entypo.com ) to make icons more consistent between user and organization settings.
2018-04-03 13:09:52 +02:00
vertical-align: bottom;
margin-right: 3px;
font-size: 24px;
font-weight: 600;
settings: Change save and discard button look and feel. This commit changes the way the save and discard buttons on the organization profile, settings and permissions tabs look and fades them out after a delay. It also cleans up the code a bit in the settings_org.js file. It introduces changes to the css in settings.css as well as the template for save-discard buttons. It also fixes a bug on the user settings whereby if an option that requires reload is clicked before clicking an option that does not require reload, the reload message is erased. This could create an issue where the user is not aware that a reload is required. The loader is also changed to using fa-icon as loading spinner on user settings and the colors are tweaked a little bit.
2018-03-29 02:02:01 +02:00
}
#settings_page .icon-button.primary .icon-button-icon {
settings: Revert checkmark icon to fontawesome and checkbox-green. In 7b8da9b we have introduced some other checkmark icons which aren't necessary as old icons still make sense there. So removing them as they don't add any extra value. Fixes: #8995.
2018-04-12 19:55:17 +02:00
font-size: 15px;
font-weight: lighter;
styles: Convert named colors to HSL values.
2018-10-14 21:57:50 +02:00
color: hsl(0, 0%, 100%);
settings: Change save and discard button look and feel. This commit changes the way the save and discard buttons on the organization profile, settings and permissions tabs look and fades them out after a delay. It also cleans up the code a bit in the settings_org.js file. It introduces changes to the css in settings.css as well as the template for save-discard buttons. It also fixes a bug on the user settings whereby if an option that requires reload is clicked before clicking an option that does not require reload, the reload message is erased. This could create an issue where the user is not aware that a reload is required. The loader is also changed to using fa-icon as loading spinner on user settings and the colors are tweaked a little bit.
2018-03-29 02:02:01 +02:00
}
#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 {
styles: Convert background properties to background-color.
2018-10-08 22:31:26 +02:00
background-color: hsl(156, 14%, 40%);
settings: Change save and discard button look and feel. This commit changes the way the save and discard buttons on the organization profile, settings and permissions tabs look and fades them out after a delay. It also cleans up the code a bit in the settings_org.js file. It introduces changes to the css in settings.css as well as the template for save-discard buttons. It also fixes a bug on the user settings whereby if an option that requires reload is clicked before clicking an option that does not require reload, the reload message is erased. This could create an issue where the user is not aware that a reload is required. The loader is also changed to using fa-icon as loading spinner on user settings and the colors are tweaked a little bit.
2018-03-29 02:02:01 +02:00
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;
settings: Changed checkbox and close icons on settings. Introduced a new checkmark icon in the settings page from entypo ( www.entypo.com ) to make icons more consistent between user and organization settings.
2018-04-03 13:09:52 +02:00
margin-right: 2px;
settings: Change save and discard button look and feel. This commit changes the way the save and discard buttons on the organization profile, settings and permissions tabs look and fades them out after a delay. It also cleans up the code a bit in the settings_org.js file. It introduces changes to the css in settings.css as well as the template for save-discard buttons. It also fixes a bug on the user settings whereby if an option that requires reload is clicked before clicking an option that does not require reload, the reload message is erased. This could create an issue where the user is not aware that a reload is required. The loader is also changed to using fa-icon as loading spinner on user settings and the colors are tweaked a little bit.
2018-03-29 02:02:01 +02:00
}
#settings_page .save-button .icon-button-loading {
display: none;
}
org settings: Explain Zoom support is experimental, and fix a few strings. Visually, #zoom_help_text acts like .organization-settings-parent div:first-of-type when the Zoom option is selected, but isn't treated as such. No visual change with the #google_hangouts_domain change; just there to make the code more readable/defensible.
2019-02-28 00:13:57 +01:00
#google_hangouts_domain,
#zoom_help_text,
settings: Clean up organization and user settings pieces. This cleans up the styling of the organization and the user settings components to be more responsive and have more consistent styling with the rest of the overlays.
2017-05-17 19:07:00 +02:00
.organization-settings-parent div:first-of-type {
margin-top: 10px;
}
org settings: Add setting to prevent users from adding bots. Fixes: #7908.
2018-01-29 16:10:54 +01:00
.org-settings-form .organization-submission {
settings: Redesign and responsively fix account settings. This makes the avatar portion more responsive and efficient on many screen settings and also fixes some of the design incongruences present on the page.
2017-07-05 21:54:58 +02:00
margin-top: 0px;
}
settings: Add support for customizing the top-left logo. This adds a new realm_logo field, which is a horizontal-format logo to be displayed in the top-left corner of the webapp, and any other places where we might want a wide-format branding of the organization. Tweaked significantly by tabbott to rebase, fix styling, etc. Fixing the styling of this feature's loading indicator caused me to notice the loading indicator for the realm_icon feature was also ugly, so I fixed that too. Fixes #7995.
2018-08-16 01:26:55 +02:00
.realm-logo-section {
margin-bottom: 20px;
}
org settings: Add organization profile preview option. This should make it convenient and obvious how verify that their organization profile looks nice after being markdown-rendered. Fixes #12105.
2019-04-13 09:37:53 +02:00
#id_org_profile_preview,
Settings: Fix vertical spacing. Removed the top margin of input-group css to prevent the double margins. Also fixed the default-language positioning, and maintained margin consistency in organization settings. Fixes #8890.
2018-03-31 01:47:06 +02:00
.realm-icon-section {
margin-bottom: 20px;
}
.inline-block.organization-permissions-parent div:first-of-type {
margin-top: 10px;
}
org settings: Use same CSS for new saving buttons in all settings. Generalize the CSS for new subsection changes saving buttons for all the organization settings sections.
2018-03-22 12:59:38 +01:00
.admin-realm-form .subsection-header h3 {
org settings: Make each subsection independent for saving changes. This makes each subsection(like "Message feed") independent of changes done in any other subsection and the save button of each subsection saves the changes done in that subsection only.
2018-03-14 23:45:42 +01:00
display: inline;
}
settings: Redesign and responsively fix account settings. This makes the avatar portion more responsive and efficient on many screen settings and also fixes some of the design incongruences present on the page.
2017-07-05 21:54:58 +02:00
#default_language {
margin-left: 20px;
}
css: Enforce one selector per line. While it's sometimes nice to put a few selectors on the same line, it is generally better to have a consistent way of formatting our selectors, and most of our code up until now lists them vertically. This change fixes the linter to enforce one selector per line, and it cleans up the places in the CSS where we had multiple selectors on the same line. The advantages of one-per-line are as followers: * cleaner diffs * easier to see when multiple areas of the app may have the same format * less likely to go over 80 cols * makes it more clear where we have deep nesting in the individual selectors * makes it easier for our linting tools to enforce whitespace violations This also fixed an old bug where we had ".landing_page h2, h4", which sets "h4" styles outside of the landing page.
2017-03-26 22:24:35 +02:00
#user-settings-avatar,
#realm-icon-section {
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
border-radius: 5px;
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1);
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
input[type=checkbox].inline-block {
margin: -2px 0px 0px 0px;
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
user settings: fix uploaded files UI Fix UI and date uploaded
2017-12-08 14:24:32 +01:00
.remove-attachment {
stylesheets: Fix coding style to comply with stylistic rules.
2018-07-27 00:58:50 +02:00
margin-right: 5px !important;
font-size: 1.1em !important;
padding-left: 0px !important;
Restyle uploaded files table. This restyles the uploaded files table to be lighter, more minimal, and easier to parse than the previous table.
2017-02-24 02:31:37 +01:00
}
user settings: fix 'Uploaded files' UI Align table header and its corresponding table data
2017-12-04 23:25:06 +01:00
#download_attachment {
padding-left: 0px;
border-left: 0px;
}
user settings: Change alert words styling to match other settings forms. Fixes #8065.
2018-01-13 19:12:38 +01:00
.alert-word-information-box {
position: relative;
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
padding: 10px;
settings: Redesign and responsively fix account settings. This makes the avatar portion more responsive and efficient on many screen settings and also fixes some of the design incongruences present on the page.
2017-07-05 21:54:58 +02:00
margin: 20px auto;
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
.green-bg {
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
background-color: hsl(120, 29%, 84%);
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
.remove-alert-word {
lint: Ban 2-space indentation in our CSS. Probably most properly we should check for any number of spaces that isn't 4, but that's a bit more work to do with our linter framework, and in practice basically every CSS whitespace error we see is 2-space.
2016-09-28 03:06:44 +02:00
margin-top: 1px;
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
@media (max-width: 480px) {
#pw_strength {
margin: auto;
}
Add initial implementation of custom realm filters. This PR was abandoned by Vladislav and then substantially modified by Igor Tokarev and Tim Abbott to complete it and fix a number of bugs. Fixes #544.
2016-02-13 19:17:15 +01:00
#filter-settings .new-filter-form,
css: Remove redundant `#settings` from `settings.scss`. This commit removes `settings` element from setiings.scss since now no such element exists.
2019-06-16 15:32:00 +02:00
#profile-field-settings .new-profile-field-form {
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
width: 100%;
}
Add initial implementation of custom realm filters. This PR was abandoned by Vladislav and then substantially modified by Igor Tokarev and Tim Abbott to complete it and fix a number of bugs. Fixes #544.
2016-02-13 19:17:15 +01:00
#filter-settings .new-filter-form .control-label,
css: Remove redundant `#settings` from `settings.scss`. This commit removes `settings` element from setiings.scss since now no such element exists.
2019-06-16 15:32:00 +02:00
#profile-field-settings .new-profile-field-form .control-label {
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
display: block;
width: 120px;
padding: 0px;
padding-top: 0;
text-align: center;
margin: auto;
float: none;
}
Add initial implementation of custom realm filters. This PR was abandoned by Vladislav and then substantially modified by Igor Tokarev and Tim Abbott to complete it and fix a number of bugs. Fixes #544.
2016-02-13 19:17:15 +01:00
#filter-settings .new-filter-form .controls,
css: Remove redundant `#settings` from `settings.scss`. This commit removes `settings` element from setiings.scss since now no such element exists.
2019-06-16 15:32:00 +02:00
#profile-field-settings .new-profile-field-form .controls {
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
margin: auto;
text-align: center;
}
org settings: Improve error handling status elements. With styling work by @maxnuss. Fixes: #9188.
2018-04-30 15:27:35 +02:00
#settings_page .save-button-controls {
display: block;
margin: 10px 0 0 0;
}
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
display_settings: Change success/failure feedback interface. This replaces the cumbersome system we had for giving users feedback on settings state changes in the display settings UI. We expect this new system to be what we will attempt to migrate other settings widgets to match over the coming weeks and months. It also provides the opportunity to significant refactor away a lot of the code duplication in settings_display.js. Thanks to Brock Whittaker for redoing the styling and improving the code simplicity. Fixes #7622.
2018-02-06 17:03:03 +01:00
#settings_page .alert-notification:not(:empty) {
display: inline-block !important;
vertical-align: top;
height: auto !important;
width: auto !important;
styles: Convert background properties to background-color.
2018-10-08 22:31:26 +02:00
background-color: transparent;
display_settings: Change success/failure feedback interface. This replaces the cumbersome system we had for giving users feedback on settings state changes in the display settings UI. We expect this new system to be what we will attempt to migrate other settings widgets to match over the coming weeks and months. It also provides the opportunity to significant refactor away a lot of the code duplication in settings_display.js. Thanks to Brock Whittaker for redoing the styling and improving the code simplicity. Fixes #7622.
2018-02-06 17:03:03 +01:00
border-radius: 4px;
margin-top: 14px;
margin-left: 10px;
settings: Change save and discard button look and feel. This commit changes the way the save and discard buttons on the organization profile, settings and permissions tabs look and fades them out after a delay. It also cleans up the code a bit in the settings_org.js file. It introduces changes to the css in settings.css as well as the template for save-discard buttons. It also fixes a bug on the user settings whereby if an option that requires reload is clicked before clicking an option that does not require reload, the reload message is erased. This could create an issue where the user is not aware that a reload is required. The loader is also changed to using fa-icon as loading spinner on user settings and the colors are tweaked a little bit.
2018-03-29 02:02:01 +02:00
border: 1px solid hsl(156, 30%, 50%);
color: hsl(156, 30%, 50%);
padding: 3px 10px;
font-size: 15px;
display_settings: Change success/failure feedback interface. This replaces the cumbersome system we had for giving users feedback on settings state changes in the display settings UI. We expect this new system to be what we will attempt to migrate other settings widgets to match over the coming weeks and months. It also provides the opportunity to significant refactor away a lot of the code duplication in settings_display.js. Thanks to Brock Whittaker for redoing the styling and improving the code simplicity. Fixes #7622.
2018-02-06 17:03:03 +01:00
}
#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;
settings: Make saving spinner visible in night mode. Fixes: #9154.
2018-04-19 22:00:35 +02:00
}
/* make the spinner green like the text and box. */
#settings_page .alert-notification .loading_indicator_spinner svg path {
fill: hsl(178, 100%, 40%);
display_settings: Change success/failure feedback interface. This replaces the cumbersome system we had for giving users feedback on settings state changes in the display settings UI. We expect this new system to be what we will attempt to migrate other settings widgets to match over the coming weeks and months. It also provides the opportunity to significant refactor away a lot of the code duplication in settings_display.js. Thanks to Brock Whittaker for redoing the styling and improving the code simplicity. Fixes #7622.
2018-02-06 17:03:03 +01:00
}
#settings_page .alert-notification .loading_indicator_text {
margin-top: 0px;
font-size: inherit;
vertical-align: top;
}
#settings_page .alert-notification img {
settings: Changed checkbox and close icons on settings. Introduced a new checkmark icon in the settings page from entypo ( www.entypo.com ) to make icons more consistent between user and organization settings.
2018-04-03 13:09:52 +02:00
margin-right: 6px;
settings: Change save and discard button look and feel. This commit changes the way the save and discard buttons on the organization profile, settings and permissions tabs look and fades them out after a delay. It also cleans up the code a bit in the settings_org.js file. It introduces changes to the css in settings.css as well as the template for save-discard buttons. It also fixes a bug on the user settings whereby if an option that requires reload is clicked before clicking an option that does not require reload, the reload message is erased. This could create an issue where the user is not aware that a reload is required. The loader is also changed to using fa-icon as loading spinner on user settings and the colors are tweaked a little bit.
2018-03-29 02:02:01 +02:00
vertical-align: middle;
settings: Changed checkbox and close icons on settings. Introduced a new checkmark icon in the settings page from entypo ( www.entypo.com ) to make icons more consistent between user and organization settings.
2018-04-03 13:09:52 +02:00
margin-top: -2px;
display_settings: Change success/failure feedback interface. This replaces the cumbersome system we had for giving users feedback on settings state changes in the display settings UI. We expect this new system to be what we will attempt to migrate other settings widgets to match over the coming weeks and months. It also provides the opportunity to significant refactor away a lot of the code duplication in settings_display.js. Thanks to Brock Whittaker for redoing the styling and improving the code simplicity. Fixes #7622.
2018-02-06 17:03:03 +01:00
}
custom fields: Add separate alert-save widget for create field. Add separate alert-notification widget for create-custom-field in admin view. Fixes part of #12748
2019-07-10 14:32:27 +02:00
#profile-field-settings #admin-add-profile-field-status {
margin-top: 4px;
}
Add notification css to settings.css.
2016-07-07 20:07:01 +02:00
#notification-settings .notification-reminder {
settings: Make notification settings header consistent. Fixes #5172.
2017-06-05 19:37:05 +02:00
text-align: left;
Add notification css to settings.css.
2016-07-07 20:07:01 +02:00
}
user settings: Add separate alert-save widget for profile custom fields. Fixes part of #12748
2019-07-10 22:18:45 +02:00
#account-settings .custom-profile-fields-form .custom_user_field label {
min-width: fit-content;
}
#account-settings .alert-notification.custom-field-status {
margin-top: 0px;
font-size: 14px;
margin-bottom: 4px;
}
settings: Create UI and backend for setting signups stream.
2017-10-20 16:55:04 +02:00
#realm_notifications_stream_label > button,
#realm_signup_notifications_stream_label > button {
settings: Change [Change] button styles.
2017-07-17 19:33:58 +02:00
margin: 0px 5px;
}
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
.control-label-disabled {
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
color: hsl(0, 0%, 82%);
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
settings: Fix color styling for nested inputs to work in night mode.
2018-08-05 02:43:03 +02:00
.control-label-disabled.enabled {
color: hsl(0, 0%, 20%);
}
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
.disableable {
settings: Pull nested radio-buttons closer together. Exact spacing tweaked by tabbott. Fixes #9066.
2018-04-12 21:00:18 +02:00
margin-left: 22px;
margin-top: -10px;
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
}
org settings: Make time limit input elements inline to dropdown. (To make the capitalization pass we added `N` to ignored phrases.)
2018-05-02 19:02:51 +02:00
#settings_page .admin-realm-time-limit-input {
Add realm setting to time-limit editing of message content. This is controlled through the admin tab and a new field in the Realms table. Notes: * The admin tab setting takes a value in minutes, whereas the backend stores it in seconds. * This setting is unused when allow_message_editing is false. * There is some generosity in how the limit is enforced. For instance, if the user sees the hovering edit button, we ensure they have at least 5 seconds to click it, and if the user gets to the message edit form, we ensure they have at least 10 seconds to make the edit, by relaxing the limit. * This commit also includes a countdown timer in the message edit form. Resolves #903.
2016-07-08 02:25:55 +02:00
width: 5ch;
text-align: right;
}
org settings: Make time limit input elements inline to dropdown. (To make the capitalization pass we added `N` to ignored phrases.)
2018-05-02 19:02:51 +02:00
#settings_page .realm-time-limit-label {
vertical-align: middle;
}
org setting: Add time limits for message deleting. Add realm setting to set time limit for message deleitng. Set default value of message_content_delete_limit_seconds to 600 seconds(10 min). Thanks to Shubham Dhama for rebasing and reworking this. Some final edits also done by Tim Abbott. Fixes #7344.
2017-11-26 09:12:10 +01:00
.admin-realm-message-content-delete-limit-minutes {
width: 5ch;
text-align: right;
}
retention-period: Add retention period to front-end admin organization settings. - Add message retention period field to organization settings form. - Add css for retention period field. - Add convertor to not negative int or to None. - Add retention period setting processing to back-end. - Fix tests. Modified by tabbott to hide the setting, since it doesn't work yet. The goal of merging this setting code now is to avoid unnecessary merge conflicts in the future. Part of #106.
2016-11-30 10:42:58 +01:00
.admin-realm-message-retention-days {
width: 5ch;
text-align: right;
}
settings: Rename settings-status to account-settings-status.
2017-03-10 19:19:25 +01:00
#account-settings-status {
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
text-align: center;
width: 50%;
margin: auto;
margin-bottom: 20px;
}
.admin_emoji_table {
margin: 20px auto;
}
.emoji_image {
settings_emoji: Reduce size to 20px in custom emoji list.
2018-08-04 11:17:14 +02:00
width: 20px;
Clean settings.css to use 4 space indents.
2017-03-18 05:59:00 +01:00
display: block;
Split styles/settings.css out of zulip.css.
2016-06-26 17:21:39 +02:00
}
.emoji_image img {
max-width: 100%;
}
org settings: Add User groups content and design.
2017-11-17 04:31:37 +01:00
.add-new-emoji-box,
user settings: Change alert words styling to match other settings forms. Fixes #8065.
2018-01-13 19:12:38 +01:00
.add-new-user-group-box,
.add-new-alert-word-box {
Restyle emoji box to look grey, inline form. This makes it more compact as well as recoloring it to not be green.
2017-08-31 00:05:52 +02:00
margin-bottom: 20px;
}
org settings: Add User groups content and design.
2017-11-17 04:31:37 +01:00
.add-new-emoji-box .new-emoji-form,
user settings: Change alert words styling to match other settings forms. Fixes #8065.
2018-01-13 19:12:38 +01:00
.add-new-user-group-box .new-user-group-form,
.add-new-alert-word-box .new-alert-word-form {
Restyle emoji box to look grey, inline form. This makes it more compact as well as recoloring it to not be green.
2017-08-31 00:05:52 +02:00
margin: 10px 0px;
}
Restyle default streams list to be grey-box and inline. This moves the form to an inline style and restyles the box to be green.
2017-08-31 00:13:00 +02:00
.add-new-emoji-box input[type=text],
org settings: Add User groups content and design.
2017-11-17 04:31:37 +01:00
.add-new-user-group-box input[type=text],
Restyle default streams list to be grey-box and inline. This moves the form to an inline style and restyles the box to be green.
2017-08-31 00:13:00 +02:00
.add-new-default-stream-box input[type=text] {
Restyle emoji box to look grey, inline form. This makes it more compact as well as recoloring it to not be green.
2017-08-31 00:05:52 +02:00
padding: 6px;
}
org settings: Fix error handling for upload custom emoji.
2018-03-29 07:21:46 +02:00
.add-new-emoji-box #emoji-file-name {
Restyle emoji box to look grey, inline form. This makes it more compact as well as recoloring it to not be green.
2017-08-31 00:05:52 +02:00
width: 0;
top: -19px;
left: 3px;
position: relative;
display: inline-block;
vertical-align: top;
white-space: nowrap;
font-style: italic;
}
org settings: Fix error handling for upload custom emoji.
2018-03-29 07:21:46 +02:00
#emoji_file_input_error {
vertical-align: middle;
}
Restyle emoji box to look grey, inline form. This makes it more compact as well as recoloring it to not be green.
2017-08-31 00:05:52 +02:00
.add-new-emoji-box #emoji-file-name {
styles: Normalize differences in previous hex-to-HSL conversion.
2018-10-12 07:22:46 +02:00
color: hsl(0, 0%, 67%);
Restyle emoji box to look grey, inline form. This makes it more compact as well as recoloring it to not be green.
2017-08-31 00:05:52 +02:00
}
settings: Add support for adding/removing custom profile fields. Now that we have support for displaying custom profile fields, this adds administrator-level support for creating them. Tweaked by tabbott to fix a few small bugs and clean up the commit message. Fixes #1760.
2017-12-14 05:51:45 +01:00
.add-new-profile-field-box button,
Change realm filter settings box to be grey. This changes the realm filter settings box to be the same grey as the emoji add box instead of the green it was before.
2017-08-31 00:06:17 +02:00
.add-new-filter-box button {
css-minifier: Lint for '+' operator in calc(). Fixes: #8403.
2018-02-25 19:49:13 +01:00
margin-left: calc(10em - -20px) !important;
Change realm filter settings box to be grey. This changes the realm filter settings box to be the same grey as the emoji add box instead of the green it was before.
2017-08-31 00:06:17 +02:00
}
.grey-box .wrapper {
margin: 10px 0px;
}
custom profile field: Minor tweaks in field-table in admin settings. This commit add minor changes in profile field table in admin settings: - Hide table header if there is no field - Fix width of table column
2018-08-15 13:37:40 +02:00
#settings_content .admin-table-wrapper table.admin_profile_fields_table tr td {
width: 28%;
}
custom profile field: Replace choice-order input with drag-drop rows. Currently, admin user has to add order of custom-field-choice in input box to create and edit choice-type custom field. Remove this input boxes and add drag-drop list of custom-field-choices using Sortable.js. Fixes #10129
2018-08-02 19:31:17 +02:00
.admin_profile_fields_table,
.profile_field_choices_table {
settings: Improve styling of draggable profile field rows. This changes the icon indicating that you can drug the custom profile field rows in settings to be the double rows of dots typically used to indicate draggability. It also gives those rows the "move" cursor on hover.
2018-07-05 19:40:26 +02:00
.movable-profile-field-row {
cursor: move;
settings: Fix color of icons in custom profile settings.
2018-08-02 22:20:28 +02:00
.fa-ellipsis-v {
settings: Improve styling of draggable profile field rows. This changes the icon indicating that you can drug the custom profile field rows in settings to be the double rows of dots typically used to indicate draggability. It also gives those rows the "move" cursor on hover.
2018-07-05 19:40:26 +02:00
color: hsl(0, 0, 75%);
position: relative;
top: 1px;
+ i {
margin-right: 5px;
}
}
}
Add initial implementation of custom realm filters. This PR was abandoned by Vladislav and then substantially modified by Igor Tokarev and Tim Abbott to complete it and fix a number of bugs. Fixes #544.
2016-02-13 19:17:15 +01:00
}
settings: Fix styling for admin_filters_table. Apparently, the 20px top margin was being overriden because it wasn't deeply layered enough.
2018-08-03 02:22:31 +02:00
#filter-settings .admin_filters_table {
margin-top: 20px;
}
css: Enforce one selector per line. While it's sometimes nice to put a few selectors on the same line, it is generally better to have a consistent way of formatting our selectors, and most of our code up until now lists them vertically. This change fixes the linter to enforce one selector per line, and it cleans up the places in the CSS where we had multiple selectors on the same line. The advantages of one-per-line are as followers: * cleaner diffs * easier to see when multiple areas of the app may have the same format * less likely to go over 80 cols * makes it more clear where we have deep nesting in the individual selectors * makes it easier for our linting tools to enforce whitespace violations This also fixed an old bug where we had ".landing_page h2, h4", which sets "h4" styles outside of the landing page.
2017-03-26 22:24:35 +02:00
#admin-filter-pattern-status,
#admin-filter-format-status {
Add initial implementation of custom realm filters. This PR was abandoned by Vladislav and then substantially modified by Igor Tokarev and Tim Abbott to complete it and fix a number of bugs. Fixes #544.
2016-02-13 19:17:15 +01:00
margin: 20px 0 0 0;
}
settings: Improve general table styling. This generally makes the tables that have thead attributes look uniform with the tables that use the first tbody column as a thead.
2017-04-17 23:28:41 +02:00
.progressive-table-wrapper {
Add perfectScrollbar to default streams table. This adds perfectScrollbar to the default streams table because it currently is inside another perfectScrollbar which actually makes it impossible to scroll the table normally without enabling the perfectScrollbar library on this. Fixes: #6391.
2017-09-15 23:01:36 +02:00
position: relative;
settings: Fix default streams scrolling issue. The progressively rendered table extends too far down, causing the page to scroll needlessly, which then causes there to be two scrollbars — a scrollbar for the table and a view scrollbar outside that. Fixes: #6391.
2017-09-26 22:05:53 +02:00
max-height: calc(95vh - 220px);
settings: Improve general table styling. This generally makes the tables that have thead attributes look uniform with the tables that use the first tbody column as a thead.
2017-04-17 23:28:41 +02:00
overflow: auto;
}
Add perfectScrollbar to default streams table. This adds perfectScrollbar to the default streams table because it currently is inside another perfectScrollbar which actually makes it impossible to scroll the table normally without enabling the perfectScrollbar library on this. Fixes: #6391.
2017-09-15 23:01:36 +02:00
#admin-default-streams-list .progressive-table-wrapper {
settings: Fix default streams scrolling issue. The progressively rendered table extends too far down, causing the page to scroll needlessly, which then causes there to be two scrollbars — a scrollbar for the table and a view scrollbar outside that. Fixes: #6391.
2017-09-26 22:05:53 +02:00
max-height: calc(95vh - 280px);
Add perfectScrollbar to default streams table. This adds perfectScrollbar to the default streams table because it currently is inside another perfectScrollbar which actually makes it impossible to scroll the table normally without enabling the perfectScrollbar library on this. Fixes: #6391.
2017-09-15 23:01:36 +02:00
}
settings: Display all the bots owned by an user. Add UI to display all the bots owned by an user whether active or inactive in "Your Bots" section.
2017-02-25 20:14:47 +01:00
.bots_list {
Add bots and avatars css to settings.css.
2016-07-08 14:59:56 +02:00
display: none;
list-style-type: none;
settings: Display all the bots owned by an user. Add UI to display all the bots owned by an user whether active or inactive in "Your Bots" section.
2017-02-25 20:14:47 +01:00
margin-left: 0px;
Add bots and avatars css to settings.css.
2016-07-08 14:59:56 +02:00
}
settings: Display all the bots owned by an user. Add UI to display all the bots owned by an user whether active or inactive in "Your Bots" section.
2017-02-25 20:14:47 +01:00
.bots_list .image {
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
vertical-align: top;
Add bots and avatars css to settings.css.
2016-07-08 14:59:56 +02:00
}
settings: Display all the bots owned by an user. Add UI to display all the bots owned by an user whether active or inactive in "Your Bots" section.
2017-02-25 20:14:47 +01:00
.bots_list .bot-information-box .details {
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
display: inline-block;
settings-bots: Fix bots styling to prevent content from overflowing. This fixes the styling of the container so that the text will not overflow to the next line but instead will just wrap around the container correctly.
2017-04-06 20:29:03 +02:00
width: calc(100% - 75px);
Add bots and avatars css to settings.css.
2016-07-08 14:59:56 +02:00
}
settings: Display all the bots owned by an user. Add UI to display all the bots owned by an user whether active or inactive in "Your Bots" section.
2017-02-25 20:14:47 +01:00
.bots_list .name {
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
font-weight: 600;
css: Clean up spacing in the "your bots" cards. These cards somehow ended up a bit malformed, with uneven spacing between widgets and the icons hanging below the avatar.
2018-10-20 09:31:17 +02:00
font-size: 1.1rem;
margin: 7px 5px;
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
overflow: hidden;
settings UI: Expand bot card width in narrow windows. Fixes #9513
2018-06-09 20:52:15 +02:00
line-height: 1.3em;
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
text-overflow: ellipsis;
white-space: pre;
Add bots and avatars css to settings.css.
2016-07-08 14:59:56 +02:00
}
settings: Display all the bots owned by an user. Add UI to display all the bots owned by an user whether active or inactive in "Your Bots" section.
2017-02-25 20:14:47 +01:00
.bots_list .regenerate_bot_api_key {
Add bots and avatars css to settings.css.
2016-07-08 14:59:56 +02:00
position: relative;
Massively refactor settings page templates and styling. This restructures the styling for the Zulip settings and administration pages to minimize use of Bootstrap and use a consistent styling library for similar elements. While it is basically a wash in terms of the page's visuals, it will make our life a lot easier for future work on improving the settings pages section of the site.
2016-09-14 02:20:13 +02:00
margin-left: 5px;
styles: Normalize differences in previous hex-to-HSL conversion.
2018-10-12 07:22:46 +02:00
color: hsl(0, 0%, 67%);
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
transition: all 0.3s ease;
Add bots and avatars css to settings.css.
2016-07-08 14:59:56 +02:00
}
settings: Display all the bots owned by an user. Add UI to display all the bots owned by an user whether active or inactive in "Your Bots" section.
2017-02-25 20:14:47 +01:00
.bots_list .regenerate_bot_api_key:hover {
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
color: hsl(0, 0%, 27%);
Add bots and avatars css to settings.css.
2016-07-08 14:59:56 +02:00
}
settings: Display all the bots owned by an user. Add UI to display all the bots owned by an user whether active or inactive in "Your Bots" section.
2017-02-25 20:14:47 +01:00
.bots_list .edit-bot-buttons {
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
padding-top: 5px;
}
settings: Display all the bots owned by an user. Add UI to display all the bots owned by an user whether active or inactive in "Your Bots" section.
2017-02-25 20:14:47 +01:00
.bots_list .edit-bot-buttons button {
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
background-color: transparent;
}
settings: Display all the bots owned by an user. Add UI to display all the bots owned by an user whether active or inactive in "Your Bots" section.
2017-02-25 20:14:47 +01:00
.bots_list .edit-bot-buttons .btn {
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
padding: 4px;
}
settings: Display all the bots owned by an user. Add UI to display all the bots owned by an user whether active or inactive in "Your Bots" section.
2017-02-25 20:14:47 +01:00
.bots_list .edit-bot-buttons .sea-green {
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
color: hsl(177, 70%, 46%);
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
}
settings: Display all the bots owned by an user. Add UI to display all the bots owned by an user whether active or inactive in "Your Bots" section.
2017-02-25 20:14:47 +01:00
.bots_list .edit-bot-buttons .blue {
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
color: hsl(203, 77%, 56%);
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
}
settings: Display all the bots owned by an user. Add UI to display all the bots owned by an user whether active or inactive in "Your Bots" section.
2017-02-25 20:14:47 +01:00
.bots_list .edit-bot-buttons .danger-red {
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
color: hsl(0, 56%, 73%);
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
}
settings UI: Add copy zuliprc button to bot information box. Fixes: #9510
2018-06-27 09:35:30 +02:00
.bots_list .edit-bot-buttons .copy-gold {
color: hsl(51, 90%, 50%);
}
settings: Display all the bots owned by an user. Add UI to display all the bots owned by an user whether active or inactive in "Your Bots" section.
2017-02-25 20:14:47 +01:00
.bots_list .bot-information-box {
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
position: relative;
display: inline-block;
Clean up settings overlay "Your Account" tab display. This enforces a max-width of 1024px on the #settings overlay. This commit also cleans up the "Your Account" tab to display correctly without the avatar bleeding over to the next line.
2017-05-11 02:25:48 +02:00
width: calc(50% - 10px);
bots: Add UI to view bot types of existing bots in "Your bots". Tweaked by tabbott for more standard internationalization.
2017-06-12 19:50:03 +02:00
max-height: 220px;
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
margin: 5px;
border-radius: 4px;
box-sizing: border-box;
overflow: auto;
Add bots and avatars css to settings.css.
2016-07-08 14:59:56 +02:00
}
settings: Display all the bots owned by an user. Add UI to display all the bots owned by an user whether active or inactive in "Your Bots" section.
2017-02-25 20:14:47 +01:00
.bots_list img.avatar {
css: Clean up spacing in the "your bots" cards. These cards somehow ended up a bit malformed, with uneven spacing between widgets and the icons hanging below the avatar.
2018-10-20 09:31:17 +02:00
margin: 10px 5px 0px 10px;
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
height: 50px;
width: 50px;
border-radius: 4px;
vertical-align: top;
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
box-shadow: 0px 0px 4px hsla(0, 0%, 0%, 0.1);
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
}
css: Clean up spacing in the "your bots" cards. These cards somehow ended up a bit malformed, with uneven spacing between widgets and the icons hanging below the avatar.
2018-10-20 09:31:17 +02:00
.bots_list .email,
.bots_list .type {
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
margin-bottom: 5px;
Add bots and avatars css to settings.css.
2016-07-08 14:59:56 +02:00
}
settings: Display all the bots owned by an user. Add UI to display all the bots owned by an user whether active or inactive in "Your Bots" section.
2017-02-25 20:14:47 +01:00
.bots_list .email .value,
.bots_list .api_key .api-key-value-and-button {
Add bots and avatars css to settings.css.
2016-07-08 14:59:56 +02:00
display: block;
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
margin-left: 0px;
Add bots and avatars css to settings.css.
2016-07-08 14:59:56 +02:00
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;
}
settings: Display all the bots owned by an user. Add UI to display all the bots owned by an user whether active or inactive in "Your Bots" section.
2017-02-25 20:14:47 +01:00
.bots_list .api_key .api-key-value-and-button {
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
font-family: "Inconsolata", Menlo, monospace;
font-size: 0.85em;
settings UI: Expand bot card width in narrow windows. Fixes #9513
2018-06-09 20:52:15 +02:00
display: flex;
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
}
settings: Display all the bots owned by an user. Add UI to display all the bots owned by an user whether active or inactive in "Your Bots" section.
2017-02-25 20:14:47 +01:00
.bots_list .bot_info {
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
padding: 10px;
}
Add bots and avatars css to settings.css.
2016-07-08 14:59:56 +02:00
.bot_info .field {
font-weight: 300;
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
text-transform: uppercase;
font-weight: 600;
styles: Normalize differences in previous hex-to-HSL conversion.
2018-10-12 07:22:46 +02:00
color: hsl(0, 0%, 67%);
Add bots and avatars css to settings.css.
2016-07-08 14:59:56 +02:00
}
bot settings: Change top and bottom margins of bot_error.
2018-07-03 01:22:29 +02:00
.bot_error {
margin-top: 10px;
margin-bottom: 0 !important;
}
Change bots actions to sidebar. This changes the bot actions to a sidebar that resides in the settings overlay.
2017-03-01 01:31:33 +01:00
.edit_bot h3 {
margin: 0px;
font-weight: 400;
}
settings: Display all the bots owned by an user. Add UI to display all the bots owned by an user whether active or inactive in "Your Bots" section.
2017-02-25 20:14:47 +01:00
#bots_lists_navbar .active a {
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
background-color: hsl(0, 0%, 98%);
settings: Display all the bots owned by an user. Add UI to display all the bots owned by an user whether active or inactive in "Your Bots" section.
2017-02-25 20:14:47 +01:00
}
settings: Add UI to allow a user to reactivate his own bots. Using this UI, a user can now reactivate the bots owned by him. Until now if a bot was deactivated, there was no way to use the old bot's original email address. But now they can be reactivated and their email can be reused. Fixes: #1183.
2017-02-25 22:57:06 +01:00
#inactive_bots_list .bot_info .reactivate_bot {
margin-top: 5px;
}
Change bots actions to sidebar. This changes the bot actions to a sidebar that resides in the settings overlay.
2017-03-01 01:31:33 +01:00
.edit_bot_form {
Add bots and avatars css to settings.css.
2016-07-08 14:59:56 +02:00
font-size: 100%;
Change bots actions to sidebar. This changes the bot actions to a sidebar that resides in the settings overlay.
2017-03-01 01:31:33 +01:00
margin: 0px;
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
padding: 0px;
}
.edit_bot_form label {
text-transform: uppercase;
font-weight: 600;
styles: Normalize differences in previous hex-to-HSL conversion.
2018-10-12 07:22:46 +02:00
color: hsl(0, 0%, 67%);
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
margin-top: 5px;
}
.edit_bot_form .buttons {
margin: 10px 0px 5px 0px;
Add bots and avatars css to settings.css.
2016-07-08 14:59:56 +02:00
}
.edit_bot_email {
Change bots actions to sidebar. This changes the bot actions to a sidebar that resides in the settings overlay.
2017-03-01 01:31:33 +01:00
font-weight: 400;
Add bots and avatars css to settings.css.
2016-07-08 14:59:56 +02:00
font-size: 18px;
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
text-align: left;
Change bots actions to sidebar. This changes the bot actions to a sidebar that resides in the settings overlay.
2017-03-01 01:31:33 +01:00
margin-top: 0px;
Add bots and avatars css to settings.css.
2016-07-08 14:59:56 +02:00
margin-bottom: 10px;
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
overflow: hidden;
Change bots actions to sidebar. This changes the bot actions to a sidebar that resides in the settings overlay.
2017-03-01 01:31:33 +01:00
max-height: 1.1em;
Restyle individual bots. This restyles the individual bots to be in a grid and to look more modern than the last setup.
2017-02-23 01:58:50 +01:00
text-overflow: ellipsis;
white-space: pre;
Add bots and avatars css to settings.css.
2016-07-08 14:59:56 +02:00
}
#create_bot_form .control-label,
#create_alert_word_form .control-label,
.admin-emoji-form .control-label,
Add initial implementation of custom realm filters. This PR was abandoned by Vladislav and then substantially modified by Igor Tokarev and Tim Abbott to complete it and fix a number of bugs. Fixes #544.
2016-02-13 19:17:15 +01:00
.admin-filter-form .control-label,
settings: Add support for adding/removing custom profile fields. Now that we have support for displaying custom profile fields, this adds administrator-level support for creating them. Tweaked by tabbott to fix a few small bugs and clean up the commit message. Fixes #1760.
2017-12-14 05:51:45 +01:00
.admin-profile-field-form .control-label,
i18n: Add missed strings.
2017-03-25 11:21:37 +01:00
.edit_bot_form .control-label {
Add bots and avatars css to settings.css.
2016-07-08 14:59:56 +02:00
width: 10em;
text-align: right;
margin-right: 20px;
}
custom field: Make external-custom-field URL input wider.
2019-07-10 22:40:06 +02:00
.admin-profile-field-form #custom_external_account_url_pattern input {
width: 70%;
}
css: Enforce one selector per line. While it's sometimes nice to put a few selectors on the same line, it is generally better to have a consistent way of formatting our selectors, and most of our code up until now lists them vertically. This change fixes the linter to enforce one selector per line, and it cleans up the places in the CSS where we had multiple selectors on the same line. The advantages of one-per-line are as followers: * cleaner diffs * easier to see when multiple areas of the app may have the same format * less likely to go over 80 cols * makes it more clear where we have deep nesting in the individual selectors * makes it easier for our linting tools to enforce whitespace violations This also fixed an old bug where we had ".landing_page h2, h4", which sets "h4" styles outside of the landing page.
2017-03-26 22:24:35 +02:00
#upload_avatar_spinner,
settings: Add support for customizing the top-left logo. This adds a new realm_logo field, which is a horizontal-format logo to be displayed in the top-left corner of the webapp, and any other places where we might want a wide-format branding of the organization. Tweaked significantly by tabbott to rebase, fix styling, etc. Fixing the styling of this feature's loading indicator caused me to notice the loading indicator for the realm_icon feature was also ugly, so I fixed that too. Fixes #7995.
2018-08-16 01:26:55 +02:00
#upload_logo_spinner,
settings: Add support for uploading logo for night mode. This adds a new field named realm_night_logo which is used for displaying the organization logo when the user is in night mode. Fixes #11176.
2019-01-27 08:25:10 +01:00
#upload_icon_spinner,
#upload_night_logo_spinner {
Add bots and avatars css to settings.css.
2016-07-08 14:59:56 +02:00
font-size: 14px;
margin: auto;
}
.bot_name_header {
width: 8em;
}
Move alert_words CSS to settings.css.
2016-07-09 16:59:47 +02:00
css: Enforce one selector per line. While it's sometimes nice to put a few selectors on the same line, it is generally better to have a consistent way of formatting our selectors, and most of our code up until now lists them vertically. This change fixes the linter to enforce one selector per line, and it cleans up the places in the CSS where we had multiple selectors on the same line. The advantages of one-per-line are as followers: * cleaner diffs * easier to see when multiple areas of the app may have the same format * less likely to go over 80 cols * makes it more clear where we have deep nesting in the individual selectors * makes it easier for our linting tools to enforce whitespace violations This also fixed an old bug where we had ".landing_page h2, h4", which sets "h4" styles outside of the landing page.
2017-03-26 22:24:35 +02:00
#attachments_list {
Move alert_words CSS to settings.css.
2016-07-09 16:59:47 +02:00
list-style-type: none;
margin: auto;
css: Convert colors to hsl() format. This changes most of the app-related CSS files, but leaves things like landing pages and bootstrap alone.
2017-11-13 16:34:06 +01:00
background-color: hsl(0, 0%, 100%);
Move alert_words CSS to settings.css.
2016-07-09 16:59:47 +02:00
}
Clean up settings overlay "Your Account" tab display. This enforces a max-width of 1024px on the #settings overlay. This commit also cleans up the "Your Account" tab to display correctly without the avatar bleeding over to the next line.
2017-05-11 02:25:48 +02:00
#alert_words_list {
margin: 0;
}
#alert_words_list li {
list-style-type: none;
}
Move alert_words CSS to settings.css.
2016-07-09 16:59:47 +02:00
#alert_words_list li.alert-word-item:last-child {
background: none;
margin-top: 8px;
}
css: Enforce one selector per line. While it's sometimes nice to put a few selectors on the same line, it is generally better to have a consistent way of formatting our selectors, and most of our code up until now lists them vertically. This change fixes the linter to enforce one selector per line, and it cleans up the places in the CSS where we had multiple selectors on the same line. The advantages of one-per-line are as followers: * cleaner diffs * easier to see when multiple areas of the app may have the same format * less likely to go over 80 cols * makes it more clear where we have deep nesting in the individual selectors * makes it easier for our linting tools to enforce whitespace violations This also fixed an old bug where we had ".landing_page h2, h4", which sets "h4" styles outside of the landing page.
2017-03-26 22:24:35 +02:00
#alert_words_list .edit-alert-word-buttons,
#attachments_list .edit-attachment-buttons {
Move alert_words CSS to settings.css.
2016-07-09 16:59:47 +02:00
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;
}
Add support for changing user's name by admin. Fixes: #1553
2016-09-27 14:25:52 +02:00
settings: Change the control for selecting emojiset to radio group. Fixes: #7260.
2017-11-02 21:25:36 +01:00
.emojiset_choices {
settings: Restyle "emoji style" section. This restyles and rewords some of the emoji style section to look better and fit it more with the current style guide. Tweaked by tabbott to modify the historical migration rather than adding a new one. This is OK because the emojiset choices text change doesn't touch the database; it's just a Django Python code thing. Also removed translation tags, since we don't need them for a set of brand names.
2017-11-11 01:55:40 +01:00
width: 250px;
padding: 0px 10px;
settings: Change the control for selecting emojiset to radio group. Fixes: #7260.
2017-11-02 21:25:36 +01:00
}
.emojiset_choices .emoji {
height: 22px;
width: 22px;
}
.emojiset_choices label {
settings: Change grey colors to translucent black.
2017-11-16 01:32:20 +01:00
border-bottom: 1px solid hsla(0, 0%, 0%, 0.2);
settings: Restyle "emoji style" section. This restyles and rewords some of the emoji style section to look better and fit it more with the current style guide. Tweaked by tabbott to modify the historical migration rather than adding a new one. This is OK because the emojiset choices text change doesn't touch the database; it's just a Django Python code thing. Also removed translation tags, since we don't need them for a set of brand names.
2017-11-11 01:55:40 +01:00
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;
settings: Change the control for selecting emojiset to radio group. Fixes: #7260.
2017-11-02 21:25:36 +01:00
}
settings: Restyle "emoji style" section. This restyles and rewords some of the emoji style section to look better and fit it more with the current style guide. Tweaked by tabbott to modify the historical migration rather than adding a new one. This is OK because the emojiset choices text change doesn't touch the database; it's just a Django Python code thing. Also removed translation tags, since we don't need them for a set of brand names.
2017-11-11 01:55:40 +01:00
.emojiset_choices .right {
settings: Change the control for selecting emojiset to radio group. Fixes: #7260.
2017-11-02 21:25:36 +01:00
float: right;
}
Add support for changing user's name by admin. Fixes: #1553
2016-09-27 14:25:52 +02:00
.open-user-form {
min-width: initial !important;
}
Fix styling in api_key_box section on settings page. Before fix, "Your API key" section was to close left side of the box.
2016-11-15 17:55:20 +01:00
user settings: Fix download zuliprc button styling.
2018-09-30 22:00:09 +02:00
#api_key_buttons {
display: inline-flex;
}
#api_key_buttons .regenerate_api_key {
margin-right: 5px;
}
settings: Add "text" option to emoji_set model. We no longer have a special UI setting and model field ("emoji_alt_code") for saying users want text-only emojis. We now instead make "text" be a fifth choice for "emojiset". Fixes #7406
2018-01-02 13:02:13 +01:00
.right.show .emoji_alt_code {
font-size: 1.2em;
}
settings: Redesign the account settings template. This is technically part of the settings page redesign in the next commit, but it's probably useful to keep separate, since it touches totally different code.
2016-12-02 21:42:11 +01:00
#user-settings-avatar {
border-radius: 5px;
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1);
settings: Redesign the account settings template. This is technically part of the settings page redesign in the next commit, but it's probably useful to keep separate, since it touches totally different code.
2016-12-02 21:42:11 +01:00
width: 200px;
height: 200px;
settings: Clean up organization and user settings pieces. This cleans up the styling of the organization and the user settings components to be more responsive and have more consistent styling with the rest of the overlays.
2017-05-17 19:07:00 +02:00
transition: all 0.3s ease;
settings: Add guest avatar marker to account settings.
2018-12-19 02:25:13 +01:00
#user-avatar-block {
background-size: 100%;
height: 100%;
}
user settings: Change delete profile picture button into a x icon. Fixes part of #10255.
2019-07-03 05:38:48 +02:00
#user_avatar_delete_button {
cursor: pointer;
user settings: Improve visibility of delete profile picture icon in light mode.
2019-06-16 12:35:10 +02:00
color: hsl(236, 33%, 90%);
user settings: Improve accessibility for new delete profile picture button.
2019-07-06 05:39:11 +02:00
opacity: 0;
user settings: Change delete profile picture button into a x icon. Fixes part of #10255.
2019-07-03 05:38:48 +02:00
font-size: 3rem;
position: absolute;
top: 67px; // 31.5px + 5px + 30px
right: 30px;
user settings: Darken area outside of non-square profile avatars on hover.
2019-06-15 12:33:43 +02:00
z-index: 99;
user settings: Change delete profile picture button into a x icon. Fixes part of #10255.
2019-07-03 05:38:48 +02:00
}
styles: Refactor #user-settings-avatar elements to use SCSS nesting feature.
2019-07-05 05:39:04 +02:00
#user-avatar-source {
margin-left: 10px;
width: 200px;
height: 20px;
position: absolute;
bottom: 19%;
left: 0%;
font-size: 0.9em;
visibility: hidden;
a {
color: hsl(0, 0%, 100%);
}
}
settings: Add guest avatar marker to account settings.
2018-12-19 02:25:13 +01:00
.guest-avatar::after {
outline: 9px solid hsl(0, 0%, 100%);
}
user settings: Change delete profile picture button into a x icon. Fixes part of #10255.
2019-07-03 05:38:48 +02:00
&:hover {
user settings: Darken area outside of non-square profile avatars on hover.
2019-06-15 12:33:43 +02:00
#user-avatar-block::after {
content: '';
background-color: hsl(0, 0%, 0%);
height: 200px;
width: 200px;
opacity: 0.6;
z-index: 99;
position: absolute;
styles: Refactor #user-settings-avatar elements to use SCSS nesting feature.
2019-07-05 05:39:04 +02:00
}
user settings: Change delete profile picture button into a x icon. Fixes part of #10255.
2019-07-03 05:38:48 +02:00
#user_avatar_delete_button {
user settings: Improve accessibility for new delete profile picture button.
2019-07-06 05:39:11 +02:00
opacity: 1;
user settings: Change delete profile picture button into a x icon. Fixes part of #10255.
2019-07-03 05:38:48 +02:00
}
settings: Clean up organization and user settings pieces. This cleans up the styling of the organization and the user settings components to be more responsive and have more consistent styling with the rest of the overlays.
2017-05-17 19:07:00 +02:00
styles: Refactor #user-settings-avatar elements to use SCSS nesting feature.
2019-07-05 05:39:04 +02:00
#user-avatar-source {
visibility: visible;
}
styles: Remove superflous .white-color class. Class was only used in one location, rendering it unnecessary.
2019-07-04 05:38:57 +02:00
}
settings: Redesign the account settings template. This is technically part of the settings page redesign in the next commit, but it's probably useful to keep separate, since it touches totally different code.
2016-12-02 21:42:11 +01:00
}
realm-icon: Add realm icon feature. - Add realm icon fields to realm model. - Add migration for new realm model's field. - Add views for icon uploading and deleting. - Add routes for realm icons views. - Add JS widget for realm icon upload setting. - Add realm icon upload to administration organization setting. - Add tests for realm icons. Fixes #3660.
2017-02-21 03:41:20 +01:00
#realm-settings-icon {
border-radius: 5px;
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1);
realm-icon: Add realm icon feature. - Add realm icon fields to realm model. - Add migration for new realm model's field. - Add views for icon uploading and deleting. - Add routes for realm icons views. - Add JS widget for realm icon upload setting. - Add realm icon upload to administration organization setting. - Add tests for realm icons. Fixes #3660.
2017-02-21 03:41:20 +01:00
width: 100px;
height: 100px;
}
Add UI for viewing and cancelling open Zulip invitations. Lets administrators view a list of open(unconfirmed) invitations and resend or revoke a chosen invitation. There are a few changes that we can expect for the future: * It is currently possible to invite an email that you have already invited, it might make sense to change this behavior. * Resend currently sends an invite reminder instead of resending the original invite, this is because 'custom_body' was not stored when the first invite was sent. Tweaked in various minor ways, primarily in the backend, by tabbott, mostly for style consistency with the rest of the codebase. Fixes: #1180.
2017-10-21 03:15:12 +02:00
settings: Add support for uploading logo for night mode. This adds a new field named realm_night_logo which is used for displaying the organization logo when the user is in night mode. Fixes #11176.
2019-01-27 08:25:10 +01:00
#realm-settings-logo,
#realm-settings-night-logo {
settings: Add support for customizing the top-left logo. This adds a new realm_logo field, which is a horizontal-format logo to be displayed in the top-left corner of the webapp, and any other places where we might want a wide-format branding of the organization. Tweaked significantly by tabbott to rebase, fix styling, etc. Fixing the styling of this feature's loading indicator caused me to notice the loading indicator for the realm_icon feature was also ugly, so I fixed that too. Fixes #7995.
2018-08-16 01:26:55 +02:00
box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.2);
/* We allow actual images up to 800x100 in the main display, but the
org settings: Update organization logo section. This section was taking up too much visual weight, and drowning out other elements on the page. Once we remove the Upload buttons, we can likely shrink this further. We remove the box-radius since at the smaller size it interferes with how the logos look (and will look in the app). We remove the margin-top to make this consistent with the spacing around organization profile picture. We change the max width from 730 to 500 since the Upload new logo button is 214px in length (not including margin), and those buttons are now inline instead of on the next line.
2019-05-15 06:09:47 +02:00
settings UI looks bad beyond ~500px, so we limit the width here */
height: 55px;
max-width: 500px;
settings: Add support for customizing the top-left logo. This adds a new realm_logo field, which is a horizontal-format logo to be displayed in the top-left corner of the webapp, and any other places where we might want a wide-format branding of the organization. Tweaked significantly by tabbott to rebase, fix styling, etc. Fixing the styling of this feature's loading indicator caused me to notice the loading indicator for the realm_icon feature was also ugly, so I fixed that too. Fixes #7995.
2018-08-16 01:26:55 +02:00
}
realm_logo: Display with target background, not current background. This makes it a lot more clear what this feature will look like.
2019-02-21 02:59:33 +01:00
#realm-settings-night-logo {
background-color: hsl(212, 28%, 18%);
}
#realm-settings-logo {
background-color: hsla(0, 100%, 100%, 1);
}
Add UI for viewing and cancelling open Zulip invitations. Lets administrators view a list of open(unconfirmed) invitations and resend or revoke a chosen invitation. There are a few changes that we can expect for the future: * It is currently possible to invite an email that you have already invited, it might make sense to change this behavior. * Resend currently sends an invite reminder instead of resending the original invite, this is because 'custom_body' was not stored when the first invite was sent. Tweaked in various minor ways, primarily in the backend, by tabbott, mostly for style consistency with the rest of the codebase. Fixes: #1180.
2017-10-21 03:15:12 +02:00
.invite-user-link i {
text-decoration: none;
margin-right: 5px;
}
Simplify CSS linter and clean up CSS. The CSS linter was pretty hard to reason about. It was pretty flexible about certain things, but then it would prevent seemingly innocuous code from getting checked in. This commit overhauls the pretty-printer to be more composable, where every object in the AST knows how to render itself. It also cleans up a little bit of the pre_fluff/post_fluff logic in the parser itself, so comments are more likely to be "attached" to the AST node that make sense. The linter is actually a bit more finicky about newlines, but this is mostly a good thing, as most of the variations before this commit were pretty arbitrary.
2017-11-13 17:26:11 +01:00
org settings: Improve design of User groups page.
2018-01-03 19:14:20 +01:00
#user-groups .user-group {
margin-bottom: 20px;
padding: 10px;
border-radius: 5px;
}
user groups: Display error on user group name edit failure. Fixes #10234.
2018-08-25 00:32:13 +02:00
#user-groups .user-group-status {
margin-bottom: 10px;
}
org settings: Add functionality for saving state of edited user groups.
2017-12-19 04:02:31 +01:00
#user-groups .user-group h4 {
font-weight: normal;
org settings: Improve design of User groups page.
2018-01-03 19:14:20 +01:00
margin: 0px;
user groups: Improve styling of user groups in admin view.
2018-08-22 00:31:48 +02:00
display: flex;
align-items: center;
justify-content: left;
org settings: Improve design of User groups page.
2018-01-03 19:14:20 +01:00
}
user groups: Improve styling of user groups in admin view.
2018-08-22 00:31:48 +02:00
#user-groups p {
org settings: Improve design of User groups page.
2018-01-03 19:14:20 +01:00
line-height: 2;
user groups: Improve styling of user groups in admin view.
2018-08-22 00:31:48 +02:00
margin: 0;
}
#user-groups .spacer {
margin: 0 2px;
org settings: Add User groups content and design.
2017-11-17 04:31:37 +01:00
}
user groups: Improve styling of user groups in admin view.
2018-08-22 00:31:48 +02:00
#user-groups .subscribers,
org settings: Add functionality for saving state of edited user groups.
2017-12-19 04:02:31 +01:00
#user-groups .user-group h4 > .name {
font-weight: bold;
}
org settings: Improve design of User groups page.
2018-01-03 19:14:20 +01:00
#user-groups .user-group span[contenteditable] {
display: inline-block;
input-pill: Force words to break to prevent text overflow.
2018-02-02 06:11:03 +01:00
word-break: break-all;
org settings: Add functionality for saving state of edited user groups.
2017-12-19 04:02:31 +01:00
}
user-groups: Update css for a user who is not in a user group. Add required css in input_pill.css. Add required css in settings.css.
2018-02-13 11:34:11 +01:00
#user-groups .ntm {
cursor: not-allowed;
}
org settings: Improve design of User groups page.
2018-01-03 19:14:20 +01:00
#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: Update css for a user who is not in a user group. Add required css in input_pill.css. Add required css in settings.css.
2018-02-13 11:34:11 +01:00
#user-groups .user-group span[contenteditable="true"]:hover {
org settings: Improve design of User groups page.
2018-01-03 19:14:20 +01:00
border-bottom: 1px solid hsl(0, 0%, 80%);
org settings: Offset border to prevent adding extra height on hover. Fixes #8996.
2018-04-07 00:22:20 +02:00
margin-bottom: -1px;
org settings: Add functionality for saving state of edited user groups.
2017-12-19 04:02:31 +01:00
outline: none;
org settings: Improve design of User groups page.
2018-01-03 19:14:20 +01:00
}
#user-groups .user-group .pill-container .input[contenteditable]:empty::after {
content: attr(data-placeholder);
opacity: 0.5;
org settings: Add functionality for saving state of edited user groups.
2017-12-19 04:02:31 +01:00
}
user-groups: Update css for a user who is not in a user group. Add required css in input_pill.css. Add required css in settings.css.
2018-02-13 11:34:11 +01:00
#user-groups .ntm h4 > .button {
cursor: not-allowed;
display: none;
}
#user-groups .ntm h4 > .button:hover {
border-color: hsl(4, 56%, 82%);
}
settings: Add button to cancel user group auto save on blur. Clicking the cancel button removes all the changes and the user group returns back to the original state. Saved button is showed once the changes are saved on blur.
2018-03-15 12:10:07 +01:00
#user-groups .save-status {
user groups: Improve styling of user groups in admin view.
2018-08-22 00:31:48 +02:00
background-color: transparent;
settings: Add button to cancel user group auto save on blur. Clicking the cancel button removes all the changes and the user group returns back to the original state. Saved button is showed once the changes are saved on blur.
2018-03-15 12:10:07 +01:00
padding: 2px 5px;
border-radius: 4px;
margin-left: 10px;
user groups: Improve styling of user groups in admin view.
2018-08-22 00:31:48 +02:00
border-style: solid;
border-width: 1px;
org settings: Add user group save functionality for editing groups.
2017-12-18 21:38:02 +01:00
display: none;
opacity: 0;
settings: Add button to cancel user group auto save on blur. Clicking the cancel button removes all the changes and the user group returns back to the original state. Saved button is showed once the changes are saved on blur.
2018-03-15 12:10:07 +01:00
}
#user-groups .checkmark {
user groups: Improve styling of user groups in admin view.
2018-08-22 00:31:48 +02:00
height: 12px;
org settings: Add user group save functionality for editing groups.
2017-12-18 21:38:02 +01:00
}
settings: Move user group delete button to top right corner. Also replaces trash icon with "Delete" for the button.
2018-03-14 17:22:19 +01:00
#user-groups .delete {
user groups: Improve styling of user groups in admin view.
2018-08-22 00:31:48 +02:00
margin-left: auto;
settings: Move user group delete button to top right corner. Also replaces trash icon with "Delete" for the button.
2018-03-14 17:22:19 +01:00
}
settings: Add save instructions below pill container on changes. Fixes #8088.
2018-03-15 12:56:31 +01:00
#user-groups .save-instructions {
display: none;
opacity: 0;
styles: Convert 3-digit hex values to HSL values.
2018-09-27 21:57:07 +02:00
color: hsl(0, 0%, 20%);
settings: Add save instructions below pill container on changes. Fixes #8088.
2018-03-15 12:56:31 +01:00
font-size: 0.9em;
}
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
/* -- new settings overlay -- */
#settings_page {
height: 95vh;
width: 97vw;
Clean up settings overlay "Your Account" tab display. This enforces a max-width of 1024px on the #settings overlay. This commit also cleans up the "Your Account" tab to display correctly without the avatar bleeding over to the next line.
2017-05-11 02:25:48 +02:00
max-width: 1024px;
margin: 2.5vh auto;
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
overflow: hidden;
border-radius: 4px;
}
#settings_page .sidebar {
float: left;
position: relative;
width: 250px;
height: 100%;
overflow-y: auto;
border-top-left-radius: 4px;
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
border-right: 1px solid hsl(0, 0%, 93%);
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
}
#settings_page .sidebar .tab-container {
padding: 6px;
styles: Normalize differences in previous hex-to-HSL conversion.
2018-10-12 07:22:46 +02:00
border-bottom: 1px solid hsl(0, 0%, 87%);
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
}
settings: Use separate lists for the two sidebar panels. The list with the options for normal settings now has the class normal-settings-list. The list with the options for org settings now has the class org-settings-list. The new markup helps us avoid code like this: $(".settings-list li:not(.admin)") We also have funny hacks in our key handlers related to the old combined-list approach, which we can eventually eliminate.
2018-06-03 13:04:28 +02:00
#settings_page .sidebar .normal-settings-list,
#settings_page .sidebar .org-settings-list {
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
position: relative;
}
#settings_page .content-wrapper {
Change the content-wrapper to be absolutely positioned. Now because it isn’t floating left it won’t slide down to a level below the rest of the content when there are pixel rounding errors with browser zoom.
2017-03-04 00:26:26 +01:00
position: absolute;
left: 251px;
/* the width of the settings sidbar this is right of is 250px + 1px border. */
width: calc(100% - 250px - 1px);
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
height: 100%;
Add `overflow: hidden` to .content-wrapper to prevent sidebar flash. This prevents the non-deterministic flash of the sidebar outside of the overlay in some browsers.
2017-04-04 21:36:51 +02:00
overflow: hidden;
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
}
#settings_page .content-wrapper .settings-header {
width: 100%;
height: 43px;
styles: Normalize differences in previous hex-to-HSL conversion.
2018-10-12 07:22:46 +02:00
border-bottom: 1px solid hsl(0, 0%, 87%);
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
}
Add settings sections to header. This adds the settings section that you are in to the page header.
2017-05-09 22:09:13 +02:00
#settings_page .content-wrapper .settings-header h1 .section {
font-weight: 400;
settings: Change borders from grey to translucent. This also changes the .settings-section table borders to be darker which keeps it inline with the rest of the styling.
2017-11-16 00:54:41 +01:00
color: inherit;
opacity: 0.6;
Add settings sections to header. This adds the settings section that you are in to the page header.
2017-05-09 22:09:13 +02:00
}
settings: Change <h3> to be smaller, bolder.
2018-01-25 01:57:00 +01:00
#settings_page h3 {
font-size: 1.5em;
font-weight: normal;
line-height: 1.5;
}
settings: Add sectioning to Other notifications section. There are no other <h5>'s in static/templates. Basically just copied the styling of `#settings_page h3` above it. The vertical spacing here isn't great, but I think will require some deeper fixes.
2019-04-20 01:04:22 +02:00
#settings_page h5 {
font-size: 1.2em;
font-weight: normal;
line-height: 1.2;
}
settings: Make settings overlay more responsive. This doesn't completely fix settings responsiveness, but it's a big step along the way. Outstanding issues include: 1. When switching tabs from settings to organization, it will launch the first item which is more annoying in this view since it brings you into that tab. Haven’t decided on an elegant solution to this yet. 2. Sidebar scrolling doesn’t work. I have to restructure how the top section and bottom sections of content are displayed to fix this. Likely by enforcing min-height of 100% - bottom height on the top piece. 3. Most of it is actually reasonably responsive but some isn’t, and should be fixed on a case-by-case.
2017-05-05 20:38:15 +02:00
#settings_page .settings-header.mobile {
display: none;
styles: Normalize differences in previous hex-to-HSL conversion.
2018-10-12 07:22:46 +02:00
border-bottom: 1px solid hsl(0, 0%, 87%);
settings: Make settings overlay more responsive. This doesn't completely fix settings responsiveness, but it's a big step along the way. Outstanding issues include: 1. When switching tabs from settings to organization, it will launch the first item which is more annoying in this view since it brings you into that tab. Haven’t decided on an elegant solution to this yet. 2. Sidebar scrolling doesn’t work. I have to restructure how the top section and bottom sections of content are displayed to fix this. Likely by enforcing min-height of 100% - bottom height on the top piece. 3. Most of it is actually reasonably responsive but some isn’t, and should be fixed on a case-by-case.
2017-05-05 20:38:15 +02:00
}
settings_overlay.html: Upgrade to use font-awesome 4.7 icon prefixes.
2018-07-02 02:32:30 +02:00
.settings-header.mobile .fa-chevron-left {
settings: Make settings overlay more responsive. This doesn't completely fix settings responsiveness, but it's a big step along the way. Outstanding issues include: 1. When switching tabs from settings to organization, it will launch the first item which is more annoying in this view since it brings you into that tab. Haven’t decided on an elegant solution to this yet. 2. Sidebar scrolling doesn’t work. I have to restructure how the top section and bottom sections of content are displayed to fix this. Likely by enforcing min-height of 100% - bottom height on the top piece. 3. Most of it is actually reasonably responsive but some isn’t, and should be fixed on a case-by-case.
2017-05-05 20:38:15 +02:00
float: left;
position: relative;
top: 14px;
left: 10px;
}
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
#settings_page .content-wrapper #settings_content {
Fix settings page height issue. The height of the settings page content is not quite as tall as the settings page could allow which makes for an empty white space at the bottom of the settings content container.
2017-03-16 21:02:01 +01:00
position: relative;
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
width: 100%;
Fix incorrect content height on settings overlay. This fixes the height of the content body to be 100% - 45px instead of 100% - 60px which is a fix necessary due to the previous change in height of the settings navbar.
2017-04-04 21:40:29 +02:00
height: calc(100% - 45px);
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
float: left;
overflow-y: auto;
settings: Make settings overlay more responsive. This doesn't completely fix settings responsiveness, but it's a big step along the way. Outstanding issues include: 1. When switching tabs from settings to organization, it will launch the first item which is more annoying in this view since it brings you into that tab. Haven’t decided on an elegant solution to this yet. 2. Sidebar scrolling doesn’t work. I have to restructure how the top section and bottom sections of content are displayed to fix this. Likely by enforcing min-height of 100% - bottom height on the top piece. 3. Most of it is actually reasonably responsive but some isn’t, and should be fixed on a case-by-case.
2017-05-05 20:38:15 +02:00
overflow-x: hidden;
Remove headers from templates.
2017-05-09 22:09:31 +02:00
settings: Change grey colors to translucent black.
2017-11-16 01:32:20 +01:00
background-color: hsla(0, 0%, 0%, 0.02);
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
}
Change <thead> styling in settings containers. Tables were previously improperly using the <tbody> to show the headers so it was not obvious that the styling for <thead> did not represent the styling of the rest of the tables anymore, so this normalizes the styling to be consistent with how it looked when the first row was in the <tbody>.
2017-04-24 21:14:30 +02:00
#settings_page .table-striped thead th {
background-color: inherit;
color: inherit;
user settings: Enhance Uploaded files sorting. Fixes #7149
2017-10-22 19:58:08 +02:00
}
#settings_page .table-striped thead th.active {
opacity: 1;
transition: opacity 100ms ease-out;
}
settings: Add modal fade. This implements the modal fade idea suggested here: https://chat.zulip.org/#narrow/stream/6-frontend/subject/Visual.20Design.20Strategy.20for.20Settings.20UI/near/559763
2018-04-19 04:40:26 +02:00
.modal.fade {
profile: Fix glitch when exiting custom profile display UI. Tweaked by tabbott to add a brief comment explaining the issue. Fixes: #9702.
2018-06-07 10:30:27 +02:00
/* Ensure the modal is entirely off-screen while we fade the background */
top: -50%;
settings: Add modal fade. This implements the modal fade idea suggested here: https://chat.zulip.org/#narrow/stream/6-frontend/subject/Visual.20Design.20Strategy.20for.20Settings.20UI/near/559763
2018-04-19 04:40:26 +02:00
transition: opacity 0.3s linear;
transform: translateY(-50%);
}
stylesheets: Fix coding style to comply with stylistic rules.
2018-07-27 00:58:50 +02:00
#settings_page .table-striped thead th.active::after {
list_render: Use correct arrow for ascending. Ascending files (as it currently is by default) should use an upwards arrow.
2017-11-01 21:01:43 +01:00
content: " \f0d8";
css: Fix improper indentation to fix Travis test failure.
2017-11-01 02:55:46 +01:00
white-space: pre;
display: inline-block;
font: normal normal normal 12px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
Change <thead> styling in settings containers. Tables were previously improperly using the <tbody> to show the headers so it was not obvious that the styling for <thead> did not represent the styling of the rest of the tables anymore, so this normalizes the styling to be consistent with how it looked when the first row was in the <tbody>.
2017-04-24 21:14:30 +02:00
}
stylesheets: Fix coding style to comply with stylistic rules.
2018-07-27 00:58:50 +02:00
#settings_page .table-striped thead th.active.descend::after {
list_render: Add sorting reversal. This allows a user to reverse the sort order by clicking again on an active tab, which changes from ascending to descending order. Fixes: #7254.
2017-11-01 21:03:08 +01:00
content: " \f0d7";
}
Change <thead> styling in settings containers. Tables were previously improperly using the <tbody> to show the headers so it was not obvious that the styling for <thead> did not represent the styling of the rest of the tables anymore, so this normalizes the styling to be consistent with how it looked when the first row was in the <tbody>.
2017-04-24 21:14:30 +02:00
#settings_page input.search {
font-size: 0.9rem;
settings: Improve status messages styling on "users" changes. The legacy "Updated Successfully" message shown after saving changes, is removed, and replaced with our standard "Saving" spinner and animation. Fixes: #11177.
2019-01-06 19:22:32 +01:00
margin: 10px 0px 20px 0px;
Change <thead> styling in settings containers. Tables were previously improperly using the <tbody> to show the headers so it was not obvious that the styling for <thead> did not represent the styling of the rest of the tables anymore, so this normalizes the styling to be consistent with how it looked when the first row was in the <tbody>.
2017-04-24 21:14:30 +02:00
}
Change bots actions to sidebar. This changes the bot actions to a sidebar that resides in the settings overlay.
2017-03-01 01:31:33 +01:00
#settings_page .form-sidebar {
position: absolute;
top: 45px;
right: 0px;
Change the content-wrapper to be absolutely positioned. Now because it isn’t floating left it won’t slide down to a level below the rest of the content when there are pixel rounding errors with browser zoom.
2017-03-04 00:26:26 +01:00
transform: translateX(303px);
Change bots actions to sidebar. This changes the bot actions to a sidebar that resides in the settings overlay.
2017-03-01 01:31:33 +01:00
width: 300px;
height: calc(100% - 45px);
css: Convert colors to hsl() format. This changes most of the app-related CSS files, but leaves things like landing pages and bootstrap alone.
2017-11-13 16:34:06 +01:00
background-color: hsl(0, 0%, 100%);
styles: Normalize differences in previous hex-to-HSL conversion.
2018-10-12 07:22:46 +02:00
border-left: 1px solid hsl(0, 0%, 87%);
Change bots actions to sidebar. This changes the bot actions to a sidebar that resides in the settings overlay.
2017-03-01 01:31:33 +01:00
Fix pointer events in #settings overlay form sidebar. The pointer events for the sidebar were incorrect in the way they were set such that when the sidebar was off to the right and hidden it would still attract pointer events.
2017-03-14 20:57:11 +01:00
pointer-events: none;
Change bots actions to sidebar. This changes the bot actions to a sidebar that resides in the settings overlay.
2017-03-01 01:31:33 +01:00
transition: all 0.3s ease;
settings UI: Fix settings sidebar. Fixes broken settings page on continuous use of tab key. Sets settings sidebar visibility to hidden when not visible. Fixes: #7982.
2018-01-07 20:28:57 +01:00
visibility: hidden;
Change bots actions to sidebar. This changes the bot actions to a sidebar that resides in the settings overlay.
2017-03-01 01:31:33 +01:00
}
#settings_page .form-sidebar.show {
Fix pointer events in #settings overlay form sidebar. The pointer events for the sidebar were incorrect in the way they were set such that when the sidebar was off to the right and hidden it would still attract pointer events.
2017-03-14 20:57:11 +01:00
pointer-events: auto;
Change bots actions to sidebar. This changes the bot actions to a sidebar that resides in the settings overlay.
2017-03-01 01:31:33 +01:00
transform: translateX(0px);
settings UI: Fix settings sidebar. Fixes broken settings page on continuous use of tab key. Sets settings sidebar visibility to hidden when not visible. Fixes: #7982.
2018-01-07 20:28:57 +01:00
visibility: visible;
Change bots actions to sidebar. This changes the bot actions to a sidebar that resides in the settings overlay.
2017-03-01 01:31:33 +01:00
}
#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 {
padding: 10px 20px;
settings: Normalize white boxes in settings.
2018-01-13 19:38:30 +01:00
background-color: hsl(0, 0%, 98%);
styles: Normalize differences in previous hex-to-HSL conversion.
2018-10-12 07:22:46 +02:00
border-bottom: 1px solid hsl(0, 0%, 87%);
Change bots actions to sidebar. This changes the bot actions to a sidebar that resides in the settings overlay.
2017-03-01 01:31:33 +01:00
}
#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;
}
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
#settings_page .sidebar .header {
height: auto;
position: relative;
width: calc(100% - 20px);
padding: 10px;
text-align: center;
text-transform: uppercase;
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
background-color: hsl(180, 6%, 93%);
styles: Normalize differences in previous hex-to-HSL conversion.
2018-10-12 07:22:46 +02:00
border-bottom: 1px solid hsl(0, 0%, 87%);
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
}
#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 {
Make all modal exit "x" sizes uniform. This makes all exit “x”’s uniformly 1.5rem in size and font-weight: 600.
2017-03-13 22:44:50 +01:00
font-weight: 600;
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
position: absolute;
top: 10px;
right: 10px;
styles: Normalize differences in previous hex-to-HSL conversion.
2018-10-12 07:22:46 +02:00
color: hsl(0, 0%, 67%);
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
cursor: pointer;
}
#settings_page .settings-header .exit-sign {
float: right;
position: relative;
top: 3px;
margin-left: 3px;
Make all modal exit "x" sizes uniform. This makes all exit “x”’s uniformly 1.5rem in size and font-weight: 600.
2017-03-13 22:44:50 +01:00
font-size: 1.5rem;
font-weight: 600;
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
cursor: pointer;
}
user setting: Move password change flow in UI into modal. Thanks to @brokwhittaker for his significant chagnes in password modal design.
2017-12-24 19:00:29 +01:00
#settings_page #change_password_modal {
width: auto;
}
settings: Add admin UI for editing users' custom profile fields. This commits add UI which will allow admin to edit every user's custom profile field data from admin settings. Fixes #10161
2018-09-05 21:25:05 +02:00
#account-settings,
#user-info-form-modal {
css: Organization account-settings specific CSS. This puts most of our account-settings specific CSS into a single block for better readability.
2018-12-07 21:05:59 +01:00
.user-role button {
cursor: default;
}
settings: Show current user's role in Your Account. This makes it easier to figure out what's going on if you're a guest. Fixes: #10969.
2018-12-07 18:24:56 +01:00
css: Organization account-settings specific CSS. This puts most of our account-settings specific CSS into a single block for better readability.
2018-12-07 21:05:59 +01:00
.custom_user_field .field_hint {
color: hsl(0, 0%, 67%);
}
#show_my_user_profile_modal {
user settings: Change width of "Preview profile" button.
2018-08-31 03:00:01 +02:00
width: 150px;
css: Organization account-settings specific CSS. This puts most of our account-settings specific CSS into a single block for better readability.
2018-12-07 21:05:59 +01:00
margin-top: 20px;
}
#show_my_user_profile_modal i {
padding-left: 2px;
vertical-align: middle;
}
custom fields: Add UI for custom field hint. Fixes #8876
2018-04-30 07:21:45 +02:00
}
custom profile data: Add template for custom user profile fields.
2018-02-26 20:08:23 +01:00
#settings_page .custom_user_field {
padding-bottom: 20px;
}
org settings: Fix background color in custom user profile datepicker field. Fixes part of #11453
2019-07-29 19:45:42 +02:00
body:not(.night-mode) #settings_page .custom_user_field .datepicker {
styles: Convert 6-digit hex values to HSL values.
2018-10-06 18:49:20 +02:00
background-color: hsl(0, 0%, 100%);
custom fields: Fix all fields background color. Fix url and date type of fields background color to match with other filed's background color.
2018-05-30 07:23:56 +02:00
}
custom profile data: Change size of textarea input field.
2018-03-23 13:23:43 +01:00
#settings_page .custom_user_field textarea {
width: 320px;
height: 80px;
}
custom fields: Add icon to delete value of date-type-custom-field.
2018-06-09 15:28:55 +02:00
#settings_page .custom_user_field .remove_date {
opacity: 0.5;
display: none;
settings: Restyle x that clears date field. This restyles the x that clears a date field to be more consistent with the rest of the app, and to appear inside the field.
2018-07-05 19:51:32 +02:00
cursor: pointer;
position: relative;
top: 2px;
left: -20px;
custom fields: Add icon to delete value of date-type-custom-field.
2018-06-09 15:28:55 +02:00
}
#settings_page .custom_user_field:hover .remove_date {
display: inline-flex;
}
#settings_page .custom_user_field .remove_date:hover {
opacity: 1;
}
settings: Add a minimum width to "person picker" custom fields. Empty "person picker" fields appear with a much smaller width than all other custom fields. Increase the `min-width` of the field that it matches the widths of other text boxes. Fix #10414.
2018-08-25 01:44:16 +02:00
#settings_page .custom_user_field .person_picker {
min-width: 206px;
}
user settings: Update alert message element in change-full-name modal.
2019-07-19 06:22:33 +02:00
#settings_page #change_full_name_modal .change_full_name_info,
user settings: Update alert message element in change-email modal.
2019-07-18 20:08:53 +02:00
#settings_page #change_email_modal .change_email_info,
user setting: Fix error message style in change user info modals. This commit fixes style of error message in update-user-info modals. Commit adds error message element in modal body and fixes margin.
2019-07-10 19:13:31 +02:00
#settings_page #change_password_modal .change_password_info {
user settings: Update alert-msg-elem in change password modal.
2019-07-16 21:47:44 +02:00
margin-top: 3px;
user setting: Move password change flow in UI into modal. Thanks to @brokwhittaker for his significant chagnes in password modal design.
2017-12-24 19:00:29 +01:00
}
settings: Add confirm_dialog module. This module makes it really easy to create are-you-sure dialogs for dangerous operations. Basically it's one function with five parameters. You give three chunks of HTML, a callback function, and a parent container. The first use of this will be in settings_user_groups, coming up in a couple commits.
2018-09-12 17:43:38 +02:00
#confirm_dialog_modal,
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
#deactivation_user_modal.fade.in {
top: calc(50% - 120px);
}
settings: Properly center deactivation modal. This properly vertically centers the deactivation modal in the user settings section by setting the top to 50% and the transform to -50% (50% of the height of the actual modal). This is an alternate solution to #7888, which just removes the animation, breaking the normal modal behavior.
2018-01-11 21:05:04 +01:00
.modal.fade.in {
top: 50%;
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-06 20:57:01 +01:00
pointer-events: all;
settings: Properly center deactivation modal. This properly vertically centers the deactivation modal in the user settings section by setting the top to 50% and the transform to -50% (50% of the height of the actual modal). This is an alternate solution to #7888, which just removes the animation, breaking the normal modal behavior.
2018-01-11 21:05:04 +01:00
}
notifications: Allow only notifiable in unread count. This commit adds a new setting to the user's notification settings that will change the behaviour of the unread count in the title bar and desktop application. When enabled, the title bar will show the count of unread private messages and mentions. When disabled, the title bar will act as before, showing the total number of unread messages. Fixes #1736.
2019-06-29 22:00:44 +02:00
#desktop_icon_count_display,
org settings: Extract setting for new user waiting period. This commit separates the `waiting_period_threshold` setting from the `create_stream_policy` setting, adding a new setting that the user can use to select a waiting period threshold. Both the invite to stream policy and create stream policy now have three options: admins only, members and admins, or members after waiting period/admins.
2019-05-07 19:06:05 +02:00
#id_realm_waiting_period_setting,
settings: Rename `create_stream_permission` in templates. This commit renames the `create_stream_permission` field in the templates to `create_stream_policy`, matching the field used in the database model. This matches what `invite_to_stream_policy` does and will be clearer when the `waiting_period_threshold` is split into its own field.
2019-05-06 18:41:36 +02:00
#id_realm_create_stream_policy,
settings: Create an explicit invite_to_stream_policy setting. This commit creates a new organization setting that determines whether a user can invite other users to streams. Previously this was linked to the waiting period threshold, but this was both not documented and overly limiting. With significant tweaks by tabbott to change the database model to not involve two threshhold fields, edit the tests, etc. This requires follow-up work to make the create stream policy setting work how this code implies it should. Fixes #12042.
2019-04-08 19:23:00 +02:00
#id_realm_invite_to_stream_policy,
org settings: Change join org permissions to dropdown.
2018-04-05 00:54:31 +02:00
#id_realm_org_join_restrictions,
org settings: Change message_edit settings to dropdown. This coverts the "checkbox" for `realm_allow_message_editing` and "input" for `realm_message_content_edit_limit_seconds` into a dropdown with the option for custom time limit option.
2018-04-02 11:18:40 +02:00
#id_realm_bot_creation_policy,
org settings: Make time limit input elements inline to dropdown. (To make the capitalization pass we added `N` to ignored phrases.)
2018-05-02 19:02:51 +02:00
#id_realm_user_invite_restriction {
org settings: Change create stream permission to be dropdown. Organization permission setting allow-user-to-create-stream is change to dropdown, from checkbox.
2018-01-05 15:34:10 +01:00
width: 100%;
}
styles: Remove all dead code of m-10 style class from settings. Remove dead style class m-10 and add m-t-10 class in settings templates.
2018-01-21 10:49:25 +01:00
.m-t-10 {
margin-top: 10px;
}
css: Make all modals with backdrop.
2018-05-31 20:52:47 +02:00
.modal {
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
box-shadow: 0px 0px 75px hsla(0, 0%, 0%, 0.5);
outline: 10000px solid hsla(0, 0%, 0%, 0.3);
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
border: none;
border-radius: 0px;
}
settings: Add loading indicator for account deactivation. Fixes #8175.
2018-01-26 08:01:58 +01:00
#do_deactivate_self_button .loader {
display: none;
vertical-align: top;
position: relative;
height: 30px;
margin-top: -10px;
top: 5px;
}
settings: Create UI and backend for setting signups stream.
2017-10-20 16:55:04 +02:00
#id_realm_notifications_stream .dropdown-search > input[type=text],
#id_realm_signup_notifications_stream .dropdown-search > input[type=text] {
org-settings: Add UI for changing the notifications stream. Added a dropdown in the organization settings page with a search-box and required styles. Also added an element to disable it. Added a method to populate the dropdown using list_rendering.js. Also altered response to the event of deletion of the notifications stream on the frontend. On selection of a new stream or on clicking 'Disable', a patch request is made with stream-id to /json/realm. Fixes: #3708.
2017-06-10 07:03:53 +02:00
margin: 9px;
}
settings: Create UI and backend for setting signups stream.
2017-10-20 16:55:04 +02:00
#id_realm_notifications_stream .dropdown-list-body,
#id_realm_signup_notifications_stream .dropdown-list-body {
settings: Fix "Notifications stream" list scrolling. The list needs to be set to use perfectScrollbar so that it can scroll due to the fact that it resides within another instance of perfectScrollbar. Fixes: #6351.
2017-09-27 19:01:04 +02:00
position: relative;
org-settings: Add UI for changing the notifications stream. Added a dropdown in the organization settings page with a search-box and required styles. Also added an element to disable it. Added a method to populate the dropdown using list_rendering.js. Also altered response to the event of deletion of the notifications stream on the frontend. On selection of a new stream or on clicking 'Disable', a patch request is made with stream-id to /json/realm. Fixes: #3708.
2017-06-10 07:03:53 +02:00
height: auto;
max-height: 200px;
overflow-y: auto;
margin-top: 0;
display: block;
}
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
input[type=text]#settings_search {
width: calc(100% - 10px - 2px);
margin: 0px;
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
color: hsl(0, 0%, 33%);
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
font-size: 0.9rem;
padding: 3px 5px;
outline: none;
styles: Normalize differences in previous hex-to-HSL conversion.
2018-10-12 07:22:46 +02:00
border: 1px solid hsl(0, 0%, 87%);
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
border-radius: 4px;
}
input[type=text]:focus#settings_search {
box-shadow: none;
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
border: 1px solid hsl(0, 0%, 73%);
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
styles: Normalize differences in previous hex-to-HSL conversion.
2018-10-12 07:22:46 +02:00
border-bottom: 1px solid hsl(0, 0%, 87%);
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
}
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;
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
border-bottom: 1px solid hsl(0, 0%, 93%);
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
}
settings: Add border-top to <li> for logout. This makes the logout option in settings look more consistent with the rest of the settings UI.
2017-07-17 18:11:22 +02:00
#settings_page .sidebar li.border-top {
border-top: 1px solid hsl(0, 0%, 93%);
border-bottom: none;
}
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
#settings_page .sidebar li.no-border {
border-color: transparent;
}
#settings_page .sidebar li.active {
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
background-color: hsl(0, 0%, 93%);
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
}
#settings_page .sidebar li.active {
border-bottom: 1px solid transparent;
}
#settings_page .sidebar li .text,
org settings: Add lock icon next to uneditable tabs. Add a lock icon to the right of tabs on which nothing is editable for normal users. Add lock next to Custom emoji option if only admin can edit them. Tweaked by tabbott to use title for the lock icons, rather than aria-hidden, since they do convey useful information. Fixes: #10893.
2018-12-04 15:24:25 +01:00
#settings_page .sidebar li .icon,
#settings_page .sidebar li .locked {
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
display: inline-block;
vertical-align: top;
}
#settings_page .sidebar li .text {
org settings: Add lock icon next to uneditable tabs. Add a lock icon to the right of tabs on which nothing is editable for normal users. Add lock next to Custom emoji option if only admin can edit them. Tweaked by tabbott to use title for the lock icons, rather than aria-hidden, since they do convey useful information. Fixes: #10893.
2018-12-04 15:24:25 +01:00
width: calc(100% - 90px);
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
padding: 10px 12px 10px 0px;
}
#settings_page .sidebar li .icon {
width: 18px;
height: 18px;
margin: 10px 10px;
settings: Fix alignment of left-side icons in org setting tab. This fixes a part of #10954.
2019-01-07 10:17:38 +01:00
text-align: center;
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
font-size: 1.4em;
settings.css: Replace RGB colors with HSL colors.
2017-06-21 09:08:49 +02:00
color: hsl(0, 0%, 53%);
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
background-size: cover;
background-repeat: no-repeat;
}
org settings: Add lock icon next to uneditable tabs. Add a lock icon to the right of tabs on which nothing is editable for normal users. Add lock next to Custom emoji option if only admin can edit them. Tweaked by tabbott to use title for the lock icons, rather than aria-hidden, since they do convey useful information. Fixes: #10893.
2018-12-04 15:24:25 +01:00
#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: Use separate lists for the two sidebar panels. The list with the options for normal settings now has the class normal-settings-list. The list with the options for org settings now has the class org-settings-list. The new markup helps us avoid code like this: $(".settings-list li:not(.admin)") We also have funny hacks in our key handlers related to the old combined-list approach, which we can eventually eliminate.
2018-06-03 13:04:28 +02:00
#settings_page .sidebar .org-settings-list {
redesign: Change /#settings and /#administration to an overlay. This also adds a box-shadow to the #deactivate_self_modal so that it looks similar to the old backdrop.
2016-12-03 01:12:52 +01:00
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;
}
Simplify CSS linter and clean up CSS. The CSS linter was pretty hard to reason about. It was pretty flexible about certain things, but then it would prevent seemingly innocuous code from getting checked in. This commit overhauls the pretty-printer to be more composable, where every object in the AST knows how to render itself. It also cleans up a little bit of the pre_fluff/post_fluff logic in the parser itself, so comments are more likely to be "attached" to the AST node that make sense. The linter is actually a bit more finicky about newlines, but this is mostly a good thing, as most of the variations before this commit were pretty arbitrary.
2017-11-13 17:26:11 +01:00
org settings: Improve error handling status elements. With styling work by @maxnuss. Fixes: #9188.
2018-04-30 15:27:35 +02:00
.subsection-failed-status p {
styles: Convert background properties to background-color.
2018-10-08 22:31:26 +02:00
background-color: hsl(0, 43%, 91%);
org settings: Improve error handling status elements. With styling work by @maxnuss. Fixes: #9188.
2018-04-30 15:27:35 +02:00
padding: 2px 6px;
border-radius: 4px;
margin: 0 0 0 5px;
}
settings: Redesign and responsively fix account settings. This makes the avatar portion more responsive and efficient on many screen settings and also fixes some of the design incongruences present on the page.
2017-07-05 21:54:58 +02:00
@media (max-width: 953px) {
css: Enforce one selector per line. While it's sometimes nice to put a few selectors on the same line, it is generally better to have a consistent way of formatting our selectors, and most of our code up until now lists them vertically. This change fixes the linter to enforce one selector per line, and it cleans up the places in the CSS where we had multiple selectors on the same line. The advantages of one-per-line are as followers: * cleaner diffs * easier to see when multiple areas of the app may have the same format * less likely to go over 80 cols * makes it more clear where we have deep nesting in the individual selectors * makes it easier for our linting tools to enforce whitespace violations This also fixed an old bug where we had ".landing_page h2, h4", which sets "h4" styles outside of the landing page.
2017-03-26 22:24:35 +02:00
.user-avatar-section,
.realm-icon-section {
settings: Redesign the account settings template. This is technically part of the settings page redesign in the next commit, but it's probably useful to keep separate, since it touches totally different code.
2016-12-02 21:42:11 +01:00
float: none;
settings: Redesign and responsively fix account settings. This makes the avatar portion more responsive and efficient on many screen settings and also fixes some of the design incongruences present on the page.
2017-07-05 21:54:58 +02:00
display: block;
}
.user-avatar-section .avatar-controls {
settings: Redesign the account settings template. This is technically part of the settings page redesign in the next commit, but it's probably useful to keep separate, since it touches totally different code.
2016-12-02 21:42:11 +01:00
display: inline-block;
settings: Redesign and responsively fix account settings. This makes the avatar portion more responsive and efficient on many screen settings and also fixes some of the design incongruences present on the page.
2017-07-05 21:54:58 +02:00
margin-top: 10px;
}
#settings_content .warning {
display: none;
settings: Redesign the account settings template. This is technically part of the settings page redesign in the next commit, but it's probably useful to keep separate, since it touches totally different code.
2016-12-02 21:42:11 +01:00
}
org settings: Improve error handling status elements. With styling work by @maxnuss. Fixes: #9188.
2018-04-30 15:27:35 +02:00
.subsection-failed-status p {
margin: 5px 0 0 0;
}
settings: Add support for customizing the top-left logo. This adds a new realm_logo field, which is a horizontal-format logo to be displayed in the top-left corner of the webapp, and any other places where we might want a wide-format branding of the organization. Tweaked significantly by tabbott to rebase, fix styling, etc. Fixing the styling of this feature's loading indicator caused me to notice the loading indicator for the realm_icon feature was also ugly, so I fixed that too. Fixes #7995.
2018-08-16 01:26:55 +02:00
settings: Add support for uploading logo for night mode. This adds a new field named realm_night_logo which is used for displaying the organization logo when the user is in night mode. Fixes #11176.
2019-01-27 08:25:10 +01:00
#realm-settings-logo,
#realm-settings-night-logo {
settings: Add support for customizing the top-left logo. This adds a new realm_logo field, which is a horizontal-format logo to be displayed in the top-left corner of the webapp, and any other places where we might want a wide-format branding of the organization. Tweaked significantly by tabbott to rebase, fix styling, etc. Fixing the styling of this feature's loading indicator caused me to notice the loading indicator for the realm_icon feature was also ugly, so I fixed that too. Fixes #7995.
2018-08-16 01:26:55 +02:00
max-width: 400px;
height: 50px;
}
settings: Redesign the account settings template. This is technically part of the settings page redesign in the next commit, but it's probably useful to keep separate, since it touches totally different code.
2016-12-02 21:42:11 +01:00
}
settings: Clean up organization and user settings pieces. This cleans up the styling of the organization and the user settings components to be more responsive and have more consistent styling with the rest of the overlays.
2017-05-17 19:07:00 +02:00
@media (max-width: 786px) {
#user-settings-avatar {
width: 220px;
height: 220px;
settings: Redesign the account settings template. This is technically part of the settings page redesign in the next commit, but it's probably useful to keep separate, since it touches totally different code.
2016-12-02 21:42:11 +01:00
}
}
settings: Fix scrolling on settings page in narrow height windows. This allows a user to scroll all the way down on the sidebar and the main panel in the settings page on narrow height windows by removing the min-height specification and making the “Log out” line in the sidebar become statically positioned at shorter heights. Fixes: #7251.
2017-11-01 20:27:27 +01:00
@media (max-height: 530px) {
#settings_page .sidebar .sidebar-bottom-anchor {
position: static;
}
#settings_page .sidebar .sidebar-bottom-anchor .border-top {
border: none;
}
}
user settings: Fix download zuliprc button styling.
2018-09-30 22:00:09 +02:00
@media (max-width: 450px) {
#api_key_buttons,
#download_zuliprc {
flex-direction: column;
margin-top: 5px;
}
}
settings: Make settings overlay more responsive. This doesn't completely fix settings responsiveness, but it's a big step along the way. Outstanding issues include: 1. When switching tabs from settings to organization, it will launch the first item which is more annoying in this view since it brings you into that tab. Haven’t decided on an elegant solution to this yet. 2. Sidebar scrolling doesn’t work. I have to restructure how the top section and bottom sections of content are displayed to fix this. Likely by enforcing min-height of 100% - bottom height on the top piece. 3. Most of it is actually reasonably responsive but some isn’t, and should be fixed on a case-by-case.
2017-05-05 20:38:15 +02:00
@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: Fix scrolling on settings page in narrow height windows. This allows a user to scroll all the way down on the sidebar and the main panel in the settings page on narrow height windows by removing the min-height specification and making the “Log out” line in the sidebar become statically positioned at shorter heights. Fixes: #7251.
2017-11-01 20:27:27 +01:00
#settings_page .sidebar {
float: left;
position: relative;
width: 250px;
height: 100%;
}
settings: Make settings overlay more responsive. This doesn't completely fix settings responsiveness, but it's a big step along the way. Outstanding issues include: 1. When switching tabs from settings to organization, it will launch the first item which is more annoying in this view since it brings you into that tab. Haven’t decided on an elegant solution to this yet. 2. Sidebar scrolling doesn’t work. I have to restructure how the top section and bottom sections of content are displayed to fix this. Likely by enforcing min-height of 100% - bottom height on the top piece. 3. Most of it is actually reasonably responsive but some isn’t, and should be fixed on a case-by-case.
2017-05-05 20:38:15 +02:00
}
Fix styling in api_key_box section on settings page. Before fix, "Your API key" section was to close left side of the box.
2016-11-15 17:55:20 +01:00
#show_api_key_box {
padding-bottom: 20px;
}
css: Fix problem with too long stream name on stream deletion modal. Add overflow-wrap rule to zulip.css for deactivation_stream_modal h3. Fixes: #2596.
2016-12-06 09:21:26 +01:00
Add UI for seeing all muted topics in settings page. Fixes #2322.
2016-11-26 04:39:53 +01:00
#muted_topics_table {
margin-bottom: 0px;
width: 90%;
margin: 0 auto;
}
#muted_topics_table tbody {
border-bottom: none;
}
admin: Display last active time of users in admin users table. Fixes: #2097.
2017-03-26 15:39:12 +02:00
Fix table display. This fixes the way that tables display across the settings page, so that the buttons shouldn't collapse to the second line anymore.
2017-05-11 02:35:18 +02:00
#admin-user-list .last_active {
width: 100px;
}
thead .actions {
min-width: 230px;
admin: Display last active time of users in admin users table. Fixes: #2097.
2017-03-26 15:39:12 +02:00
}
Add option for setting timezone in user display settings.
2017-04-02 20:59:22 +02:00
frontend: Add UI necessary to change emoji set. Note that this code is disabled until the infrastructure for the feature can be finished. Tweaked by tabbott to use slightly cleaner names for the various sets.
2017-04-23 20:47:18 +02:00
#settings_page .display-settings-form select {
Add option for setting timezone in user display settings.
2017-04-02 20:59:22 +02:00
width: 245px;
}
Add placeholders to all empty lists. This adds placeholders that state that the lists are empty.
2017-05-12 02:48:53 +02:00
#attachments_list:empty {
padding: 10px;
}
.required-text:empty::after {
content: attr(data-empty);
display: block;
font-style: italic;
styles: Normalize differences in previous hex-to-HSL conversion.
2018-10-12 07:22:46 +02:00
color: hsl(0, 0%, 67%);
Add placeholders to all empty lists. This adds placeholders that state that the lists are empty.
2017-05-12 02:48:53 +02:00
}
.required-text.thick:empty::after {
settings: <tbody> ::after hack no longer required. The hack used to make the placeholders in the ::after element work correctly is no longer needed, so we can revert the width of 200% back to 100%. The hack is no longer required because Vaida split these into two tables, of which in the second table there are no columns, which means that 100% represents the table width rather than the width of the first column. Fixes: #6271.
2017-08-28 17:02:40 +02:00
width: 100%;
Add placeholders to all empty lists. This adds placeholders that state that the lists are empty.
2017-05-12 02:48:53 +02:00
}
Outgoing webhook System: first Iteration of outgoing webhook UI.
2017-06-10 18:43:31 +02:00
#payload_url_inputbox input[type=text] {
width: 340px;
}
invites: Differentiate users invited as admin by showing bolt icon.
2017-12-12 15:10:09 +01:00
Embedded bots: Add UI for adding embedded bots. Adds type "embedded bot" to bot creation menu. Lets users select a bot to run from a list of bots. Currently, this list is hard-coded into the backend.
2017-07-15 18:23:44 +02:00
#service_name_list input[type=text] {
width: 340px;
}
settings: Add styles for dropdown titles.
2018-01-20 08:31:29 +01:00
.dropdown-title {
margin-bottom: 3px;
}
invites: Differentiate users invited as admin by showing bolt icon.
2017-12-12 15:10:09 +01:00
.invited-as-admin {
opacity: 0.5;
margin-left: 2px;
}
settings: Makes selector look better in firefox. This adds a custom selector icon to make our dropdowns look well-designed in Firefox. Fixes: #6707.
2017-10-28 19:26:36 +02:00
@-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: Add UI for Choice field.
2018-04-12 11:17:52 +02:00
.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;
}
custom profile field: Replace choice-order input with drag-drop rows. Currently, admin user has to add order of custom-field-choice in input box to create and edit choice-type custom field. Remove this input boxes and add drag-drop list of custom-field-choices using Sortable.js. Fixes #10129
2018-08-02 19:31:17 +02:00
.profile-field-choices .choice-row input {
width: 190px;
profile: Add UI for Choice field.
2018-04-12 11:17:52 +02:00
}
custom profile field: Replace choice-order input with drag-drop rows. Currently, admin user has to add order of custom-field-choice in input box to create and edit choice-type custom field. Remove this input boxes and add drag-drop list of custom-field-choices using Sortable.js. Fixes #10129
2018-08-02 19:31:17 +02:00
.profile-field-choices .choice-row button {
margin-left: 0 !important;
profile: Add UI for Choice field.
2018-04-12 11:17:52 +02:00
}
settings: Clean up styling of the Mentor field. This restyles the Mentor custom profile field in Settings > Your account to better match the rest of the profile fields.
2018-06-19 23:22:05 +02:00
settings UI: Change user profile pill containers to match input styling. Previously, commit e5d2e95 attempted to change the styling of the user profile pill containers to match the inputs above it. However, it used an incorrect selector (#settings_page), resulting in all other pill containers on settings pages being changed to match it as well (example: User groups pill containers in Organization settings). Additionally, its selector's specified background attribute resulted in problems in dark mode. To correctly style the user profile pill containers to match the other input's styling, we apply the uneditable-input class native to Bootstrap so that we don't need to create an entirely new selector to style it. Note that the .custom_user_field .pill-container selector was added so that it could match the padding of inputs. Also, the .custom_user_field .pill-container:focus-within selector was added with attributes straight from Bootstrap's input:focus selectors so that .custom_user_field .pill-container would have a blue outline while users were typing in the input pill, just like the other inputs.
2018-07-10 19:52:02 +02:00
.custom_user_field .pill-container {
settings: Clean up styling of the Mentor field. This restyles the Mentor custom profile field in Settings > Your account to better match the rest of the profile fields.
2018-06-19 23:22:05 +02:00
padding: 2px 6px;
settings UI: Change user profile pill containers to match input styling. Previously, commit e5d2e95 attempted to change the styling of the user profile pill containers to match the inputs above it. However, it used an incorrect selector (#settings_page), resulting in all other pill containers on settings pages being changed to match it as well (example: User groups pill containers in Organization settings). Additionally, its selector's specified background attribute resulted in problems in dark mode. To correctly style the user profile pill containers to match the other input's styling, we apply the uneditable-input class native to Bootstrap so that we don't need to create an entirely new selector to style it. Note that the .custom_user_field .pill-container selector was added so that it could match the padding of inputs. Also, the .custom_user_field .pill-container:focus-within selector was added with attributes straight from Bootstrap's input:focus selectors so that .custom_user_field .pill-container would have a blue outline while users were typing in the input pill, just like the other inputs.
2018-07-10 19:52:02 +02:00
height: 24px;
styles: Convert named colors to HSL values.
2018-10-14 21:57:50 +02:00
background-color: hsl(0, 0%, 100%);
settings: Clean up styling of the Mentor field. This restyles the Mentor custom profile field in Settings > Your account to better match the rest of the profile fields.
2018-06-19 23:22:05 +02:00
}
settings UI: Change user profile pill containers to match input styling. Previously, commit e5d2e95 attempted to change the styling of the user profile pill containers to match the inputs above it. However, it used an incorrect selector (#settings_page), resulting in all other pill containers on settings pages being changed to match it as well (example: User groups pill containers in Organization settings). Additionally, its selector's specified background attribute resulted in problems in dark mode. To correctly style the user profile pill containers to match the other input's styling, we apply the uneditable-input class native to Bootstrap so that we don't need to create an entirely new selector to style it. Note that the .custom_user_field .pill-container selector was added so that it could match the padding of inputs. Also, the .custom_user_field .pill-container:focus-within selector was added with attributes straight from Bootstrap's input:focus selectors so that .custom_user_field .pill-container would have a blue outline while users were typing in the input pill, just like the other inputs.
2018-07-10 19:52:02 +02:00
.custom_user_field .pill-container:focus-within {
css: Convert colors from rgba to hsla format.
2019-06-19 04:53:16 +02:00
border-color: hsla(206, 80%, 62%, 0.8);
settings UI: Change user profile pill containers to match input styling. Previously, commit e5d2e95 attempted to change the styling of the user profile pill containers to match the inputs above it. However, it used an incorrect selector (#settings_page), resulting in all other pill containers on settings pages being changed to match it as well (example: User groups pill containers in Organization settings). Additionally, its selector's specified background attribute resulted in problems in dark mode. To correctly style the user profile pill containers to match the other input's styling, we apply the uneditable-input class native to Bootstrap so that we don't need to create an entirely new selector to style it. Note that the .custom_user_field .pill-container selector was added so that it could match the padding of inputs. Also, the .custom_user_field .pill-container:focus-within selector was added with attributes straight from Bootstrap's input:focus selectors so that .custom_user_field .pill-container would have a blue outline while users were typing in the input pill, just like the other inputs.
2018-07-10 19:52:02 +02:00
outline: 0;
lint: Fix CSS linter rules not running. Apparently, our CSS linter rules haven't been running since we migrated to SCSS.
2018-12-04 18:27:47 +01:00
outline: 1px dotted \9;
settings UI: Change user profile pill containers to match input styling. Previously, commit e5d2e95 attempted to change the styling of the user profile pill containers to match the inputs above it. However, it used an incorrect selector (#settings_page), resulting in all other pill containers on settings pages being changed to match it as well (example: User groups pill containers in Organization settings). Additionally, its selector's specified background attribute resulted in problems in dark mode. To correctly style the user profile pill containers to match the other input's styling, we apply the uneditable-input class native to Bootstrap so that we don't need to create an entirely new selector to style it. Note that the .custom_user_field .pill-container selector was added so that it could match the padding of inputs. Also, the .custom_user_field .pill-container:focus-within selector was added with attributes straight from Bootstrap's input:focus selectors so that .custom_user_field .pill-container would have a blue outline while users were typing in the input pill, just like the other inputs.
2018-07-10 19:52:02 +02:00
css: Convert colors from rgba to hsla format.
2019-06-19 04:53:16 +02:00
-webkit-box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075), 0 0 8px hsla(206, 80%, 62%, 0.6);
-moz-box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075), 0 0 8px hsla(206, 80%, 62%, 0.6);
box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075), 0 0 8px hsla(206, 80%, 62%, 0.6);
settings: Clean up styling of the Mentor field. This restyles the Mentor custom profile field in Settings > Your account to better match the rest of the profile fields.
2018-06-19 23:22:05 +02:00
}
user settings: Fix the position of get api key text and button. Fix the alignment of "Current password" and move the "Get API key" button to next line. Fixes: #10535.
2019-01-03 21:22:51 +01:00
#get_api_key_button {
display: block;
}
uploads: Show used upload space in attachments UI.
2019-01-17 12:05:09 +01:00
#attachment-stats-holder {
position: relative;
margin-top: 13px;
display: inline-block;
}
org_settings: Add collapse/show settings button for users and guests. For non-admins some organisation settings tabs are 'collapsed' by default. A button at the bottom of these settings can be used to toggle show/collapse for these settings tabs. Resolves #12313.
2019-05-13 00:43:21 +02:00
.hide-org-settings {
display: none;
}
.collapse-settings-btn {
margin: 10px 0px 0px 10px;
color: hsl(200, 100%, 40%);
}
.collapse-settings-btn:hover {
cursor: pointer;
color: hsl(208, 56%, 38%);
}
#toggle_collapse {
margin-left: 2px;
display: inline-block;
}