dos e0008 styleData - cwtickle/danoniplus-docs GitHub Wiki

English | Japanese

^ Return to Screen effects specification

| < Background and style motion | CSS skin change | Arrow and freeze-arrow motion > |

CSS skin change (style_data)

Overview

Change the color and style of skin-related areas of the screen.

Usage & Specification

One set of three. Newline delimiters.

1. Normal Type

|style_data=
0,--background,-45deg:#993399:#000000:#993333
|
|styletitle_data=
100,--title-star,#9999ff
300,--background,#999999
500,--title-star,#ff9999
|
|styleresult_data=
0,--background,135deg:#339933:#000000:#999933
|
|stylefailedS_data=
0,--background,45deg:#339999:#000000:#999933
|

No	Logical name	Example	Description
1	Frame	200	Specifies the number of timing frames to be changed.
2	CSS-CustomProperty	--background	Specify the name of the CSS custom property.
3	Style	-45deg:#993399:#000000:#993333	Specify the CSS style to be applied. Gradients can also be used.

2. Quoting settings from other custom properties

|style_data=
0,--background,-45deg:#993399:#000000:#993333
700,--main-stepDefault,--background
|

No	Logical name	Example	Description
1	Frame	200	Specifies the number of timing frames to be changed.
2	CSS-CustomProperty	--background	Specify the name of the CSS custom property.
3	CSS-CustomProperty(Reference)	--common-ii	Specify the name of the CSS custom property to be quoted.

3. Comments

|styletitle_data=
0,"This is a comment."
|

No	Logical name	Example	Description
1	Frame	200	Specify the number of frames. Specification is optional.
2	Comment		Comment text can be freely entered.

4. Redirection of other preferences (Except for "Title")

|styleCross_data=styleRev_data|

No	Logical name	Example	Description
1	Data Name	styleRev_data	Specify the name of the CSS skin setting from which to copy.

Data Name Type

Background/style Motion can be specified in the same way.
Settings are divided by title, main, and result. Separate languages are also possible.

For normal usage

Display/Type	CSS skin change (language not specified)	CSS skin change (En)	CSS skin change (Ja)
Title	styletitle_data	styletitle_data	styletitleEn_data
Main(Normal)	style_data, style2_data, ...	styleEn_data, styleEn2_data, ...	styleJa_data, styleJa2_data, ...
Main(Reverse)	styleRev_data, styleRev2_data, ...	styleRevEn_data, styleRevEn2_data, ...	styleRevJa_data, styleRevJa2_data, ...
Main(Cross, Split etc.)	styleAlt_data, styleAlt2_data, ... styleCross_data, styleFlat_data, ...	styleAltEn_data, styleAltEn2_data, ... styleCrossEn_data, styleFlatEn_data, ...	styleAltJa_data, styleAltJa2_data, ... styleCrossJa_data, styleFlatJa_data, ...
Result(Cleared)	styleresult_data styleresult2_data ...	styleresultEn_data styleresultEn2_data ...	styleresultJa_data styleresultJa2_data ...
Result(Terminate midway)	stylefailedS_data stylefailedS2_data ...	stylefailedSEn_data stylefailedSEn2_data ...	stylefailedSJa_data stylefailedSJa2_data ...
Result(Quota failure)	stylefailedB_data stylefailedB2_data ...	stylefailedBEn_data stylefailedBEn2_data ...	stylefailedBJa_data stylefailedBJa2_data ...

For another key mode usage

Display/Type	CSS skin change (language not specified)	CSS skin change (En)	CSS skin change (Ja)
Main(Normal)	styleA_data, styleA2_data, ...	styleAEn_data, styleAEn2_data, ...	styleAJa_data, styleAJa2_data, ...
Main(Reverse)	styleRevA_data, styleRevA2_data, ...	styleRevAEn_data, styleRevAEn2_data, ...	styleRevAJa_data, styleRevAJa2_data, ...
Main(Cross, Split etc.)	styleAltA_data, styleAltA2_data, ... styleCrossA_data, styleFlatA_data, ...	styleAltAEn_data, styleAltAEn2_data, ... styleCrossAEn_data, styleFlatAEn_data, ...	styleAltAJa_data, styleAltAJa2_data, ... styleCrossAJa_data, styleFlatAJa_data, ...

If there is no specification for CSS skin change other than the title, for example, for the result of the second score (on quota failure), the following order is applied.

