diff --git a/app/css/material-light.php b/app/css/material-light.php new file mode 100644 index 00000000..ac1f5b5a --- /dev/null +++ b/app/css/material-light.php @@ -0,0 +1,615 @@ + + + + +/* +Theme Name: Material Light +Author: @marek-guran +Author URI: https://github.com/marek-guran +Description: Inspired by Google's Material You Design +License: GNU General Public License v3.0 +*/ + + + +@import url('all.css'); + +body { + background-color: ; +} + +html * { + font-family: Helvetica,Arial,sans-serif; + color: ; +} + +h2 { + font-size: 2rem !important; +} + +h4 { + font-size: 1.3rem; +} + +h5.card-title { + font-size: 1.2rem; +} + +.page-header { + border-left: .01rem solid ; + border-bottom: .01rem solid ; +} + +.sidebar-light .nav-item.active .nav-link i { + color: ; +} + +.sidebar .nav-item.active .nav-link { + font-weight: 400; + color: ; +} + +#wrapper #content-wrapper #content { + background-color: ; +} + +.topbar { + background-color: ; +} + +.col { + color: ; +} + +.card-header .col i.fa-tachometer-alt, +.card-header .col i.fa-dot-circle, +.card-header .col i.fa-wifi, +.card-header .col i.fa-exchange-alt, +.card-header .col i.fa-hand-paper, +.card-header .col i.fa-network-wired, +.card-header .col i.fa-key, +.card-header .ra-wireguard, +.card-header .ra-wireguard:before, +.card-header .col i.fa-user-lock, +.card-header .col i.fa-chart-bar, +.card-header .col i.fa-cube, +.card-header .col i.fa-info-circle, +.card-header .col i.fa-globe, +.card-header .col i.fa-shield-alt { + color: ; +} + +i.fa-bars { + color: ; +} + +.nav-tabs { + border-bottom: 1px solid ; +} +.nav-tabs .nav-link.active, +.nav-tabs .nav-link { + font-size: 1.0rem; + border-top-left-radius: 18px; + border-top-right-radius: 18px; +} + +.nav-tabs .nav-link:hover { + border-color: transparent; +} + +.navbar-default .navbar-brand:hover { + color: #d2d2d2; +} + +.navbar-default .navbar-toggle { + border-color: transparent; +} + +.navbar-default .navbar-toggle .icon-bar { + background-color: #d2d2d2; +} + +.navbar-default .navbar-toggle:focus, +.navbar-default .navbar-toggle:hover { + background-color: ; +} + +#content, .navbar, .sidebar, .footer, .sticky-footer { + background-attachment: scroll; + background-repeat: repeat; + background-size: auto; + background-position: 0 0; + background-origin: padding-box; + background-clip: border-box; +} + +.sticky-footer { + background-position: 30px 0; +} + +.sidebar { + background-position: 0 20px; +} + +.nav-tabs .nav-link.active { + color: ; + background-color: ; + border-color: transparent; +} + +a:focus, a:hover { + color: #d2d2d2; +} + +.card>.card-header, .modal-content, .modal-header { + border-color: transparent; + background-color: ; + color: ; + border-radius: 18px; + font-size: 1.0rem; + font-weight: 400; +} + +.modal-body { + background-color: ; +} + +.card-header { + border-bottom-left-radius: 0px!important; + border-bottom-right-radius: 0px!important; +} + +.card>.card-header .fa { + color: ; +} + +.card-header [class^="fa"] { + color: ; + font-size: 1.0rem; +} + +.card, .card-body { + border-color: transparent; + border-radius: 18px; + background-color: ; + box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1), + 0px 4px 6px rgba(0, 0, 0, 0.1); +} + +.unstyled { + background-color: ; + color: ; +} + +hr { + border-top: .01rem solid ; +} + +.sidebar-brand-text { + color: ; +} + +.ra-raspap:before { + color: #ac1b3d !important; +} + +.sidebar-light #sidebarToggle { + background-color: ; + border: 1px solid ; !important +} + +.sidebar-light #sidebarToggle::after { + color: ; +} + +.sidebar-light .nav-item .nav-link:hover i { + color: ; +} + +.sidebar-light #sidebarToggle:hover { + background-color: ; +} + +.sidebar.toggled .nav-item .nav-link span { + display: none; +} + +.sidebar.toggled .nav-item .nav-link { + text-align: center; + padding: .6rem 1rem; + width: 6.5rem; +} + +.card-footer, .modal-footer { + background-color: ; + color: ; + border-top: 0px; + border-bottom-right-radius: 18px!important; + border-bottom-left-radius: 18px!important; +} + +.modal-footer { + border-radius: 18px; +} + +.card>.card-header::before, .navbar-default::before { + content: " "; + display: block; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 2; + background-size: 100% 2px, 3px 100%; + pointer-events: none; +} + +.sidebar-light, .sticky-footer { + background-color: ; +} + +.sidebar-light .nav-item .nav-link i { + color: ;; +} + +.sidebar .nav-item .nav-link { + padding: 0.6rem; + padding-left: 1.2rem; +} + +.sidebar-light hr.sidebar-divider { + border-top: 1px solid ; + padding-top: 0.5rem; +} + +.sidebar .nav-item .nav-link span { + font-size: 1.0rem; +} + +.sidebar .nav-item .nav-link span:hover { + color: !important; +} + +.topbar .topbar-divider { + border-right: 1px solid ; +} + +.label-warning { + background-color: #d2d2d2; +} + +span.label.label-warning { + color: ; +} + +.table>tbody>tr>td, +.table>tbody>tr>th, +.table>tfoot>tr>td, +.table>tfoot>tr>th, +.table>thead>tr>td, +.table>thead>tr>th { + background-color: ; + border-top: .01rem solid ; +} + +.table{ + border-radius: 18px; + overflow: hidden; +} + +.table>thead>tr>th { + vertical-align: bottom; + border-bottom: 0 solid ; +} + +[class*="btn"], [class*="btn"]:focus, [class*="btn"]:disabled { + background-color: ; + border-color: transparent; + border-radius: 18px; + color: ; +} + +[class*="btn"]:hover { + border-radius: 18px; + color: ; + background-color: ; + border-color: transparent; +} + +[class*="btn"]:hover .disabled { + background-color:red; +} + +[class*="alert"] { + border-radius: 18px; + color: ; + background-color: ; + border: 1px solid #404040; +} + +.close { + font-size: 1.2em; + font-weight: 400; + text-shadow: none; + color: ; +} + +.form-control, +.form-control:focus, +.custom-select { + color: ; + background-color: ; + border: 1px solid ; + border-radius: 18px; +} + +.form-control:disabled, +.form-control[readonly] { + background-color: ; + opacity: 0.5; +} + +.form-control::-webkit-input-placeholder { color: #d2d2d2; } +.form-control:-moz-placeholder { color: #d2d2d2; } +.form-control::-moz-placeholder { color: #d2d2d2; } +.form-control:-ms-input-placeholder { color: #d2d2d2; } +.form-control::-ms-input-placeholder { color: #d2d2d2; } + +.form-control option { + font-size: 1em; +} + +.form-control::placeholder { + color: ; +} + +input[type="text"]{ +color: ; !important +} + +.progress { + background-color: ; + border-radius: 18px; +} + +.progress-bar { + color: ; +} + +#progressBar { + background-color: !important; +} + +.progress-bar.bg-success { + background-color: !important; + color: !important; +} + +.progress .progress-bar { + padding-left: 5px; +} + +.progress-bar.progress-bar-info.progress-bar-striped.active { + background-color: ; +} + +.figure-img { + filter: opacity(0.7); +} + +.ra-wireguard:before { + color: !important; +} + +.ra-wireguard:hover:before { + color: !important; +} + +.sidebar .nav-item.active .nav-link span.ra-wireguard:before { + color: !important; +} + +.custom-control-input:checked ~ .custom-control-label::before { + background-color: ; +} + +.custom-control-input:checked ~ .custom-control-label::before { + background-color: ; + border-color: ; +} + +.wg-keygen { + background-color: ; + border: 1px solid yellow ; + border-top-right-radius: 18px !important; + border-bottom-right-radius: 18px !important; +} + +.btn.btn-outline-secondary.js-add-dhcp-upstream-server { + background-color: ; + border: 1px solid ; + border-top-right-radius: 18px !important; + border-bottom-right-radius: 18px !important; +} + +.btn.btn-outline-success.js-add-dhcp-static-lease { + border: 1px solid ; +} + +.btn.btn-outline-success.js-add-dhcp-static-lease:hover { + background-color: ; +} + +.text-muted { + font-size: 0.8rem; +} + +.fas.fa-circle { + font-size: 0.7rem; +} + +pre { + background-color: ; + border: ; +} + +button.btn.btn-light.js-toggle-password { + border: 1px solid ; +} + +.btn-primary { + border-color: transparent; + background-color: ; +} + +.btn-primary:hover { + background-color: ; + border-color: transparent; +} + +.btn.service-status { + background-color: ; +} + +input.btn.btn-success { + background-color: ; +} + +input.btn.btn-success:hover { + background-color: ; + border-color: transparent; +} + +.signal-icon .signal-bar { + background: ; +} + +.figure-img { + border-radius: 18px; +} + +.logoutput { + border-radius: 18px!important; + background-color: ; + border: 1px solid !important; +} + +.btn-sm { + border-top-right-radius: 18px!important; + border-bottom-right-radius: 18px!important; +} + +.signal-icon .signal-bar { + background: ; +} + +input.btn.btn-warning { + background-color: ; +} + +input.btn.btn-warning:hover { + background-color: ;!important +} + +button.btn.btn-danger { + background-color: ; +} + +button.btn.btn-danger:hover { + background-color: ;!important +} + +.btn-group label.active { + background-color: !important; + border-color:transparent!important; + color: ;!important +} + +.btn-group { + background-color: ;!important +} + +.btn-group:hover { + background-color: ;!important +} + +.btn.btn-outline-secondary#gen_wpa_passphrase { + background-color: ; + border: 1px solid ; + border-top-right-radius: 18px !important; + border-bottom-right-radius: 18px !important; +} + +a.scroll-to-top.rounded { + display: inline; + background-color: ; + border-radius: 18px!important; +} + +a.scroll-to-top.rounded i.fas.fa-angle-up { + color: ; +} + +.btn.btn-sm.btn-outline-secondary.rounded-right { + border: 1px solid ; + background-color: ; +} + +.info-item.col-xs-3 { + color: ; +}