mirror of
https://github.com/Kong/insomnia.git
synced 2026-10-25 08:09:06 -04:00
Finish up themes
This commit is contained in:
Gregory Schier committed
1 parent
00f1d9b4fa
commit
6d8db80de6
51 files changed
+842
-395
No files matched your search
@@ -35,7 +35,7 @@ export function getClientString () {
|
||||
}
|
||||
|
||||
// Global Stuff
|
||||
export const DB_PERSIST_INTERVAL = 1000 * 60 * 10;
|
||||
export const DB_PERSIST_INTERVAL = 1000 * 30;
|
||||
export const DEBOUNCE_MILLIS = 100;
|
||||
export const MAX_RESPONSES = 20;
|
||||
export const REQUEST_TIME_TO_SHOW_COUNTER = 1; // Seconds
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 310 KiB After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 305 KiB After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 294 KiB After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
+5
-7
@@ -3,8 +3,6 @@ import * as crypt from './crypt';
|
||||
import * as util from '../common/fetch';
|
||||
import {trackEvent, setAccountId} from '../analytics';
|
||||
|
||||
const NO_SESSION = '__NO_SESSION__';
|
||||
|
||||
/** Create a new Account for the user */
|
||||
export async function signup (firstName, lastName, rawEmail, rawPassphrase) {
|
||||
|
||||
@@ -210,7 +208,7 @@ export function getPrivateKey () {
|
||||
}
|
||||
|
||||
export function getCurrentSessionId () {
|
||||
return localStorage.getItem('currentSessionId') || NO_SESSION;
|
||||
return localStorage.getItem('currentSessionId');
|
||||
}
|
||||
|
||||
export function getAccountId () {
|
||||
@@ -236,7 +234,7 @@ export function getFullName () {
|
||||
*/
|
||||
export function getSessionData () {
|
||||
const sessionId = getCurrentSessionId();
|
||||
if (sessionId == NO_SESSION) {
|
||||
if (!sessionId) {
|
||||
return {};
|
||||
}
|
||||
|
||||
@@ -279,7 +277,7 @@ export function unsetSessionData () {
|
||||
|
||||
/** Check if we (think) we have a session */
|
||||
export function isLoggedIn () {
|
||||
return getCurrentSessionId() !== NO_SESSION;
|
||||
return getCurrentSessionId();
|
||||
}
|
||||
|
||||
/** Log out and delete session data */
|
||||
@@ -305,12 +303,12 @@ export async function endTrial () {
|
||||
trackEvent('Session', 'End Trial');
|
||||
}
|
||||
|
||||
function whoami (sessionId = null) {
|
||||
export function whoami (sessionId = null) {
|
||||
return util.get('/auth/whoami', sessionId);
|
||||
}
|
||||
|
||||
export function getSessionKey (sessionId) {
|
||||
return `session__${sessionId.slice(0, 10)}`
|
||||
return `session__${(sessionId || '').slice(0, 10)}`
|
||||
}
|
||||
|
||||
// ~~~~~~~~~~~~~~~~ //
|
||||
|
||||
@@ -111,7 +111,7 @@ class ResponsePane extends Component {
|
||||
return (
|
||||
<section className="response-pane pane">
|
||||
<ResponseTimer
|
||||
className="response-pane__overlay"
|
||||
className="overlay"
|
||||
handleCancel={cancelCurrentRequest}
|
||||
loadStartTime={loadStartTime}
|
||||
/>
|
||||
@@ -158,7 +158,7 @@ class ResponsePane extends Component {
|
||||
return (
|
||||
<section className="response-pane pane">
|
||||
<ResponseTimer
|
||||
className="response-pane__overlay"
|
||||
className="overlay"
|
||||
handleCancel={cancelCurrentRequest}
|
||||
loadStartTime={loadStartTime}
|
||||
/>
|
||||
|
||||
@@ -286,11 +286,13 @@ class Wrapper extends Component {
|
||||
workspace={activeWorkspace}/>
|
||||
<EnvironmentEditModal
|
||||
ref={registerModal}
|
||||
editorFontSize={settings.editorFontSize}
|
||||
onChange={models.requestGroup.update}
|
||||
/>
|
||||
<GenerateCodeModal
|
||||
ref={registerModal}
|
||||
environmentId={activeEnvironment ? activeEnvironment._id : 'n/a'}
|
||||
editorFontSize={settings.editorFontSize}
|
||||
/>
|
||||
<SettingsModal
|
||||
ref={registerModal}
|
||||
@@ -309,7 +311,9 @@ class Wrapper extends Component {
|
||||
/>
|
||||
<WorkspaceEnvironmentsEditModal
|
||||
ref={registerModal}
|
||||
onChange={models.workspace.update}/>
|
||||
onChange={models.workspace.update}
|
||||
editorFontSize={settings.editorFontSize}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -3,16 +3,13 @@ import {shell} from 'electron';
|
||||
|
||||
class Button extends Component {
|
||||
_handleClick = e => {
|
||||
const {onClick, disabled} = this.props;
|
||||
|
||||
if (!onClick || disabled) {
|
||||
return;
|
||||
}
|
||||
const {onClick, onDisabledClick, disabled} = this.props;
|
||||
const fn = disabled ? onDisabledClick : onClick;
|
||||
|
||||
if (this.props.hasOwnProperty('value')) {
|
||||
onClick(this.props.value, e);
|
||||
fn && fn(this.props.value, e);
|
||||
} else {
|
||||
onClick(e);
|
||||
fn && fn(e);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -26,6 +23,8 @@ class Button extends Component {
|
||||
|
||||
Button.propTypes = {
|
||||
value: PropTypes.any,
|
||||
onDisabledClick: PropTypes.func,
|
||||
onClick: PropTypes.func,
|
||||
};
|
||||
|
||||
export default Button;
|
||||
@@ -119,7 +119,7 @@ class Modal extends Component {
|
||||
style={{zIndex: zIndex}}
|
||||
onClick={this._handleClick}>
|
||||
<div className="modal__content" key={forceRefreshCounter}>
|
||||
<div className="modal__backdrop" onClick={() => this.hide()}></div>
|
||||
<div className="modal__backdrop overlay" onClick={() => this.hide()}></div>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -137,7 +137,7 @@ class Dropdown extends Component {
|
||||
} else {
|
||||
finalChildren = [
|
||||
dropdownButtons[0],
|
||||
<ul key="items" ref={this._addDropdownListRef}>
|
||||
<ul key="items" className="dropdown__menu" ref={this._addDropdownListRef}>
|
||||
{dropdownItems}
|
||||
</ul>
|
||||
]
|
||||
|
||||
@@ -82,7 +82,7 @@ class WorkspaceDropdown extends Component {
|
||||
<DropdownButton className="btn wide">
|
||||
<h1 className="no-pad text-left">
|
||||
<div className="pull-right">
|
||||
{isLoading ? <i className="fa fa-refresh fa-spin txt-lg"/> : null}
|
||||
{isLoading ? <i className="fa fa-refresh fa-spin"/> : null}
|
||||
{" "}
|
||||
<i className="fa fa-caret-down"/>
|
||||
</div>
|
||||
@@ -113,7 +113,7 @@ class WorkspaceDropdown extends Component {
|
||||
<DropdownDivider>Insomnia Version {getAppVersion()}</DropdownDivider>
|
||||
|
||||
<DropdownItem onClick={this._handleShowSettings}>
|
||||
<i className="fa fa-cog"/> App Preferences
|
||||
<i className="fa fa-cog"/> Preferences
|
||||
<DropdownHint char=","/>
|
||||
</DropdownItem>
|
||||
<DropdownItem onClick={this._handleShowExport}>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, {PropTypes, Component} from 'react';
|
||||
import {Cookie} from 'tough-cookie';
|
||||
|
||||
import PromptButton from '../base/PromptButton';
|
||||
import CookieInput from '../CookieInput';
|
||||
import {cookieToString} from '../../../common/cookies';
|
||||
|
||||
@@ -60,11 +61,13 @@ class CookiesEditor extends Component {
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-right">
|
||||
<button className="btn btn--super-compact"
|
||||
onClick={e => this._handleDeleteCookie(cookie)}
|
||||
title="Delete cookie">
|
||||
<PromptButton className="btn btn--super-compact"
|
||||
addIcon={true}
|
||||
confirmMessage=" "
|
||||
onClick={e => this._handleDeleteCookie(cookie)}
|
||||
title="Delete cookie">
|
||||
<i className="fa fa-trash-o"></i>
|
||||
</button>
|
||||
</PromptButton>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
@@ -72,18 +75,18 @@ class CookiesEditor extends Component {
|
||||
</tbody>
|
||||
</table>
|
||||
{cookies.length === 0 ? (
|
||||
<div className="pad faint italic text-center">
|
||||
<p>
|
||||
I couldn't find any cookies for you.
|
||||
</p>
|
||||
<p>
|
||||
<button className="btn btn--clicky"
|
||||
onClick={e => this._handleCookieAdd()}>
|
||||
Add Cookie <i className="fa fa-plus-circle"></i>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="pad faint italic text-center">
|
||||
<p>
|
||||
I couldn't find any cookies for you.
|
||||
</p>
|
||||
<p>
|
||||
<button className="btn btn--clicky"
|
||||
onClick={e => this._handleCookieAdd()}>
|
||||
Add Cookie <i className="fa fa-plus-circle"></i>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -22,11 +22,12 @@ class EnvironmentEditor extends Component {
|
||||
}
|
||||
|
||||
render () {
|
||||
const {environment, ...props} = this.props;
|
||||
const {environment, editorFontSize, ...props} = this.props;
|
||||
|
||||
return (
|
||||
<Editor
|
||||
ref={this._setEditorRef}
|
||||
fontSize={editorFontSize}
|
||||
onChange={this._handleChange}
|
||||
value={JSON.stringify(environment)}
|
||||
autoPrettify={true}
|
||||
@@ -39,7 +40,8 @@ class EnvironmentEditor extends Component {
|
||||
|
||||
EnvironmentEditor.propTypes = {
|
||||
environment: PropTypes.object.isRequired,
|
||||
didChange: PropTypes.func.isRequired
|
||||
didChange: PropTypes.func.isRequired,
|
||||
editorFontSize: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
export default EnvironmentEditor;
|
||||
@@ -80,7 +80,7 @@ class BodyEditor extends PureComponent {
|
||||
return (
|
||||
<div className="pad valign-center text-center">
|
||||
<p className="pad super-faint text-sm text-center">
|
||||
<i className="fa fa-hand-peace-o" style={{fontSize: '8rem', opacity: 0.2}}></i>
|
||||
<i className="fa fa-hand-peace-o" style={{fontSize: '8rem', opacity: 0.3}}></i>
|
||||
<br/><br/>
|
||||
Select a body type from above
|
||||
</p>
|
||||
|
||||
@@ -45,13 +45,15 @@ class EnvironmentEditModal extends Component {
|
||||
}
|
||||
|
||||
render () {
|
||||
const {editorFontSize, ...extraProps} = this.props;
|
||||
const {requestGroup, isValid} = this.state;
|
||||
|
||||
return (
|
||||
<Modal ref={m => this.modal = m} tall={true} top={true} {...this.props}>
|
||||
<Modal ref={m => this.modal = m} tall={true} top={true} {...extraProps}>
|
||||
<ModalHeader>Environment Overrides (JSON Format)</ModalHeader>
|
||||
<ModalBody noScroll={true}>
|
||||
<EnvironmentEditor
|
||||
editorFontSize={editorFontSize}
|
||||
ref={node => this._envEditor = node}
|
||||
key={requestGroup ? requestGroup._id : 'n/a'}
|
||||
environment={requestGroup ? requestGroup.environment : {}}
|
||||
@@ -73,7 +75,8 @@ class EnvironmentEditModal extends Component {
|
||||
}
|
||||
|
||||
EnvironmentEditModal.propTypes = {
|
||||
onChange: PropTypes.func.isRequired
|
||||
onChange: PropTypes.func.isRequired,
|
||||
editorFontSize: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
export default EnvironmentEditModal;
|
||||
@@ -95,6 +95,7 @@ class GenerateCodeModal extends Component {
|
||||
|
||||
render () {
|
||||
const {cmd, target, client} = this.state;
|
||||
const {editorFontSize} = this.props;
|
||||
|
||||
const targets = availableTargets();
|
||||
|
||||
@@ -145,6 +146,7 @@ class GenerateCodeModal extends Component {
|
||||
key={Date.now()}
|
||||
mode={MODE_MAP[target.key] || target.key}
|
||||
ref={n => this._editor = n}
|
||||
fontSize={editorFontSize}
|
||||
lightTheme={true}
|
||||
lineWrapping={true}
|
||||
value={cmd}
|
||||
@@ -165,6 +167,7 @@ class GenerateCodeModal extends Component {
|
||||
|
||||
GenerateCodeModal.propTypes = {
|
||||
environmentId: PropTypes.string.isRequired,
|
||||
editorFontSize: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
export default GenerateCodeModal;
|
||||
@@ -27,6 +27,12 @@ class SettingsModal extends Component {
|
||||
models.settings.update(this.props.settings, {theme});
|
||||
};
|
||||
|
||||
componentDidMount () {
|
||||
// Hacky way to set theme on launch
|
||||
// TODO: move somewhere else
|
||||
this._handleChangeTheme(this.props.settings.theme);
|
||||
}
|
||||
|
||||
show (currentTabIndex = 0) {
|
||||
this.setState({currentTabIndex});
|
||||
this.modal.show();
|
||||
@@ -76,8 +82,8 @@ class SettingsModal extends Component {
|
||||
</button>
|
||||
</Tab>
|
||||
<Tab selected={this._currentTabIndex === 2}>
|
||||
<button onClick={e => trackEvent('Setting', 'Tab Theme')}>
|
||||
Theme
|
||||
<button onClick={e => trackEvent('Setting', 'Tab Themes')}>
|
||||
Themes
|
||||
</button>
|
||||
</Tab>
|
||||
<Tab selected={this._currentTabIndex === 3}>
|
||||
|
||||
@@ -139,6 +139,7 @@ class WorkspaceEnvironmentsEditModal extends Component {
|
||||
}
|
||||
|
||||
render () {
|
||||
const {editorFontSize} = this.props;
|
||||
const {subEnvironments, rootEnvironment, isValid, forceRefreshKey} = this.state;
|
||||
const activeEnvironment = this._getActiveEnvironment();
|
||||
|
||||
@@ -199,6 +200,7 @@ class WorkspaceEnvironmentsEditModal extends Component {
|
||||
</div>
|
||||
<div className="env-modal__editor">
|
||||
<EnvironmentEditor
|
||||
editorFontSize={editorFontSize}
|
||||
ref={n => this._envEditor = n}
|
||||
key={`${forceRefreshKey}::${(activeEnvironment ? activeEnvironment._id : 'n/a')}`}
|
||||
environment={activeEnvironment ? activeEnvironment.data : {}}
|
||||
@@ -226,7 +228,8 @@ class WorkspaceEnvironmentsEditModal extends Component {
|
||||
}
|
||||
|
||||
WorkspaceEnvironmentsEditModal.propTypes = {
|
||||
onChange: PropTypes.func.isRequired
|
||||
onChange: PropTypes.func.isRequired,
|
||||
editorFontSize: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
export default WorkspaceEnvironmentsEditModal;
|
||||
|
||||
@@ -1,42 +1,107 @@
|
||||
import React, {Component, PropTypes} from 'react';
|
||||
import Button from '../base/Button';
|
||||
import Link from '../base/Link';
|
||||
|
||||
import imgLight from '../../../static/themes/light.png';
|
||||
import imgDark from '../../../static/themes/dark.png';
|
||||
import imgDefault from '../../../static/themes/default.png';
|
||||
import imgSolarizedLight from '../../../static/themes/solarized-light.png';
|
||||
import imgSolarizedDark from '../../../static/themes/solarized-dark.png';
|
||||
import imgSolarized from '../../../static/themes/solarized.png';
|
||||
import imgRailscasts from '../../../static/themes/railscasts.png';
|
||||
import imgPurple from '../../../static/themes/purple.png';
|
||||
import imgMaterial from '../../../static/themes/material.png';
|
||||
import * as session from '../../../sync/session';
|
||||
|
||||
const THEMES = [[
|
||||
const THEMES_PER_ROW = 3;
|
||||
const THEMES = [
|
||||
{key: 'default', name: 'Insomnia', img: imgDefault},
|
||||
{key: 'light', name: 'Simple Light', img: imgLight},
|
||||
{key: 'dark', name: 'Simple Dark', img: imgDark},
|
||||
]];
|
||||
{key: 'dark', name: 'Simple Dark', img: imgDark, paid: true},
|
||||
{key: 'purple', name: 'Purple', img: imgPurple, paid: true},
|
||||
{key: 'material', name: 'Material', img: imgMaterial, paid: true},
|
||||
{key: 'solarized', name: 'Solarized', img: imgSolarized, paid: true},
|
||||
{key: 'solarized-light', name: 'Solarized Light', img: imgSolarizedLight, paid: true},
|
||||
{key: 'solarized-dark', name: 'Solarized Dark', img: imgSolarizedDark, paid: true},
|
||||
{key: 'railscasts', name: 'Railscasts', img: imgRailscasts, paid: true},
|
||||
];
|
||||
|
||||
class SettingsTheme extends Component {
|
||||
render () {
|
||||
state = {
|
||||
isPremium: localStorage.getItem('settings.theme.isPremium') || false,
|
||||
};
|
||||
|
||||
async componentDidMount () {
|
||||
// NOTE: This is kind of sketchy because we're relying on our parent (tab view)
|
||||
// to remove->add us every time our tab is shown. If it didn't, we would need to
|
||||
// also hook into componentWillUpdate somehow to refresh more often.
|
||||
|
||||
if (!session.isLoggedIn()) {
|
||||
this.setState({isPremium: false});
|
||||
return;
|
||||
}
|
||||
|
||||
const {isPremium} = await session.whoami();
|
||||
if (this.state.isPremium !== isPremium) {
|
||||
this.setState({isPremium});
|
||||
localStorage.setItem('settings.theme.isPremium', isPremium);
|
||||
}
|
||||
}
|
||||
|
||||
renderTheme = theme => {
|
||||
const {handleChangeTheme, activeTheme} = this.props;
|
||||
const {isPremium} = this.state;
|
||||
const isActive = activeTheme === theme.key;
|
||||
const disabled = theme.paid && !isPremium;
|
||||
|
||||
return (
|
||||
<div className="pad">
|
||||
{THEMES.map(row => {
|
||||
return (
|
||||
<div className="row-fill">
|
||||
{row.map(theme => (
|
||||
<div key={theme.key} className="text-center" style={{alignSelf: 'flex-start'}}>
|
||||
<h2>
|
||||
{theme.name}
|
||||
</h2>
|
||||
<Button onClick={handleChangeTheme} value={theme.key}>
|
||||
<img src={theme.img} alt={theme.name} style={{maxWidth: '100%'}}/>
|
||||
</Button>
|
||||
{theme.key === activeTheme ? (
|
||||
<p className="no-margin-top faint italic txt-sm">
|
||||
<i className="fa fa-paint-brush"/> Active
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<div key={theme.key} className="themes__theme" style={{maxWidth: `${100 / THEMES_PER_ROW}%`}}>
|
||||
<h2 className="txt-lg">
|
||||
{theme.name}
|
||||
{" "}
|
||||
{isActive ? <span className="no-margin-top faint italic txt-md">(Active)</span> : null}
|
||||
</h2>
|
||||
{disabled ? (
|
||||
<Link button={true} href="https://insomnia.rest/pricing/" className="themes__theme--locked">
|
||||
<img src={theme.img} alt={theme.name} style={{maxWidth: '100%'}}/>
|
||||
</Link>
|
||||
) : (
|
||||
<Button onClick={handleChangeTheme} value={theme.key}>
|
||||
<img src={theme.img} alt={theme.name} style={{maxWidth: '100%'}}/>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
};
|
||||
|
||||
renderThemeRows (themes) {
|
||||
const rows = [];
|
||||
let row = [];
|
||||
|
||||
for (const theme of themes) {
|
||||
row.push(theme);
|
||||
if (row.length === THEMES_PER_ROW) {
|
||||
rows.push(row);
|
||||
row = [];
|
||||
}
|
||||
}
|
||||
|
||||
// Push the last row if it wasn't finished
|
||||
if (row.length) {
|
||||
rows.push(row);
|
||||
}
|
||||
|
||||
return rows.map((row, i) => (
|
||||
<div key={i} className="themes__row">
|
||||
{row.map(this.renderTheme)}
|
||||
</div>
|
||||
));
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className="pad themes">
|
||||
{this.renderThemeRows(THEMES)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -75,7 +75,7 @@ class SidebarRequestRow extends PureComponent {
|
||||
<li className={classes}>
|
||||
<div className="sidebar__item" tabIndex={0}>
|
||||
<button className="sidebar__clickable" onClick={this._handleRequestCreateFromEmpty}>
|
||||
<em>click to add first request...</em>
|
||||
<em className="faded">click to add first request...</em>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
@@ -83,7 +83,7 @@ class SidebarRequestRow extends PureComponent {
|
||||
} else {
|
||||
node = (
|
||||
<li className={classes}>
|
||||
<div className={classnames('sidebar__item', {'sidebar__item--active': isActive})}>
|
||||
<div className={classnames('sidebar__item', 'sidebar__item--request', {'sidebar__item--active': isActive})}>
|
||||
<button className="wide" onClick={this._handleRequestActivate}>
|
||||
<div className="sidebar__clickable">
|
||||
<MethodTag method={request.method}/>
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
@import '../constants/colors';
|
||||
@import '../constants/dimensions';
|
||||
|
||||
.banner {
|
||||
background: @color-brand;
|
||||
width: 100%;
|
||||
color: @bg-super-light;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.banner__content {
|
||||
margin: @padding-sm;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.banner__close {
|
||||
padding: @padding-sm @padding-md;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -10,6 +10,7 @@
|
||||
input:not([type="checkbox"]) {
|
||||
padding: @padding-xs @padding-xxs;
|
||||
width: 100%;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.btn {
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
min-width: @dropdown-min-width;
|
||||
box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
background: @bg-super-light;
|
||||
background: var(--color-bg);
|
||||
|
||||
// Separate it from the button a bit
|
||||
margin-top: @padding-xxs;
|
||||
@@ -46,7 +46,6 @@
|
||||
padding-bottom: @radius-md;
|
||||
|
||||
border-radius: @radius-md;
|
||||
background: @bg-super-light;
|
||||
overflow: auto;
|
||||
|
||||
li {
|
||||
@@ -56,13 +55,13 @@
|
||||
padding: @padding-sm @padding-md @padding-sm @padding-sm;
|
||||
width: 100%;
|
||||
display: block;
|
||||
color: @font-super-light-bg !important;
|
||||
color: var(--color-font) !important;
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
|
||||
&:hover:not(:disabled),
|
||||
&:focus:not(:disabled) {
|
||||
background: @hl-xs;
|
||||
background: @hl-sm;
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
@@ -99,7 +98,7 @@
|
||||
|
||||
.dropdown__hint,
|
||||
.dropdown__right {
|
||||
color: @hl-xxl;
|
||||
color: @hl-xl;
|
||||
margin-left: auto;
|
||||
padding-left: @padding-lg;
|
||||
}
|
||||
@@ -118,7 +117,7 @@
|
||||
top: -0.7rem;
|
||||
color: @hl;
|
||||
padding-right: 1em;
|
||||
background: @bg-super-light;
|
||||
background: var(--color-bg);
|
||||
font-size: @font-size-xs;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@@ -71,11 +71,7 @@
|
||||
}
|
||||
|
||||
.CodeMirror-gutter {
|
||||
background-color: @bg-super-dark;
|
||||
}
|
||||
|
||||
&.editor--light-theme .CodeMirror-gutter {
|
||||
background-color: @bg-super-light;
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
@@ -88,7 +84,7 @@
|
||||
}
|
||||
|
||||
.CodeMirror-placeholder {
|
||||
color: @hl-xxl;
|
||||
color: @hl-xl;
|
||||
}
|
||||
|
||||
.CodeMirror-lint-marker-error {
|
||||
@@ -99,7 +95,7 @@
|
||||
text-align: center;
|
||||
|
||||
&::after {
|
||||
color: @danger;
|
||||
color: var(--color-danger);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 0.7em; // because the circle is so large
|
||||
@@ -115,13 +111,19 @@
|
||||
|
||||
// Search dialog (and others)
|
||||
.CodeMirror-dialog {
|
||||
background: @bg-super-dark;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-font);
|
||||
border-color: @hl-md;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: @padding-sm 0 @padding-sm @padding-sm;
|
||||
}
|
||||
|
||||
// Tooltip for errors
|
||||
.CodeMirror-lint-tooltip {
|
||||
background-color: @bg-light;
|
||||
color: @font-light-bg;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-font);
|
||||
border-color: @hl-md;
|
||||
border-radius: 0;
|
||||
font-size: @font-size-md;
|
||||
padding: @padding-xs @padding-sm;
|
||||
@@ -131,15 +133,16 @@
|
||||
background-image: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Based on Sublime Text's Monokai theme */
|
||||
.editor:not(.editor--light-theme) {
|
||||
.editor {
|
||||
.cm-s-default.CodeMirror {
|
||||
color: @font-super-dark-bg;
|
||||
color: var(--color-font);
|
||||
}
|
||||
|
||||
.cm-s-default div.CodeMirror-selected {
|
||||
@@ -152,7 +155,7 @@
|
||||
}
|
||||
|
||||
.cm-s-default .CodeMirror-guttermarker {
|
||||
color: @font-super-dark-bg;
|
||||
color: var(--color-font);
|
||||
}
|
||||
|
||||
.cm-s-default .CodeMirror-guttermarker-subtle {
|
||||
@@ -164,74 +167,74 @@
|
||||
}
|
||||
|
||||
.cm-s-default .CodeMirror-cursor {
|
||||
border-left: 1px solid @font-super-dark-bg;
|
||||
border-left: 1px solid var(--color-font);
|
||||
}
|
||||
|
||||
.cm-s-default span.cm-comment,
|
||||
.cm-s-default span.cm-meta,
|
||||
.cm-s-default span.cm-qualifier {
|
||||
color: @font-super-dark-bg;
|
||||
color: var(--color-font);
|
||||
}
|
||||
|
||||
.cm-s-default span.cm-atom {
|
||||
color: @surprise;
|
||||
color: var(--color-surprise);
|
||||
}
|
||||
|
||||
.cm-s-default span.cm-number {
|
||||
color: @surprise;
|
||||
color: var(--color-surprise);
|
||||
}
|
||||
|
||||
.cm-s-default span.cm-keyword {
|
||||
color: @danger;
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.cm-s-default span.cm-builtin {
|
||||
color: @info;
|
||||
color: var(--color-info);
|
||||
}
|
||||
|
||||
.cm-s-default span.cm-string {
|
||||
color: @notice;
|
||||
color: var(--color-notice);
|
||||
}
|
||||
|
||||
.cm-s-default span.cm-property, .cm-s-default span.cm-attribute {
|
||||
color: @success;
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.cm-s-default span.cm-variable {
|
||||
color: @font-dark-bg;
|
||||
color: var(--color-font);
|
||||
}
|
||||
|
||||
.cm-s-default span.cm-variable-2 {
|
||||
color: @info;
|
||||
color: var(--color-info);
|
||||
}
|
||||
|
||||
.cm-s-default span.cm-variable-3 {
|
||||
color: @info;
|
||||
color: var(--color-info);
|
||||
}
|
||||
|
||||
.cm-s-default span.cm-def {
|
||||
color: @warning;
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.cm-s-default span.cm-bracket {
|
||||
color: @font-dark-bg;
|
||||
color: var(--color-font);
|
||||
}
|
||||
|
||||
.cm-s-default span.cm-tag {
|
||||
color: @danger;
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.cm-s-default span.cm-header {
|
||||
color: @surprise;
|
||||
color: var(--color-surprise);
|
||||
}
|
||||
|
||||
.cm-s-default span.cm-link {
|
||||
color: @surprise;
|
||||
color: var(--color-surprise);
|
||||
}
|
||||
|
||||
.cm-s-default span.cm-error {
|
||||
background: @danger;
|
||||
color: #eee;
|
||||
background: var(--color-danger);
|
||||
color: var(--color-font-danger);
|
||||
}
|
||||
|
||||
.cm-s-default .CodeMirror-activeline-background {
|
||||
@@ -243,40 +246,3 @@
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
.editor--light-theme {
|
||||
.cm-s-default span {
|
||||
color: @font-light-bg;
|
||||
}
|
||||
|
||||
.cm-s-default span.cm-string {
|
||||
color: @notice;
|
||||
}
|
||||
|
||||
.cm-s-default span.cm-property, .cm-s-default span.cm-attribute {
|
||||
color: @success;
|
||||
}
|
||||
|
||||
.cm-s-default span.cm-atom,
|
||||
.cm-s-default span.cm-number {
|
||||
color: @surprise;
|
||||
}
|
||||
|
||||
.cm-s-default .CodeMirror-activeline-background {
|
||||
background: @hl-md;
|
||||
}
|
||||
|
||||
.cm-s-default .CodeMirror-matchingbracket {
|
||||
text-decoration: underline;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.cm-s-default .CodeMirror-cursor {
|
||||
border-left: 1px solid @font-super-light-bg;
|
||||
}
|
||||
|
||||
.cm-s-default div.CodeMirror-selected {
|
||||
background: @hl-md;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
@@ -32,12 +32,12 @@
|
||||
}
|
||||
|
||||
button {
|
||||
color: @hl-xxl;
|
||||
color: @hl-xl;
|
||||
height: 100%;
|
||||
padding: @padding-sm;
|
||||
|
||||
&:hover {
|
||||
color: @font-light-bg;
|
||||
color: var(--color-font);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -47,7 +47,7 @@
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
grid-template-rows: @line-height-xs;
|
||||
color: @hl-xxl;
|
||||
color: @hl;
|
||||
|
||||
& > button {
|
||||
padding: 0 @padding-md 0 @padding-md;
|
||||
@@ -71,12 +71,12 @@
|
||||
|
||||
&.env-modal__sidebar-item--active,
|
||||
& > button:focus {
|
||||
color: @font-light-bg;
|
||||
color: var(--color-font);
|
||||
background-color: @hl-xs;
|
||||
}
|
||||
|
||||
&:hover > button {
|
||||
background-color: @hl-xxs;
|
||||
background-color: @hl-xs;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
}
|
||||
|
||||
input:invalid {
|
||||
border: 1px solid @warning !important;
|
||||
border: 1px solid var(--color-warning) !important;
|
||||
}
|
||||
|
||||
label {
|
||||
@@ -61,16 +61,21 @@
|
||||
border: 1px solid @hl-md;
|
||||
padding: @padding-sm;
|
||||
border-radius: @radius-md;
|
||||
background-color: @hl-xxxs;
|
||||
background-color: @hl-xs;
|
||||
}
|
||||
|
||||
textarea:focus,
|
||||
input:focus {
|
||||
background-color: transparent;
|
||||
border-color: @hl-xl;
|
||||
border-color: @hl-lg;
|
||||
}
|
||||
}
|
||||
|
||||
&.form-control--underlined input:focus,
|
||||
&.form-control--underlined textarea:focus {
|
||||
border-color: @hl;
|
||||
}
|
||||
|
||||
&.form-control--padded {
|
||||
textarea,
|
||||
input {
|
||||
@@ -189,12 +194,16 @@ textarea, input, button {
|
||||
color: inherit;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: @hl-xl;
|
||||
color: @hl-lg;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=number]::-webkit-inner-spin-button {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
input.input--error {
|
||||
border-color: @danger !important;
|
||||
border-color: var(--color-danger) !important;
|
||||
}
|
||||
|
||||
button {
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
&.key-value-editor__row--disabled input,
|
||||
&.key-value-editor__row--disabled button {
|
||||
text-decoration: line-through;
|
||||
color: @hl-xxl;
|
||||
color: @hl-xl;
|
||||
}
|
||||
|
||||
input {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
a {
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
color: @font-link;
|
||||
color: var(--color-surprise);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
.dropdown__text {
|
||||
padding-left: @padding-md;
|
||||
color: @font-super-light-bg;
|
||||
color: var(--color-font);
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
@@ -24,7 +24,6 @@
|
||||
}
|
||||
|
||||
.modal__backdrop {
|
||||
background-color: rgba(30, 30, 30, 0.7);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -37,7 +36,6 @@
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto;
|
||||
color: @font-super-light-bg;
|
||||
border-radius: @radius-md;
|
||||
overflow: visible;
|
||||
box-sizing: border-box;
|
||||
@@ -46,7 +44,8 @@
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
margin: auto;
|
||||
background-color: @bg-super-light;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-font);
|
||||
border: 1px solid @hl-sm;
|
||||
}
|
||||
|
||||
@@ -63,7 +62,8 @@
|
||||
height: @line-height-md;
|
||||
font-size: @font-size-lg;
|
||||
line-height: @line-height-md;
|
||||
background-color: @bg-light;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-font);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@@ -82,6 +82,8 @@
|
||||
min-height: 2rem;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-font);
|
||||
|
||||
&.modal__body--no-scroll {
|
||||
overflow: visible;
|
||||
@@ -91,7 +93,8 @@
|
||||
|
||||
.modal__footer {
|
||||
border-top: 1px solid @hl-md;
|
||||
background-color: @bg-super-light;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-font);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
.overlay {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-font);
|
||||
}
|
||||
@@ -12,8 +12,8 @@
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: @bg-super-light;
|
||||
color: @font-super-light-bg;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-font);
|
||||
box-sizing: border-box;
|
||||
|
||||
border-left: 1px solid @hl-md;
|
||||
@@ -21,8 +21,9 @@
|
||||
border-top: 1px solid @hl-md;
|
||||
|
||||
.pane__header__right {
|
||||
box-shadow: -@padding-md 0 @padding-md -@padding-sm @bg-super-light;
|
||||
background: @bg-super-light;
|
||||
box-shadow: -@padding-md 0 @padding-md -@padding-sm var(--color-bg);
|
||||
background: var(--color-bg);
|
||||
font-size: @font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -30,6 +31,8 @@
|
||||
border-left: 1px solid @hl-md;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-font);
|
||||
}
|
||||
|
||||
.pane__body--placeholder {
|
||||
@@ -39,7 +42,7 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: @hl-xxl;
|
||||
color: @hl;
|
||||
|
||||
& > * {
|
||||
min-width: 20em;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
.request-pane {
|
||||
.request-pane__shortcuts-table {
|
||||
color: @hl-xxl;
|
||||
color: @hl-xl;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
.request-switcher {
|
||||
.btn:hover {
|
||||
background: @hl-xs;
|
||||
background: @hl-sm;
|
||||
}
|
||||
|
||||
.btn.focus {
|
||||
|
||||
@@ -3,13 +3,12 @@
|
||||
.response-pane {
|
||||
position: relative;
|
||||
|
||||
.response-pane__overlay {
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: @bg-super-dark-overlay;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -17,22 +16,17 @@
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
color: @font-super-dark-bg;
|
||||
|
||||
&.response-pane__overlay--under {
|
||||
background: none;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
& > * {
|
||||
max-width: 30rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: @bg-super-dark-overlay;
|
||||
border-color: var(--hl-xl);
|
||||
|
||||
&:hover {
|
||||
background: @bg-super-dark;
|
||||
background: var(--hl-sm);
|
||||
border-color: var(--hl);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: @hl-xxxs;
|
||||
background-color: @hl-xs;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
grid-template-columns: 100%;
|
||||
z-index: 10;
|
||||
|
||||
background-color: @bg-dark;
|
||||
color: @font-dark-bg;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-font);
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -37,14 +37,17 @@
|
||||
border-top: 1px solid @hl-md;
|
||||
border-bottom: 1px solid @hl-md;
|
||||
box-sizing: border-box;
|
||||
background-color: @bg-brand;
|
||||
color: @font-brand;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-font);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
h1, h1 * {
|
||||
font-size: @font-size-xl;
|
||||
}
|
||||
}
|
||||
|
||||
// ~~~~~~~~~~~~~~~ //
|
||||
@@ -65,12 +68,6 @@
|
||||
border-radius: @radius-md;
|
||||
margin-left: @padding-xxs;
|
||||
margin-bottom: @padding-xxs;
|
||||
opacity: @opacity-subtle;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
@@ -132,8 +129,7 @@
|
||||
height: @line-height-xxs;
|
||||
padding-left: @padding-xxs;
|
||||
padding-right: @padding-xxs;
|
||||
color: @font-dark-bg;
|
||||
opacity: @opacity-subtle;
|
||||
color: var(--color-font);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@@ -173,7 +169,7 @@
|
||||
|
||||
.sidebar__list-root {
|
||||
// Add some space above so it's not so squished
|
||||
border-top: 1px solid @hl-sm;
|
||||
border-top: 1px solid @hl-md;
|
||||
padding-top: @padding-xs;
|
||||
padding-bottom: @padding-md;
|
||||
box-shadow: inset 0 2rem 2rem -2rem rgba(0, 0, 0, 0.03);
|
||||
@@ -213,7 +209,7 @@
|
||||
height: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
border-bottom: 2px dotted @surprise;
|
||||
border-bottom: 2px dotted var(--color-surprise);
|
||||
content: " ";
|
||||
display: block
|
||||
}
|
||||
@@ -228,6 +224,17 @@
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
grid-template-rows: @line-height-xs;
|
||||
|
||||
& > button {
|
||||
color: @hl;
|
||||
|
||||
.tag {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
& > .tag {
|
||||
}
|
||||
|
||||
& > * {
|
||||
height: 100%;
|
||||
}
|
||||
@@ -236,33 +243,31 @@
|
||||
grid-template-rows: @line-height-sm;
|
||||
}
|
||||
|
||||
& > button {
|
||||
opacity: @opacity-subtle;
|
||||
}
|
||||
|
||||
&.sidebar__item--active > button {
|
||||
opacity: 1;
|
||||
|
||||
.editable {
|
||||
line-height: @line-height-xs;
|
||||
height: 100%;
|
||||
color: var(--color-font);
|
||||
.tag {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Active sidebar request
|
||||
&.sidebar__item--request > button {
|
||||
border-left: @padding-xs solid transparent;
|
||||
}
|
||||
|
||||
&.sidebar__item--active.sidebar__item--request > button,
|
||||
&.sidebar__item--active > .sidebar__actions,
|
||||
&:hover > button,
|
||||
&:hover > .sidebar__actions,
|
||||
& > button:focus {
|
||||
background-color: @hl-xxs;
|
||||
}
|
||||
|
||||
&:hover > .sidebar__actions {
|
||||
background-color: @hl-xxs;
|
||||
}
|
||||
|
||||
&.sidebar__item--active:hover > .sidebar__actions,
|
||||
&:hover > button {
|
||||
background-color: @hl-xs;
|
||||
}
|
||||
|
||||
&.sidebar__item--active.sidebar__item--request > button {
|
||||
//border-left-color: @hl-xs;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding-left: 0;
|
||||
text-align: left;
|
||||
@@ -340,7 +345,7 @@
|
||||
|
||||
& > button:hover,
|
||||
& > .dropdown:hover > button {
|
||||
color: @font-dark-bg;
|
||||
color: var(--color-font);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@import '../constants/colors';
|
||||
@import '../constants/dimensions';
|
||||
|
||||
@border-color: @hl-md;
|
||||
@border-color: var(--hl-md);
|
||||
|
||||
.ReactTabs {
|
||||
width: 100%;
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
@import '../constants/dimensions';
|
||||
@import '../constants/colors';
|
||||
|
||||
.themes {
|
||||
.themes__row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: @padding-lg;
|
||||
}
|
||||
|
||||
.themes__theme {
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
margin: 0 @padding-md;
|
||||
|
||||
img {
|
||||
border: 1px solid @hl-md;
|
||||
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
|
||||
border-radius: @radius-md;
|
||||
}
|
||||
|
||||
&.themes__theme--locked {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
font-size: @font-size-md;
|
||||
text-transform: uppercase;
|
||||
color: @hl-xl;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&.themes__theme--locked::after {
|
||||
content: '\01f512';
|
||||
font-size: 2rem;
|
||||
opacity: 0.5;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&:not(.themes__theme--locked):hover::after {
|
||||
content: 'Activate';
|
||||
visibility: visible;
|
||||
transform: rotate(-15deg);
|
||||
mix-blend-mode: exclusion;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.themes__theme--locked:hover::after {
|
||||
content: 'Upgrade to Plus';
|
||||
visibility: visible;
|
||||
font-size: @font-size-md;
|
||||
transform: rotate(-15deg);
|
||||
mix-blend-mode: exclusion;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -9,8 +9,8 @@
|
||||
z-index: 100;
|
||||
bottom: @padding-md;
|
||||
right: @padding-md;
|
||||
background: @bg-light;
|
||||
color: @font-light-bg;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-font);
|
||||
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -28,7 +28,7 @@
|
||||
}
|
||||
|
||||
.toast__action {
|
||||
color: @surprise;
|
||||
color: var(--color-surprise);
|
||||
text-transform: uppercase;
|
||||
font-size: @font-size-sm;
|
||||
padding-left: @padding-md;
|
||||
|
||||
@@ -6,12 +6,10 @@
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: @font-size-xxl;
|
||||
|
||||
// HACK: Bump up the arrow a bit
|
||||
i.fa {
|
||||
font-size: @font-size-lg;
|
||||
position: relative;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
@import '../constants/colors';
|
||||
|
||||
.wrapper {
|
||||
background-color: @bg-super-dark;
|
||||
color: @font-super-dark-bg;
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-font);
|
||||
display: grid;
|
||||
|
||||
grid-template-rows: minmax(0, 0.5fr) minmax(0, 0.5fr);
|
||||
|
||||
+445
-119
@@ -1,194 +1,520 @@
|
||||
body,
|
||||
body[theme="default"] {
|
||||
--success: #92d237;
|
||||
--notice: #dfce50;
|
||||
--warning: #ff9402;
|
||||
--danger: #ff5b5a;
|
||||
--surprise: #a590ff;
|
||||
--info: #22c1ee;
|
||||
body {
|
||||
// Default Pretty Background Colors
|
||||
--color-success: #59a210;
|
||||
--color-notice: #ae9602;
|
||||
--color-warning: #d07502;
|
||||
--color-danger: #d04444;
|
||||
--color-surprise: #7d69cb;
|
||||
--color-info: #1c90b4;
|
||||
|
||||
--color-brand: #695eb8;
|
||||
--bg-brand: var(--color-brand);
|
||||
--bg-light: #eff0ed;
|
||||
--bg-super-light: #fff;
|
||||
--bg-dark: #2c2d29;
|
||||
--bg-super-dark: #252622;
|
||||
--bg-super-dark-overlay: rgba(37, 38, 34, 0.8);
|
||||
// Default Pretty Foreground Colors
|
||||
--color-font-success: #fff;
|
||||
--color-font-notice: #fff;
|
||||
--color-font-warning: #fff;
|
||||
--color-font-danger: #fff;
|
||||
--color-font-surprise: #fff;
|
||||
--color-font-info: #fff;
|
||||
|
||||
--font-light-bg: #444;
|
||||
--font-super-light-bg: #666;
|
||||
--font-dark-bg: #e0e0e0;
|
||||
--font-brand: #fff;
|
||||
--font-super-dark-bg: #ddd;
|
||||
--hl-xs: rgba(140, 140, 140, 0.1);
|
||||
--hl-sm: rgba(140, 140, 140, 0.2);
|
||||
--hl-md: rgba(140, 140, 140, 0.3);
|
||||
--hl-lg: rgba(140, 140, 140, 0.5);
|
||||
--hl-xl: rgba(140, 140, 140, 0.8);
|
||||
--hl: rgba(140, 140, 140, 1);
|
||||
|
||||
// Default Colors
|
||||
--color-bg: #fff;
|
||||
--color-font: #555;
|
||||
|
||||
.overlay {
|
||||
--color-bg: rgba(30, 30, 30, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
body[theme="dark"] {
|
||||
--success: #8bc936;
|
||||
--notice: #dfce50;
|
||||
--warning: #ff9402;
|
||||
--danger: #ff5b5a;
|
||||
--surprise: #a590ff;
|
||||
--info: #22c1ee;
|
||||
*[theme="default"] {
|
||||
--hl-xs: rgba(120, 120, 120, 0.1);
|
||||
--hl-sm: rgba(120, 120, 120, 0.2);
|
||||
--hl-md: rgba(120, 120, 120, 0.3);
|
||||
--hl-lg: rgba(120, 120, 120, 0.5);
|
||||
--hl-xl: rgba(120, 120, 120, 0.8);
|
||||
--hl: rgba(120, 120, 120, 1);
|
||||
|
||||
--bg-brand: #2a2b27;
|
||||
--bg-light: #2a2b27;
|
||||
--bg-super-light: #2a2b27;
|
||||
--bg-super-dark: #252622;
|
||||
--bg-dark: #252622;
|
||||
--bg-super-dark-overlay: rgba(37, 38, 34, 0.8);
|
||||
--color-success: #7fbe37;
|
||||
--color-notice: #d8c84d;
|
||||
--color-warning: #ec8702;
|
||||
--color-danger: #ee5655;
|
||||
--color-surprise: #a590ff;
|
||||
--color-info: #22c1ee;
|
||||
|
||||
--font-light-bg: #ccc;
|
||||
--font-super-light-bg: #ccc;
|
||||
--font-dark-bg: #ccc;
|
||||
--font-super-dark-bg: #ddd;
|
||||
--font-brand: #bbb;
|
||||
.sidebar__header {
|
||||
--color-bg: #695eb8;
|
||||
--color-font: #fff;
|
||||
}
|
||||
|
||||
.pane__header,
|
||||
.dropdown__menu,
|
||||
.modal {
|
||||
--color-bg: #fff;
|
||||
--color-font: #555;
|
||||
}
|
||||
|
||||
.modal {
|
||||
--color-success: #59a210;
|
||||
--color-notice: #ae9602;
|
||||
--color-warning: #d07502;
|
||||
--color-danger: #d04444;
|
||||
--color-surprise: #7d69cb;
|
||||
--color-info: #1c90b4;
|
||||
}
|
||||
|
||||
.modal__header {
|
||||
--color-bg: #eff0ed;
|
||||
--color-font: #444;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
--color-bg: #2e2f2b;
|
||||
--color-font: #e0e0e0;
|
||||
}
|
||||
|
||||
.request-pane,
|
||||
.response-pane {
|
||||
--color-bg: #282925;
|
||||
--color-font: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
body[theme="light"] {
|
||||
--success: #59a210;
|
||||
--notice: #ae9602;
|
||||
--warning: #d07502;
|
||||
--danger: #d04444;
|
||||
--surprise: #7d69cb;
|
||||
--info: #1c90b4;
|
||||
*[theme="purple"] {
|
||||
--color-bg: #fff;
|
||||
--color-font: #555;
|
||||
|
||||
--bg-brand: #f9f9f9;
|
||||
--bg-light: #fff;
|
||||
--bg-super-light: #f9f9f9;
|
||||
--bg-dark: #fff;
|
||||
--bg-super-dark: #fff;
|
||||
--bg-super-dark-overlay: rgba(255, 255, 255, 0.7);
|
||||
--color-success: #54ad00;
|
||||
--color-notice: #b59e00;
|
||||
--color-warning: #da7c02;
|
||||
--color-danger: #d04845;
|
||||
--color-surprise: #8570d2;
|
||||
--color-info: #0092bf;
|
||||
|
||||
--font-light-bg: #333;
|
||||
--font-super-light-bg: #333;
|
||||
--font-dark-bg: #333;
|
||||
--font-super-dark-bg: #333;
|
||||
--font-brand: #555;
|
||||
// Light Parts
|
||||
.request-pane,
|
||||
.response-pane,
|
||||
.dropdown__menu,
|
||||
.modal {
|
||||
--hl-xs: rgba(130, 130, 130, 0.05);
|
||||
--hl-sm: rgba(130, 130, 130, 0.2);
|
||||
--hl-md: rgba(130, 130, 130, 0.3);
|
||||
--hl-lg: rgba(130, 130, 130, 0.5);
|
||||
--hl-xl: rgba(130, 130, 130, 0.8);
|
||||
--hl: rgba(130, 130, 130, 1);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
--color-success: #a9ea6e;
|
||||
--color-notice: #ffdb02;
|
||||
--color-warning: #ffac49;
|
||||
--color-danger: #ff7472;
|
||||
--color-surprise: #c5bbff;
|
||||
--color-info: #75ddff;
|
||||
|
||||
--hl-xs: rgba(207, 190, 255, 0.1);
|
||||
--hl-sm: rgba(207, 190, 255, 0.2);
|
||||
--hl-md: rgba(207, 190, 255, 0.3);
|
||||
--hl-lg: rgba(207, 190, 255, 0.5);
|
||||
--hl-xl: rgba(207, 190, 255, 0.8);
|
||||
--hl: rgb(217, 204, 255);
|
||||
|
||||
--color-bg: #6d62c0;
|
||||
--color-font: #fff;
|
||||
}
|
||||
|
||||
.sidebar__header {
|
||||
--color-bg: #675cb5;
|
||||
--color-font: #eee;
|
||||
}
|
||||
|
||||
.pane {
|
||||
--color-bg: #fafaff;
|
||||
}
|
||||
|
||||
.pane__header {
|
||||
--color-bg: #f3f2fa;
|
||||
}
|
||||
|
||||
.dropdown__menu {
|
||||
--color-bg: #fff;
|
||||
--color-font: #666;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
--color-bg: rgba(243, 242, 250, 0.8);
|
||||
--color-font: #666;
|
||||
}
|
||||
}
|
||||
|
||||
@color-brand: var(--color-brand);
|
||||
*[theme="dark"] {
|
||||
--color-success: #72ad33;
|
||||
--color-notice: #d8c84d;
|
||||
--color-warning: #ec8702;
|
||||
--color-danger: #ee5655;
|
||||
--color-surprise: #a590ff;
|
||||
--color-info: #22c1ee;
|
||||
|
||||
/* Background Colors */
|
||||
--color-bg: #232421;
|
||||
--color-font: #ddd;
|
||||
|
||||
@bg-light: var(--bg-light);
|
||||
@bg-super-light: var(--bg-super-light);
|
||||
@bg-dark: var(--bg-dark);
|
||||
@bg-super-dark: var(--bg-super-dark);
|
||||
@bg-super-dark-overlay: var(--bg-super-dark-overlay);
|
||||
@bg-brand: var(--bg-brand);
|
||||
--hl-xs: rgba(120, 120, 120, 0.1);
|
||||
--hl-sm: rgba(120, 120, 120, 0.2);
|
||||
--hl-md: rgba(120, 120, 120, 0.3);
|
||||
--hl-lg: rgba(120, 120, 120, 0.5);
|
||||
--hl-xl: rgba(120, 120, 120, 0.8);
|
||||
--hl: rgba(120, 120, 120, 1);
|
||||
|
||||
.overlay {
|
||||
--color-bg: rgba(20, 20, 20, 0.8);
|
||||
}
|
||||
|
||||
.dropdown__menu,
|
||||
.modal {
|
||||
--color-bg: #282925;
|
||||
}
|
||||
|
||||
.sidebar__header {
|
||||
--color-font: #ccc;
|
||||
}
|
||||
|
||||
.dropdown__menu {
|
||||
--color-font: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
*[theme="light"] {
|
||||
--color-success: #59a210;
|
||||
--color-notice: #ae9602;
|
||||
--color-warning: #d07502;
|
||||
--color-danger: #d04444;
|
||||
--color-surprise: #7d69cb;
|
||||
--color-info: #1c90b4;
|
||||
|
||||
&,
|
||||
.dropdown {
|
||||
--color-bg: #fff;
|
||||
--color-font: #666;
|
||||
}
|
||||
|
||||
--hl-xs: rgba(160, 160, 160, 0.1);
|
||||
--hl-sm: rgba(160, 160, 160, 0.2);
|
||||
--hl-md: rgba(160, 160, 160, 0.3);
|
||||
--hl-lg: rgba(160, 160, 160, 0.5);
|
||||
--hl-xl: rgba(160, 160, 160, 0.8);
|
||||
--hl: rgba(160, 160, 160, 1);
|
||||
|
||||
.overlay {
|
||||
--color-bg: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.sidebar__header {
|
||||
--color-font: #666;
|
||||
}
|
||||
}
|
||||
|
||||
*[theme="solarized-light"] {
|
||||
--color-success: #859900;
|
||||
--color-notice: #b58900;
|
||||
--color-warning: #cb4b16;
|
||||
--color-danger: #dc322f;
|
||||
--color-surprise: #6c71c4;
|
||||
--color-info: #2aa198;
|
||||
|
||||
--color-bg: #fdf6e3;
|
||||
--color-font: #657b83;
|
||||
|
||||
--hl-xs: rgba(159, 167, 164, 0.1);
|
||||
--hl-sm: rgba(159, 167, 164, 0.2);
|
||||
--hl-md: rgba(142, 149, 146, 0.3);
|
||||
--hl-lg: rgba(142, 149, 146, 0.6);
|
||||
--hl-xl: rgba(142, 149, 146, 0.8);
|
||||
--hl: rgb(142, 149, 146);
|
||||
|
||||
.overlay {
|
||||
--color-bg: rgba(238, 231, 213, 0.8);
|
||||
}
|
||||
|
||||
.dropdown__menu,
|
||||
.modal {
|
||||
--color-bg: #fff8e5;
|
||||
}
|
||||
}
|
||||
|
||||
*[theme="solarized-dark"] {
|
||||
--color-success: #859900;
|
||||
--color-notice: #b58900;
|
||||
--color-warning: #cb4b16;
|
||||
--color-danger: #dc322f;
|
||||
--color-surprise: #6c71c4;
|
||||
--color-info: #2aa198;
|
||||
|
||||
--color-bg: #002b36;
|
||||
--color-font: #8ea0a2;
|
||||
|
||||
--hl-xs: rgba(91, 118, 133, 0.1);
|
||||
--hl-sm: rgba(91, 118, 133, 0.2);
|
||||
--hl-md: rgba(91, 118, 133, 0.3);
|
||||
--hl-lg: rgba(91, 118, 133, 0.6);
|
||||
--hl-xl: rgba(91, 118, 133, 0.8);
|
||||
--hl: rgb(91, 118, 133);
|
||||
|
||||
.overlay {
|
||||
--color-bg: rgba(0, 31, 41, 0.8);
|
||||
}
|
||||
|
||||
.dropdown__menu,
|
||||
.modal {
|
||||
--color-bg: #073642;
|
||||
}
|
||||
}
|
||||
|
||||
*[theme="material"] {
|
||||
--color-bg: #263238;
|
||||
--color-font: #e9eded;
|
||||
|
||||
--color-success: #80CBC4;
|
||||
--color-notice: #FFCB6B;
|
||||
--color-warning: #F77669;
|
||||
--color-danger: #ff5370;
|
||||
--color-surprise: #c792ea;
|
||||
--color-info: #82B1FF;
|
||||
|
||||
--hl-xs: rgba(114, 145, 143, 0.1);
|
||||
--hl-sm: rgba(114, 145, 143, 0.2);
|
||||
--hl-md: rgba(114, 145, 143, 0.3);
|
||||
--hl-lg: rgba(114, 145, 143, 0.6);
|
||||
--hl-xl: rgba(114, 145, 143, 0.8);
|
||||
--hl: rgb(114, 145, 143);
|
||||
|
||||
.overlay {
|
||||
--color-bg: rgba(29, 39, 44, 0.8);
|
||||
}
|
||||
|
||||
.tag {
|
||||
--color-success: #68a9a2;
|
||||
--color-notice: #e6b564;
|
||||
--color-warning: #e27164;
|
||||
--color-danger: #d64b66;
|
||||
--color-surprise: #b482d6;
|
||||
--color-info: #6c93d8;
|
||||
}
|
||||
|
||||
.modal > *,
|
||||
.dropdown__menu {
|
||||
--color-bg: #303c43;
|
||||
--color-font: #e9eded;
|
||||
}
|
||||
|
||||
.ReactTabs > *,
|
||||
.pane > *,
|
||||
.modal,
|
||||
.sidebar {
|
||||
--hl-xs: rgba(114, 145, 143, 0.0);
|
||||
--hl-sm: rgba(114, 145, 143, 0.0);
|
||||
--hl-md: rgba(114, 145, 143, 0.0);
|
||||
--hl-lg: rgba(114, 145, 143, 0.1);
|
||||
--hl-xl: rgba(114, 145, 143, 0.1);
|
||||
--hl: rgb(108, 138, 136);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
--color-bg: #1f2b31;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
button,
|
||||
.tag,
|
||||
.dropdown__menu,
|
||||
.CodeMirror,
|
||||
.pane__body,
|
||||
.modal__header,
|
||||
.sidebar__header,
|
||||
.form-control {
|
||||
--hl-xs: rgba(114, 145, 143, 0.05);
|
||||
--hl-sm: rgba(114, 145, 143, 0.1);
|
||||
--hl-md: rgba(114, 145, 143, 0.2);
|
||||
--hl-lg: rgba(114, 145, 143, 0.4);
|
||||
--hl-xl: rgba(114, 145, 143, 0.5);
|
||||
}
|
||||
|
||||
.pane__body,
|
||||
.pane__header,
|
||||
::-webkit-scrollbar-track,
|
||||
::-webkit-scrollbar-thumb {
|
||||
--hl-xs: rgba(114, 145, 143, 0.05);
|
||||
--hl-sm: rgba(114, 145, 143, 0.1);
|
||||
--hl-md: rgba(114, 145, 143, 0.15);
|
||||
--hl-lg: rgba(114, 145, 143, 0.2);
|
||||
--hl-xl: rgba(114, 145, 143, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
*[theme="solarized"] {
|
||||
--color-success: #859900;
|
||||
--color-notice: #b58900;
|
||||
--color-warning: #cb4b16;
|
||||
--color-danger: #dc322f;
|
||||
--color-surprise: #6c71c4;
|
||||
--color-info: #2aa198;
|
||||
|
||||
--color-bg: #fdf6e3;
|
||||
--color-font: #657b83;
|
||||
|
||||
--hl-xs: rgba(159, 167, 164, 0.1);
|
||||
--hl-sm: rgba(159, 167, 164, 0.2);
|
||||
--hl-md: rgba(142, 149, 146, 0.3);
|
||||
--hl-lg: rgba(142, 149, 146, 0.6);
|
||||
--hl-xl: rgba(142, 149, 146, 0.8);
|
||||
--hl: rgb(142, 149, 146);
|
||||
|
||||
.overlay {
|
||||
--color-bg: rgba(238, 231, 213, 0.8);
|
||||
}
|
||||
|
||||
.dropdown__menu,
|
||||
.modal {
|
||||
--color-bg: #fff8e5;
|
||||
--color-font: #657b83;
|
||||
}
|
||||
|
||||
.pane__header {
|
||||
--color-bg: #faf4e0;
|
||||
}
|
||||
|
||||
.sidebar__header {
|
||||
--color-bg: #073440;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
--color-bg: #073642;
|
||||
--color-font: #8ea0a2;
|
||||
|
||||
--hl-xs: rgba(91, 127, 143, 0.1);
|
||||
--hl-sm: rgba(91, 127, 143, 0.2);
|
||||
--hl-md: rgba(91, 127, 143, 0.3);
|
||||
--hl-lg: rgba(91, 127, 143, 0.6);
|
||||
--hl-xl: rgba(91, 127, 143, 0.8);
|
||||
--hl: rgb(98, 127, 143);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
*[theme="railscasts"] {
|
||||
--color-success: #a5c261;
|
||||
--color-notice: #ffc66d;
|
||||
--color-warning: #cc7833;
|
||||
--color-danger: #da4939;
|
||||
--color-surprise: #b6b3eb;
|
||||
--color-info: #6d9cbe;
|
||||
|
||||
--color-bg: #2b2b2b;
|
||||
--color-font: #e1deda;
|
||||
|
||||
.overlay {
|
||||
--color-bg: rgba(30, 30, 30, 0.8);
|
||||
}
|
||||
|
||||
.dropdown__menu,
|
||||
.modal {
|
||||
--color-bg: #323232;
|
||||
}
|
||||
}
|
||||
|
||||
@opacity-subtle: 0.7;
|
||||
|
||||
/* Font Colors */
|
||||
@font-light-bg: var(--font-light-bg);
|
||||
@font-super-light-bg: var(--font-super-light-bg);
|
||||
@font-dark-bg: var(--font-dark-bg);
|
||||
@font-brand: var(--font-brand);
|
||||
@font-super-dark-bg: var(--font-super-dark-bg);
|
||||
@font-link: var(--surprise);
|
||||
|
||||
@hl-xxxs: rgba(130, 130, 130, 0.04);
|
||||
@hl-xxs: rgba(130, 130, 130, 0.07);
|
||||
@hl-xs: rgba(130, 130, 130, 0.1);
|
||||
@hl-sm: rgba(130, 130, 130, 0.15);
|
||||
@hl-md: rgba(130, 130, 130, 0.25);
|
||||
@hl-lg: rgba(130, 130, 130, 0.35);
|
||||
@hl-xl: rgba(130, 130, 130, 0.5);
|
||||
@hl-xxl: rgba(130, 130, 130, 0.8);
|
||||
@hl: rgba(130, 130, 130, 1);
|
||||
|
||||
@success: var(--success);
|
||||
@notice: var(--notice);
|
||||
@warning: var(--warning);
|
||||
@danger: var(--danger);
|
||||
@surprise: var(--surprise);
|
||||
@info: var(--info);
|
||||
@hl-xs: var(--hl-xs);
|
||||
@hl-sm: var(--hl-sm);
|
||||
@hl-md: var(--hl-md);
|
||||
@hl-lg: var(--hl-lg);
|
||||
@hl-xl: var(--hl-xl);
|
||||
@hl: var(--hl);
|
||||
|
||||
[class^="http-method-"],
|
||||
[class*=" http-method-"] {
|
||||
// Default method color
|
||||
color: @font-dark-bg;
|
||||
color: var(--color-font);
|
||||
}
|
||||
|
||||
.success,
|
||||
.http-method-POST {
|
||||
color: @success !important;
|
||||
color: var(--color-success) !important;
|
||||
}
|
||||
|
||||
.notice,
|
||||
.http-method-PATCH {
|
||||
color: @notice !important;
|
||||
color: var(--color-notice) !important;
|
||||
}
|
||||
|
||||
.warning,
|
||||
.http-method-PUT {
|
||||
color: @warning !important;
|
||||
color: var(--color-warning) !important;
|
||||
}
|
||||
|
||||
.danger,
|
||||
.http-method-DELETE {
|
||||
color: @danger !important;
|
||||
color: var(--color-danger) !important;
|
||||
}
|
||||
|
||||
.info,
|
||||
.http-method-OPTIONS,
|
||||
.http-method-HEAD {
|
||||
color: @info !important;
|
||||
color: var(--color-info) !important;
|
||||
}
|
||||
|
||||
.surprise,
|
||||
.http-method-GET {
|
||||
color: @surprise !important;
|
||||
color: var(--color-surprise) !important;
|
||||
}
|
||||
|
||||
.boring {
|
||||
color: @font-super-light-bg !important;
|
||||
color: var(--color-font) !important;
|
||||
}
|
||||
|
||||
.bg-success,
|
||||
.bg-http-method-POST {
|
||||
background: @success !important;
|
||||
text-shadow: 0 0 0.05em @success;
|
||||
color: #fff !important;
|
||||
background: var(--color-success) !important;
|
||||
text-shadow: 0 0 0.05em var(--color-success);
|
||||
color: var(--color-font-success) !important;
|
||||
}
|
||||
|
||||
.bg-notice,
|
||||
.bg-http-method-PATCH {
|
||||
background: @notice !important;
|
||||
text-shadow: 0 0 0.05em @notice;
|
||||
color: #fff !important;
|
||||
background: var(--color-notice) !important;
|
||||
text-shadow: 0 0 0.05em var(--color-notice);
|
||||
color: var(--color-font-notice) !important;
|
||||
}
|
||||
|
||||
.bg-warning,
|
||||
.bg-http-method-PUT {
|
||||
background: @warning !important;
|
||||
text-shadow: 0 0 0.05em @warning;
|
||||
color: #fff !important;
|
||||
background: var(--color-warning) !important;
|
||||
text-shadow: 0 0 0.05em var(--color-warning);
|
||||
color: var(--color-font-warning) !important;
|
||||
}
|
||||
|
||||
.bg-danger,
|
||||
.bg-http-method-DELETE {
|
||||
background: @danger !important;
|
||||
text-shadow: 0 0 0.05em @danger;
|
||||
color: #fff !important;
|
||||
background: var(--color-danger) !important;
|
||||
text-shadow: 0 0 0.05em var(--color-danger);
|
||||
color: var(--color-font-danger) !important;
|
||||
}
|
||||
|
||||
.bg-info,
|
||||
.bg-http-method-OPTIONS,
|
||||
.bg-http-method-HEAD {
|
||||
background: @info !important;
|
||||
text-shadow: 0 0 0.05em @info;
|
||||
color: #fff !important;
|
||||
background: var(--color-info) !important;
|
||||
text-shadow: 0 0 0.05em var(--color-info);
|
||||
color: var(--color-font-info) !important;
|
||||
}
|
||||
|
||||
.bg-surprise,
|
||||
.bg-http-method-GET {
|
||||
background: @surprise !important;
|
||||
text-shadow: 0 0 0.05em @surprise;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.bg-brand {
|
||||
background-color: @color-brand;
|
||||
color: @font-brand;
|
||||
background: var(--color-surprise) !important;
|
||||
text-shadow: 0 0 0.05em var(--color-surprise);
|
||||
color: var(--color-font-surprise) !important;
|
||||
}
|
||||
+18
-17
@@ -19,26 +19,27 @@
|
||||
|
||||
/* Components */
|
||||
@import 'components/app';
|
||||
@import 'components/wrapper';
|
||||
@import 'components/requestswitcher';
|
||||
@import 'components/changelog';
|
||||
@import 'components/sidebar';
|
||||
@import 'components/pane';
|
||||
@import 'components/requestpane';
|
||||
@import 'components/urlbar';
|
||||
@import 'components/tag';
|
||||
@import 'components/banner';
|
||||
@import 'components/tabs';
|
||||
@import 'components/scrollbars';
|
||||
@import 'components/dropdown';
|
||||
@import 'components/modal';
|
||||
@import 'components/workspacedropdown';
|
||||
@import 'components/toast';
|
||||
@import 'components/cookieeditor';
|
||||
@import 'components/dropdown';
|
||||
@import 'components/editable';
|
||||
@import 'components/envmodal';
|
||||
@import 'components/headereditor';
|
||||
@import 'components/queryeditor';
|
||||
@import 'components/keyvalueeditor';
|
||||
@import 'components/editable';
|
||||
@import 'components/responsepane';
|
||||
@import 'components/methoddropdown';
|
||||
@import 'components/modal';
|
||||
@import 'components/pane';
|
||||
@import 'components/queryeditor';
|
||||
@import 'components/requestpane';
|
||||
@import 'components/requestswitcher';
|
||||
@import 'components/responsepane';
|
||||
@import 'components/scrollbars';
|
||||
@import 'components/sidebar';
|
||||
@import 'components/tabs';
|
||||
@import 'components/tag';
|
||||
@import 'components/themes';
|
||||
@import 'components/toast';
|
||||
@import 'components/urlbar';
|
||||
@import 'components/workspacedropdown';
|
||||
@import 'components/wrapper';
|
||||
@import 'components/overlay';
|
||||
+11
-11
@@ -78,7 +78,7 @@ table th {
|
||||
webview {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: @bg-super-light;
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
table {
|
||||
@@ -94,7 +94,7 @@ table {
|
||||
}
|
||||
|
||||
&.table--striped tbody tr:nth-child(odd) {
|
||||
background: @hl-xxs;
|
||||
background: @hl-xs;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -103,7 +103,7 @@ code {
|
||||
background: @hl-xs;
|
||||
padding: @padding-xs @padding-sm;
|
||||
color: @hl;
|
||||
border: 1px solid @hl-xxxs;
|
||||
border: 1px solid @hl-sm;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
@@ -113,18 +113,18 @@ code, pre, .monospace {
|
||||
|
||||
.notice {
|
||||
text-align: center;
|
||||
color: @font-light-bg !important;
|
||||
color: var(--color-font) !important;
|
||||
padding: @padding-sm * 1.5;
|
||||
border: 1px solid;
|
||||
border-radius: @radius-md;
|
||||
}
|
||||
|
||||
.notice.warning {
|
||||
border-color: @warning;
|
||||
border-color: var(--color-warning);
|
||||
}
|
||||
|
||||
.notice.info {
|
||||
border-color: @info;
|
||||
border-color: var(--color-info);
|
||||
}
|
||||
|
||||
.text-center {
|
||||
@@ -168,7 +168,7 @@ code, pre, .monospace {
|
||||
}
|
||||
|
||||
.super-faint {
|
||||
color: @hl-xxl;
|
||||
color: @hl-xl;
|
||||
}
|
||||
|
||||
.valign-bottom {
|
||||
@@ -383,6 +383,10 @@ i.fa {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--hl-lg);
|
||||
}
|
||||
|
||||
.hide-scrollbars {
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
@@ -423,10 +427,6 @@ i.fa {
|
||||
.section.section--bordered {
|
||||
.section__header {
|
||||
border-right: 1px solid #eee;
|
||||
|
||||
&.bg-brand {
|
||||
border-right-color: @bg-brand;
|
||||
}
|
||||
}
|
||||
|
||||
.section__body {
|
||||
|
||||
Reference in new issue
Block a user