Priority	Applicable data	Meaning
1	stylefailedBJa2_data stylefailedBEn2_data	Second chart of result (quota failure, language specified)
2	stylefailedBJa_data stylefailedBEn_data	First chart of result (quota failure, language specified)
3	stylefailedB2_data	Second chart of result (quota failure, language not specified)
4	stylefailedB_data	First chart of result (quota failure, language not specified)
5	styleresultJa2_data styleresultEn2_data	Second chart of result (cleared, language specified)
6	styleresultJa_data styleresultEn_data	First chart of result (cleared, language specified)
7	styleresult2_data	Second chart of result (cleared, language not specified)
8	styleresult_data	First chart of result (cleared, language not specified)

Additional information

Starting from ver34.0.0, it is possible to specify by key types and by key patterns.

|transKey9A=$$9B$9C|

|style_data=...|         // Overall Common
|style2_data=...|        // Common to the 2nd chart
|styleEn2_data=...|      // Applicable to the 2nd chart, English mode only.
|styleAEn2_data=...|     // Applies only to the 2nd chart, English mode, and another key mode (9B, 9C)
|style<9C>En2_data=...|  // Applies only to the 2nd chart, English mode, and another key mode (9C)
|style<9A>En2_data=...|  // Applies only to the 2nd chart, English mode, and not another key mode (9A)
|style[2]En2_data=...|   // Applies only to the 2nd chart, English mode, and key pattern: 2

List of CSS custom properties and default values

Variables that are commented out are also available.
Initial values are commented out so that they can be overwritten by another set of values.
See CSS skin specification for the meaning of each variable (CSS custom property).
Gradients cannot be specified for those ending in -x.

