AboutSkin - cwtickle/danoniplus-docs GitHub Wiki
English | Japanese
| < Common setting file specification | CSS skin specification | Query parameter specification for work URL > |
CSS skin specification
- The following is a list of items that can be set in "danoni_skin_XXX.css" (where XXX is the skin name) in the "skin" folder.
- The configured skins will be stored in Common setting file specification and the chart settings: skinType.
List of Configurable Items
- Starting from ver33, it can be changed by specifying the custom property name directly.
In addition to specifying the property name in the skin css file, it is also possible to change it directly by specifying the custom property name in the chart settings.
- If the setting attribute is "background" or "border-image", gradient or image files can be used for color specification.
Gradient notation cannot be used for custom property names ending in "-x".
Background and title screen
|--background=45deg:#333399:#000000:#993333|
| Custom property name |
CSS style application destination |
Setting attribute |
Remarks |
| --back-border-x |
#canvas-frame |
border-color |
Default is #666666 |
| --background |
#divBack |
background |
|
| --back-chartDetail |
#scoreDetail |
background |
Chart detail child screenDefault is --background |
| --back-difListL |
#difCover |
background |
Chart selector screen (left side)Default is --background |
| --back-difListR |
#difList |
background |
Chart selector screen (right side)Default is --back-difListL |
| --title-base |
.title_base |
color |
|
| --title-dancing |
.settings_Title::first-letter |
background |
Before v32, color |
| --title-onigiri |
.settings_Title2::first-letter |
background |
Before v32, color |
| --title-star |
.settings_TitleStar::first-letter |
background |
Before v32, color |
| --title-display |
.settings_Display::first-letter |
background |
Before v32, color |
| --title-siz-x |
.settings_Title::first-letter.settings_Title2::first-letter.settings_TitleStar::first-letter.settings_Display::first-letter |
font-size |
|
Settings
|--settings-lifeVal-x=#ff6666|
|--settings-fadeinBar-x=#9999ff|
|--settings-bc-gaugeTable=#ffff99:#ff9999|
| Custom property name |
CSS style application destination |
Setting attribute |
Remarks |
| --settings-difficulty-x |
.settings_Difficulty::first-letter |
color |
|
| --settings-speed-x |
.settings_Speed::first-letter |
color |
|
| --settings-motion-x |
.settings_Motion::first-letter |
color |
|
| --settings-scroll-x |
.settings_Reverse::first-letter.settings_Scroll::first-letter |
color |
|
| --settings-shuffle-x |
.settings_Shuffle::first-letter |
color |
|
| --settings-autoPlay-x |
.settings_AutoPlay::first-letter |
color |
|
| --settings-gauge-x |
.settings_Gauge::first-letter |
color |
|
| --settings-adjustment-x |
.settings_Adjustment::first-letter |
color |
|
| --settings-fadein-x |
.settings_Fadein::first-letter |
color |
|
| --settings-volume-x |
.settings_Volume::first-letter |
color |
|
| --settings-appearance-x |
.settings_Appearance::first-letter |
color |
|
| --settings-opacity-x |
.settings_Opacity::first-letter |
color |
|
| --settings-hitPosition-x |
.settings_HitPosition::first-letter |
color |
|
| --settings-difSelector |
.settings_DifSelector |
background |
(Not available) |
| --settings-disabled-x |
.settings_Disabled |
color |
|
| --settings-fadeinBar-x |
.settings_FadeinBar |
color |
Fade-in setting character |
| --settings-lifeVal-x |
.settings_lifeVal |
color |
Variable display portion of gauge details |
| --settings-bc-gaugeTable |
.settings_gaugeDivCover |
border-image |
Border color of gauge details (gradation possible) |
| --settings-slice-gaugeTable |
.settings_gaugeDivCover |
border-image |
Border usage range for gauge details (border-image-slice) |
| --settings-border-gaugeTable-x |
.settings_gaugeDivCover |
border-image |
Setting of gauge details other than frame color and border-image-slice |
| --settings-maxArrowCnts-x |
.settings_maxArrowCnts |
color |
Color of the maximum number of arrows by lane in the chart details screen (DifLevel)(If not specified, colors of --common-uwan are applied.) |
| --settings-minArrowCnts-x |
.settings_minArrowCnts |
color |
Color of the minimum number of arrows by lane in the chart details screen (DifLevel)(If not specified, colors of --common-ii are applied.) |
KeyConfig
|--keyconfig-defaultkey-x=#ff99cc|
| Custom property name |
CSS style application destination |
Setting attribute |
Remarks |
| --keyconfig-warning-x |
.keyconfig_warning |
color |
|
| --keyconfig-imgType-x |
.keyconfig_ConfigType::first-letter |
color |
|
| --keyconfig-colorType-x |
.keyconfig_ColorType::first-letter |
color |
|
| --keyconfig-changekey-x |
.keyconfig_Changekey |
color |
|
| --keyconfig-defaultkey-x |
.keyconfig_Defaultkey |
color |
|
| --keyconfig-colorGr-x |
.keyconfig_ColorGr::first-letter |
color |
If not specified, colors of --keyconfig-colorType-x are applied. |
| --keyconfig-shuffleGr-x |
.keyconfig_ShuffleGr::first-letter |
color |
If not specified, colors of --settings-shuffle-x are applied. |
| --keyconfig-stepRtnGr-x |
.keyconfig_StepRtnGr::first-letter |
color |
If not specified, colors of --settings-adjustment-x are applied. |
Stepzone
|--main-stepKeyDown=#ff9999:#ffff99:#99ffff|
| Custom property name |
CSS style application destination |
Setting attribute |
Remarks |
| --main-stepKeyDown |
.main_stepKeyDown |
background |
|
| --main-stepDefault |
.main_stepDefault |
background |
|
| --main-stepDummy |
.main_stepDummy |
background |
|
| --main-stepIi |
.main_stepIi |
background |
At :D Perfect!! |
| --main-stepShakin |
.main_stepShakin |
background |
At :) Great! |
| --main-stepMatari |
.main_stepMatari |
background |
At :| Good |
| --main-stepShobon |
.main_stepShobon |
background |
At :( Bad |
| --main-stepExcessive |
.main_stepExcessive |
background |
|
| --main-objStepShadow |
.main_objStepShadow |
background |
|
| --main-objFrzShadow |
.main_objShadow |
background |
|
| --main-frzHitTop |
.main_frzHitTop |
background |
|
Life gauge
|--life-failed=#333333:#ff9999|
| Custom property name |
CSS style application destination |
Setting attribute |
Remarks |
| --life-max |
.life_Max |
background |
|
| --life-cleared |
.life_Cleared |
background |
|
| --life-failed |
.life_Failed |
background |
|
| --life-background |
.life_Background |
background |
|
| --life-bg-border |
.life_BorderColor |
background |
|
| --life-color-border-x |
.life_BorderColor |
color |
|
Judgment and Result
|--common-ii=pink|
|--result-bc-playwindow=#666666:#ffff99:#6666ff|
|--result-failed=180deg:#ff9999:#666666|
| Custom property name |
CSS style application destination |
Setting attribute |
Remarks |
| --result-lbl-x |
.result_lbl |
color |
|
| --result-style-x |
.result_style |
color |
|
| --common-ii |
.common_ii |
color |
Judgment display on result screenAt :D Perfect!! |
| --common-shakin |
.common_shakin |
color |
At :) Great! |
| --common-matari |
.common_matari |
color |
At :| Good |
| --common-shobon |
.common_shobon |
color |
At :( Bad |
| --common-uwan |
.common_uwan |
color |
At :_( Miss... |
| --common-kita |
.common_kita |
color |
At :) O.K. |
| --common-iknai |
.common_iknai |
color |
At :( N.G. |
| --common-combo |
.common_combo |
color |
|
| --common-score-x |
.common_score |
color |
|
| --common-comboJ |
.common_comboJ |
color |
Default is --common-kita |
| --common-comboFJ |
.common_comboFJ |
color |
Default is --common-ii |
| --common-diffFast |
.common_diffFast |
color |
Default is --common-matari |
| --common-diffSlow |
.common_diffSlow |
color |
Default is --common-shobon |
| --common-estAdj |
.common_estAdj |
color |
Default is --common-shakin |
| --common-excessive |
.common_excessive |
color |
Default is --common-kita |
| --result-bc-playwindow |
.result_PlayDataWindow |
border-image |
Color of play setting display frame on results screen (gradient possible) |
| --result-slice-playwindow-x |
.result_PlayDataWindow |
border-image |
Range of use of the play setting display frame on the results screen (border-image-slice) |
| --result-border-playwindow-x |
.result_PlayDataWindow |
border-image |
Play settings display frame color on the results screen, settings other than border-image-slice |
| --result-score-x |
.result_score |
color |
|
| --result-scoreHiBracket-x |
.result_scoreHiBlanket |
color |
High score difference (brackets) |
| --result-scoreHi-x |
.result_scoreHi |
color |
High score difference |
| --result-scoreHiPlus-x |
.result_scoreHiPlus |
color |
High score difference (at update) |
| --result-allPerfect |
.result_AllPerfect |
background |
Before v32, color |
| --result-perfect |
.result_Perfect |
background |
Before v32, color |
| --result-fullCombo |
.result_FullCombo |
background |
Before v32, color |
| --result-cleared |
.result_Cleared |
background |
Before v32, color |
| --result-failed |
.result_Failed |
background |
Before v32, color |
| --result-siz-window-x |
.result_Window::first-letter |
color |
|
Button (for Click Here)
| Custom property name |
CSS style application destination |
Setting attribute |
Remarks |
| --button-color-start-x |
.button_Start |
color |
|
| --button-bg-start |
.button_Start |
background |
|
| --button-colorHover-start-x |
.button_Start:hover |
color |
for hover |
| --button-bgHover-start |
.button_Start:hover |
background |
for hover |
Button (for common)
| Custom property name |
CSS style application destination |
Setting attribute |
Remarks |
| --button-color-default-x |
.button_Default |
color |
|
| --button-bg-default |
.button_Default |
background |
|
| --button-colorHover-default-x |
.button_Default:hover |
color |
for hover |
| --button-bgHover-default |
.button_Default:hover |
background |
for hover |
Button (for common, but default background is transparent)
| Custom property name |
CSS style application destination |
Setting attribute |
Remarks |
| --button-bg-defaultNo |
.button_Default_NoColor |
background |
|
| --button-bgHover-defaultNo |
.button_Default_NoColor:hover |
background |
for hover |
Button (for settings cursor)
| Custom property name |
CSS style application destination |
Setting attribute |
Remarks |
| --button-color-mini-x |
.button_Mini |
color |
|
| --button-bg-mini |
.button_Mini |
background |
|
| --button-colorHover-mini-x |
.button_Mini:hover |
color |
for hover |
| --button-bgHover-mini |
.button_Mini:hover |
background |
for hover |
Button (for back button)
| Custom property name |
CSS style application destination |
Setting attribute |
Remarks |
| --button-color-back-x |
.button_Back |
color |
|
| --button-bg-back |
.button_Back |
background |
|
| --button-colorHover-back-x |
.button_Back:hover |
color |
for hover |
| --button-bgHover-back |
.button_Back:hover |
background |
for hover |
Button (for settings button)
| Custom property name |
CSS style application destination |
Setting attribute |
Remarks |
| --button-color-setting-x |
.button_Setting |
color |
|
| --button-bg-setting |
.button_Setting |
background |
|
| --button-colorHover-setting-x |
.button_Setting:hover |
color |
for hover |
| --button-bgHover-setting |
.button_Setting:hover |
background |
for hover |
Button (for next button)
| Custom property name |
CSS style application destination |
Setting attribute |
Remarks |
| --button-color-next-x |
.button_Next |
color |
|
| --button-bg-next |
.button_Next |
background |
|
| --button-colorHover-next-x |
.button_Next:hover |
color |
for hover |
| --button-bgHover-next |
.button_Next:hover |
background |
for hover |
Button (for reset button)
| Custom property name |
CSS style application destination |
Setting attribute |
Remarks |
| --button-color-reset-x |
.button_Reset |
color |
|
| --button-bg-reset |
.button_Reset |
background |
|
| --button-colorHover-reset-x |
.button_Reset:hover |
color |
for hover |
| --button-bgHover-reset |
.button_Reset:hover |
background |
for hover |
Button (SNS link button)
| Custom property name |
CSS style application destination |
Setting attribute |
Remarks |
| --button-color-sns-x |
.button_Tweet |
color |
|
| --button-bg-sns |
.button_Tweet |
background |
|
| --button-colorHover-sns-x |
.button_Tweet:hover |
color |
for hover |
| --button-bgHover-sns |
.button_Tweet:hover |
background |
for hover |
| --button-bgHover-discord |
.button_Discord:hover |
background |
for hover (Discord link only) |
Button (for ON/OFF switch button)
| Custom property name |
CSS style application destination |
Setting attribute |
Remarks |
| --button-color-off-x |
.button_OFF |
color |
|
| --button-border-off-x |
.button_OFF |
border-color |
|
| --button-color-on-x |
.button_ON |
color |
|
| --button-border-on-x |
.button_ON |
border-color |
|
Button (for ON/OFF switch button, reverse or excessive settings)
| Custom property name |
CSS style application destination |
Setting attribute |
Remarks |
| --button-color-offRev-x |
.button_RevOFF |
color |
|
| --button-border-offRev-x |
.button_RevOFF |
border-color |
|
| --button-color-onRev-x |
.button_RevON |
color |
|
| --button-border-onRev-x |
.button_RevON |
border-color |
|
Button (for ON/OFF switch button, disabled button)
| Custom property name |
CSS style application destination |
Setting attribute |
Remarks |
| --button-color-offDisabled-x |
.button_DisabledOFF |
color |
|
| --button-border-offDisabled-x |
.button_DisabledOFF |
border-color |
|
| --button-color-onDisabled-x |
.button_DisabledON |
color |
|
| --button-border-onDisabled-x |
.button_DisabledON |
border-color |
|
Related pages
Changelog
| Version |
Change details |
| v36.4.1 |
- Added color (--button-bgHover-discord) when hovering Discord links. |
| v36.4.0 |
- Added keyconfig ColorGr./ShuffleGr./StepRtnGr. colors. (--keyconfig-colorGr-x, --keyconfig-shuffleGr-x, --keyconfig-stepRtnGr-x) |
| v34.5.1 |
- Added colors (--settings-maxArrowCnts-x, --settings-minArrowCnts-x) for maximum and minimum number of arrows by lane in chart detail screen (DifLevel). |
| v33.2.0 |
- Added overall screen border setting (--back-border-x). |
| v33.1.1 |
- The gradient designation has been dropped in the notation of the judgment system. |
| v33.0.0 |
- Implemented custom property name settings |
| v10.0.0 |
- Initial implementation |
| < Common setting file specification | CSS skin specification | Query parameter specification for work URL > |