zulip/static/styles/settings.css
K.Kanakhin 234a1f8e61 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.
2017-03-25 17:57:18 -07:00

1050 lines
20 KiB
CSS

#settings {
margin-top: 55px;
margin-left: 15px;
}
label {
margin: 0;
}
.new-style .block {
display: block;
}
.new-style .center-block {
margin: 0 auto;
}
.new-style .center {
text-align: center;
}
.new-style .w-70 {
width: 70%;
}
.new-style .w-200 {
width: 200px;
}
.new-style .m-t-20 {
margin-top: 20px;
}
.new-style .m-t-10 {
margin-top: 10px;
}
.new-style .grid label {
width: 200px;
}
.new-style .grid .warning {
display: inline-block;
vertical-align: top;
width: 150px;
padding: 5px 10px;
text-align: left;
}
.new-style .warning #pw_strength {
width: 140px;
height: 8px;
margin: 6px 0px 0px 0px;
}
/* this is because the input[type=text] is also 200px wide but has
12px of padding and 2px worth of borders. These don't apply to
buttons however. */
.new-style .input-size {
width: 214px;
}
.user-avatar-section, .realm-icon-section {
float: right;
background-color: #fff;
margin: 20px 0px;
padding: 20px;
}
.user-avatar-section .inline-block, .realm-icon-section .inline-block {
display: block;
}
.padded-container {
padding: 20px;
}
.side-padded-container {
padding: 0px 20px;
}
.table.table-condensed.table-striped {
margin: 0px;
}
.wrapped-table {
table-layout: fixed;
word-break: break-all;
word-wrap: break-word;
white-space: -moz-pre-wrap !important;
white-space: -webkit-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
white-space: normal;
}
.wrapped-cell {
width: 20%;
}
.table tbody {
border-bottom: 1px solid #ddd;
}
.table-condensed td {
vertical-align: middle;
}
td .button {
margin: 2px 0px;
box-shadow: none;
}
.settings-section {
display: none;
background-color: #fafafa;
border-radius: 2px;
margin: 20px;
overflow: hidden;
border: 1px solid #dfdfdf;
border-top: 5px solid #dfdfdf;
}
#administration .settings-section {
display: block;
}
.settings-wrapper {
display: none;
}
.settings-section.show,
.settings-wrapper.show,
.settings-wrapper.show .settings-section {
display: block;
}
.settings-section .settings-section-title {
font-size: 1.2em;
font-weight: 300;
padding: 10px;
}
.settings-section .settings-section-title.transparent {
background-color: transparent;
color: inherit;
}
.settings-section form {
padding: 0px 20px;
margin: 0;
}
.settings-section .no-padding {
padding: 0;
}
.settings-section .table.table-condensed.table-striped tbody {
border-bottom: none;
}
.dynamic-input {
display: inline-block;
padding: 5px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 3px;
transition: box-shadow 0.3s ease;
min-width: 208px;
}
.dynamic-input:hover {
outline: none;
box-shadow: 0px 0px 4px rgba(56,177,232,1);
}
.dynamic-input div, .dynamic-input label {
display: inline-block;
margin: 0;
}
.dynamic-input div {
margin-right: -2px;
}
.dynamic-input [contenteditable=true] {
outline: none;
}
.dynamic-input div:empty::after {
content: "username";
color: #aaa;
}
.dynamic-input.bot_user_name div:empty::after {
content: "bot_user_name";
color: #aaa;
}
.button, .input-group {
margin: 20px 0px;
}
.input-group.thinner {
margin: 10px 0px;
}
.no-margin {
margin: 0px;
}
.admin-restricted-to-domain input[type=checkbox] + .inline,
input[type=checkbox] + .inline-block {
margin-left: 10px;
}
#user-settings-avatar, #realm-icon-section {
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
input[type=checkbox].inline-block {
margin: -2px 0px 0px 0px;
}
#attachments_list .attachment-item {
border-bottom: 1px solid #eee;
}
#attachments_list .attachment-item .list-container {
position: relative;
padding: 10px;
width: 100%;
}
#attachments_list .attachment-item .list-container .remove-attachment {
margin-top: 10px;
margin-right: 5px;
font-size: 1.2em;
color: #e29595;
}
#attachments_list .attachment-item .list-container .file-icon {
display: inline-block;
vertical-align: top;
margin-right: 8px;
width: 40px;
height: 40px;
font-weight: 600;
color: #fff;
background: -webkit-linear-gradient(-45deg, #43C6AC , #70e6ce);
background: linear-gradient(-45deg, #43C6AC , #70e6ce);
box-sizing: border-box;
border-radius: 4px;
}
#attachments_list .attachment-item .list-container .file-icon .extension {
font-size: 1.1em;
text-align: center;
margin-top: 10px;
}
#attachments_list .attachment-item .list-container .file-icon .extension.small {
margin-top: 11px;
font-size: 0.8em;
}
#attachments_list .attachment-item .list-container .file-icon .extension.no-extension {
margin-top: 12px;
}
#attachments_list .attachment-item .list-container .information {
display: inline-block;
vertical-align: top;
margin-top: -4px;
}
#attachments_list .attachment-messages {
height: 25px;
}
#attachments_list .attachment-messages .ind-message {
display: inline-block;
border-radius: 4px;
overflow: hidden;
border: 1px solid #aaa;
transition: all 0.2s ease;
}
#attachments_list .attachment-messages .ind-message > div {
display: inline-block;
vertical-align: top;
}
#attachments_list .attachment-messages .ind-message .message-id {
padding: 2px 4px 1px 4px;
background-color: #aaa;
color: #fff;
}
#attachments_list .attachment-messages .ind-message:hover {
border: 1px solid #888;
}
#attachments_list .attachment-messages .ind-message:hover .message-id {
background-color: #888;
}
#attachments_list .attachment-messages .ind-message {
color: #aaa;
text-decoration: none;
}
#attachments_list .attachment-messages .message-id {
display: inline-block;
padding: 2px 4px 1px 2px;
}
#attachments_list .attachment-messages .message-date {
display: inline-block;
padding: 2px 4px 1px 2px;
}
.grey-bg {
background: #e3e3e3;
padding: 10px;
width: 90%;
margin: 15px auto;
box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
position: relative;
font-size: 14px;
}
.green-bg {
background-color: #cbe3cb;
}
.new-default-stream-section-title {
font-size: 18px;
font-weight: 300;
padding-bottom: 10px;
}
.remove-alert-word {
margin-top: 1px;
}
@media (max-width: 480px) {
#pw_strength {
margin: auto;
}
#administration .settings-section .organization-settings .admin-realm-form,
#settings .settings-section .account-settings-form,
#settings .settings-section .new-bot-form,
#settings .settings-section .new-alert-word-form,
#emoji-settings .new-emoji-form,
#filter-settings .new-filter-form,
#settings .settings-section .notification-settings-form,
#settings .settings-section .display-settings-form,
#settings .settings-section .edit-bot-form-box {
width: 100%;
}
#administration .settings-section .admin-realm-form .control-label,
#settings .settings-section .account-settings-form .control-label,
#settings .settings-section .new-bot-form .control-label,
#settings .settings-section .new-alert-word-form .control-label,
#emoji-settings .new-emoji-form .control-label,
#filter-settings .new-filter-form .control-label,
#settings .settings-section .edit-bot-form-box .control-label {
display: block;
width: 120px;
padding: 0px;
padding-top: 0;
text-align: center;
margin: auto;
float: none;
}
#administration .settings-section .admin-realm-form .controls,
#settings .settings-section .account-settings-form .controls,
#settings .settings-section .new-bot-form .controls,
#settings .settings-section .new-alert-word-form button,
#emoji-settings .new-emoji-form .controls,
#filter-settings .new-filter-form .controls,
#settings .settings-section .edit-bot-form-box .controls {
margin: auto;
text-align: center;
}
}
#administration .settings-section .settings-section-icon,
#settings .settings-section .settings-section-icon {
margin-right: 8px;
}
#notification-settings .notification-reminder {
text-align: center;
}
.control-label-disabled {
color: #d3d3d3;
}
.disableable {
margin-left: 25px;
}
.admin-realm-message-content-edit-limit-minutes {
width: 5ch;
text-align: right;
}
.admin-realm-message-retention-days {
width: 5ch;
text-align: right;
}
#account-settings-status {
text-align: center;
width: 50%;
margin: auto;
margin-bottom: 20px;
}
.admin_emoji_table {
margin: 20px auto;
}
.emoji_image {
width: 50px;
display: block;
}
.emoji_image img {
max-width: 100%;
}
.admin-table-wrapper {
width: 90%;
margin: 0 auto;
}
.admin_filters_table {
margin-top: 20px;
}
#admin-filter-pattern-status, #admin-filter-format-status {
margin: 20px 0 0 0;
}
.bots_list {
display: none;
list-style-type: none;
margin-left: 0px;
}
.bots_list .image {
vertical-align: top;
width: calc(100% - 85px);
}
.bots_list .bot-information-box .details {
display: inline-block;
}
.bots_list .name {
font-weight: 600;
font-size: 1.3rem;
margin: 10px 0px 5px 0px;
overflow: hidden;
max-height: 1em;
text-overflow: ellipsis;
white-space: pre;
}
.bots_list .regenerate_bot_api_key {
position: relative;
margin-left: 5px;
color: #aaa;
transition: all 0.3s ease;
}
.bots_list .regenerate_bot_api_key:hover {
color: #444;
}
.bots_list .edit-bot-buttons {
padding-top: 5px;
}
.bots_list .edit-bot-buttons button {
background-color: transparent;
}
.bots_list .edit-bot-buttons .btn {
padding: 4px;
}
.bots_list .edit-bot-buttons .sea-green {
color: #24cac2;
}
.bots_list .edit-bot-buttons .blue {
color: #3ba4e6;
}
.bots_list .edit-bot-buttons .danger-red {
color: #e29595;
}
.bots_list .bot-information-box {
position: relative;
display: inline-block;
width: calc(33.3% - 10px);
max-height: 180px;
margin: 5px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
overflow: auto;
}
.bots_list img.avatar {
margin: 10px 5px 10px 10px;
height: 50px;
width: 50px;
border-radius: 4px;
vertical-align: top;
box-shadow: 0px 0px 4px rgba(0,0,0,0.1);
}
.bots_list .email {
margin-bottom: 5px;
}
.bots_list .email .value,
.bots_list .api_key .api-key-value-and-button {
display: block;
margin-left: 0px;
white-space: -moz-pre-wrap !important;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
white-space: normal;
}
.bots_list .api_key .api-key-value-and-button {
font-family: "Inconsolata", Menlo, monospace;
font-size: 0.85em;
}
.bots_list .bot_info {
padding: 10px;
}
.bot_info .field {
font-weight: 300;
text-transform: uppercase;
font-weight: 600;
color: #aaa;
}
.edit_bot h3 {
margin: 0px;
font-weight: 400;
}
#bots_lists_navbar .active a {
background-color: #FAFAFA;
}
#inactive_bots_list .bot_info .reactivate_bot {
margin-top: 5px;
}
.edit_bot_form {
font-size: 100%;
margin: 0px;
padding: 0px;
}
.edit_bot_form label {
text-transform: uppercase;
font-weight: 600;
color: #aaa;
margin-top: 5px;
}
.edit_bot_form .buttons {
margin: 10px 0px 5px 0px;
}
.edit_bot_email {
font-weight: 400;
font-size: 18px;
text-align: left;
margin-top: 0px;
margin-bottom: 10px;
overflow: hidden;
max-height: 1.1em;
text-overflow: ellipsis;
white-space: pre;
}
.edit_bot_form .control-label,
#create_bot_form .control-label,
#create_alert_word_form .control-label,
.admin-emoji-form .control-label,
.admin-filter-form .control-label,
.default-stream-form .control-label {
width: 10em;
text-align: right;
margin-right: 20px;
}
#upload_avatar_spinner, #upload_icon_spinner {
font-size: 14px;
margin: auto;
}
.bot_name_header {
width: 8em;
}
#empty_alert_word_error {
display: none;
width: 90%;
margin: 0 auto;
margin-bottom: 15px;
padding: 10px;
}
#empty_alert_word_error .close {
position: inherit;
}
#alert_words_list, #attachments_list {
list-style-type: none;
margin: auto;
background-color: #fff;
}
#alert_words_list li.alert-word-item:last-child {
background: none;
margin-top: 8px;
}
#alert_words_list .edit-alert-word-buttons, #attachments_list .edit-attachment-buttons {
position: absolute;
right: 20px;
top: 5px;
}
#alert_words_list .alert_word_listing .value {
display: block;
white-space: -moz-pre-wrap !important;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
white-space: normal;
}
.open-user-form {
min-width: initial !important;
}
#user-settings-avatar {
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
width: 200px;
height: 200px;
}
#realm-settings-icon {
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
width: 100px;
height: 100px;
margin-left: 25%;
}
/* -- new settings overlay -- */
#settings_page {
min-height: 550px;
}
#settings_page {
height: 95vh;
width: 97vw;
margin: 2.5vh 1.5vw;
background-color: #fff;
overflow: hidden;
border-radius: 4px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: transform 0.2s ease;
}
#settings_page .sidebar {
float: left;
position: relative;
width: 250px;
height: 100%;
min-height: 550px;
overflow-y: auto;
border-top-left-radius: 4px;
border-right: 1px solid #eee;
}
#settings_page .sidebar .tab-container {
background-color: #fff;
padding: 6px;
border-bottom: 1px solid #ddd;
}
#settings_page .sidebar .settings-list {
position: relative;
z-index: 3;
}
#settings_page .content-wrapper {
position: absolute;
left: 251px;
/* the width of the settings sidbar this is right of is 250px + 1px border. */
width: calc(100% - 250px - 1px);
height: 100%;
}
#settings_page .content-wrapper .settings-header {
width: 100%;
height: 43px;
border-bottom: 1px solid #ddd;
}
#settings_page .content-wrapper #settings_content {
width: 100%;
height: calc(100% - 60px);
float: left;
overflow-y: auto;
}
#settings_page .form-sidebar {
position: absolute;
top: 45px;
right: 0px;
transform: translateX(303px);
width: 300px;
height: calc(100% - 45px);
background-color: #fff;
border-left: 1px solid #ddd;
pointer-events: none;
transition: all 0.3s ease;
}
#settings_page .form-sidebar.show {
pointer-events: auto;
transform: translateX(0px);
}
#settings_page .form-sidebar input[type=text] {
width: calc(100% - 10px - 4px);
}
#settings_page .form-sidebar input[type=submit],
#settings_page .form-sidebar button {
border-radius: 4px;
outline: none;
}
#settings_page .form-sidebar select {
width: 100%;
}
#settings_page .form-sidebar .title,
#settings_page .form-sidebar .content {
padding: 20px;
}
#settings_page .form-sidebar .title {
background-color: #fafafa;
padding: 10px 20px;
border-bottom: 1px solid #ddd;
}
#settings_page .form-sidebar .title h1 {
display: inline-block;
font-size: 1.3rem;
margin: 0px;
}
#settings_page .form-sidebar .title .exit {
float: right;
font-size: 2rem;
font-weight: 300;
margin-top: 11px;
cursor: pointer;
}
#settings_page .sidebar .header {
height: auto;
position: relative;
width: calc(100% - 20px);
padding: 10px;
text-align: center;
text-transform: uppercase;
background-color: #edefef;
border-bottom: 1px solid #DDD;
}
#settings_page .settings-header {
padding-top: 1px;
}
#settings_page .settings-header h1 {
text-align: center;
font-size: 1.1em;
line-height: 1;
margin: 15px;
text-transform: uppercase;
}
#settings_page .settings-header .exit {
font-weight: 600;
position: absolute;
top: 10px;
right: 10px;
color: #AAA;
cursor: pointer;
}
#settings_page .settings-header .exit-sign {
float: right;
position: relative;
top: 3px;
margin-left: 3px;
font-size: 1.5rem;
font-weight: 600;
cursor: pointer;
}
#deactivation_user_modal.fade.in {
top: calc(50% - 120px);
}
#deactivate_self_modal {
box-shadow: 0px 0px 75px rgba(0,0,0,0.5);
outline: 10000px solid rgba(0,0,0,0.3);
border: none;
border-radius: 0px;
}
input[type=text]#settings_search {
width: calc(100% - 10px - 2px);
margin: 0px;
color: #555;
font-size: 0.9rem;
padding: 3px 5px;
outline: none;
border: 1px solid #DDD;
border-radius: 4px;
}
input[type=text]:focus#settings_search {
box-shadow: none;
border: 1px solid #BBB;
border-bottom: 1px solid #DDD;
}
input[type=text]#settings_search {
width: calc(100% - 10px - 2px);
margin: 0px;
}
#settings_page .sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
#settings_page .sidebar li {
padding: 5px 0px;
outline: none;
cursor: pointer;
transition: all 0.2s ease;
border-bottom: 1px solid #eee;
}
#settings_page .sidebar li.no-border {
border-color: transparent;
}
#settings_page .sidebar li.active {
background-color: #eee;
}
#settings_page .sidebar li.active {
border-bottom: 1px solid transparent;
}
#settings_page .sidebar li .text,
#settings_page .sidebar li .icon {
display: inline-block;
vertical-align: top;
}
#settings_page .sidebar li .text {
width: calc(100% - 55px);
padding: 10px 12px 10px 0px;
}
#settings_page .sidebar li .icon {
width: 18px;
height: 18px;
margin: 10px 10px;
font-size: 1.4em;
color: #888;
background-size: cover;
background-repeat: no-repeat;
}
#settings_page .sidebar li.admin {
display: none;
}
#settings_page .sidebar li.admin .icon {
text-align: center;
}
#settings_page .sidebar li:last-of-type .text {
border-bottom: none;
}
#settings_page .sidebar .sidebar-bottom-anchor {
width: 100%;
position: absolute;
bottom: 0px;
}
/* -- end new settings overlay -- */
@media (min-width: 1850px) {
.bots_list .bot-information-box {
width: calc(20% - 10px);
}
}
@media (min-width: 1500px) and (max-width: 1850px) {
.bots_list .bot-information-box {
width: calc(25% - 10px);
}
}
@media (max-width: 1215px) {
.bots_list .bot-information-box {
width: calc(50% - 10px);
}
.user-avatar-section, .realm-icon-section {
float: none;
display: inline-block;
}
.user-avatar-section .inline-block, .realm-icon-section .inline-block {
display: inline-block;
vertical-align: top;
}
.user-avatar-section .inline-block {
margin: 0px 10px;
}
.realm-icon-section .inline-block {
margin: 0px 25px;
}
}
@media (max-width: 856px) {
.user-avatar-section .inline-block, .realm-icon-section .inline-block {
display: block;
margin: 0;
}
}
@media (max-width: 953px) {
#settings_content .warning {
display: none;
}
}
#show_api_key_box {
padding-bottom: 20px;
}
#administration #deactivation_stream_modal h3 {
overflow-wrap: break-word;
}
#administration .centered-footer {
text-align: center;
padding: 10px 15px;
}
#administration .new-alias-domain {
width: 130px;
margin-bottom: auto;
padding: 0px 2px;
}
#administration #submit-add-alias {
width: 75px;
}
#muted_topics_table {
margin-bottom: 0px;
width: 90%;
margin: 0 auto;
}
#muted_topics_table tbody {
border-bottom: none;
}