:root {
	/* background */
	--background: linear-gradient(#000000, #222222);
	/* --back-chartDetail: var(--background); */
	/* --back-difListL: var(--background); */
	/* --back-difListR: var(--back-difListL, var(--background)); */

	/* common color of titles */
	--title-base: #cccccc;

	/* screen title colors */
	--title-dancing: #6666ff;
	--title-onigiri: #ff6666;
	--title-star: #ffff66;
	--title-display: #ffff66;

	/* Size on title screen */
	--title-siz-x: 40px;

	/* colors by settings */
	--settings-difficulty-x: #ff9999;
	--settings-speed-x: #ffff99;
	--settings-motion-x: #eeff99;
	--settings-scroll-x: #ddff99;
	--settings-shuffle-x: #99ff99;
	--settings-autoPlay-x: #99ffbb;
	--settings-gauge-x: #99ffdd;
	--settings-adjustment-x: #99ffff;
	--settings-fadein-x: #99eeff;
	--settings-volume-x: #99ddff;
	--settings-appearance-x: #cc99ff;
	--settings-opacity-x: #ee99ff;
	--settings-hitPosition-x: #ff99ff;

	/* Background of chart selection section */
	--settings-difselector: #111111;

	/* Color when setting disabled */
	--settings-disabled-x: #666666;

	/* Fadein bar */
	--settings-fadeinBar-x: #ffffff;

	/* gauge settings */
	--settings-lifeVal-x: #ff9966;

	/* gauge's border */
	--settings-bc-gaugeTable: #666666;
	--settings-slice-gaugeTable-x: 1;
	--settings-border-gaugeTable-x: 1px;

	/* related keyconfig */
	--keyconfig-warning-x: #ffff99;
	--keyconfig-imgType-x: #99ddff;
	--keyconfig-colorType-x: #ffdd99;
	--keyconfig-changekey-x: #ffff00;
	--keyconfig-defaultkey-x: #99ccff;

	/* judgment */
	--common-ii-x: #66ffff;
	--common-shakin-x: #99ff99;
	--common-matari-x: #ff9966;
	--common-shobon-x: #ccccff;
	--common-uwan-x: #ff9999;
	--common-kita-x: #ffff99;
	--common-iknai-x: #99ff66;
	--common-combo-x: #ffffff;
	--common-score-x: #ffffff;
	/* --common-comboJ: var(--common-kita); */
	/* --common-comboFJ: var(--common-ii); */
	/* --common-diffFast: var(--common-matari); */
	/* --common-diffSlow: var(--common-shobon); */
	/* --common-estAdj: var(--common-shakin); */
	/* --common-excessive: var(--common-kita); */

	/* stepzone */
	--main-stepKeyDown: #66ffff;
	--main-stepDefault: #999999;
	--main-stepDummy: #777777;
	--main-stepIi: var(--common-ii-x);
	--main-stepShakin: var(--common-shakin-x);
	--main-stepMatari: var(--common-matari-x);
	--main-stepShobon: var(--common-shobon-x);
	--main-stepExcessive: #ffff99;
	--main-objStepShadow: #000000;
	--main-objFrzShadow: #000000;
	--main-frzHitTop: #ffffff;

	/* lifegauge */
	--life-max: #444400;
	--life-cleared: #004444;
	--life-failed: #444444;

	/* lifegauge main */
	--life-background: #222222;
	--life-bg-border: #555555;
	--life-color-border-x: #cccccc;

	/* result screen */
	--result-lbl-x: #999999;
	--result-style-x: #cccccc;

	--result-bc-playwindow: #666666;
	--result-slice-playwindow-x: 1;
	--result-border-playwindow-x: 1px;

	--result-score-x: #ffffff;
	--result-scoreHiBracket-x: #999999;
	--result-scoreHi-x: #cccccc;
	--result-scoreHiPlus-x: #ffff99;
	--result-noRecord-x: #999999;

	--result-allPerfect: #ffffff;
	--result-perfect: #ffffcc;
	--result-fullCombo: #66ffff;
	--result-cleared: #ffff66;
	--result-failed: #ff6666;

	/* Size of text displaying Cleared/Failed on the results screen */
	--result-siz-window-x: 80px;

	/* Button */
	/* Click Here */
	--button-bg-start: #333333;
	--button-color-start-x: #ffffff;
	--button-bgHover-start: #666666;
	--button-colorHover-start-x: #ffffff;

	/* Common */
	--button-bg-default: #111111;
	--button-color-default-x: #ffffff;
	--button-bgHover-default: #666666;
	--button-colorHover-default-x: #ffffff;

	/* Common (Transparent background) */
	--button-bg-defaultNo: #00000000;
	--button-bgHover-defaultNo: #666666;

	/* Mini-button for setting */
	--button-bg-mini: #333333;
	--button-color-mini-x: #ffffff;
	--button-bgHover-mini: #999900;
	--button-colorHover-mini-x: #ffffff;

	/* Back button */
	--button-bg-back: #111133;
	--button-color-back-x: #cccccc;
	--button-bgHover-back: #000099;
	--button-colorHover-back-x: #cccccc;

	/* Settings button */
	--button-bg-setting: #333311;
	--button-color-setting-x: #ffffff;
	--button-bgHover-setting: #999900;
	--button-colorHover-setting-x: #ffffff;

	/* Play button */
	--button-bg-next: #331111;
	--button-color-next-x: #ffffff;
	--button-bgHover-next: #990000;
	--button-colorHover-next-x: #ffffff;

	/* Reset button */
	--button-bg-reset: #113311;
	--button-color-reset-x: #ffffff;
	--button-bgHover-reset: #009900;
	--button-colorHover-reset-x: #ffffff;

	/* SNS button */
	--button-bg-sns: #113333;
	--button-color-sns-x: #ffffff;
	--button-bgHover-sns: #009999;
	--button-colorHover-sns-x: #ffffff;

	/* ON/OFF button */
	--button-color-off-x: #666666;
	--button-border-off-x: #000000 #333333;
	--button-color-on-x: #ffffff;
	--button-border-on-x: #000000 #cccccc;

	/* ON/OFF button for Reverse */
	--button-color-offRev-x: #cccccc;
	--button-border-offRev-x: #000000 #999999;
	--button-color-onRev-x: #ffffff;
	--button-border-onRev-x: #000000 #ddff99;

	/* ON/OFF button for disabled */
	--button-bg-offDisabled: #333333;
	--button-color-offDisabled-x: #999999;
	--button-bg-onDisabled: #009999;
	--button-color-onDisabled-x: #ffffff;
}

Changelog

Version	Change details
v34.0.0	- Added the ability to combine individual scroll reversal settings while referencing data from other charts.
v33.0.0	- Initial implementation

| < Background and style motion | CSS skin change | Arrow and freeze-arrow motion > |

dos e0008 styleData - cwtickle/danoniplus-docs GitHub Wiki

CSS skin change (style_data)

Overview

Usage & Specification

1. Normal Type

2. Quoting settings from other custom properties

3. Comments

4. Redirection of other preferences (Except for "Title")

Data Name Type

For normal usage

For another key mode usage

Additional information

List of CSS custom properties and default values

Related pages

Changelog

⚠️ GitHub.com Fallback ⚠️

dos e0008 styleData - cwtickle/danoniplus-docs GitHub Wiki

CSS skin change (style_data)

Overview

Usage & Specification

1. Normal Type

2. Quoting settings from other custom properties

3. Comments

4. Redirection of other preferences (Except for "Title")

Data Name Type

For normal usage

For another key mode usage

Additional information

List of CSS custom properties and default values

Related pages

Changelog

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️