Migrate Sampler stylesheet to SASS
This commit is contained in:
mkpaz
parent
909451fb8b
commit
de5a5795a6
4
pom.xml
4
pom.xml
@ -60,6 +60,7 @@
|
||||
|
||||
<java.version>17</java.version>
|
||||
<openjfx.version>17.0.0.1</openjfx.version>
|
||||
<sass.version>1.54.4</sass.version>
|
||||
|
||||
<app.name>AtlantaFX</app.name>
|
||||
<!-- DO NOT use ${project.version} as jpackage will fail on
|
||||
@ -197,6 +198,9 @@
|
||||
<groupId>us.hebi.sass</groupId>
|
||||
<artifactId>sass-cli-maven-plugin</artifactId>
|
||||
<version>1.0.1</version>
|
||||
<configuration>
|
||||
<sassVersion>1.54.5</sassVersion>
|
||||
</configuration>
|
||||
</plugin>
|
||||
<plugin>
|
||||
<groupId>org.apache.maven.plugins</groupId>
|
||||
|
||||
@ -136,6 +136,26 @@
|
||||
</resources>
|
||||
|
||||
<plugins>
|
||||
<!-- compile SCSS -->
|
||||
<plugin>
|
||||
<groupId>us.hebi.sass</groupId>
|
||||
<artifactId>sass-cli-maven-plugin</artifactId>
|
||||
<configuration>
|
||||
<args>
|
||||
<arg>src/main/resources/assets/styles/scss/index.scss:${project.build.directory}/classes/atlantafx/sampler/assets/styles/index.css</arg>
|
||||
<arg>--no-source-map</arg>
|
||||
</args>
|
||||
</configuration>
|
||||
<executions>
|
||||
<execution>
|
||||
<id>run-sass</id>
|
||||
<phase>generate-resources</phase>
|
||||
<goals>
|
||||
<goal>run</goal>
|
||||
</goals>
|
||||
</execution>
|
||||
</executions>
|
||||
</plugin>
|
||||
<plugin>
|
||||
<groupId>org.openjfx</groupId>
|
||||
<artifactId>javafx-maven-plugin</artifactId>
|
||||
|
||||
@ -31,7 +31,7 @@ module atlantafx.sampler {
|
||||
opens atlantafx.sampler.fake.domain;
|
||||
|
||||
// resources
|
||||
opens atlantafx.sampler.assets.fonts;
|
||||
opens atlantafx.sampler.assets;
|
||||
opens atlantafx.sampler.assets.highlightjs;
|
||||
opens atlantafx.sampler.assets.styles;
|
||||
}
|
||||
|
||||
@ -1,335 +0,0 @@
|
||||
/** SPDX-License-Identifier: MIT */
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 900;
|
||||
src: url('../fonts/Inter/Inter-Black.otf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 900;
|
||||
font-style: italic, oblique;
|
||||
src: url('../fonts/Inter/Inter-BlackItalic.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 800;
|
||||
src: url('../fonts/Inter/Inter-ExtraBold.otf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 800;
|
||||
font-style: italic, oblique;
|
||||
src: url('../fonts/Inter/Inter-ExtraBoldItalic.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 700;
|
||||
src: url('../fonts/Inter/Inter-Bold.otf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 700;
|
||||
font-style: italic, oblique;
|
||||
src: url('../fonts/Inter/Inter-BoldItalic.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 600;
|
||||
src: url('../fonts/Inter/Inter-SemiBold.otf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 600;
|
||||
font-style: italic, oblique;
|
||||
src: url('../fonts/Inter/Inter-SemiBoldItalic.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 500;
|
||||
src: url('../fonts/Inter/Inter-Medium.otf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 500;
|
||||
font-style: italic, oblique;
|
||||
src: url('../fonts/Inter/Inter-MediumItalic.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 400;
|
||||
src: url('../fonts/Inter/Inter-Regular.otf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 400;
|
||||
font-style: italic, oblique;
|
||||
src: url('../fonts/Inter/Inter-Italic.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 300;
|
||||
src: url('../fonts/Inter/Inter-Light.otf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 300;
|
||||
font-style: italic, oblique;
|
||||
src: url('../fonts/Inter/Inter-LightItalic.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 200;
|
||||
src: url('../fonts/Inter/Inter-ExtraLight.otf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 200;
|
||||
font-style: italic, oblique;
|
||||
src: url('../fonts/Inter/Inter-ExtraLightItalic.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 100;
|
||||
src: url('../fonts/Inter/Inter-Thin.otf') format('truetype');
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 100;
|
||||
font-style: italic, oblique;
|
||||
src: url('../fonts/Inter/Inter-ThinItalic.otf') format('truetype');
|
||||
}
|
||||
|
||||
.root {
|
||||
-fx-font-family: "Inter";
|
||||
}
|
||||
.root:showcase-mode #sidebar,
|
||||
.root:showcase-mode .page > .header {
|
||||
-fx-min-width: 0;
|
||||
-fx-pref-width: 0;
|
||||
-fx-max-width: 0;
|
||||
-fx-min-height: 0;
|
||||
-fx-pref-height: 0;
|
||||
-fx-max-height: 0;
|
||||
visibility: false;
|
||||
}
|
||||
.root:showcase-mode .page > .stack > .scroll-pane > .viewport > * > .wrapper > .user-content {
|
||||
-fx-max-width: 4096px;
|
||||
-fx-padding: 0;
|
||||
-fx-spacing: 0;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
-fx-padding: 0 0 12px 0;
|
||||
-fx-background-color: -color-bg-inset;
|
||||
-fx-border-color: -color-border-default;
|
||||
-fx-border-width: 0 1px 0 0;
|
||||
}
|
||||
#sidebar #search-form {
|
||||
-fx-padding: 12px;
|
||||
-fx-border-color: -color-border-muted;
|
||||
-fx-border-width: 0 0 1px 0;
|
||||
}
|
||||
#sidebar .nav-menu {
|
||||
-fx-padding: 0 6px 0 6px;
|
||||
}
|
||||
#sidebar .nav-menu > .caption {
|
||||
-fx-padding: 10px 0 10px 6px;
|
||||
-fx-font-weight: bold;
|
||||
-fx-text-fill: -color-fg-muted;
|
||||
}
|
||||
#sidebar .nav-menu > .nav-link {
|
||||
-fx-padding: 6px 12px 6px 12px;
|
||||
}
|
||||
#sidebar .nav-menu > .nav-link:hover {
|
||||
-fx-background-color: -color-accent-muted;
|
||||
-fx-background-radius: 6px;
|
||||
}
|
||||
#sidebar .nav-menu > .nav-link:selected {
|
||||
-fx-text-fill: -color-accent-fg;
|
||||
-fx-font-weight: bold;
|
||||
}
|
||||
#sidebar .nav-menu > .nav-link > .tag {
|
||||
-fx-background-color: -color-accent-emphasis;
|
||||
-fx-text-fill: -color-fg-emphasis;
|
||||
-fx-padding: 2px;
|
||||
-fx-background-radius: 4px;
|
||||
}
|
||||
|
||||
.page > .header {
|
||||
-fx-padding: 10px 20px 14px 20px;
|
||||
-fx-spacing: 10px;
|
||||
-fx-background-color: -color-bg-default;
|
||||
}
|
||||
.page > .stack > .scroll-pane {
|
||||
-fx-background-color: -color-bg-default;
|
||||
}
|
||||
/* wrapper is used to center the content and also guarantees some minimum paddings via min-width */
|
||||
.page > .stack > .scroll-pane > .viewport > * > .wrapper {
|
||||
-fx-min-width: 880px;
|
||||
-fx-alignment: TOP_CENTER;
|
||||
}
|
||||
.page > .stack > .scroll-pane > .viewport > * > .wrapper > .user-content {
|
||||
-fx-padding: 40px 0 40px 0;
|
||||
-fx-spacing: 40px;
|
||||
-fx-max-width: 800px;
|
||||
}
|
||||
.page > .stack > .wrapper {
|
||||
-fx-background-color: -color-bg-default;
|
||||
-fx-alignment: TOP_CENTER;
|
||||
}
|
||||
.page > .stack > .wrapper > .code-viewer {
|
||||
-fx-background-color: transparent;
|
||||
-fx-padding: 0px 0px 20px 20px;
|
||||
-fx-max-width: 1000px;
|
||||
}
|
||||
.page > .stack > .wrapper > .code-viewer > .web-view {
|
||||
-fx-background-color: transparent;
|
||||
}
|
||||
|
||||
.sample-block {
|
||||
-fx-spacing: 1em;
|
||||
}
|
||||
.sample-block>.title {
|
||||
-fx-font-weight: bold;
|
||||
}
|
||||
|
||||
#color-palette {
|
||||
-fx-spacing: 20px;
|
||||
/* mandatory, base bg color for flatten feature */
|
||||
-fx-background-color: -color-bg-default;
|
||||
}
|
||||
#color-palette > .header {
|
||||
-fx-pref-height: 40px;
|
||||
}
|
||||
#color-palette > .grid {
|
||||
-fx-vgap: 20px;
|
||||
-fx-hgap: 40px;
|
||||
}
|
||||
#color-palette > .grid > .color-block {
|
||||
-fx-spacing: 5px;
|
||||
}
|
||||
#color-palette > .grid > .color-block > .box {
|
||||
-fx-min-width: 12em;
|
||||
-fx-min-height: 5em;
|
||||
-fx-max-width: 12em;
|
||||
-fx-max-height: 5em;
|
||||
-fx-cursor: hand;
|
||||
}
|
||||
#color-palette > .grid > .color-block > .box > .wsag-label {
|
||||
-fx-text-fill: white;
|
||||
-fx-background-color: #ef5350;
|
||||
-fx-background-radius: 6px;
|
||||
-fx-padding: 3px;
|
||||
}
|
||||
#color-palette > .grid > .color-block > .box:passed > .wsag-label {
|
||||
-fx-background-color: #388e3c;
|
||||
}
|
||||
#color-palette > .grid > .color-block > .box > .wsag-label > .ikonli-font-icon {
|
||||
-fx-fill: white;
|
||||
-fx-icon-color: white;
|
||||
}
|
||||
|
||||
#color-palette > .contrast-checker-area {
|
||||
-fx-padding: 0 0 0 -20px;
|
||||
}
|
||||
#color-palette > .contrast-checker-area > .contrast-checker {
|
||||
-fx-background-color: -color-contrast-checker-bg;
|
||||
-fx-hgap: 40px;
|
||||
-fx-vgap: 20px;
|
||||
-fx-padding: 20px 20px 40px 20px;
|
||||
}
|
||||
#color-palette > .contrast-checker-area > .contrast-checker .label {
|
||||
-fx-text-fill: -color-contrast-checker-fg;
|
||||
}
|
||||
#color-palette > .contrast-checker-area > .contrast-checker .text-field {
|
||||
-fx-background-insets: 0;
|
||||
-fx-background-color: transparent;
|
||||
-fx-background-radius: 0;
|
||||
-fx-text-fill: -color-contrast-checker-fg;
|
||||
-fx-border-color: -color-contrast-checker-fg;
|
||||
-fx-border-width: 0 0 1 0;
|
||||
}
|
||||
#color-palette > .contrast-checker-area > .contrast-checker .button {
|
||||
-color-button-bg: -color-contrast-checker-fg-flat;
|
||||
-color-button-fg: -color-contrast-checker-bg-flat;
|
||||
-color-button-border: -color-contrast-checker-bg-flat;
|
||||
|
||||
-color-button-bg-hover: -color-contrast-checker-fg-flat;
|
||||
-color-button-fg-hover: -color-contrast-checker-bg-flat;
|
||||
-color-button-border-hover: -color-contrast-checker-bg-flat;
|
||||
|
||||
-color-button-bg-focused: -color-contrast-checker-fg-flat;
|
||||
-color-button-fg-focused: -color-contrast-checker-bg-flat;
|
||||
-color-button-border-focused: -color-contrast-checker-bg-flat;
|
||||
|
||||
-color-button-bg-pressed: -color-contrast-checker-bg-flat;
|
||||
-color-button-fg-pressed: -color-contrast-checker-fg-flat;
|
||||
-color-button-border-pressed: -color-contrast-checker-fg-flat;
|
||||
}
|
||||
#color-palette > .contrast-checker-area > .contrast-checker .ikonli-font-icon {
|
||||
-fx-icon-color: -color-contrast-checker-fg;
|
||||
-fx-fill: -color-contrast-checker-fg;
|
||||
}
|
||||
#color-palette > .contrast-checker-area > .contrast-checker .slider > .thumb {
|
||||
-fx-background-color: -color-contrast-checker-fg;
|
||||
}
|
||||
#color-palette > .contrast-checker-area > .contrast-checker .slider > .track {
|
||||
-fx-background-color: transparent, -color-contrast-checker-fg;
|
||||
-fx-opacity: 0.5;
|
||||
}
|
||||
#color-palette > .contrast-checker-area > .contrast-checker > .font-box > .text {
|
||||
-fx-font-size: 4em;
|
||||
}
|
||||
#color-palette > .contrast-checker-area > .contrast-checker > .font-box > .ratio {
|
||||
-fx-font-size: 2em;
|
||||
}
|
||||
#color-palette > .contrast-checker-area > .contrast-checker > .wsag-box > * > .wsag-label {
|
||||
-fx-padding: 0.5em 1em 0.5em 1em;
|
||||
-fx-background-color: #ef5350;
|
||||
-fx-background-radius: 6px;
|
||||
-fx-text-fill: white;
|
||||
}
|
||||
#color-palette > .contrast-checker-area > .contrast-checker > .wsag-box > * > .wsag-label > .ikonli-font-icon {
|
||||
-fx-fill: white;
|
||||
-fx-icon-color: white;
|
||||
}
|
||||
#color-palette > .contrast-checker-area > .contrast-checker > .wsag-box > * > .wsag-label:passed {
|
||||
-fx-background-color: #388e3c;
|
||||
}
|
||||
|
||||
#quick-config-menu {
|
||||
-fx-min-width: 200px;
|
||||
}
|
||||
#quick-config-menu .row {
|
||||
-fx-padding: 6px;
|
||||
-fx-background-radius: 4px;
|
||||
}
|
||||
#quick-config-menu .action:hover {
|
||||
/* FIXME: Not visible in some themes (subtle over subtle) */
|
||||
-fx-background-color: -color-bg-subtle;
|
||||
}
|
||||
#quick-config-menu .radio > .ikonli-font-icon {
|
||||
visibility: hidden;
|
||||
}
|
||||
#quick-config-menu .radio:selected > .ikonli-font-icon {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.popover .date-picker-popup {
|
||||
-fx-background-color: transparent;
|
||||
-fx-background-insets: 0;
|
||||
}
|
||||
|
||||
.bordered {
|
||||
-fx-border-width: 1px;
|
||||
-fx-border-color: -color-border-muted;
|
||||
}
|
||||
@ -0,0 +1,118 @@
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 900;
|
||||
src: url('../fonts/Inter/Inter-Black.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 900;
|
||||
font-style: italic, oblique;
|
||||
src: url('../fonts/Inter/Inter-BlackItalic.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 800;
|
||||
src: url('../fonts/Inter/Inter-ExtraBold.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 800;
|
||||
font-style: italic, oblique;
|
||||
src: url('../fonts/Inter/Inter-ExtraBoldItalic.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 700;
|
||||
src: url('../fonts/Inter/Inter-Bold.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 700;
|
||||
font-style: italic, oblique;
|
||||
src: url('../fonts/Inter/Inter-BoldItalic.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 600;
|
||||
src: url('../fonts/Inter/Inter-SemiBold.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 600;
|
||||
font-style: italic, oblique;
|
||||
src: url('../fonts/Inter/Inter-SemiBoldItalic.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 500;
|
||||
src: url('../fonts/Inter/Inter-Medium.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 500;
|
||||
font-style: italic, oblique;
|
||||
src: url('../fonts/Inter/Inter-MediumItalic.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 400;
|
||||
src: url('../fonts/Inter/Inter-Regular.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 400;
|
||||
font-style: italic, oblique;
|
||||
src: url('../fonts/Inter/Inter-Italic.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 300;
|
||||
src: url('../fonts/Inter/Inter-Light.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 300;
|
||||
font-style: italic, oblique;
|
||||
src: url('../fonts/Inter/Inter-LightItalic.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 200;
|
||||
src: url('../fonts/Inter/Inter-ExtraLight.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 200;
|
||||
font-style: italic, oblique;
|
||||
src: url('../fonts/Inter/Inter-ExtraLightItalic.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 100;
|
||||
src: url('../fonts/Inter/Inter-Thin.otf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
font-weight: 100;
|
||||
font-style: italic, oblique;
|
||||
src: url('../fonts/Inter/Inter-ThinItalic.otf') format('truetype');
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
@use "fonts";
|
||||
@use "root";
|
||||
@use "util";
|
||||
@ -0,0 +1,34 @@
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
@mixin hide() {
|
||||
-fx-min-width: 0;
|
||||
-fx-pref-width: 0;
|
||||
-fx-max-width: 0;
|
||||
-fx-min-height: 0;
|
||||
-fx-pref-height: 0;
|
||||
-fx-max-height: 0;
|
||||
visibility: false;
|
||||
}
|
||||
|
||||
.root {
|
||||
-fx-font-family: "Inter";
|
||||
|
||||
&:showcase-mode {
|
||||
|
||||
#sidebar {
|
||||
@include hide();
|
||||
}
|
||||
|
||||
.page {
|
||||
>.header {
|
||||
@include hide();
|
||||
}
|
||||
|
||||
>.stack>.scroll-pane>.viewport>*>.wrapper>.user-content {
|
||||
-fx-max-width: 4096px;
|
||||
-fx-padding: 0;
|
||||
-fx-spacing: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
.bordered {
|
||||
-fx-border-width: 1px;
|
||||
-fx-border-color: -color-border-muted;
|
||||
}
|
||||
5
sampler/src/main/resources/assets/styles/scss/index.scss
Normal file
5
sampler/src/main/resources/assets/styles/scss/index.scss
Normal file
@ -0,0 +1,5 @@
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
@use "general";
|
||||
@use "layout";
|
||||
@use "widgets";
|
||||
@ -0,0 +1,14 @@
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
.sample-block {
|
||||
-fx-spacing: 1em;
|
||||
|
||||
>.title {
|
||||
-fx-font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.popover .date-picker-popup {
|
||||
-fx-background-color: transparent;
|
||||
-fx-background-insets: 0;
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
@use "sidebar";
|
||||
@use "page";
|
||||
@use "components";
|
||||
@ -0,0 +1,42 @@
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
.page {
|
||||
>.header {
|
||||
-fx-padding: 10px 20px 14px 20px;
|
||||
-fx-spacing: 10px;
|
||||
-fx-background-color: -color-bg-default;
|
||||
}
|
||||
|
||||
>.stack {
|
||||
>.scroll-pane {
|
||||
-fx-background-color: -color-bg-default;
|
||||
|
||||
/* wrapper is used to center the content and also guarantees some minimum paddings via min-width */
|
||||
>.viewport>*>.wrapper {
|
||||
-fx-min-width: 880px;
|
||||
-fx-alignment: TOP_CENTER;
|
||||
|
||||
>.user-content {
|
||||
-fx-padding: 40px 0 40px 0;
|
||||
-fx-spacing: 40px;
|
||||
-fx-max-width: 800px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>.wrapper {
|
||||
-fx-background-color: -color-bg-default;
|
||||
-fx-alignment: TOP_CENTER;
|
||||
|
||||
>.code-viewer {
|
||||
-fx-background-color: transparent;
|
||||
-fx-padding: 0px 0px 20px 20px;
|
||||
-fx-max-width: 1000px;
|
||||
|
||||
>.web-view {
|
||||
-fx-background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
#sidebar {
|
||||
-fx-padding: 0 0 12px 0;
|
||||
-fx-background-color: -color-bg-inset;
|
||||
-fx-border-color: -color-border-default;
|
||||
-fx-border-width: 0 1px 0 0;
|
||||
|
||||
#search-form {
|
||||
-fx-padding: 12px;
|
||||
-fx-border-color: -color-border-muted;
|
||||
-fx-border-width: 0 0 1px 0;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
-fx-padding: 0 6px 0 6px;
|
||||
|
||||
>.caption {
|
||||
-fx-padding: 10px 0 10px 6px;
|
||||
-fx-font-weight: bold;
|
||||
-fx-text-fill: -color-fg-muted;
|
||||
}
|
||||
|
||||
>.nav-link {
|
||||
-fx-padding: 6px 12px 6px 12px;
|
||||
|
||||
>.tag {
|
||||
-fx-background-color: -color-accent-emphasis;
|
||||
-fx-text-fill: -color-fg-emphasis;
|
||||
-fx-padding: 2px;
|
||||
-fx-background-radius: 4px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
-fx-background-color: -color-accent-muted;
|
||||
-fx-background-radius: 6px;
|
||||
}
|
||||
|
||||
&:selected {
|
||||
-fx-text-fill: -color-accent-fg;
|
||||
-fx-font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,132 @@
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
$color-wsag-bg-passed: #388e3c;
|
||||
$color-wsag-bg-failed: #ef5350;
|
||||
$color-wsag-fg: white;
|
||||
|
||||
#color-palette {
|
||||
|
||||
-fx-spacing: 20px;
|
||||
-fx-background-color: -color-bg-default; // mandatory base bg for flatten color calc
|
||||
|
||||
>.header {
|
||||
-fx-pref-height: 40px;
|
||||
}
|
||||
|
||||
>.grid {
|
||||
-fx-vgap: 20px;
|
||||
-fx-hgap: 40px;
|
||||
|
||||
>.color-block {
|
||||
-fx-spacing: 5px;
|
||||
|
||||
>.box {
|
||||
-fx-min-width: 12em;
|
||||
-fx-min-height: 5em;
|
||||
-fx-max-width: 12em;
|
||||
-fx-max-height: 5em;
|
||||
-fx-cursor: hand;
|
||||
|
||||
&:passed>.wsag-label {
|
||||
-fx-background-color: $color-wsag-bg-passed;
|
||||
}
|
||||
|
||||
>.wsag-label {
|
||||
-fx-text-fill: $color-wsag-fg;
|
||||
-fx-background-color: $color-wsag-bg-failed;
|
||||
-fx-background-radius: 6px;
|
||||
-fx-padding: 3px;
|
||||
|
||||
>.ikonli-font-icon {
|
||||
-fx-fill: $color-wsag-fg;
|
||||
-fx-icon-color: $color-wsag-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>.contrast-checker-area {
|
||||
-fx-padding: 0 0 0 -20px;
|
||||
|
||||
>.contrast-checker {
|
||||
-fx-background-color: -color-contrast-checker-bg;
|
||||
-fx-hgap: 40px;
|
||||
-fx-vgap: 20px;
|
||||
-fx-padding: 20px 20px 40px 20px;
|
||||
|
||||
.label {
|
||||
-fx-text-fill: -color-contrast-checker-fg;
|
||||
}
|
||||
|
||||
.text-field {
|
||||
-fx-background-insets: 0;
|
||||
-fx-background-color: transparent;
|
||||
-fx-background-radius: 0;
|
||||
-fx-text-fill: -color-contrast-checker-fg;
|
||||
-fx-border-color: -color-contrast-checker-fg;
|
||||
-fx-border-width: 0 0 1 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
-color-button-bg: -color-contrast-checker-fg-flat;
|
||||
-color-button-fg: -color-contrast-checker-bg-flat;
|
||||
-color-button-border: -color-contrast-checker-bg-flat;
|
||||
|
||||
-color-button-bg-hover: -color-contrast-checker-fg-flat;
|
||||
-color-button-fg-hover: -color-contrast-checker-bg-flat;
|
||||
-color-button-border-hover: -color-contrast-checker-bg-flat;
|
||||
|
||||
-color-button-bg-focused: -color-contrast-checker-fg-flat;
|
||||
-color-button-fg-focused: -color-contrast-checker-bg-flat;
|
||||
-color-button-border-focused: -color-contrast-checker-bg-flat;
|
||||
|
||||
-color-button-bg-pressed: -color-contrast-checker-bg-flat;
|
||||
-color-button-fg-pressed: -color-contrast-checker-fg-flat;
|
||||
-color-button-border-pressed: -color-contrast-checker-fg-flat;
|
||||
}
|
||||
|
||||
.ikonli-font-icon {
|
||||
-fx-icon-color: -color-contrast-checker-fg;
|
||||
-fx-fill: -color-contrast-checker-fg;
|
||||
}
|
||||
|
||||
.slider {
|
||||
>.thumb {
|
||||
-fx-background-color: -color-contrast-checker-fg;
|
||||
}
|
||||
|
||||
>.track {
|
||||
-fx-background-color: transparent, -color-contrast-checker-fg;
|
||||
-fx-opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.font-box {
|
||||
>.text {
|
||||
-fx-font-size: 4em;
|
||||
}
|
||||
|
||||
>.ratio {
|
||||
-fx-font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
>.wsag-box>*>.wsag-label {
|
||||
-fx-padding: 0.5em 1em 0.5em 1em;
|
||||
-fx-background-color: $color-wsag-bg-failed;
|
||||
-fx-background-radius: 6px;
|
||||
-fx-text-fill: $color-wsag-fg;
|
||||
|
||||
&:passed {
|
||||
-fx-background-color: $color-wsag-bg-passed;
|
||||
}
|
||||
|
||||
>.ikonli-font-icon {
|
||||
-fx-fill: $color-wsag-fg;
|
||||
-fx-icon-color: $color-wsag-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
@use "color-palette";
|
||||
@use "quick-config-menu";
|
||||
@ -0,0 +1,23 @@
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
#quick-config-menu {
|
||||
-fx-min-width: 200px;
|
||||
|
||||
.row {
|
||||
-fx-padding: 6px;
|
||||
-fx-background-radius: 4px;
|
||||
}
|
||||
|
||||
.action:hover {
|
||||
// FIXME: Not visible in some themes (subtle over subtle)
|
||||
-fx-background-color: -color-bg-subtle;
|
||||
}
|
||||
|
||||
.radio>.ikonli-font-icon {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.radio:selected>.ikonli-font-icon {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
@ -13,7 +13,6 @@
|
||||
<properties>
|
||||
<scss.inputDir>${project.basedir}/src</scss.inputDir>
|
||||
<css.outputDir>${project.basedir}/dist</css.outputDir>
|
||||
<sass.version>1.54.4</sass.version>
|
||||
</properties>
|
||||
|
||||
<build>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user