Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity
02c907128c
xmpp.chapril.org-conversejs/sass/_variables.scss

231 lines
7.7 KiB
SCSS
Raw Normal View History

Move common Sass variables into a single file Part of slowly trying to bring all styles into a single CSS file.
2018-04-27 16:50:58 +02:00
$mobile_landscape_height: 450px !default;
$mobile_portrait_length: 480px !default;
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
$font-path: "webfonts/icomoon/fonts/" !default;
Move common Sass variables into a single file Part of slowly trying to bring all styles into a single CSS file.
2018-04-27 16:50:58 +02:00
Fix badge & button colors. Ensure vars apply to `.converse_content`
2018-11-07 11:40:35 +01:00
#conversejs, .converse-content {
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--subdued-color: #A8ABA1;
--subdued-color-lighten-25-percent: #e6e7e4; // lighten(#A8ABA1, 25%)
Move common Sass variables into a single file Part of slowly trying to bring all styles into a single CSS file.
2018-04-27 16:50:58 +02:00
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--chat-status-online: #3AA569; // $green
--chat-status-busy: #E77051; // $red
--chat-status-away: #E7A151; // $orange
updates #1068 - For roster contacts, only show remove icons on hover. - Show light background color when hovering over an item in the controlbox. Ideally this background color will be 100% of the controlbox width, but I'm not opening that can of worms now...
2018-05-11 10:19:14 +02:00
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--brand-heading-color: #387592; // $blue
Move common Sass variables into a single file Part of slowly trying to bring all styles into a single CSS file.
2018-04-27 16:50:58 +02:00
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--completion-light-color: #FFB9A7; // $lightest-red
--completion-normal-color: #E77051; // $red
--completion-dark-color: #D24E2B; // $dark-red
Move common Sass variables into a single file Part of slowly trying to bring all styles into a single CSS file.
2018-04-27 16:50:58 +02:00
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--link-color: #578EA9; // $light-blue
--link-color-darken-20-percent: #345566; // darken($light-blue, 20%)
--link-color-lighten-10-percent: #79a5ba; // lighten($light-blue, 10%)
--dark-link-color: #206485; // $dark-blue
--global-background-color: #578EA9; // $light-blue
--inverse-link-color: white;
--text-shadow-color: #FAFAFA;
--text-color: #666;
--text-color-lighten-15-percent: #8c8c8c; // lighten(#666, 15%)
--message-text-color: #555;
implement XEP-0184: Message Delivery Receipts
2018-11-03 14:37:57 +01:00
--message-receipt-color: #3AA569; // $green
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--save-button-color: #3AA569; // $green
--chat-textarea-color: #666;
Add a dark theme inspired by Discord This theme takes inspiration from https://discordapp.com/ and builds on top of custom-properties, making the design more familiar to some users. In order to change the theme, add the 'theme-dark' class on #conversejs, you can do it at any point during the lifetime of Converse, either directly in your HTML or by changing the DOM at runtime.
2018-10-27 02:16:50 +02:00
--chat-textarea-background-color: white;
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--chat-textarea-height: 60px;
--send-button-height: 27px;
--send-button-margin: 3px;
--roster-height: 194px;
--flyout-padding: 1.2em;
--chat-head-color: #3AA569; // $green
--chat-head-color-lighten-50-percent: #e7f7ee; // lighten($green, 50%)
--chat-head-text-color: white;
Add a dark theme inspired by Discord This theme takes inspiration from https://discordapp.com/ and builds on top of custom-properties, making the design more familiar to some users. In order to change the theme, add the 'theme-dark' class on #conversejs, you can do it at any point during the lifetime of Converse, either directly in your HTML or by changing the DOM at runtime.
2018-10-27 02:16:50 +02:00
--chat-correcting-color: var(--chat-head-color-lighten-50-percent);
--chat-topic-display: block;
--chat-info-display: block;
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--highlight-color: #DCF9F6;
More button color fixes after switching to css properties
2018-11-12 14:06:52 +01:00
--primary-color: #578EA9; // blue
--primary-color-dark: #397491;
More color fixes after switching to css properties
2018-11-12 12:15:13 +01:00
More button color fixes after switching to css properties
2018-11-12 14:06:52 +01:00
--secondary-color: #818479; // gray
--secondary-color-dark: #585B51;
--warning-color: #E7A151; // orange
--warning-color-dark: #D2842B;
--danger-color: #D24E2B; // dark-red
--danger-color-dark: #A93415; // darker red
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--light-background-color: #FCFDFD;
Errors should be red
2018-11-12 14:23:35 +01:00
--error-color: #D24E2B; // dark-red
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--info-color: #1E9652; // $dark-green
--button-border-radius: 5px;
--chatbox-border-radius: 4px;
--controlbox-width: 250px;
--controlbox-head-color: #578EA9; // $light-blue
--controlbox-head-color-lighten-45-percent: #eff4f7; // lighten($light-blue, 45%)
Add a dark theme inspired by Discord This theme takes inspiration from https://discordapp.com/ and builds on top of custom-properties, making the design more familiar to some users. In order to change the theme, add the 'theme-dark' class on #conversejs, you can do it at any point during the lifetime of Converse, either directly in your HTML or by changing the DOM at runtime.
2018-10-27 02:16:50 +02:00
--controlbox-pane-background-color: white;
--controlbox-heading-color: inherit;
--controlbox-heading-font-weight: normal;
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--chat-gutter: 0.5em;
--minimized-chats-width: 130px;
--mobile-chat-width: 100%;
--mobile-chat-height: 400px;
// TODO: figure out a way to concatenate custom properties with strings.
// --font-path: "webfonts/icomoon/fonts/";
Move common Sass variables into a single file Part of slowly trying to bring all styles into a single CSS file.
2018-04-27 16:50:58 +02:00
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--normal-font: "Helvetica", "Arial", sans-serif;
Fix badge & button colors. Ensure vars apply to `.converse_content`
2018-11-07 11:40:35 +01:00
--heading-font: futura, 'Century Gothic', 'URW Gothic L', Verdana, sans-serif;
Add a dark theme inspired by Discord This theme takes inspiration from https://discordapp.com/ and builds on top of custom-properties, making the design more familiar to some users. In order to change the theme, add the 'theme-dark' class on #conversejs, you can do it at any point during the lifetime of Converse, either directly in your HTML or by changing the DOM at runtime.
2018-10-27 02:16:50 +02:00
--heading-display: block;
--heading-color: white;
Use future for headings
2018-05-14 13:27:10 +02:00
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--chatroom-head-color: #E77051; // $red
--chatroom-head-color-lighten-25-percent: #f6ccc1; // lighten($red, 25%)
Add a dark theme inspired by Discord This theme takes inspiration from https://discordapp.com/ and builds on top of custom-properties, making the design more familiar to some users. In order to change the theme, add the 'theme-dark' class on #conversejs, you can do it at any point during the lifetime of Converse, either directly in your HTML or by changing the DOM at runtime.
2018-10-27 02:16:50 +02:00
--chatroom-head-button-color: var(--chatroom-head-color);
--chatroom-head-title-font-weight: normal;
--chatroom-head-title-padding-right: 0px;
--chatroom-head-description-color: var(--chatroom-head-color-lighten-25-percent);
--chatroom-head-description-link-color: white;
--chatroom-head-description-display: block;
--chatroom-head-description-border-left: 0px;
--chatroom-head-description-padding-left: 0px;
--chatroom-head-border-bottom: 0px;
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--chatroom-width: 400px;
Add a dark theme inspired by Discord This theme takes inspiration from https://discordapp.com/ and builds on top of custom-properties, making the design more familiar to some users. In order to change the theme, add the 'theme-dark' class on #conversejs, you can do it at any point during the lifetime of Converse, either directly in your HTML or by changing the DOM at runtime.
2018-10-27 02:16:50 +02:00
--chatroom-correcting-color: #fadfd7; // lighten($red, 30%)
Move common Sass variables into a single file Part of slowly trying to bring all styles into a single CSS file.
2018-04-27 16:50:58 +02:00
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--headline-head-color: #E7A151; // $orange
--headline-message-color: #D2842B; // $dark-orange
Move common Sass variables into a single file Part of slowly trying to bring all styles into a single CSS file.
2018-04-27 16:50:58 +02:00
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--chatbox-button-size: 14px;
--fullpage-chatbox-button-size: 16px;
Add tests for contact removal via modal
2018-05-10 22:14:37 +02:00
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--font-size-tiny: 10px;
--font-size-small: 12px;
--font-size: 14px;
--font-size-large: 16px;
--font-size-huge: 20px;
Combine inverse/converse chatrooms css updates #1091
2018-05-24 12:44:18 +02:00
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--message-font-size: var(--font-size);
Add a dark theme inspired by Discord This theme takes inspiration from https://discordapp.com/ and builds on top of custom-properties, making the design more familiar to some users. In order to change the theme, add the 'theme-dark' class on #conversejs, you can do it at any point during the lifetime of Converse, either directly in your HTML or by changing the DOM at runtime.
2018-10-27 02:16:50 +02:00
--separator-text-color: var(--message-text-color);
--chat-separator-border-bottom: 2px solid var(--chat-head-color);
--chatroom-separator-border-bottom: 2px solid var(--chatroom-head-color);
--message-input-border-top: 4px solid var(--chatroom-head-color);
--message-input-color: var(--chatroom-head-color);
Remove sass/inverse/_chatbox.scss updates #1091
2018-05-24 14:28:05 +02:00
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--line-height-small: 14px;
--line-height: 16px;
--line-height-large: 20px;
--line-height-huge: 27px;
Combine inverse/converse chatrooms css updates #1091
2018-05-24 12:44:18 +02:00
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--occupants-padding: 1em;
Add a dark theme inspired by Discord This theme takes inspiration from https://discordapp.com/ and builds on top of custom-properties, making the design more familiar to some users. In order to change the theme, add the 'theme-dark' class on #conversejs, you can do it at any point during the lifetime of Converse, either directly in your HTML or by changing the DOM at runtime.
2018-10-27 02:16:50 +02:00
--occupants-background-color: white;
--occupants-max-width: inherit;
--occupants-border-left: 1px solid var(--text-color);
--occupants-border-bottom: 1px solid lightgrey;
--occupants-features-display: block;
Combine inverse/converse chatrooms css updates #1091
2018-05-24 12:44:18 +02:00
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--embedded-emoji-picker-height: 200px;
Combine inverse/converse chatrooms css updates #1091
2018-05-24 12:44:18 +02:00
Add a dark theme inspired by Discord This theme takes inspiration from https://discordapp.com/ and builds on top of custom-properties, making the design more familiar to some users. In order to change the theme, add the 'theme-dark' class on #conversejs, you can do it at any point during the lifetime of Converse, either directly in your HTML or by changing the DOM at runtime.
2018-10-27 02:16:50 +02:00
--avatar-border-radius: 10%;
--avatar-border: 1px solid lightgrey;
--avatar-background-color: white;
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--fullpage-chat-head-height: 62px;
--fullpage-chat-height: 100vh;
--fullpage-chat-width: 100%;
--fullpage-emoji-picker-height: 200px;
--fullpage-max-chat-textarea-height: 15em;
Fix emoji toolbar styling for embedded mode
2018-09-04 10:41:31 +02:00
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--overlayed-chat-head-height: 55px;
--overlayed-chat-height: 450px;
--overlayed-chat-width: 250px;
--overlayed-chatbox-hover-height: 1em;
--overlayed-emoji-picker-height: 100px;
--overlayed-max-chat-textarea-height: 200px;
--overlayed-badge-color: #818479; // $gray-color
Put all Sass variables into one file. updates #1091
2018-05-24 13:17:26 +02:00
HTML and CSS improvements for listed items in the controlbox Fixes #1348 Tried to get the unread messages indicator to line up properly with the text and icons in a room list item. Also tried to reuse styles where appropriate, specifically `.list-container` and `.list-toggle`.
2018-12-07 11:27:57 +01:00
--list-toggle-color: #818479; // $gray-color
--list-toggle-hover-color: #585B51; // $dark-gray-color
Add a dark theme inspired by Discord This theme takes inspiration from https://discordapp.com/ and builds on top of custom-properties, making the design more familiar to some users. In order to change the theme, add the 'theme-dark' class on #conversejs, you can do it at any point during the lifetime of Converse, either directly in your HTML or by changing the DOM at runtime.
2018-10-27 02:16:50 +02:00
--list-toggle-font-weight: normal;
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--list-item-action-color: #e3eef3; // lighten($lightest-blue, 25%)
Add a dark theme inspired by Discord This theme takes inspiration from https://discordapp.com/ and builds on top of custom-properties, making the design more familiar to some users. In order to change the theme, add the 'theme-dark' class on #conversejs, you can do it at any point during the lifetime of Converse, either directly in your HTML or by changing the DOM at runtime.
2018-10-27 02:16:50 +02:00
--list-item-link-color: inherit;
--list-item-link-hover-color: var(--dark-link-color);
--list-item-open-color: var(--controlbox-head-color);
--list-item-open-hover-color: var(--controlbox-head-color);
Switch from SASS variables to CSS custom properties This will eventually allow client-side theming support.
2018-10-25 20:42:56 +02:00
--list-circle-color: #89d6ab; // lighten($green, 25%)
--list-minus-circle-color: #f0a794; // lighten($red, 15%)
--list-dot-circle-color: #f6dec1; // lighten($orange, 25%)
}
Add a dark theme inspired by Discord This theme takes inspiration from https://discordapp.com/ and builds on top of custom-properties, making the design more familiar to some users. In order to change the theme, add the 'theme-dark' class on #conversejs, you can do it at any point during the lifetime of Converse, either directly in your HTML or by changing the DOM at runtime.
2018-10-27 02:16:50 +02:00
Rename theme to `concord` and add config option for setting the theme
2018-11-14 15:56:28 +01:00
#conversejs.theme-concord {
Add a dark theme inspired by Discord This theme takes inspiration from https://discordapp.com/ and builds on top of custom-properties, making the design more familiar to some users. In order to change the theme, add the 'theme-dark' class on #conversejs, you can do it at any point during the lifetime of Converse, either directly in your HTML or by changing the DOM at runtime.
2018-10-27 02:16:50 +02:00
--avatar-border-radius: 100%;
--avatar-border: 0px;
--avatar-background-color: none;
--controlbox-pane-background-color: #333;
--controlbox-heading-color: #777;
--controlbox-heading-font-weight: bold;
--chat-topic-display: none;
--chat-info-display: none;
--chat-textarea-background-color: #F6F6F6;
--chat-correcting-color: #FFFFC0;
--chat-head-text-color: #999;
--chatbox-border-radius: 0px;
--heading-display: inline;
--heading-color: #4F545C;
--chatroom-head-color: white;
--chatroom-head-color-lighten-25-percent: blue;
--chatroom-head-button-color: #999;
--chatroom-head-title-font-weight: bold;
--chatroom-head-title-padding-right: 12px;
--chatroom-head-description-color: black;
--chatroom-head-description-link-color: #00b3f4;
--chatroom-head-description-display: inline;
--chatroom-head-description-border-left: 1px solid #DDD;
--chatroom-head-description-padding-left: 12px;
--chatroom-head-border-bottom: 1px solid #EEE;
--chatroom-correcting-color: #FFFFC0;
--occupants-background-color: #F3F3F3;
/* TODO: find a way to allow that and reflow the chat-area properly.
* --occupants-max-width: 240px; */
--occupants-border-left: 0px;
--occupants-border-bottom: 0px;
--occupants-features-display: none;
--separator-text-color: #AAA;
--chat-separator-border-bottom: 1px solid #AAA;
--chatroom-separator-border-bottom: 1px solid #AAA;
--message-input-border-top: 1px solid #CCC;
--message-input-color: #CCC;
--fullpage-chat-head-height: 40px;
--fullpage-chatbox-button-size: 24px;
--list-toggle-font-weight: bold;
--list-item-link-color: #F1F1F1;
--list-item-link-hover-color: #DDD;
--list-item-open-color: #444;
--list-item-open-hover-color: #444;
}
Reference in New Issue Copy Permalink