メトロアプリのデフォルトのCSSクラス

メトロアプリを構築するときに使用するデフォルトのCSSスタイルシートを探していました。私は、新しいMetroスタイルアプリケーションを作成するときに、Blendのdevプレビューに含まれる2つのデフォルトCSSファイルについていくつか読んでいます。残念ながら、私はWin8のデベロッパープレビューを実行していないし、現時点では私もそれを設定する場所がありません。メトロアプリのデフォルトのCSSクラス

プレビューを実行しているユーザーがとても親切であればいいですか？ Blendを開くだけで、新しいMetroスタイルのアプリケーションを作成し、2つのファイル（ui-light.css、ui-dark.css）がテンプレートに含まれていることが分かります。また、http://www.timmykokke.com/2011/09/discovering-expression-blendstyles/を参照してください。

出典

2011-10-08 Jasper

デベロッパー向けプレビュー版では、サンプルギャラリーでオンラインでCSSを閲覧できます。http://code.msdn.microsoft.com/windowsapps/Fragments-91f66b07/sourcecode?fileId=43749&pathId=934384843

ただし、最新のWindows 8コンシューマプレビューとVisual Studioベータ版をダウンロードしてください。

出典

2012-03-01 21:20:08 Andy

Windows 8 App Theme color (theme roller) exampleを強くお勧めします。これで、色の束を設定することで簡単に独自のテーマをロールバックし、デフォルトのCSSクラスを簡単に表示できるCSSファイルを提供します。

これは色のクラスのみを提供しますが、Windows 8のクラス名を理解するには良いスタートです。

例：my Windows 8 gameの場合は、ゲームスタイルと少し良く一致するオレンジ色のテーマが必要でした。これはテーマローラーの例で、私は自分自身でいくつか修正した結果です：

/*WinJS custom style overrides - created with http://code.msdn.microsoft.com/windowsapps/Theme-roller-sample-64b679f2 
    settings: 
    1: 255, 182, 56 
    2: 0,0,0 
    3: 255, 165, 0 
    4: 255,255,255 

    removed link color overrides 
    */ 


/* 
Text selection color 
*/ 
::selection, select:focus::-ms-value { 
    background-color: rgb(255, 165, 0); 
    color: rgb(255, 255, 255); 
} 

/* 
Option control color 
*/ 
option:checked { 
    background-color: rgb(255, 165, 0); 
    color: rgb(255, 255, 255); 
} 

    option:checked:hover, select:focus option:checked:hover { 
     background-color: rgb(255, 177, 33); 
     color: rgb(255, 255, 255); 
    } 

/* 
Button control colors. 
*/ 
button[type=submit], input[type=submit] { 
    background-color: rgb(255, 165, 0); 
    border-color: rgb(255, 165, 0); 
    color: rgb(255, 255, 255); 
} 

    button[type=submit]:hover, input[type=submit]:hover { 
     background-color: rgb(255, 177, 33); 
     border-color: rgb(255, 177, 33); 
    } 

/* 
Range control colors. 
*/ 
input[type=range]::-ms-fill-lower { 
    background-color: rgb(255, 165, 0); 
} 

input[type=range]:hover::-ms-fill-lower { 
    background-color: rgb(255, 177, 33); 
} 

/* 
Progress control colors. 
*/ 
progress, progress:indeterminate { 
    color: rgb(255, 165, 0); 
} 

/* 
ListView control colors. 
*/ 
.win-listview .win-container.win-selected:hover { 
    background-color: rgb(255, 177, 33); 
} 

.win-listview .win-selected { 
    color: rgb(255, 255, 255); 
} 

.win-dragoverlay { 
    background-color: rgb(255, 165, 0); 
} 

.win-container.win-selected .win-selectionborder { 
    border: 4px solid rgb(255, 165, 0); 
} 

.win-container.win-selected:hover .win-selectionborder { 
    border: 4px solid rgb(255, 177, 33); 
} 

