文章/答案/技术大牛

发布

社区首页 >问答首页 >Metro应用程序的默认CSS类

问Metro应用程序的默认CSS类
EN

Stack Overflow用户

提问于 2011-10-08 20:28:46

回答 2查看 2.9K关注 0票数 3

我正在寻找一个默认的CSS样式表，以用于构建Metro应用程序。当你创建一个新的Metro风格的应用程序时，我读到了一些关于Blend的开发预览中包含的两个默认CSS文件的东西。不幸的是，我没有运行Win8开发预览，目前我也没有地方设置它。

那么，如果有人真的运行了预览，可以如此友好呢？据我所知，你只需要打开Blend，创建一个新的Metro风格的应用程序，两个文件(ui-light.css，ui-dark.css)都包含在模板中。另请参阅http://www.timmykokke.com/2011/09/discovering-expression-blendstyles/。

javascript

css

microsoft-metro

回答 2

Stack Overflow用户

发布于 2012-03-02 05:20:08

对于开发人员预览版，您可以在线浏览样本库中的CSS：http://code.msdn.microsoft.com/windowsapps/Fragments-91f66b07/sourcecode?fileId=43749&pathId=934384843。

但是，你应该下载最新的Windows8消费者预览版，以及最新的Visual Studio测试版。

票数 2

Stack Overflow用户

发布于 2012-10-03 09:49:48

我强烈推荐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);
}

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/7696789

复制

相似问题

问Metro应用程序的默认CSS类
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Metro应用程序的默认CSS类EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Metro应用程序的默认CSS类
EN