CodeMirror/appwrite
1
0
Fork 0
mirror of synced 2024-05-29 17:09:48 +12:00
Code Issues Projects Releases Wiki Activity

Updated dark mode

Browse source
This commit is contained in:
Eldad Fux 2020-02-11 15:09:44 +02:00
parent b4c79b5d54
commit c2e601813b
10 changed files with 107 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/views/console/comps/header.phtml
View file

@ -35,6 +35,14 @@
</a>
</div>
<div class="pull-end margin-end">
<button data-general-theme class="link trans text-fade">
<i class="icon-sun-inv force-dark"></i>
<i class="icon-moon-inv force-light"></i>
</button>
</div>
<nav>
<a class="logo" href="/console"
data-analytics-event="click"

7
app/views/console/index.phtml
View file

@ -3,7 +3,12 @@ $home = $this->getParam('home', '');
?>
<div class="cover" style="background-size: 400px 400px; background-repeat: no-repeat;">
<div class="zone xl">
<div class="margin-top margin-bottom"><a href="/"><img src="/images/appwrite.svg" height="30" alt="Logo" /></a></div>
<div class="margin-top margin-bottom">
<a href="/">
<img src="/images/appwrite.svg" alt="Appwrite Light Logo" class="force-light" height="30" />
<img src="/images/appwrite-footer.svg" alt="Appwrite Dark Logo" class="force-dark" height="30" />
</a>
</div>
<h1 class="margin-bottom">Welcome to Appwrite Console</h1>

5
app/views/home/comps/header.phtml
View file

@ -3,9 +3,4 @@
<img src="/images/appwrite.svg" alt="Appwrite Light Logo" class="force-light" />
<img src="/images/appwrite-footer.svg" alt="Appwrite Dark Logo" class="force-dark" />
</a>
<button data-general-theme class="theme-button trans text-fade">
<i class="icon-sun-inv force-dark"></i>
<i class="icon-moon-inv force-light"></i>
</button>
</div>

2
public/dist/styles/default-ltr.css vendored
View file

File diff suppressed because one or more lines are too long

2
public/dist/styles/default-rtl.css vendored
View file

File diff suppressed because one or more lines are too long

2
public/styles/comps/box.less
View file

@ -114,7 +114,7 @@
.list {
li {
border-bottom: solid 2px var(--config-color-background);
border-bottom: solid 2px var(--config-border-color);
margin: 0 -30px 30px -30px;
padding: 0 30px 30px 30px;

60
public/styles/default.less
View file

@ -35,20 +35,47 @@
--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;
// 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: #1C2138;
--config-color-background-fade: #1c2138;
--config-color-background-focus: #1F253F;
--config-color-link: rgb(76, 174, 219);
--config-color-background: #1C2138;
--config-color-placeholder: #1F253F;
--config-color-focus: rgb(199, 216, 235);
--config-color-focus-fade: #8D91A9;
--config-color-focus-fade: #1e233e;
--config-color-focus-hover: #d3deea;
--config-color-focus-glow: #d3deea;
--config-color-focus-dark: #657586;
--config-color-normal: rgb(199, 216, 235);
--config-color-fade: #8D91A9;
--config-color-fade: #bec3e0;
--config-color-fade-light: rgb(24, 24, 24);
--config-color-fade-super: #262D50;
--config-color-danger: #d84a4a;
@ -65,6 +92,33 @@
--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);
// Console
--config-console-background: #1e233e;
--config-console-nav-start: #1c2038;
--config-console-nav-end: #121525;
--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>");
}
}

41
public/styles/dependencies/prism.less
View file

