WIP theme selector
This commit is contained in:
JannisX11
parent
5f9bbb3714
commit
7c2abbfa8a
@ -520,10 +520,38 @@
|
||||
background-color: var(--color-back) !important;
|
||||
height: 56px;
|
||||
}
|
||||
.prism-editor-wrapper code[class*="language-"] {
|
||||
color: var(--color-text);
|
||||
}
|
||||
#css_editor {
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
#theme_list {
|
||||
overflow-y: auto;
|
||||
}
|
||||
#theme_list .theme {
|
||||
float: left;
|
||||
width: 166px;
|
||||
padding: 6px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
#theme_list .theme:hover {
|
||||
border-color: var(--color-border);
|
||||
color: var(--color-light);
|
||||
}
|
||||
#theme_list .theme.selected {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
#theme_list .theme_preview {
|
||||
height: 72px;
|
||||
width: 100%;
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
.theme_author {
|
||||
color: var(--color-subtle_text);
|
||||
}
|
||||
|
||||
/*About*/
|
||||
#about_page_title {
|
||||
vertical-align: top;
|
||||
|
||||
@ -522,7 +522,7 @@
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
background-color: var(--color-text);
|
||||
background-color: var(--color-bright_border);
|
||||
}
|
||||
.contextMenu li.highlighted {
|
||||
animation: menu_item_highlight 1s infinite ease-in-out;
|
||||
|
||||
@ -305,6 +305,7 @@
|
||||
--color-accent_text: #000006;
|
||||
--color-subtle_text: #848891;
|
||||
--color-bright_ui: #f4f3ff;
|
||||
--color-bright_border: var(--color-text);
|
||||
--color-grid: #495061;
|
||||
--color-checkerboard: #1c2026;
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
width: 100%;
|
||||
border: 2px solid var(--color-frame);
|
||||
border-top: none;
|
||||
background-color: var(--color-border);
|
||||
background-color: var(--color-dark);
|
||||
}
|
||||
#page_wrapper.invisible {
|
||||
visibility: hidden;
|
||||
@ -425,6 +425,7 @@
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding-left: 4px;
|
||||
background: var(--color-frame);
|
||||
}
|
||||
#tab_bar .project_tab {
|
||||
background-color: var(--color-back);
|
||||
|
||||
@ -376,7 +376,7 @@
|
||||
<header>
|
||||
<ul id="mac_window_menu" hidden></ul>
|
||||
<div id="corner_logo" class="app-drag-region">
|
||||
<img src="assets/logo_text_white.svg" />
|
||||
<img class="blockbench_logo" src="assets/logo_text_white.svg" />
|
||||
</div>
|
||||
<ul id="menu_bar" class="scroll_horizontal"></ul>
|
||||
<div class="app-drag-region" id="header_free_bar"></div>
|
||||
@ -415,7 +415,7 @@
|
||||
<i class="material-icons">{{ project.saved ? 'clear' : 'fiber_manual_record' }}</i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="new_tab_button" @click="openNewTab()" :title="new_tab.name">
|
||||
<div id="new_tab_button" v-if="!new_tab.visible" @click="openNewTab()" :title="new_tab.name">
|
||||
<i class="material-icons">add</i>
|
||||
</div>
|
||||
</div>
|
||||
@ -485,7 +485,7 @@
|
||||
v-for="mode in options"
|
||||
v-if="Condition(mode.condition)"
|
||||
v-bind:class="{selected: mode.selected}"
|
||||
v-on:click="mode.select()"
|
||||
v-on:mousedown="mode.select()"
|
||||
>{{ mode.name }}</li>
|
||||
</ul>
|
||||
<div class="toolbar_wrapper narrow mobile_side"></div>
|
||||
|
||||
@ -273,7 +273,7 @@ BARS.defineActions(() => {
|
||||
data() {return data},
|
||||
template: `
|
||||
<div>
|
||||
<div id="about_page_title">
|
||||
<div class="blockbench_logo" id="about_page_title">
|
||||
<img src="assets/logo_text_white.svg" width="240px">
|
||||
</div>
|
||||
<p><b>${tl('about.version')}</b> <span>{{ version_label }}</span></p>
|
||||
|
||||
@ -6,6 +6,16 @@ const CustomTheme = {
|
||||
css: '',
|
||||
colors: {},
|
||||
},
|
||||
theme_options: [
|
||||
{
|
||||
id: 'default',
|
||||
meta: {
|
||||
name: 'Default (dark)',
|
||||
|
||||
}
|
||||
},
|
||||
...CustomThemeOptions
|
||||
],
|
||||
defaultColors: {
|
||||
ui: '#282c34',
|
||||
back: '#21252b',
|
||||
@ -47,12 +57,12 @@ const CustomTheme = {
|
||||
]),
|
||||
sidebar: {
|
||||
pages: {
|
||||
//discover: tl('layout.discover'),
|
||||
select: tl('layout.select'),
|
||||
color: tl('layout.color'),
|
||||
fonts: tl('layout.fonts'),
|
||||
css: tl('layout.css'),
|
||||
},
|
||||
page: 'color',
|
||||
page: 'select',
|
||||
actions: [
|
||||
{
|
||||
name: 'layout.documentation',
|
||||
@ -74,7 +84,8 @@ const CustomTheme = {
|
||||
component: {
|
||||
data: {
|
||||
data: CustomTheme.data,
|
||||
open_category: 'color'
|
||||
open_category: 'select',
|
||||
theme_options: CustomTheme.theme_options
|
||||
},
|
||||
components: {
|
||||
VuePrismEditor
|
||||
@ -133,8 +144,16 @@ const CustomTheme = {
|
||||
},
|
||||
template: `
|
||||
<div id="theme_editor">
|
||||
<div v-if="open_category == 'discover'">
|
||||
<h2 class="i_b">${tl('layout.discover')}</h2>
|
||||
<div v-if="open_category == 'select'">
|
||||
<h2 class="i_b">${tl('layout.select')}</h2>
|
||||
|
||||
<div id="theme_list">
|
||||
<div v-for="theme in theme_options" class="theme">
|
||||
<div class="theme_preview"></div>
|
||||
<div class="theme_name">{{ theme.meta.name }}</div>
|
||||
<div class="theme_author">{{ theme.meta.author || 'Default' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="open_category == 'color'">
|
||||
<h2 class="i_b">${tl('layout.color')}</h2>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -9,3 +9,11 @@ window.KeymapPresets = {
|
||||
cinema4d,
|
||||
maya,
|
||||
}
|
||||
|
||||
import DarkTheme from './../themes/dark.bbtheme'
|
||||
import LightTheme from './../themes/light.bbtheme'
|
||||
|
||||
window.CustomThemeOptions = [
|
||||
DarkTheme,
|
||||
LightTheme
|
||||
]
|
||||
|
||||
28
themes/dark.bbtheme
Normal file
28
themes/dark.bbtheme
Normal file
@ -0,0 +1,28 @@
|
||||
{
|
||||
"id": "dark",
|
||||
"meta": {
|
||||
"name": "Default (Dark)"
|
||||
},
|
||||
"main_font": "",
|
||||
"headline_font": "",
|
||||
"code_font": "",
|
||||
"css": "",
|
||||
"colors": {
|
||||
"ui": "#282c34",
|
||||
"back": "#21252b",
|
||||
"dark": "#17191d",
|
||||
"border": "#181a1f",
|
||||
"selected": "#474d5d",
|
||||
"button": "#3a3f4b",
|
||||
"bright_ui": "#f4f3ff",
|
||||
"accent": "#3e90ff",
|
||||
"frame": "#181a1f",
|
||||
"text": "#cacad4",
|
||||
"light": "#f4f3ff",
|
||||
"accent_text": "#000006",
|
||||
"subtle_text": "#848891",
|
||||
"grid": "#495061",
|
||||
"wireframe": "#576f82",
|
||||
"checkerboard": "#1c2026"
|
||||
}
|
||||
}
|
||||
28
themes/light.bbtheme
Normal file
28
themes/light.bbtheme
Normal file
@ -0,0 +1,28 @@
|
||||
{
|
||||
"id": "light",
|
||||
"meta": {
|
||||
"name": "Default (Light)"
|
||||
},
|
||||
"main_font": "",
|
||||
"headline_font": "",
|
||||
"code_font": "",
|
||||
"css": ".checkerboard, .checkerboard_trigger .checkerboard_target {\n --color-checker_offset: rgba(0, 0, 0, 0.05);\n}\n.list {\n background-color: transparent;\n}\n#center {\n box-shadow: 0 0 12px inset #00000017;\n}\n#start_screen > content {\n box-shadow: 0 0 10px #0003;\n}\nbody {\n --color-close: #ff5062;\n --color-bright_border: var(--color-border);\n}\ndialog {\n box-shadow: 0 0px 6px rgb(0 0 0 / 48%);\n}\n.blockbench_logo {\n mix-blend-mode: difference;\n}\n",
|
||||
"colors": {
|
||||
"ui": "#ffffff",
|
||||
"back": "#f2f2f2",
|
||||
"dark": "#e6e6e6",
|
||||
"border": "#c8c8c8",
|
||||
"selected": "#ececec",
|
||||
"button": "#d5d5d5",
|
||||
"bright_ui": "#ffffff",
|
||||
"accent": "#579eff",
|
||||
"frame": "#d7d7d7",
|
||||
"text": "#343437",
|
||||
"light": "#111111",
|
||||
"accent_text": "#000006",
|
||||
"subtle_text": "#6b6d72",
|
||||
"grid": "#b0b2b8",
|
||||
"wireframe": "#8797a3",
|
||||
"checkerboard": "#eeeeee"
|
||||
}
|
||||
}
|
||||
@ -19,6 +19,10 @@ module.exports = {
|
||||
{
|
||||
test: /\.bbkeymap$/,
|
||||
type: 'json'
|
||||
},
|
||||
{
|
||||
test: /\.bbtheme$/,
|
||||
type: 'json'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user