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 • 19.6 kB
CSS
.bg-scheme{background-color:#2b2b2b}.fg-scheme{color:#fff}.bg-scheme-secondary{background-color:#3a3a3a}.fg-scheme-secondary{color:#bbb}.bg-control{background-color:#585b5d}.fg-control{color:#fff}.bd-default{border-color:#585b5d}.disabled{cursor:default}body{font-size:16px;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;color:#fff;background-color:#2b2b2b}hr{background-color:#585b5d}.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:#2b2b2b;color:#fff;border-color:#585b5d}.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(88,91,93,.45);box-shadow:0 0 0 3px rgba(88,91,93,.45)}.file,.input,.select,.textarea{border-style:solid}.file .prepend,.input .prepend,.select .prepend,.textarea .prepend{background-color:#585b5d;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:#585b5d;color:#fff}.select .active a{background-color:#585b5d;color:#fff}.checkbox .check{border-color:#585b5d}.checkbox .check::before{border-color:#fff}.checkbox input[type=checkbox]:checked~.check{border-color:#585b5d;background-color:#585b5d;-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(88,91,93,.25);background-color:rgba(88,91,93,.25)}.checkbox input[type=checkbox]:disabled~.check::before{border-color:rgba(88,91,93,.25)}.checkbox input[data-indeterminate=true]~.check{border-color:#585b5d;background-color:#585b5d}.radio .check{border-color:#585b5d}.radio input[type=radio]:checked~.check{border-color:#585b5d;background-color:#585b5d}.radio input[type=radio]:checked~.check::before{border-color:#fff;background-color:#fff}.radio input[type=radio]:disabled~.check{border-color:rgba(88,91,93,.25);background-color:rgba(88,91,93,.25)}.radio input[type=radio]:disabled~.check::before{border-color:rgba(88,91,93,.25);background-color:rgba(88,91,93,.25)}.checkbox .check,.radio .check{color:#fff}.switch .check{border-color:#585b5d}.switch .check::after{border-color:#585b5d;background-color:#585b5d}.switch input[type=checkbox]:checked~.check{border-color:#585b5d;background-color:#585b5d}.switch input[type=checkbox]:disabled~.check{border-color:rgba(88,91,93,.25);background-color:rgba(88,91,93,.25)}.switch input[type=checkbox]:disabled~.check::after{border-color:rgba(88,91,93,.25);background-color:rgba(88,91,93,.25)}.switch input[type=checkbox]:disabled:not(:checked)~.check::after{opacity:.5}.button,.command-button,.shortcut,.tool-button{background-color:#585b5d;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(88,91,93,.45);box-shadow:0 0 0 3px rgba(88,91,93,.45)}.button:hover,.command-button:hover,.shortcut:hover,.tool-button:hover{background-color:#4c4e50}.info-button{border-color:#585b5d}.info-button .button{background-color:#585b5d;color:#fff}.info-button .button:hover{background-color:#4c4e50}.image-button{border-color:#585b5d}.image-button .icon{background-color:#585b5d;color:#fff}.image-button .icon:hover{background-color:#4c4e50}.breadcrumbs{background-color:#2b2b2b;color:#585b5d}.breadcrumbs .page-item::after,.breadcrumbs .page-item::before{background-color:#585b5d}.breadcrumbs .page-link:hover{color:#4c4e50}.pagination .page-item:not(.no-link){background-color:#585b5d;color:#fff;border:1px #585b5d solid}.pagination .page-item.active,.pagination .page-item:hover{background-color:#4c4e50}.pagination .no-link{background-color:transparent;color:#585b5d}.accordion .frame .heading{background-color:#585b5d;color:#fff}.accordion .frame{margin:0}.accordion .frame+.frame{border-top:1px rgba(88,91,93,.25) solid}.h-menu{background-color:#585b5d;color:#fff}.h-menu>li>a.dropdown-toggle::before{border-color:#fff}.d-menu,.v-menu{background-color:#fff;color:#585b5d;border:1px solid #585b5d;-webkit-box-shadow:none;box-shadow:none}.d-menu .dropdown-toggle::before,.v-menu .dropdown-toggle::before{border-color:#585b5d}.d-menu li:hover,.v-menu li:hover{background-color:#585b5d;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:#585b5d}.d-menu .menu-title,.v-menu .menu-title{background-color:#3f4143;color:#fff}.d-menu .disabled,.v-menu .disabled{color:rgba(88,91,93,.5)}.v-menu .v-menu{border:none}.t-menu{background-color:#585b5d;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:#585b5d;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:#585b5d;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 #585b5d;background-color:#fff;color:#585b5d}[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:#585b5d;color:#fff}.calendar{border-color:#585b5d}.calendar .calendar-header{background-color:#585b5d;color:#fff}.calendar .day.today{background-color:#585b5d}.calendar .day.selected{-webkit-box-shadow:0 0 0 1px #585b5d;box-shadow:0 0 0 1px #585b5d}.calendar .day.selected::after{border-top-color:#585b5d}.calendar .calendar-months>.months-list li.active,.calendar .calendar-years>.years-list li.active{background-color:#585b5d;color:#fff}.calendar .calendar-footer{border-top-color:rgba(88,91,93,.25)}.calendar .week-days{border-top-color:rgba(88,91,93,.25);border-bottom-color:rgba(88,91,93,.25)}[class*=calendar-wide] .calendar-footer{border-left-color:rgba(88,91,93,.25)}.countdown{line-height:1.5}.countdown .part{color:#fff}.wheel-picker{background-color:#2b2b2b;color:#fff}.wheel-picker .date-wrapper,.wheel-picker .time-wrapper{border-color:#585b5d}.wheel-picker .select-block{background-color:#585b5d;color:#fff}.wheel-picker .select-block ul{border-color:rgba(88,91,93,.25)}.wheel-picker .action-block{border-top:1px rgba(88,91,93,.25) solid}.wheel-picker .action-block .button{color:#fff}.dialog{background-color:#2b2b2b;color:#fff;border:1px solid #585b5d}.dialog .dialog-actions{border-top-color:#585b5d}.keypad .keys{background-color:#2b2b2b;border-color:#585b5d;color:#fff}.keypad .key.service-key{background-color:#3f4143}.hint{background-color:#3a3a3a;color:#fff}.listview{background-color:#2b2b2b;color:#fff}.listview .node:hover{background-color:rgba(88,91,93,.25);color:#fff}.listview .node.current-select{background-color:#585b5d;color:#fff;border-color:#585b5d}.listview .node-group .node-toggle::before{border-color:#fff}.listview.view-content .node+.node{border-top-color:#585b5d}.master{background-color:#3a3a3a;color:#fff}.master .controls .next,.master .controls .prev{color:#585b5d}.master .controls .next.disabled,.master .controls .prev.disabled{color:rgba(88,91,93,.25)}.master .pages{border-color:#585b5d}.navview .navview-pane{background-color:#3a3a3a;color:#bbb}.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:#3f4143}.navview .navview-pane .holder:focus,.navview .navview-pane .navview-menu li a:focus,.navview .navview-pane .pull-button:focus{border:2px solid #3f4143}.navview .navview-pane .dropdown-toggle::after{border-color:transparent transparent #fff transparent}.navview .navview-content{background-color:#2b2b2b;color:#fff}.notify{background-color:#3a3a3a;color:#bbb;border:1px solid #585b5d}.panel{background-color:#3a3a3a;color:#bbb;border-color:rgba(88,91,93,.25)}.panel .panel-title{background-color:#585b5d;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(88,91,93,.25);background-color:#2b2b2b;color:#fff}.window .window-caption{background-color:#585b5d;color:#fff}.window .window-content{background-color:#3a3a3a;color:#bbb}.resize-element::after{border-bottom-color:#585b5d}.popover{background-color:#3a3a3a;color:#bbb;border-color:#585b5d}.rating .stars li{color:rgba(88,91,93,.25)}.rating .stars li.on{color:#585b5d}.rating:not(.static) .stars:hover li{color:#585b5d}.rating:not(.static) .stars li:hover~li{color:rgba(88,91,93,.25)}.sidenav-counter,.sidenav-simple{background-color:#2b2b2b;color:#585b5d}.sidenav-counter .active,.sidenav-counter li.active:hover,.sidenav-simple .active,.sidenav-simple li.active:hover{background-color:#585b5d;color:#fff}.sidenav-counter li.disabled,.sidenav-simple li.disabled{color:rgba(255,255,255,.25)}.sidenav-m3{background-color:#585b5d;color:#fff}.sidenav-m3 a{background-color:#585b5d}.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:#585b5d}.sidenav-m3 .d-menu{background-color:#3f4143;border-color:#585b5d;margin-bottom:4px}.sidenav-m3 .d-menu li{border-color:#585b5d;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(88,91,93,.25)}.slider .buffer{background-color:#fff}.slider .complete{background-color:#585b5d}.slider .marker{background-color:#fff}.stepper::before{background-color:#3a3a3a}.stepper .step{background-color:#3a3a3a;color:#fff}.stepper .step.complete{background-color:#585b5d;color:#fff}.stepper .step.current{background-color:#fff;color:#000}.streamer .streams{background-color:#2b2b2b;color:#fff}.streamer .streamer-action{background-color:#585b5d;color:#fff}.streamer .stream{border-color:#585b5d}.streamer .event-group{background-color:#2b2b2b;color:#fff}.streamer .stream-event{background-color:#3a3a3a;color:#bbb;border-color:#585b5d}.streamer .stream-event:hover{border-color:#8a8e91}.streamer .stream-event.selected{-webkit-box-shadow:0 0 0 1px #585b5d;box-shadow:0 0 0 1px #585b5d}.streamer .stream-event.selected::before{border-color:#fff}.streamer .stream-event.selected::after{border-top-color:#585b5d}.streamer .stream-event-slide .slide-data .title{color:#fff}.streamer .stream-event-slide .slide-data .desc,.streamer .stream-event-slide .slide-data .subtitle{color:#bbb}.table thead{border-bottom-color:#585b5d}.table tfoot{border-top-color:#585b5d}.table .sortable-column.sort-asc,.table .sortable-column.sort-desc{background-color:#585b5d;color:#fff}.table .sortable-column.sort-asc:after,.table .sortable-column.sort-desc:after{color:#fff}.table.striped tbody tr:nth-child(odd){background:#3a3a3a}.table.table-border{border-color:#585b5d}.table.cell-border td,.table.cell-border th{border-color:#585b5d}.tabs{background-color:#2b2b2b;color:#fff;border-color:#585b5d}.tabs>ul>li{background-color:#3a3a3a;color:#bbb}.tabs>ul>li:hover{background-color:rgba(88,91,93,.25)}.tabs>ul>li.active{background-color:#585b5d;color:#fff}.tabs .disabled{color:rgba(255,255,255,.25)}.tabs.vertical>ul{border-right-color:#585b5d}.tabs.vertical>ul>li{border-right-color:#585b5d}.tabs.vertical>ul>li.active{border-color:#585b5d}.tabs.vertical.right>ul{border-left-color:#585b5d}.tabs.vertical.right>ul>li{border-left-color:#585b5d}.tabs.vertical.right>ul>li.active{border-color:#585b5d}[class*=tabs-expand]>ul{border-bottom-color:#585b5d}[class*=tabs-expand]>ul>li{border-bottom-color:#585b5d}[class*=tabs-expand]>ul>li.active{border-color:#585b5d}.topbar{background-color:#585b5d;color:#fff}.topbar .topbar-brand,.topbar .topbar-element,.topbar .topbar-menu{color:#fff}.treeview{background-color:#2b2b2b;color:#bbb}.treeview .node-toggle::before{border-color:#bbb}.treeview li.current>.caption{color:#fff}.wizard{background-color:#2b2b2b;color:#fff;border-color:#585b5d}.wizard.section,.wizard>section{border-color:#000}.wizard.section:nth-child(1),.wizard>section:nth-child(1){border-color:#585b5d}.wizard.section:nth-child(2),.wizard>section:nth-child(2){border-color:#4c4e50}.wizard.section:nth-child(3),.wizard>section:nth-child(3){border-color:#3f4143}.wizard.section:nth-child(4),.wizard>section:nth-child(4){border-color:#333536}.wizard.section:nth-child(5),.wizard>section:nth-child(5){border-color:#262829}.wizard.section:nth-child(6),.wizard>section:nth-child(6){border-color:#1a1b1b}.wizard.section:nth-child(7),.wizard>section:nth-child(7){border-color:#0e0e0e}.wizard.section:nth-child(8),.wizard>section:nth-child(8){border-color:#010101}.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:#3a3a3a}.wizard.section.complete:nth-child(2),.wizard>section.complete:nth-child(2){border-color:#2d2d2d}.wizard.section.complete:nth-child(3),.wizard>section.complete:nth-child(3){border-color:#212121}.wizard.section.complete:nth-child(4),.wizard>section.complete:nth-child(4){border-color:#141414}.wizard.section.complete:nth-child(5),.wizard>section.complete:nth-child(5){border-color:#070707}.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:#bbb}.wizard.section.current::before,.wizard>section.current::before{color:#fff;background-color:#585b5d}.wizard .action-bar button{border-color:#585b5d;color:#fff}.ribbon-menu .tabs-holder .static{background-color:#585b5d;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(88,91,93,.25);background-color:rgba(58,58,58,.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(88,91,93,.25);background-color:rgba(43,43,43,.25)}.ribbon-menu .ribbon-split-button:hover{border-color:rgba(88,91,93,.25)}.ribbon-menu .ribbon-split-button:hover .ribbon-split{border-color:rgba(88,91,93,.25)}.ribbon-menu .ribbon-dropdown{-webkit-box-shadow:none;box-shadow:none}.ribbon-menu .ribbon-dropdown li:hover{border-color:rgba(88,91,93,.25);background-color:rgba(58,58,58,.25)}.ribbon-menu .ribbon-dropdown .checked::after{border-color:rgba(88,91,93,.25);background-color:rgba(58,58,58,.25)}.navview .navview-pane .navview-menu li.active::before{background-color:#fa6800}.rating .stars li.on{color:#f8f8f8}.rating:not(.static) .stars:hover li{color:#f8f8f8}.ribbon-menu .ribbon-button,.ribbon-menu .ribbon-icon-button,.ribbon-menu .ribbon-main,.ribbon-menu .ribbon-split,.ribbon-menu .ribbon-tool-button{color:#585b5d}.wizard>.section.complete,.wizard>section.complete{border-color:#000}.wizard>.section.complete:nth-child(1),.wizard>section.complete:nth-child(1){border-color:#585b5d}.wizard>.section.complete:nth-child(2),.wizard>section.complete:nth-child(2){border-color:#4c4e50}.wizard>.section.complete:nth-child(3),.wizard>section.complete:nth-child(3){border-color:#3f4143}.wizard>.section.complete:nth-child(4),.wizard>section.complete:nth-child(4){border-color:#333536}.wizard>.section.complete:nth-child(5),.wizard>section.complete:nth-child(5){border-color:#262829}.wizard>.section.complete:nth-child(6),.wizard>section.complete:nth-child(6){border-color:#1a1b1b}.wizard>.section.complete:nth-child(7),.wizard>section.complete:nth-child(7){border-color:#0e0e0e}.wizard>.section.complete:nth-child(8),.wizard>section.complete:nth-child(8){border-color:#010101}.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 .controls .next,.master .controls .prev{color:#fff}.master .controls .next.disabled,.master .controls .prev.disabled{color:#585b5d}.table{color:#bbb}.table thead td,.table thead th{color:#fff}