@ -27,56 +27,51 @@ https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clik
font-size: 10px;
.func-end(10px);
opacity: 0.95;
@media @dark {
background: var(--config-color-focus)!important;
color: var(--config-color-background)!important;
}
}
&[data-lang="bash"]::after {
background: #2b2626;
color: #fff;
background: var(--config-language-bash);
color: var(--config-language-bash-contrast);
}
&[data-lang="javascript"]::after {
background: #fff054;
color: #333232;
background: var(--config-language-javascript);
color: var(--config-language-javascript-contrast);
}
&[data-lang="html"]::after {
background: #ff895b;
color: #ffffff;
background: var(--config-language-html);
color: var(--config-language-html-contrast);
}
&[data-lang="php"]::after {
background: #6182bb;
color: #ffffff;
background: var(--config-language-php);
color: var(--config-language-php-contrast);
}
&[data-lang="nodejs"]::after {
background: #8cc500;
color: #373738;
background: var(--config-language-nodejs);
color: var(--config-language-nodejs-contrast);
}
&[data-lang="ruby"]::after {
background: #fc3f48;
color: #ffffff;
background: var(--config-language-ruby);
color: var(--config-language-ruby-contrast);
}
&[data-lang="python"]::after {
background: #3873a2;
color: #ffffff;
background: var(--config-python-javascript);
color: var(--config-language-python-contrast);
}
&[data-lang="go"]::after {
background: #00add8;
color: #ffffff;
background: var(--config-language-go);
color: var(--config-language-go-contrast);
}
&[data-lang="dart"]::after {
background: #035698;
color: #2bb1f0;
background: var(--config-language-dart);
color: var(--config-language-dart-contrast);
}
.tag {

5
public/styles/forms.less
View file

@ -122,6 +122,7 @@ button,
&.danger {
background: var(--config-color-danger);
color: #fff;
&.reverse {
color: var(--config-color-danger);
@ -289,7 +290,7 @@ input[type=url] {
select {
background: transparent;
-webkit-appearance: none;
background-image: 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>");
background-image: var(--config-console-nav-switch-arrow);
background-position: @config-end 15px top 50%;
background-repeat: no-repeat;
background-color: #fff;
@ -581,7 +582,7 @@ input[type=checkbox] {
}
.paging {
color: #8d8e8e;
color: var(--config-color-fade);
padding: 5px 15px;
font-size: 12px;

25
public/styles/scopes/console.less
View file

@ -14,8 +14,8 @@
.func-padding-end(50px);
.func-padding-start(270px);
margin: 0;
color: #4b4b4b;
background: #eceff1;
color: var(--config-color-normal);
background: var(--config-console-background);
.project-only {
display: none !important;
@ -73,7 +73,7 @@
height: 40px;
line-height: 40px;
padding: 15px 30px;
background: #fff;
background: var(--config-color-background-fade);
box-shadow: 0 0 2px rgba(0, 0, 0, .10);
margin: 0 -50px;
z-index: 2;
@ -95,8 +95,8 @@
padding-bottom: 0;
border: none;
border-radius: 26px;
background-color: #ececec;
color: #868686;
background-color: var(--config-console-nav-switch-background);
color: var(--config-console-nav-switch-color);
}
}
@ -138,8 +138,7 @@
nav {
//box-shadow: 0 0 2px rgba(0, 0, 0, .05);
background: #1b3445;
background: linear-gradient(rgb(19, 42, 59), rgb(48, 40, 57));
background: linear-gradient(#143650, #302839);
background: linear-gradient(var(--config-console-nav-start), var(--config-console-nav-end));
color: #788c99;
position: fixed;
height: 100%;
@ -281,7 +280,7 @@
margin-bottom: 0 !important;
a {
border-top: solid 1px #2a253a;
border-top: solid 1px var(--config-console-nav-border);
border-bottom: none;
}
}
@ -414,7 +413,7 @@
content: "";
display: block;
width: 2px;
background: #eceff1;
background: var(--config-console-background);
height: ~"calc(100% + 110px)";
position: absolute;
top: -20px;
@ -496,16 +495,16 @@
overflow: hidden;
//border-radius: 10px;
//padding-top: 15px;
background-color: #ffffff;
background-color: var(--config-color-background-fade);
background-image:
linear-gradient(transparent 1px, transparent 1px),
linear-gradient(90deg, transparent 1px, transparent 1px),
linear-gradient(rgb(241, 241, 241) 1px, transparent 1px),
linear-gradient(90deg, rgb(241, 241, 241) 1px, transparent 1px);
linear-gradient(var(--config-border-color) 1px, transparent 1px),
linear-gradient(90deg, var(--config-border-color) 1px, transparent 1px);
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
background-repeat: round;
border: solid 1px rgb(241, 241, 241);
border: solid 1px var(--config-border-color);
border-right: solid 1px transparent;
border-bottom: solid 1px transparent;