.win-selected .win-selectionbackground { 
    background-color: rgb(255, 165, 0); 
} 

.win-selected:hover .win-selectionbackground { 
    background-color: rgb(255, 177, 33); 
} 

.win-selectioncheckmark { 
    color: rgb(255, 255, 255); 
} 

.win-selectionhint { 
    color: rgb(255, 165, 0); 
} 

.win-selectioncheckmarkbackground { 
    border-top: solid 20px rgb(255, 165, 0); 
    border-right: solid 20px rgb(255, 165, 0); 
    border-left: solid 20px transparent; 
    border-bottom: solid 20px transparent; 
} 

.win-container.win-selected:hover .win-selectioncheckmarkbackground { 
    border-top: solid 20px rgb(255, 177, 33); 
    border-right: solid 20px rgb(255, 177, 33); 
    border-left: solid 20px transparent; 
    border-bottom: solid 20px transparent; 
} 

.win-rtl .win-selectioncheckmarkbackground { 
    border-top: solid 20px rgb(255, 165, 0)); 
    border-left: solid 20px rgb(255, 165, 0); 
    border-right: solid 20px transparent; 
    border-bottom: solid 20px transparent; 
} 

.win-rtl .win-container.win-selected:hover .win-selectioncheckmarkbackground { 
    border-top: solid 20px rgb(255, 177, 33); 
    border-left: solid 20px rgb(255, 177, 33); 
    border-right: solid 20px transparent; 
    border-bottom: solid 20px transparent; 
} 

/* 
Command button colors. 
*/ 
button.win-command { 
    color: rgb(0, 0, 0); 
} 

    button.win-command:hover { 
     color: rgb(0, 0, 0); 
    } 

    button.win-command:active { 
     color: rgb(0, 0, 0); 
    } 

    button.win-command:hover:active { 
     color: rgb(0, 0, 0); 
    } 

.win-commandimage { 
    color: rgb(0, 0, 0); 
} 

button:hover:active .win-commandimage { 
    color: rgb(256, 182, 56); 
} 

button[aria-selected=true] .win-commandimage { 
    color: rgb(256, 182, 56); 
} 

button[aria-selected=true]:hover .win-commandimage, 
button[aria-selected=true]:active .win-commandimage, 
button[aria-selected=true]:hover:active .win-commandimage { 
    color: rgb(0, 0, 0); 
} 

/* 
Command ring colors. 
*/ 
.win-commandring { 
    background-color: transparent; 
    border-color: rgb(0, 0, 0); 
    color: rgb(0, 0, 0); 
} 

button:hover .win-commandring, button:active .win-commandring { 
    background-color: rgb(256, 191, 82); 
    border-color: rgb(0, 0, 0); 
} 

button:hover:active .win-commandring { 
    background-color: rgb(0, 0, 0); 
    border-color: rgb(0, 0, 0); 
} 

button[aria-selected=true] .win-commandring { 
    background-color: rgb(0, 0, 0); 
    border-color: rgb(0, 0, 0); 
} 

button[aria-selected=true]:hover .win-commandring, 
button[aria-selected=true]:active .win-commandring { 
    background-color: transparent; 
    border-color: rgb(0, 0, 0); 
} 

button[aria-selected=true]:hover:active .win-commandring { 
    background-color: transparent; 
    border-color: rgb(0, 0, 0); 
} 

/* 
AppBar control colors. 
*/ 
.win-appbar { 
    background-color: rgb(256, 182, 56); 
    border-color: rgb(256, 182, 56); 
} 

/* 
Rating control colors. 
*/ 
.win-rating .win-star.win-user.win-full { 
    color: rgb(255, 165, 0); 
} 

.win-rating .win-star.win-tentative.win-full { 
    color: rgb(255, 177, 33); 
}

出典

2012-10-03 01:49:47

メトロアプリのデフォルトのCSSクラス

答えて

関連する問題