metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
1 lines • 20 kB
CSS
.bg-scheme{background-color:#212121}.fg-scheme{color:#fff}.bg-scheme-secondary{background-color:#252525}.fg-scheme-secondary{color:#919396}.bg-control{background-color:#b00015}.fg-control{color:#fff}.bd-default{border-color:#b00015}.disabled{cursor:default}body{font-size:16px;font-family:'Open Sans',sans-serif;color:#fff;background-color:#212121}hr{background-color:#b00015}.file,.input,.select,.textarea,input[type=datetime-local],input[type=email],input[type=file],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{background-color:#212121;color:#fff;border-color:#b00015}.file.focused,.file:focus,.input.focused,.input:focus,.select.focused,.select:focus,.textarea.focused,.textarea:focus,input[type=datetime-local].focused,input[type=datetime-local]:focus,input[type=email].focused,input[type=email]:focus,input[type=file].focused,input[type=file]:focus,input[type=month].focused,input[type=month]:focus,input[type=number].focused,input[type=number]:focus,input[type=password].focused,input[type=password]:focus,input[type=search].focused,input[type=search]:focus,input[type=tel].focused,input[type=tel]:focus,input[type=text].focused,input[type=text]:focus,input[type=time].focused,input[type=time]:focus,input[type=url].focused,input[type=url]:focus,input[type=week].focused,input[type=week]:focus,select.focused,select:focus,textarea.focused,textarea:focus{-webkit-box-shadow:0 0 0 3px rgba(176,0,21,.45);box-shadow:0 0 0 3px rgba(176,0,21,.45)}.file,.input,.select,.textarea{border-style:solid}.file .prepend,.input .prepend,.select .prepend,.textarea .prepend{background-color:#b00015;color:#fff}.file input,.file select,.file textarea,.input input,.input select,.input textarea,.select input,.select select,.select textarea,.textarea input,.textarea select,.textarea textarea{-webkit-box-shadow:none;box-shadow:none;border-color:transparent}.file .button{background-color:#b00015;color:#fff}.select .active a{background-color:#b00015;color:#fff}.checkbox .check{border-color:#b00015}.checkbox .check::before{border-color:#fff}.checkbox input[type=checkbox]:checked~.check{border-color:#b00015;background-color:#b00015;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.checkbox input[type=checkbox]:checked~.check::before{border-color:#fff}.checkbox input[type=checkbox]:disabled~.check{border-color:rgba(176,0,21,.25);background-color:rgba(176,0,21,.25)}.checkbox input[type=checkbox]:disabled~.check::before{border-color:rgba(176,0,21,.25)}.checkbox input[data-indeterminate=true]~.check{border-color:#b00015;background-color:#b00015}.radio .check{border-color:#b00015}.radio input[type=radio]:checked~.check{border-color:#b00015;background-color:#b00015}.radio input[type=radio]:checked~.check::before{border-color:#fff;background-color:#fff}.radio input[type=radio]:disabled~.check{border-color:rgba(176,0,21,.25);background-color:rgba(176,0,21,.25)}.radio input[type=radio]:disabled~.check::before{border-color:rgba(176,0,21,.25);background-color:rgba(176,0,21,.25)}.checkbox .check,.radio .check{color:#fff}.switch .check{border-color:#b00015}.switch .check::after{border-color:#b00015;background-color:#b00015}.switch input[type=checkbox]:checked~.check{border-color:#b00015;background-color:#b00015}.switch input[type=checkbox]:disabled~.check{border-color:rgba(176,0,21,.25);background-color:rgba(176,0,21,.25)}.switch input[type=checkbox]:disabled~.check::after{border-color:rgba(176,0,21,.25);background-color:rgba(176,0,21,.25)}.switch input[type=checkbox]:disabled:not(:checked)~.check::after{opacity:.5}.button,.command-button,.shortcut,.tool-button{background-color:#b00015;color:#fff}.button.focus,.button:active,.button:focus,.command-button.focus,.command-button:active,.command-button:focus,.shortcut.focus,.shortcut:active,.shortcut:focus,.tool-button.focus,.tool-button:active,.tool-button:focus{-webkit-box-shadow:0 0 0 3px rgba(176,0,21,.45);box-shadow:0 0 0 3px rgba(176,0,21,.45)}.button:hover,.command-button:hover,.shortcut:hover,.tool-button:hover{background-color:#970012}.info-button{border-color:#b00015}.info-button .button{background-color:#b00015;color:#fff}.info-button .button:hover{background-color:#970012}.image-button{border-color:#b00015}.image-button .icon{background-color:#b00015;color:#fff}.image-button .icon:hover{background-color:#970012}.breadcrumbs{background-color:#212121;color:#b00015}.breadcrumbs .page-item::after,.breadcrumbs .page-item::before{background-color:#b00015}.breadcrumbs .page-link:hover{color:#970012}.pagination .page-item:not(.no-link){background-color:#b00015;color:#fff;border:1px #b00015 solid}.pagination .page-item.active,.pagination .page-item:hover{background-color:#970012}.pagination .no-link{background-color:transparent;color:#b00015}.accordion .frame .heading{background-color:#b00015;color:#fff}.accordion .frame{margin:0}.accordion .frame+.frame{border-top:1px rgba(176,0,21,.25) solid}.h-menu{background-color:#b00015;color:#fff}.h-menu>li>a.dropdown-toggle::before{border-color:#fff}.d-menu,.v-menu{background-color:#fff;color:#b00015;border:1px solid #b00015;-webkit-box-shadow:none;box-shadow:none}.d-menu .dropdown-toggle::before,.v-menu .dropdown-toggle::before{border-color:#b00015}.d-menu li:hover,.v-menu li:hover{background-color:#b00015;color:#fff}.d-menu li:hover .dropdown-toggle::before,.v-menu li:hover .dropdown-toggle::before{border-color:#fff}.d-menu .divider,.v-menu .divider{background-color:#b00015}.d-menu .menu-title,.v-menu .menu-title{background-color:#7d000f;color:#fff}.d-menu .disabled,.v-menu .disabled{color:rgba(176,0,21,.5)}.v-menu .v-menu{border:none}.t-menu{background-color:#b00015;color:#fff;-webkit-box-shadow:none;box-shadow:none}.t-menu li a{border-color:rgba(255,255,255,.25)}.t-menu .dropdown-toggle::after{border-color:transparent transparent #fff transparent}.app-bar{background-color:#b00015;color:#fff}.app-bar .dropdown-toggle::before{border-color:#fff}.app-bar .app-bar-container .d-menu,.app-bar .app-bar-menu li .d-menu{background-color:#b00015;color:#fff}.app-bar .app-bar-container .d-menu li:hover,.app-bar .app-bar-menu li .d-menu li:hover{background-color:rgba(29,29,29,.1)}.app-bar .app-bar-container .divider,.app-bar .app-bar-menu li .divider{background-color:rgba(255,255,255,.25)}[class*=app-bar-expand] .app-bar-container .d-menu,[class*=app-bar-expand] .app-bar-menu li .d-menu{-webkit-box-shadow:none;box-shadow:none;border:1px solid #b00015;background-color:#fff;color:#b00015}[class*=app-bar-expand] .app-bar-container .d-menu li:hover,[class*=app-bar-expand] .app-bar-menu li .d-menu li:hover{background-color:#b00015;color:#fff}.calendar{border-color:#b00015}.calendar .calendar-header{background-color:#b00015;color:#fff}.calendar .day.today{background-color:#b00015}.calendar .day.selected{-webkit-box-shadow:0 0 0 1px #b00015;box-shadow:0 0 0 1px #b00015}.calendar .day.selected::after{border-top-color:#b00015}.calendar .calendar-months>.months-list li.active,.calendar .calendar-years>.years-list li.active{background-color:#b00015;color:#fff}.calendar .calendar-footer{border-top-color:rgba(176,0,21,.25)}.calendar .week-days{border-top-color:rgba(176,0,21,.25);border-bottom-color:rgba(176,0,21,.25)}[class*=calendar-wide] .calendar-footer{border-left-color:rgba(176,0,21,.25)}.countdown{line-height:1.5}.countdown .part{color:#fff}.wheel-picker{background-color:#212121;color:#fff}.wheel-picker .date-wrapper,.wheel-picker .time-wrapper{border-color:#b00015}.wheel-picker .select-block{background-color:#b00015;color:#fff}.wheel-picker .select-block ul{border-color:rgba(176,0,21,.25)}.wheel-picker .action-block{border-top:1px rgba(176,0,21,.25) solid}.wheel-picker .action-block .button{color:#fff}.dialog{background-color:#212121;color:#fff;border:1px solid #b00015}.dialog .dialog-actions{border-top-color:#b00015}.keypad .keys{background-color:#212121;border-color:#b00015;color:#fff}.keypad .key.service-key{background-color:#7d000f}.hint{background-color:#252525;color:#fff}.listview{background-color:#212121;color:#fff}.listview .node:hover{background-color:rgba(176,0,21,.25);color:#fff}.listview .node.current-select{background-color:#b00015;color:#fff;border-color:#b00015}.listview .node-group .node-toggle::before{border-color:#fff}.listview.view-content .node+.node{border-top-color:#b00015}.master{background-color:#252525;color:#fff}.master .controls .next,.master .controls .prev{color:#b00015}.master .controls .next.disabled,.master .controls .prev.disabled{color:rgba(176,0,21,.25)}.master .pages{border-color:#b00015}.navview .navview-pane{background-color:#252525;color:#919396}.navview .navview-pane .holder:hover,.navview .navview-pane .navview-menu li a:hover,.navview .navview-pane .pull-button:hover{background-color:rgba(29,29,29,.1)}.navview .navview-pane .holder:active,.navview .navview-pane .holder:focus,.navview .navview-pane .navview-menu li a:active,.navview .navview-pane .navview-menu li a:focus,.navview .navview-pane .pull-button:active,.navview .navview-pane .pull-button:focus{background-color:#7d000f}.navview .navview-pane .holder:focus,.navview .navview-pane .navview-menu li a:focus,.navview .navview-pane .pull-button:focus{border:2px solid #7d000f}.navview .navview-pane .dropdown-toggle::after{border-color:transparent transparent #fff transparent}.navview .navview-content{background-color:#212121;color:#fff}.notify{background-color:#252525;color:#919396;border:1px solid #b00015}.panel{background-color:#252525;color:#919396;border-color:rgba(176,0,21,.25)}.panel .panel-title{background-color:#b00015;color:#fff;border-bottom-color:rgba(255,255,255,.25)}.panel .panel-title .dropdown-toggle{border-left-color:rgba(255,255,255,.25)}.panel .panel-title .dropdown-toggle::before{border-color:#fff}.panel .panel-title .icon{border-right-color:rgba(255,255,255,.25)}.window{border-color:rgba(176,0,21,.25);background-color:#212121;color:#fff}.window .window-caption{background-color:#b00015;color:#fff}.window .window-content{background-color:#252525;color:#919396}.resize-element::after{border-bottom-color:#b00015}.popover{background-color:#252525;color:#919396;border-color:#b00015}.rating .stars li{color:rgba(176,0,21,.25)}.rating .stars li.on{color:#b00015}.rating:not(.static) .stars:hover li{color:#b00015}.rating:not(.static) .stars li:hover~li{color:rgba(176,0,21,.25)}.sidenav-counter,.sidenav-simple{background-color:#212121;color:#b00015}.sidenav-counter .active,.sidenav-counter li.active:hover,.sidenav-simple .active,.sidenav-simple li.active:hover{background-color:#b00015;color:#fff}.sidenav-counter li.disabled,.sidenav-simple li.disabled{color:rgba(255,255,255,.25)}.sidenav-m3{background-color:#b00015;color:#fff}.sidenav-m3 a{background-color:#b00015}.sidenav-m3 a:hover{background-color:rgba(29,29,29,.1)}.sidenav-m3 li.disabled{color:rgba(255,255,255,.25)}.sidenav-m3 li+li{border-top-color:#b00015}.sidenav-m3 .d-menu{background-color:#7d000f;border-color:#b00015;margin-bottom:4px}.sidenav-m3 .d-menu li{border-color:#b00015;color:#fff}.sidenav-m3 .d-menu li.disabled{color:rgba(255,255,255,.25)}.sidenav-m3 .dropdown-toggle::before{border-color:#fff}.slider .backside{background-color:rgba(176,0,21,.25)}.slider .buffer{background-color:#fff}.slider .complete{background-color:#b00015}.slider .marker{background-color:#fff}.stepper::before{background-color:#252525}.stepper .step{background-color:#252525;color:#fff}.stepper .step.complete{background-color:#b00015;color:#fff}.stepper .step.current{background-color:#fff;color:#000}.streamer .streams{background-color:#212121;color:#fff}.streamer .streamer-action{background-color:#b00015;color:#fff}.streamer .stream{border-color:#b00015}.streamer .event-group{background-color:#212121;color:#fff}.streamer .stream-event{background-color:#252525;color:#919396;border-color:#b00015}.streamer .stream-event:hover{border-color:#ff1733}.streamer .stream-event.selected{-webkit-box-shadow:0 0 0 1px #b00015;box-shadow:0 0 0 1px #b00015}.streamer .stream-event.selected::before{border-color:#fff}.streamer .stream-event.selected::after{border-top-color:#b00015}.streamer .stream-event-slide .slide-data .title{color:#fff}.streamer .stream-event-slide .slide-data .desc,.streamer .stream-event-slide .slide-data .subtitle{color:#919396}.table thead{border-bottom-color:#b00015}.table tfoot{border-top-color:#b00015}.table .sortable-column.sort-asc,.table .sortable-column.sort-desc{background-color:#b00015;color:#fff}.table .sortable-column.sort-asc:after,.table .sortable-column.sort-desc:after{color:#fff}.table.striped tbody tr:nth-child(odd){background:#252525}.table.table-border{border-color:#b00015}.table.cell-border td,.table.cell-border th{border-color:#b00015}.tabs{background-color:#212121;color:#fff;border-color:#b00015}.tabs>ul>li{background-color:#252525;color:#919396}.tabs>ul>li:hover{background-color:rgba(176,0,21,.25)}.tabs>ul>li.active{background-color:#b00015;color:#fff}.tabs .disabled{color:rgba(255,255,255,.25)}.tabs.vertical>ul{border-right-color:#b00015}.tabs.vertical>ul>li{border-right-color:#b00015}.tabs.vertical>ul>li.active{border-color:#b00015}.tabs.vertical.right>ul{border-left-color:#b00015}.tabs.vertical.right>ul>li{border-left-color:#b00015}.tabs.vertical.right>ul>li.active{border-color:#b00015}[class*=tabs-expand]>ul{border-bottom-color:#b00015}[class*=tabs-expand]>ul>li{border-bottom-color:#b00015}[class*=tabs-expand]>ul>li.active{border-color:#b00015}.topbar{background-color:#b00015;color:#fff}.topbar .topbar-brand,.topbar .topbar-element,.topbar .topbar-menu{color:#fff}.treeview{background-color:#212121;color:#919396}.treeview .node-toggle::before{border-color:#919396}.treeview li.current>.caption{color:#fff}.wizard{background-color:#212121;color:#fff;border-color:#b00015}.wizard.section,.wizard>section{border-color:#000}.wizard.section:nth-child(1),.wizard>section:nth-child(1){border-color:#b00015}.wizard.section:nth-child(2),.wizard>section:nth-child(2){border-color:#970012}.wizard.section:nth-child(3),.wizard>section:nth-child(3){border-color:#7d000f}.wizard.section:nth-child(4),.wizard>section:nth-child(4){border-color:#64000c}.wizard.section:nth-child(5),.wizard>section:nth-child(5){border-color:#4a0009}.wizard.section:nth-child(6),.wizard>section:nth-child(6){border-color:#310006}.wizard.section:nth-child(7),.wizard>section:nth-child(7){border-color:#170003}.wizard.section:nth-child(8),.wizard>section:nth-child(8){border-color:#000}.wizard.section:nth-child(9),.wizard>section:nth-child(9){border-color:#000}.wizard.section:nth-child(10),.wizard>section:nth-child(10){border-color:#000}.wizard.section::before,.wizard>section::before{color:#fff}.wizard.section.complete,.wizard>section.complete{border-color:#000}.wizard.section.complete:nth-child(1),.wizard>section.complete:nth-child(1){border-color:#252525}.wizard.section.complete:nth-child(2),.wizard>section.complete:nth-child(2){border-color:#181818}.wizard.section.complete:nth-child(3),.wizard>section.complete:nth-child(3){border-color:#0c0c0c}.wizard.section.complete:nth-child(4),.wizard>section.complete:nth-child(4){border-color:#000}.wizard.section.complete:nth-child(5),.wizard>section.complete:nth-child(5){border-color:#000}.wizard.section.complete:nth-child(6),.wizard>section.complete:nth-child(6){border-color:#000}.wizard.section.complete:nth-child(7),.wizard>section.complete:nth-child(7){border-color:#000}.wizard.section.complete:nth-child(8),.wizard>section.complete:nth-child(8){border-color:#000}.wizard.section.complete:nth-child(9),.wizard>section.complete:nth-child(9){border-color:#000}.wizard.section.complete:nth-child(10),.wizard>section.complete:nth-child(10){border-color:#000}.wizard.section.complete::before,.wizard>section.complete::before{color:#919396}.wizard.section.current::before,.wizard>section.current::before{color:#fff;background-color:#b00015}.wizard .action-bar button{border-color:#b00015;color:#fff}.ribbon-menu .tabs-holder .static{background-color:#b00015;color:#fff}.ribbon-menu .tabs-holder .static:hover{border-color:transparent}.ribbon-menu .ribbon-button,.ribbon-menu .ribbon-icon-button,.ribbon-menu .ribbon-main,.ribbon-menu .ribbon-split,.ribbon-menu .ribbon-tool-button{color:#fff}.ribbon-menu .ribbon-button:hover,.ribbon-menu .ribbon-icon-button:hover,.ribbon-menu .ribbon-main:hover,.ribbon-menu .ribbon-split:hover,.ribbon-menu .ribbon-tool-button:hover{border-color:rgba(176,0,21,.25);background-color:rgba(37,37,37,.25)}.ribbon-menu .ribbon-button.active,.ribbon-menu .ribbon-button:active,.ribbon-menu .ribbon-icon-button.active,.ribbon-menu .ribbon-icon-button:active,.ribbon-menu .ribbon-main.active,.ribbon-menu .ribbon-main:active,.ribbon-menu .ribbon-split.active,.ribbon-menu .ribbon-split:active,.ribbon-menu .ribbon-tool-button.active,.ribbon-menu .ribbon-tool-button:active{border-color:rgba(176,0,21,.25);background-color:rgba(33,33,33,.25)}.ribbon-menu .ribbon-split-button:hover{border-color:rgba(176,0,21,.25)}.ribbon-menu .ribbon-split-button:hover .ribbon-split{border-color:rgba(176,0,21,.25)}.ribbon-menu .ribbon-dropdown{-webkit-box-shadow:none;box-shadow:none}.ribbon-menu .ribbon-dropdown li:hover{border-color:rgba(176,0,21,.25);background-color:rgba(37,37,37,.25)}.ribbon-menu .ribbon-dropdown .checked::after{border-color:rgba(176,0,21,.25);background-color:rgba(37,37,37,.25)}.navview .navview-pane .navview-menu li.active::before{background-color:#fff}.rating .stars li.on{color:#e3001b}.rating:not(.static) .stars:hover li{color:#e3001b}.ribbon-menu .ribbon-button,.ribbon-menu .ribbon-icon-button,.ribbon-menu .ribbon-main,.ribbon-menu .ribbon-split,.ribbon-menu .ribbon-tool-button{color:#1d1d1d}.wizard>.section.complete,.wizard>section.complete{border-color:#000}.wizard>.section.complete:nth-child(1),.wizard>section.complete:nth-child(1){border-color:#b00015}.wizard>.section.complete:nth-child(2),.wizard>section.complete:nth-child(2){border-color:#970012}.wizard>.section.complete:nth-child(3),.wizard>section.complete:nth-child(3){border-color:#7d000f}.wizard>.section.complete:nth-child(4),.wizard>section.complete:nth-child(4){border-color:#64000c}.wizard>.section.complete:nth-child(5),.wizard>section.complete:nth-child(5){border-color:#4a0009}.wizard>.section.complete:nth-child(6),.wizard>section.complete:nth-child(6){border-color:#310006}.wizard>.section.complete:nth-child(7),.wizard>section.complete:nth-child(7){border-color:#170003}.wizard>.section.complete:nth-child(8),.wizard>section.complete:nth-child(8){border-color:#000}.wizard>.section.complete:nth-child(9),.wizard>section.complete:nth-child(9){border-color:#000}.wizard>.section.complete:nth-child(10),.wizard>section.complete:nth-child(10){border-color:#000}.wizard>.section.complete::before,.wizard>section.complete::before{color:#fff}.master{background-color:#f8f8f8}.master .controls .next.disabled,.master .controls .prev.disabled{color:#323232}.master .controls .title{color:#1d1d1d}.master .file,.master .input,.master .select,.master .textarea,.master input[type=datetime-local],.master input[type=email],.master input[type=file],.master input[type=month],.master input[type=number],.master input[type=password],.master input[type=search],.master input[type=tel],.master input[type=text],.master input[type=time],.master input[type=url],.master input[type=week],.master select,.master textarea{background-color:#fff;color:#1d1d1d}