Updated UI for mobile
This commit is contained in:
Eldad Fux
parent
333ec49ee9
commit
340dc81eb2
|
|
@ -15,8 +15,21 @@
|
|||
data-failure="trigger"
|
||||
data-failure-param-trigger-events="account.deleteSession">
|
||||
|
||||
<h2><span class="number"><i class="icon-user"></i></span>Overview</h2>
|
||||
<div class="row responsive">
|
||||
<h2 class="margin-bottom"><span class="number"><i class="icon-user"></i></span>Overview</h2>
|
||||
|
||||
<div class="row responsive force-reverse">
|
||||
<div class="col span-3 text-align-center margin-bottom">
|
||||
<img src="" data-ls-attrs="src={{account|gravatar}}" data-size="200" height="150" alt="User Avatar" class="avatar huge huge margin-bottom-small" />
|
||||
|
||||
<br />
|
||||
|
||||
<a href="https://en.gravatar.com/gravatars/new/" rel="noopener" class="button margin-bottom-small" target="_blank"><i class="icon-upload"></i> Upload</a>
|
||||
|
||||
<br />
|
||||
|
||||
<small class="text-size-small">(via <a href="https://gravatar.com/" target="_blank" rel="noopener">gravatar.com <i class="icon-link-ext"></i></a>)</small>
|
||||
</div>
|
||||
|
||||
<div class="col span-9">
|
||||
<div class="box margin-bottom-xl">
|
||||
<div>
|
||||
|
|
@ -132,18 +145,6 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col span-3 text-align-center">
|
||||
<img src="" data-ls-attrs="src={{account|gravatar}}" data-size="200" height="150" alt="User Avatar" class="avatar huge huge margin-bottom-small" />
|
||||
|
||||
<br />
|
||||
|
||||
<a href="https://en.gravatar.com/gravatars/new/" rel="noopener" class="button margin-bottom-small" target="_blank"><i class="icon-upload"></i> Upload</a>
|
||||
|
||||
<br />
|
||||
|
||||
<small class="text-size-small">(via <a href="https://gravatar.com/" target="_blank" rel="noopener">gravatar.com <i class="icon-link-ext"></i></a>)</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row responsive">
|
||||
|
|
|
|||
|
|
@ -1,28 +1,29 @@
|
|||
<header class="clear">
|
||||
<a href="/console" class="logo">
|
||||
<a href="/console" class="logo pull-start">
|
||||
<img src="/images/appwrite.svg" alt="Appwrite Light Logo" class="force-light" />
|
||||
<img src="/images/appwrite-footer-dark.svg" alt="Appwrite Dark Logo" class="force-dark" />
|
||||
</a>
|
||||
|
||||
|
||||
<div class="list pull-start project-only">
|
||||
<label>
|
||||
<select
|
||||
data-xanalytics-event="change"
|
||||
data-xanalytics-category="console/header"
|
||||
data-xanalytics-label="Project Switch"
|
||||
data-switch
|
||||
data-ls-bind="{{router.params.project}}"
|
||||
data-unsync="1"
|
||||
data-ls-loop="projects" data-ls-as="option">
|
||||
<option data-ls-attrs="value={{option.$id}}" data-ls-bind="{{option.name}}"></option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="change-project pull-start">
|
||||
<div class="list project-only margin-end-small">
|
||||
<label class="margin-bottom-no">
|
||||
<select class="margin-bottom-no"
|
||||
data-xanalytics-event="change"
|
||||
data-xanalytics-category="console/header"
|
||||
data-xanalytics-label="Project Switch"
|
||||
data-switch
|
||||
data-ls-bind="{{router.params.project}}"
|
||||
data-unsync="1"
|
||||
data-ls-loop="projects" data-ls-as="option">
|
||||
<option data-ls-attrs="value={{option.$id}}" data-ls-bind="{{option.name}}"></option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button style="overflow: visible;" class="project-only setup-new tooltip round down" aria-label="Quick Start" data-tooltip="Create a new project"><i class="icon-plus"></i></button>
|
||||
</div>
|
||||
|
||||
<button style="overflow: visible;" class="project-only setup-new tooltip round down" aria-label="Quick Start" data-tooltip="Create a new project"><i class="icon-plus"></i></button>
|
||||
|
||||
<div class="account-box clear pull-end"
|
||||
<div class="account-box pull-end"
|
||||
data-service="account.get"
|
||||
data-name="account"
|
||||
data-scope="console"
|
||||
|
|
@ -32,7 +33,7 @@
|
|||
data-failure="trigger"
|
||||
data-failure-param-trigger-events="account.deleteSession">
|
||||
|
||||
<div class="pull-end console-back">
|
||||
<div class="console-back">
|
||||
<a href="/console">Back to Console <i class="icon-right-open"></i></a>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -133,7 +133,9 @@ $graph = $this->getParam('graph', false);
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<a data-ls-attrs="href=/console/keys?project={{router.params.project}}" class="pull-end">Manage Your API Keys</a>
|
||||
<div class="pull-end desktops-only tablets-only">
|
||||
<a data-ls-attrs="href=/console/keys?project={{router.params.project}}">Manage Your API Keys</a>
|
||||
</div>
|
||||
|
||||
<div class="drop-list pull-start" data-ls-ui-open="" data-button-text="Add Platform" data-button-class="button" data-blur="1" tabindex="1">
|
||||
<ul>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ $scopes = $this->getParam('scopes', []);
|
|||
<div class="box margin-bottom" data-ls-if="0 != {{console-keys.length}}">
|
||||
<ul data-ls-loop="console-keys" data-ls-as="key" class="list">
|
||||
<li class="clear">
|
||||
<div data-ui-modal class="modal box close" data-button-text="Update" data-button-class="pull-end">
|
||||
<div data-ui-modal class="modal box close" data-button-alias="none" data-open-event="key-update-{{key.$id}}">
|
||||
<button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
|
||||
|
||||
<h1>Update API Key</h1>
|
||||
|
|
@ -49,21 +49,21 @@ $scopes = $this->getParam('scopes', []);
|
|||
<label data-ls-attrs="for=name-{{key.$id}}">Name</label>
|
||||
<input type="text" class="full-width" data-ls-attrs="id=name-{{key.$id}}" name="name" required autocomplete="off" data-ls-bind="{{key.name}}" />
|
||||
|
||||
<label data-ls-attrs="for=scopes-{{key.$id}}">Scopes (<a href="/docs/keys" target="_blank">Learn More</a>)</label>
|
||||
<div class="row thin margin-bottom">
|
||||
<label data-ls-attrs="for=scopes-{{key.$id}}">Scopes (<a data-ls-attrs="href={{env.HOME}}/docs/keys" target="_blank">Learn More</a>)</label>
|
||||
<div class="row responsive thin">
|
||||
<?php foreach ($scopes as $i => $scope) : ?>
|
||||
<div class="col span-6">
|
||||
<div class="col span-6 text-one-liner margin-bottom text-height-large">
|
||||
<input type="checkbox" name="scopes" data-ls-bind="{{key.scopes}}" value="<?php echo $scope; ?>" /> <?php echo $scope; ?>
|
||||
</div>
|
||||
<?php if (($i + 1) % 2 === 0) : ?>
|
||||
</div>
|
||||
<div class="row thin margin-bottom">
|
||||
<div class="row responsive thin">
|
||||
<?php endif; ?>
|
||||
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<hr class="margin-top-no" />
|
||||
|
||||
<button type="submit">Save</button> <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
|
||||
</form>
|
||||
|
|
@ -75,7 +75,7 @@ $scopes = $this->getParam('scopes', []);
|
|||
data-analytics-label="Delete Project Key"
|
||||
data-service="projects.deleteKey"
|
||||
data-scope="console"
|
||||
data-event="submit"
|
||||
data-event="key-delete-{{key.$id}}"
|
||||
data-confirm="Are you sure you want to delete this API key?"
|
||||
data-success="alert,trigger"
|
||||
data-success-param-alert-text="Deleted API key successfully"
|
||||
|
|
@ -86,25 +86,31 @@ $scopes = $this->getParam('scopes', []);
|
|||
|
||||
<input type="hidden" name="projectId" data-ls-bind="{{router.params.project}}" />
|
||||
<input type="hidden" name="keyId" data-ls-bind="{{key.$id}}" />
|
||||
|
||||
<button class="reverse danger">Delete</button>
|
||||
</form>
|
||||
|
||||
<button class="pull-end desktops-only margin-start-small" data-ls-ui-trigger="key-update-{{key.$id}}">Update</button>
|
||||
<button class="pull-end reverse desktops-only margin-small" data-ls-ui-trigger="key-delete-{{key.$id}}">Delete</button>
|
||||
|
||||
<div class="margin-bottom-tiny"><span data-ls-bind="{{key.name}}"></span> <small>(<span data-ls-bind="{{key.scopes.length}}"></span> scopes granted)</small></div>
|
||||
|
||||
<div data-ui-modal class="modal close" data-button-text="Show Secret" data-button-class="link">
|
||||
<button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
|
||||
<div class="clear">
|
||||
<div data-ui-modal class="modal close" data-button-text="Show Secret" data-button-class="link pull-start margin-end-small margin-top-tiny">
|
||||
<button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
|
||||
|
||||
<h1>API Key Secret</h1>
|
||||
<h1>API Key Secret</h1>
|
||||
|
||||
<form>
|
||||
<div class="input-copy">
|
||||
<textarea disabled style="height: 130px; line-height: 26px" data-forms-copy data-ls-bind="{{key.secret}}"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
<form>
|
||||
<div class="input-copy">
|
||||
<textarea disabled style="height: 130px; line-height: 26px" data-forms-copy data-ls-bind="{{key.secret}}"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<button class="link pull-start tablets-only phones-only margin-end-small margin-top-tiny" data-ls-ui-trigger="key-update-{{key.$id}}">Update</button>
|
||||
<button class="link pull-start tablets-only phones-only margin-end-small margin-top-tiny text-danger" data-ls-ui-trigger="key-delete-{{key.$id}}">Delete</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -135,21 +141,21 @@ $scopes = $this->getParam('scopes', []);
|
|||
<label for="name">Name</label>
|
||||
<input type="text" class="full-width" id="name" name="name" required autocomplete="off" />
|
||||
|
||||
<label for="scopes">Scopes (<a href="/docs/keys" target="_blank">Learn More</a>)</label>
|
||||
<div class="row thin margin-bottom">
|
||||
<label for="scopes">Scopes (<a data-ls-attrs="href={{env.HOME}}/docs/keys" target="_blank">Learn More</a>)</label>
|
||||
<div class="row responsive thin">
|
||||
<?php foreach ($scopes as $i => $scope) : ?>
|
||||
<div class="col span-6">
|
||||
<div class="col span-6 text-one-liner margin-bottom text-height-large">
|
||||
<input type="checkbox" name="scopes" value="<?php echo $scope; ?>" /> <?php echo $scope; ?>
|
||||
</div>
|
||||
<?php if (($i + 1) % 2 === 0) : ?>
|
||||
</div>
|
||||
<div class="row thin margin-bottom">
|
||||
<div class="row responsive thin">
|
||||
<?php endif; ?>
|
||||
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<hr class="margin-top-no" />
|
||||
|
||||
<button type="submit">Create</button> <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -216,7 +216,7 @@ $customDomainsTarget = $this->getParam('customDomainsTarget', false);
|
|||
|
||||
<p>Add the following DNS records to your DNS provider settings to setup and verify your new custom domain.</p>
|
||||
|
||||
<ol>
|
||||
<ol class="bullets">
|
||||
<li>
|
||||
<p>Add a new CNAME record in your DNS providers settings to point your new subdomain to your <?php echo APP_NAME; ?> server with the following value:</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
|
||||
<div class="box y-scroll margin-bottom" data-ls-if="0 != {{console-tasks.length}}">
|
||||
<table class="full">
|
||||
<table class="full vertical">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="220">Name</th>
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
|
||||
<a data-ls-attrs="href={{task.httpUrl}}" data-ls-bind="{{task.httpUrl}}" target="_blank" class="text-one-liner"></a>
|
||||
</td>
|
||||
<td style="vertical-align: middle">
|
||||
<td data-title="" style="vertical-align: middle">
|
||||
<span data-ls-if="'play' === {{task.status}}">
|
||||
<span class="tag green"><i class="icon-play"></i> Running </span>
|
||||
</span>
|
||||
|
|
@ -53,17 +53,17 @@
|
|||
<span class="tag red"><i class="icon-pause"></i> Paused </span>
|
||||
</span>
|
||||
</td>
|
||||
<td style="vertical-align: middle">
|
||||
<td data-title="Next Run:" style="vertical-align: middle">
|
||||
<small data-ls-bind="{{task.next|date-time}}"></small>
|
||||
</td>
|
||||
<td style="vertical-align: middle">
|
||||
<div data-ls-if="undefined !== {{task.previous}}">
|
||||
<td data-title="Previous Run:" style="vertical-align: middle">
|
||||
<span data-ls-if="undefined !== {{task.previous}}">
|
||||
<small data-ls-bind="{{task.previous|date-time}}"></small>
|
||||
|
||||
<div data-ls-if="undefined !== {{task.delay}} && 59 < {{task.delay}}" class="text-danger margin-top-tiny">
|
||||
<span data-ls-if="undefined !== {{task.delay}} && 59 < {{task.delay}}" class="text-danger margin-top-tiny">
|
||||
<small data-ls-bind="({{task.delay|ms2hum}} Delay)"></small>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</span>
|
||||
<small data-ls-if="undefined === {{task.previous}}">
|
||||
None.
|
||||
</small>
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@
|
|||
data-event="submit"
|
||||
data-param-user-id="{{router.params.id}}"
|
||||
data-success="alert,trigger"
|
||||
data-success-param-alert-text="Activated Successfully"
|
||||
data-success-param-alert-text="Activated User Successfully"
|
||||
data-success-param-trigger-events="users.update"
|
||||
data-failure="alert"
|
||||
data-failure-param-alert-text="Failed to Activate User"
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ $litespeed = $this->getParam('litespeed', true);
|
|||
$analytics = $this->getParam('analytics', 'UA-26264668-9');
|
||||
$env = $this->getParam('env', '');
|
||||
$canonical = $this->getParam('canonical', '');
|
||||
$buster = 18; // For DEV env
|
||||
$buster = 33; // For DEV env
|
||||
|
||||
if(!empty($platforms)) {
|
||||
$platforms = array_map(function($platform) {
|
||||
|
|
|
|||
2
public/dist/styles/default-ltr.css
vendored
2
public/dist/styles/default-ltr.css
vendored
File diff suppressed because one or more lines are too long
2
public/dist/styles/default-rtl.css
vendored
2
public/dist/styles/default-rtl.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -30,7 +30,7 @@
|
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
|
||||
opacity: .95;
|
||||
|
||||
span {
|
||||
span, a {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -135,6 +135,12 @@
|
|||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.actions {
|
||||
@media @phones {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
.title {
|
||||
color: var(--config-color-focus);
|
||||
font-weight: 600;
|
||||
margin-bottom: 40px !important;
|
||||
margin-bottom: 50px !important;
|
||||
font-size: 28px;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@
|
|||
margin: 20px -30px;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
.bullets {
|
||||
.func-padding-start(40px);
|
||||
|
||||
li {
|
||||
|
|
|
|||
|
|
@ -56,11 +56,11 @@
|
|||
display: block;
|
||||
height: 2px;
|
||||
background: var(--config-color-focus);
|
||||
width: ~"calc(100% - 46px)";
|
||||
width: calc(100% + 6px);
|
||||
margin: 0 -3px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
border-radius: 2px;
|
||||
.func-start(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -70,14 +70,18 @@
|
|||
|
||||
li {
|
||||
.pull-start;
|
||||
.func-padding-end(50px);
|
||||
.func-margin-end(50px);
|
||||
color: var(--config-color-focus);
|
||||
opacity: .9;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media @phones {
|
||||
.func-margin-end(25px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,177 +1,17 @@
|
|||
:root {
|
||||
--config-width: 910px;
|
||||
--config-width-xxl: 1000px;
|
||||
--config-width-xl: 910px;
|
||||
--config-width-large: 700px;
|
||||
--config-width-medium: 550px;
|
||||
--config-width-small: 320px;
|
||||
--config-color-link: #1e849e;
|
||||
--config-color-background: #eceff1;
|
||||
--config-color-background-dark: #dfe2e4;
|
||||
--config-color-background-fade: #ffffff;
|
||||
--config-color-background-fade-super: #fdfdfd;
|
||||
--config-color-background-focus: #f5f5f5;
|
||||
--config-color-background-input: #ffffff;
|
||||
--config-color-placeholder: #868686;
|
||||
--config-color-tooltip-text: #dce8f5;
|
||||
--config-color-tooltip-background: #333333;
|
||||
--config-color-focus: #f02e65;
|
||||
--config-color-focus-fade: #fef8fa;
|
||||
--config-color-focus-hover: #ff729b;
|
||||
--config-color-focus-glow: #fce5ec;
|
||||
--config-color-focus-dark: #c52653;
|
||||
--config-color-normal: #40404c;
|
||||
--config-color-dark: #313131;
|
||||
--config-color-fade: #818181;
|
||||
--config-color-fade-light: #e2e2e2;
|
||||
--config-color-fade-super: #f1f3f5;
|
||||
--config-color-danger: #f53d3d;
|
||||
--config-color-success: #1bbf61;
|
||||
--config-color-warning: #ffed4d;
|
||||
--config-border-color: #f5f5f5;
|
||||
--config-border-radius: 10px;
|
||||
--config-prism-background: #373738;
|
||||
--config-prism-numbers: #39393c;
|
||||
--config-note-background: #f1fbff;
|
||||
--config-note-border: #5bceff;
|
||||
--config-warning-background: #fdf7d9;
|
||||
--config-warning-border: #f8e380;
|
||||
--config-social-twitter: #1da1f2;
|
||||
--config-social-github: #000000;
|
||||
--config-social-discord: #7189dc;
|
||||
--config-social-facebook: #4070b4;
|
||||
--config-language-bash: #2b2626;
|
||||
--config-language-bash-contrast: #fff;
|
||||
--config-language-javascript: #fff054;
|
||||
--config-language-javascript-contrast: #333232;
|
||||
--config-language-html: #ff895b;
|
||||
--config-language-html-contrast: #ffffff;
|
||||
--config-language-php: #6182bb;
|
||||
--config-language-php-contrast: #ffffff;
|
||||
--config-language-nodejs: #8cc500;
|
||||
--config-language-nodejs-contrast: #373738;
|
||||
--config-language-ruby: #fc3f48;
|
||||
--config-language-ruby-contrast: #ffffff;
|
||||
--config-language-python: #3873a2;
|
||||
--config-language-python-contrast: #ffffff;
|
||||
--config-language-go: #00add8;
|
||||
--config-language-go-contrast: #ffffff;
|
||||
--config-language-dart: #035698;
|
||||
--config-language-dart-contrast: #2bb1f0;
|
||||
--config-modal-note-background: #f5fbff;
|
||||
--config-modal-note-border: #eaf2f7;
|
||||
--config-modal-note-color: #3b5d73;
|
||||
--config-switch-background: #e2e2e2;
|
||||
|
||||
// Console
|
||||
--config-console-background: #eceff1;
|
||||
--config-console-nav-start: #143650;
|
||||
--config-console-nav-end: #302839;
|
||||
--config-console-nav-border: #2a253a;
|
||||
--config-console-nav-switch-background: #ececec;
|
||||
--config-console-nav-switch-color: #868686;
|
||||
--config-console-nav-switch-arrow: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23868686' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
|
||||
|
||||
.theme-dark {
|
||||
--config-color-background: #061F2F;
|
||||
--config-color-background-dark: #262d50;
|
||||
--config-color-background-fade: #1c223a;
|
||||
--config-color-background-fade-super: #1a1f35;
|
||||
--config-color-background-focus: #1a1f35;
|
||||
--config-color-background-input: #dce8f5;
|
||||
--config-color-tooltip-text: #061F2F;
|
||||
--config-color-tooltip-background: #dce8f5;
|
||||
--config-color-link: #4caedb;
|
||||
--config-color-placeholder: #9ea1af;
|
||||
--config-color-focus: #c7d8eb;
|
||||
--config-color-focus-fade: #1e233e;
|
||||
--config-color-focus-hover: #d3deea;
|
||||
--config-color-focus-glow: #d3deea;
|
||||
--config-color-focus-dark: #657586;
|
||||
--config-color-normal: #c7d8eb;
|
||||
--config-color-fade: #bec3e0;
|
||||
--config-color-fade-light: #181818;
|
||||
--config-color-fade-super: #262D50;
|
||||
--config-color-danger: #d84a4a;
|
||||
--config-color-success: #34b86d;
|
||||
--config-color-warning: #e0d56d;
|
||||
--config-border-color: #262D50;
|
||||
--config-prism-background: #1F253F;
|
||||
--config-prism-numbers: #1F253F;
|
||||
--config-note-background: #1F253F;
|
||||
--config-note-border: #262D50;
|
||||
--config-warning-background: #1F253F;
|
||||
--config-warning-border: #262D50;
|
||||
--config-social-twitter: var(--config-color-normal);
|
||||
--config-social-github: var(--config-color-normal);
|
||||
--config-social-discord: var(--config-color-normal);
|
||||
--config-social-facebook: var(--config-color-normal);
|
||||
--config-language-bash: var(--config-color-normal);
|
||||
--config-language-bash-contrast: var(--config-color-background);
|
||||
--config-language-javascript: var(--config-color-normal);
|
||||
--config-language-javascript-contrast: var(--config-color-background);
|
||||
--config-language-html: var(--config-color-normal);
|
||||
--config-language-html-contrast: var(--config-color-background);
|
||||
--config-language-php: var(--config-color-normal);
|
||||
--config-language-php-contrast: var(--config-color-background);
|
||||
--config-language-nodejs: var(--config-color-normal);
|
||||
--config-language-nodejs-contrast: var(--config-color-background);
|
||||
--config-language-ruby: var(--config-color-normal);
|
||||
--config-language-ruby-contrast: var(--config-color-background);
|
||||
--config-language-python: var(--config-color-normal);
|
||||
--config-language-python-contrast: var(--config-color-background);
|
||||
--config-language-go: var(--config-color-normal);
|
||||
--config-language-go-contrast: var(--config-color-background);
|
||||
--config-language-dart: var(--config-color-normal);
|
||||
--config-language-dart-contrast: var(--config-color-background);
|
||||
--config-modal-note-background: #15192b;
|
||||
--config-modal-note-border: #161b31;
|
||||
--config-modal-note-color: var(--config-color-normal);
|
||||
--config-switch-background: var(--config-color-normal);
|
||||
|
||||
// Console
|
||||
--config-console-background: #20263f;
|
||||
--config-console-nav-start: #1c2139;
|
||||
--config-console-nav-end: #151929;
|
||||
--config-console-nav-border: #171b30;
|
||||
--config-console-nav-switch-background: var(--config-color-focus);
|
||||
--config-console-nav-switch-color: var(--config-color-background);
|
||||
--config-console-nav-switch-arrow: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%231C2138' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
|
||||
}
|
||||
}
|
||||
|
||||
.theme-light {
|
||||
.force-light {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-dark {
|
||||
.force-dark {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.force-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.force-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@watch: ~"only screen and (max-width: 260px)";
|
||||
@phones: ~"only screen and (max-width: 550px)";
|
||||
@tablets: ~"only screen and (min-width: 551px) and (max-width: 1199)";
|
||||
@tablets: ~"only screen and (min-width: 551px) and (max-width: 1198px)";
|
||||
@desktops: ~"only screen and (min-width: 1199) and (max-width: 1300px)";
|
||||
@big-screens: ~"only screen and (min-width: 1200px)";
|
||||
@tvs: ~"only screen and (min-width: 1200px)";
|
||||
|
||||
img[src=""] {
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@import "themes";
|
||||
@import "functions";
|
||||
@import "responsive";
|
||||
@import "typography";
|
||||
@import "tabels";
|
||||
@import "grid";
|
||||
|
|
@ -204,10 +44,6 @@ body {
|
|||
background: var(--config-console-background) no-repeat fixed;
|
||||
}
|
||||
|
||||
main {
|
||||
//min-height: 100%;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -217,21 +53,3 @@ ul {
|
|||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.force-left {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.force-right {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.pull-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
|
@ -159,6 +159,24 @@
|
|||
margin-bottom: -100px!important;
|
||||
}
|
||||
|
||||
.force-left {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.force-right {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.pull-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.func-rotate(@value) {
|
||||
-webkit-transform: rotate(@value);
|
||||
-moz-transform: rotate(@value);
|
||||
|
|
|
|||
24
public/styles/responsive.less
Normal file
24
public/styles/responsive.less
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
|
||||
.phones-only {
|
||||
display: none;
|
||||
|
||||
@media @phones {
|
||||
display: inherit!important;
|
||||
}
|
||||
}
|
||||
|
||||
.tablets-only {
|
||||
display: none;
|
||||
|
||||
@media @tablets {
|
||||
display: inherit!important;
|
||||
}
|
||||
}
|
||||
|
||||
.desktops-only {
|
||||
display: none;
|
||||
|
||||
@media @desktops, @tvs {
|
||||
display: inherit!important;
|
||||
}
|
||||
}
|
||||
|
|
@ -724,7 +724,15 @@
|
|||
|
||||
@media @phones, @tablets {
|
||||
>header {
|
||||
display: none;
|
||||
width: ~"calc(100% - 30px)"!important;
|
||||
margin: 0 -30px;
|
||||
padding: 15px;
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
display: none!important;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
>footer {
|
||||
|
|
@ -734,9 +742,9 @@
|
|||
}
|
||||
|
||||
body {
|
||||
height: 100%!important;
|
||||
height: "calc(100% - 70px)"!important;
|
||||
width: ~"calc(100% - 60px)"!important;
|
||||
padding: 0 30px!important;
|
||||
padding: 70px 30px 0 30px!important;
|
||||
}
|
||||
|
||||
.cover {
|
||||
|
|
@ -744,6 +752,44 @@
|
|||
margin: 0 -30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media @phones {
|
||||
|
||||
body {
|
||||
height: "calc(100% - 70px)"!important;
|
||||
width: ~"calc(100% - 40px)"!important;
|
||||
padding: 70px 20px 0 20px!important;
|
||||
}
|
||||
|
||||
.cover {
|
||||
padding: 20px 20px;
|
||||
margin: 0 -20px;
|
||||
}
|
||||
|
||||
>header {
|
||||
margin: 0 -20px;
|
||||
|
||||
.list {
|
||||
width: 175px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.switch-theme {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.account {
|
||||
.name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>footer {
|
||||
margin: 50px -20px 0 -20px!important;
|
||||
padding: 0 20px 20px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dev-feature {
|
||||
|
|
|
|||
162
public/styles/themes.less
Normal file
162
public/styles/themes.less
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
:root {
|
||||
--config-width: 910px;
|
||||
--config-width-xxl: 1000px;
|
||||
--config-width-xl: 910px;
|
||||
--config-width-large: 700px;
|
||||
--config-width-medium: 550px;
|
||||
--config-width-small: 320px;
|
||||
--config-color-link: #1e849e;
|
||||
--config-color-background: #eceff1;
|
||||
--config-color-background-dark: #dfe2e4;
|
||||
--config-color-background-fade: #ffffff;
|
||||
--config-color-background-fade-super: #fdfdfd;
|
||||
--config-color-background-focus: #f5f5f5;
|
||||
--config-color-background-input: #ffffff;
|
||||
--config-color-placeholder: #868686;
|
||||
--config-color-tooltip-text: #dce8f5;
|
||||
--config-color-tooltip-background: #333333;
|
||||
--config-color-focus: #f02e65;
|
||||
--config-color-focus-fade: #fef8fa;
|
||||
--config-color-focus-hover: #ff729b;
|
||||
--config-color-focus-glow: #fce5ec;
|
||||
--config-color-focus-dark: #c52653;
|
||||
--config-color-normal: #40404c;
|
||||
--config-color-dark: #313131;
|
||||
--config-color-fade: #818181;
|
||||
--config-color-fade-light: #e2e2e2;
|
||||
--config-color-fade-super: #f1f3f5;
|
||||
--config-color-danger: #f53d3d;
|
||||
--config-color-success: #1bbf61;
|
||||
--config-color-warning: #ffed4d;
|
||||
--config-border-color: #f5f5f5;
|
||||
--config-border-radius: 10px;
|
||||
--config-prism-background: #373738;
|
||||
--config-prism-numbers: #39393c;
|
||||
--config-note-background: #f1fbff;
|
||||
--config-note-border: #5bceff;
|
||||
--config-warning-background: #fdf7d9;
|
||||
--config-warning-border: #f8e380;
|
||||
--config-social-twitter: #1da1f2;
|
||||
--config-social-github: #000000;
|
||||
--config-social-discord: #7189dc;
|
||||
--config-social-facebook: #4070b4;
|
||||
--config-language-bash: #2b2626;
|
||||
--config-language-bash-contrast: #fff;
|
||||
--config-language-javascript: #fff054;
|
||||
--config-language-javascript-contrast: #333232;
|
||||
--config-language-html: #ff895b;
|
||||
--config-language-html-contrast: #ffffff;
|
||||
--config-language-php: #6182bb;
|
||||
--config-language-php-contrast: #ffffff;
|
||||
--config-language-nodejs: #8cc500;
|
||||
--config-language-nodejs-contrast: #373738;
|
||||
--config-language-ruby: #fc3f48;
|
||||
--config-language-ruby-contrast: #ffffff;
|
||||
--config-language-python: #3873a2;
|
||||
--config-language-python-contrast: #ffffff;
|
||||
--config-language-go: #00add8;
|
||||
--config-language-go-contrast: #ffffff;
|
||||
--config-language-dart: #035698;
|
||||
--config-language-dart-contrast: #2bb1f0;
|
||||
--config-modal-note-background: #f5fbff;
|
||||
--config-modal-note-border: #eaf2f7;
|
||||
--config-modal-note-color: #3b5d73;
|
||||
--config-switch-background: #e2e2e2;
|
||||
|
||||
// Console
|
||||
--config-console-background: #eceff1;
|
||||
--config-console-nav-start: #143650;
|
||||
--config-console-nav-end: #302839;
|
||||
--config-console-nav-border: #2a253a;
|
||||
--config-console-nav-switch-background: #ececec;
|
||||
--config-console-nav-switch-color: #868686;
|
||||
--config-console-nav-switch-arrow: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23868686' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
|
||||
|
||||
.theme-dark {
|
||||
--config-color-background: #061F2F;
|
||||
--config-color-background-dark: #262d50;
|
||||
--config-color-background-fade: #1c223a;
|
||||
--config-color-background-fade-super: #1a1f35;
|
||||
--config-color-background-focus: #1a1f35;
|
||||
--config-color-background-input: #dce8f5;
|
||||
--config-color-tooltip-text: #061F2F;
|
||||
--config-color-tooltip-background: #dce8f5;
|
||||
--config-color-link: #4caedb;
|
||||
--config-color-placeholder: #9ea1af;
|
||||
--config-color-focus: #c7d8eb;
|
||||
--config-color-focus-fade: #1e233e;
|
||||
--config-color-focus-hover: #d3deea;
|
||||
--config-color-focus-glow: #d3deea;
|
||||
--config-color-focus-dark: #657586;
|
||||
--config-color-normal: #c7d8eb;
|
||||
--config-color-fade: #bec3e0;
|
||||
--config-color-fade-light: #181818;
|
||||
--config-color-fade-super: #262D50;
|
||||
--config-color-danger: #d84a4a;
|
||||
--config-color-success: #34b86d;
|
||||
--config-color-warning: #e0d56d;
|
||||
--config-border-color: #262D50;
|
||||
--config-prism-background: #1F253F;
|
||||
--config-prism-numbers: #1F253F;
|
||||
--config-note-background: #1F253F;
|
||||
--config-note-border: #262D50;
|
||||
--config-warning-background: #1F253F;
|
||||
--config-warning-border: #262D50;
|
||||
--config-social-twitter: var(--config-color-normal);
|
||||
--config-social-github: var(--config-color-normal);
|
||||
--config-social-discord: var(--config-color-normal);
|
||||
--config-social-facebook: var(--config-color-normal);
|
||||
--config-language-bash: var(--config-color-normal);
|
||||
--config-language-bash-contrast: var(--config-color-background);
|
||||
--config-language-javascript: var(--config-color-normal);
|
||||
--config-language-javascript-contrast: var(--config-color-background);
|
||||
--config-language-html: var(--config-color-normal);
|
||||
--config-language-html-contrast: var(--config-color-background);
|
||||
--config-language-php: var(--config-color-normal);
|
||||
--config-language-php-contrast: var(--config-color-background);
|
||||
--config-language-nodejs: var(--config-color-normal);
|
||||
--config-language-nodejs-contrast: var(--config-color-background);
|
||||
--config-language-ruby: var(--config-color-normal);
|
||||
--config-language-ruby-contrast: var(--config-color-background);
|
||||
--config-language-python: var(--config-color-normal);
|
||||
--config-language-python-contrast: var(--config-color-background);
|
||||
--config-language-go: var(--config-color-normal);
|
||||
--config-language-go-contrast: var(--config-color-background);
|
||||
--config-language-dart: var(--config-color-normal);
|
||||
--config-language-dart-contrast: var(--config-color-background);
|
||||
--config-modal-note-background: #15192b;
|
||||
--config-modal-note-border: #161b31;
|
||||
--config-modal-note-color: var(--config-color-normal);
|
||||
--config-switch-background: var(--config-color-normal);
|
||||
|
||||
// Console
|
||||
--config-console-background: #20263f;
|
||||
--config-console-nav-start: #1c2139;
|
||||
--config-console-nav-end: #151929;
|
||||
--config-console-nav-border: #171b30;
|
||||
--config-console-nav-switch-background: var(--config-color-focus);
|
||||
--config-console-nav-switch-color: var(--config-color-background);
|
||||
--config-console-nav-switch-arrow: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%231C2138' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
|
||||
}
|
||||
}
|
||||
|
||||
.theme-light {
|
||||
.force-light {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-dark {
|
||||
.force-dark {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.force-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.force-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -75,11 +75,11 @@ small {
|
|||
}
|
||||
|
||||
.text-danger {
|
||||
color: var(--config-color-danger);
|
||||
color: var(--config-color-danger)!important;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: var(--config-color-success)
|
||||
color: var(--config-color-success)!important;
|
||||
}
|
||||
|
||||
.text-upper {
|
||||
|
|
|
|||
Loading…
Reference in a new issue