mirror/blockbench
2
0
Fork 0
mirror of https://github.com/JannisX11/blockbench.git synced 2025-04-12 17:41:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Style improvements

Browse Source
This commit is contained in:
JannisX11 2025-04-05 23:12:36 +02:00
parent e9545422b6
commit 00508c07d7
10 changed files with 116 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
css/dialogs.css
View File

@ -369,6 +369,8 @@
flex-wrap: wrap;
gap: 2px;
flex-grow: 1;
border-radius: 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.form_inline_select > li {
height: 30px;
@ -378,6 +380,14 @@
background-color: var(--color-button);
text-align: center;
}
.form_inline_select > li:first-of-type {
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
}
.form_inline_select > li:last-of-type {
border-top-right-radius: inherit;
border-bottom-right-radius: inherit;
}
.form_inline_select > li:hover {
color: var(--color-light);
}
@ -385,6 +395,7 @@
background-color: var(--color-accent);
color: var(--color-accent_text);
cursor: default;
border-radius: inherit;
}
.form_bar_radio {
display: flex;
@ -854,16 +865,17 @@
}
#theme_list .theme {
float: left;
padding: 6px;
padding: 8px;
border: 2px solid transparent;
background-color: var(--color-back);
color: var(--color-text);
background-color: var(--color-elevated);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
cursor: pointer;
border-radius: 5px;
}
#theme_list .theme:hover {
border-color: var(--color-border);
color: var(--color-light);
background-color: var(--color-back);
background-color: var(--color-button);
}
#theme_list .theme.selected {
border-color: var(--color-accent);

5
css/panels.css
View File

@ -289,7 +289,9 @@
/*Display*/
.tabs_small input[type="radio"]:checked+label {
border-bottom: 3px solid var(--color-accent);
background-color: var(--color-accent);
color: var(--color-accent_text);
border-radius: 5px;
}
.tabs_small input[type="radio"] {
display: none;
@ -301,6 +303,7 @@
text-align: center;
flex-grow: 1;
overflow: hidden;
cursor: pointer;
}
#color .tabs_small label {
font-size: 1em;

4
css/spectrum.css
View File

@ -10,8 +10,6 @@ License: MIT
top:0;
left:0;
display:inline-block;
display: inline;
zoom: 1;
/* https://github.com/bgrins/spectrum/issues/40 */
z-index: 1;
overflow: hidden;
@ -246,7 +244,6 @@ License: MIT
/* Clearfix hack */
.sp-cf:before, .sp-cf:after { content: ""; display: table; }
.sp-cf:after { clear: both; }
.sp-cf { zoom: 1; }
body.is_touch .sp-fill { padding-top: 64%; }
@ -389,7 +386,6 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
padding: 6px;
height: 30px;
display:inline-block;
zoom: 1;
color: var(--color-text);
vertical-align: middle;
outline: none;

5
css/start_screen.css
View File

@ -406,6 +406,8 @@
#start_files li.format_category {
margin-top: 16px;
padding-left: 6px;
padding-right: 6px;
}
#start_files li.format_category > label {
color: var(--color-subtle_text);
@ -416,7 +418,8 @@
padding: 4px 0;
cursor: pointer;
font-size: 18px;
padding-left: 24px;
padding-left: 18px;
border-radius: 6px;
}
#start_files li.format_entry span.icon_wrapper {
height: 30px;

9
css/window.css
View File

@ -613,9 +613,9 @@
display: inline-block;
height: 30px;
overflow: hidden;
padding: 1px 7px;
padding: 2px 7px;
border-radius: 5px;
font-size: 1.2em;
font-size: 1.1em;
cursor: pointer;
}
#mode_selector li:hover {
@ -625,6 +625,9 @@
background-color: var(--color-accent);
color: var(--color-accent_text);
}
#mode_selector li > .icon {
vertical-align: text-bottom;
}
#update_menu .tool > .icon {
margin-top: 3px;
}
@ -978,7 +981,7 @@
width: 16px;
height: 16px;
margin: -8px;
border-radius: 50%;
border-radius: 5px;
z-index: 1;
text-align: center;
font-size: 12px;

7
index.html
View File

@ -4,7 +4,7 @@
<title>Blockbench</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#181a1f">
<meta name="theme-color" content="#121418">
<meta name="color-scheme" content="dark">
<meta name="robots" content="noindex">
<link rel="manifest" href="manifest.webmanifest">
@ -166,7 +166,10 @@
v-if="Condition(mode.condition)"
v-bind:class="{selected: mode.selected}"
v-on:mousedown="mode.select()"
>{{ mode.name }}</li>
>
<dynamic-icon :icon="mode.icon"></dynamic-icon>
{{ mode.name }}
</li>
</ul>
</div>

2
js/interface/themes.js
View File

