Metro應用程序的默認CSS類

我正在尋找構建Metro應用程序時使用的默認CSS樣式表。當您創建一個新的Metro風格應用程序時，我閱讀了一些關於Blend的開發預覽中包含的兩個默認CSS文件的內容。不幸的是，我沒有運行Win8開發預覽版，目前我也沒有地方設置它。Metro應用程序的默認CSS類

因此，如果有人有預覽運行可以如此善良？根據我的理解，您只需打開Blend，創建一個新的Metro風格應用程序，並將兩個文件（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 beta版。

來源

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

Metro應用程序的默認CSS類

回答

相關問題