@ -38,7 +38,7 @@ export const CustomTheme = {
button: '#3a3f4b',
bright_ui: '#f4f3ff',
accent: '#3e90ff',
frame: '#181a1f',
frame: '#121418',
text: '#cacad4',
light: '#f4f3ff',
accent_text: '#000006',

4
themes/contrast.bbtheme
View File

@ -6,7 +6,7 @@
"main_font": "",
"headline_font": "",
"code_font": "",
"css": "#mode_selector li {\n\tpadding: 2px 10px;\n}\n#mode_selector li.selected {\n\tbackground-color: var(--color-accent);\n\tcolor: var(--color-accent_text);\n}\n\n#tab_bar .project_tab.selected,\n.dialog_sidebar_pages li.selected,\n.tool.enabled\n{\n\tbackground-color: var(--color-accent) !important;\n\tcolor: var(--color-accent_text);\n}\n.contextMenu li {\n\theight: 34px;\n\tpadding-top: 6px;\n\tpadding-bottom: 6px;\n}\n.dialog_sidebar_pages li.selected {\n\tbackground-color: var(--color-accent) !important;\n\tcolor: var(--color-accent_text);\n}\n.dialog_handle {\n\tbackground: transparent;\n}\n#work_screen {\n\tgrid-template-rows: 31px minmax(200px, 5000px) 26px;\n}\n.controller_state_gate {\n\tbackground-color: var(--color-border);\n}\n.controller_state_title_bar {\n\tbackground-color: transparent;\n \tborder-bottom: 1px solid var(--color-border)\n}\n\n\n\n\n",
"css": "#mode_selector li {\n\tpadding: 2px 10px;\n}\n#mode_selector li.selected {\n\tbackground-color: var(--color-accent);\n\tcolor: var(--color-accent_text);\n}\n\n#tab_bar .project_tab.selected,\n.dialog_sidebar_pages li.selected,\n.tool.enabled\n{\n\tbackground-color: var(--color-accent) !important;\n\tcolor: var(--color-accent_text);\n}\n.contextMenu li {\n\theight: 34px;\n\tpadding-top: 6px;\n\tpadding-bottom: 6px;\n}\n.dialog_sidebar_pages li.selected {\n\tbackground-color: var(--color-accent) !important;\n\tcolor: var(--color-accent_text);\n}\n.dialog_handle {\n\tbackground: transparent;\n}\n.controller_state_gate {\n\tbackground-color: var(--color-border);\n}\n.controller_state_title_bar {\n\tbackground-color: transparent;\n \tborder-bottom: 1px solid var(--color-border)\n}\n\n\n\n\n",
"colors": {
"ui": "#17191d",
"back": "#17191d",
@ -16,7 +16,7 @@
"button": "#3a3f4b",
"bright_ui": "#17191d",
"accent": "#1b71d9",
"frame": "#181a1f",
"frame": "#121418",
"text": "#d0d0db",
"light": "#f4f3ff",
"accent_text": "#eeeef5",

77
themes/contrast.css.bbtheme Normal file
View File

@ -0,0 +1,77 @@
@bbtheme {
id: "contrast"
name: "Contrast"
author: "Default"
borders: true
}
@scope (#theme-thumbnail) {
}
body {
--theme-name: "Contrast";
--theme-id: "contrast";
--theme-author: "Default";
--theme-borders: true;
--color-ui: #17191d;
--color-back: #17191d;
--color-dark: #17191d;
--color-border: #9ea4b5;
--color-selected: #31525f;
--color-button: #3a3f4b;
--color-bright_ui: #17191d;
--color-accent: #1b71d9;
--color-frame: #121418;
--color-text: #d0d0db;
--color-light: #f4f3ff;
--color-accent_text: #eeeef5;
--color-bright_ui_text: #d0d0dd;
--color-subtle_text: #adb2bc;
--color-grid: #727683;
--color-wireframe: #5f96bc;
--color-checkerboard: #1c2026;
--font-main: arial;
--font-headline: arial;
--font-code: arial;
}
#mode_selector li {
padding: 2px 10px;
}
#mode_selector li.selected {
background-color: var(--color-accent);
color: var(--color-accent_text);
}
#tab_bar .project_tab.selected,
.dialog_sidebar_pages li.selected,
.tool.enabled
{
background-color: var(--color-accent) !important;
color: var(--color-accent_text);
}
.contextMenu li {
height: 34px;
padding-top: 6px;
padding-bottom: 6px;
}
.dialog_sidebar_pages li.selected {
background-color: var(--color-accent) !important;
color: var(--color-accent_text);
}
.dialog_handle {
background: transparent;
}
#work_screen {
grid-template-rows: 31px minmax(200px, 5000px) 26px;
}
.controller_state_gate {
background-color: var(--color-border);
}
.controller_state_title_bar {
background-color: transparent;
border-bottom: 1px solid var(--color-border)
}

2
themes/dark.bbtheme
View File

@ -15,7 +15,7 @@
"button": "#3a3f4b",
"bright_ui": "#f4f3ff",
"accent": "#3e90ff",
"frame": "#181a1f",
"frame": "#121418",
"text": "#cacad4",
"light": "#f4f3ff",
"accent_text": "#000006",