From 788dfab4a861b7245937146cc85f27ac0916f2b1 Mon Sep 17 00:00:00 2001 From: gilbN Date: Tue, 10 Sep 2019 22:20:30 +0200 Subject: [PATCH] ombi: fixed a couple of mobile issues, added some more theme specific accents, added new style on buttons, and fixed the size of all buttons. --- CSS/themes/ombi/aquamarine.css | 1 + CSS/themes/ombi/dark.css | 1 + CSS/themes/ombi/hotline.css | 2 + CSS/themes/ombi/ombi-base.css | 140 ++++++++++++++++++++++++++++++++- CSS/themes/ombi/plex.css | 2 + CSS/themes/ombi/space-gray.css | 2 + 6 files changed, 145 insertions(+), 3 deletions(-) diff --git a/CSS/themes/ombi/aquamarine.css b/CSS/themes/ombi/aquamarine.css index ca23e2b4..67a49b21 100644 --- a/CSS/themes/ombi/aquamarine.css +++ b/CSS/themes/ombi/aquamarine.css @@ -20,4 +20,5 @@ --request-button-hover: #12afa0; --loading-bar: #0b3161; --accent-color: #eee; + --label-color: #009688; } diff --git a/CSS/themes/ombi/dark.css b/CSS/themes/ombi/dark.css index 5365df65..73a99a7e 100644 --- a/CSS/themes/ombi/dark.css +++ b/CSS/themes/ombi/dark.css @@ -20,4 +20,5 @@ --request-button-hover: rgba(255, 255, 255, 0.25); --loading-bar: #df691a; --accent-color: #c1c1c1; + --label-color: rgba(255, 255, 255, 0.25); } diff --git a/CSS/themes/ombi/hotline.css b/CSS/themes/ombi/hotline.css index c64ea8fc..60953757 100644 --- a/CSS/themes/ombi/hotline.css +++ b/CSS/themes/ombi/hotline.css @@ -20,4 +20,6 @@ --request-button-hover: #0b3161; --loading-bar: #F44336 ; --accent-color: #ff6155; + --label-color: rgba(11, 49, 97, 0.75); + } \ No newline at end of file diff --git a/CSS/themes/ombi/ombi-base.css b/CSS/themes/ombi/ombi-base.css index 3b0c0c24..cdb3c52d 100644 --- a/CSS/themes/ombi/ombi-base.css +++ b/CSS/themes/ombi/ombi-base.css @@ -49,10 +49,18 @@ body { } /* Navbar */ @media (max-width: 924px) { - .collapse.in { + .collapse.in, .navbar-nav { + background: var(--main-bg-color); + } + } + +@media (max-width: 924px) { + .navbar-left, .navbar-right { + float: none!important; box-shadow: 0px 15px 10px -10px rgba(0, 0, 0, 0.7); } } + .navbar-default .navbar-brand { color: var(--accent-color); } @@ -111,6 +119,10 @@ background-color:var(--modal-bg-color) !important; background-color: rgba(0, 0, 0, 0.25) !important; border-radius: 0px; } +.form-control-search { + height: 49px; +} + .right-radius { border-radius: 0px; } @@ -138,6 +150,9 @@ background-color:var(--modal-bg-color) !important; width: 100%; } } +.refine-option[_ngcontent-c1] { + box-shadow: none; +} /* Expand season request */ .content-space[_ngcontent-c3] { @@ -168,6 +183,7 @@ table.table>thead>tr>th.active { /*dropdown menu */ .dropdown-menu { background: var(--modal-bg-color); + box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6); } .dropdown-menu>li>a:hover { background-color: rgba(255, 255, 255, 0.08); @@ -192,7 +208,7 @@ hr { } .open>.btn-primary-outline.dropdown-toggle,.btn-primary-outline.active, .btn-primary-outline.focus, .btn-primary-outline:active, .btn-primary-outline:focus, .btn-primary-outline:hover{ background-color: var(--request-button-hover) !important; - border-color: var(--request-button-hover)!important; + border-color: transparent !important; } .btn-primary-outline:hover { @@ -209,10 +225,94 @@ hr { outline: none !important; border: 1px solid transparent !important; margin-right: 1px; + background: none; + padding: 5px 10px; + width: auto !important; +} +.btn-group-vertical>.btn.active, .btn-group-vertical>.btn:active, .btn-group-vertical>.btn:focus, .btn-group-vertical>.btn:hover, .btn-group>.btn.active, .btn-group>.btn:active, .btn-group>.btn:focus, .btn-group>.btn:hover { + background: rgba(255, 255, 255, 0.35) !important; } + .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group { margin-left: 3px; } + + + +.btn-success-outline { + -o-transition: all .8s; + -moz-transition: all .8s; + -webkit-transition: all .8s; + transition: all .8s; + color: #ffffff!important; + background-color: rgba(255, 255, 255, 0.35); + background-image: none; + text-transform: uppercase; + border-color: transparent !important; + width: 137.28px; + text-align: center !important; + font-size: 12px; + height: 29.45px; + padding: 5px 10px; +} +.btn-success-outline.active, .btn-success-outline.focus, .btn-success-outline:active, .btn-success-outline:focus, .btn-success-outline:hover, .open>.btn-success-outline.dropdown-toggle { + color: #fff!important; + background-color: rgba(92, 184, 92, .75)!important; + border-color: transparent!important; +} + +.btn-primary-outline { + -o-transition: all .8s; + -moz-transition: all .8s; + -webkit-transition: all .8s; + transition: all .8s; + color: #ffffff !important; + border-color: #f4433600 !important; + outline: none !important; + text-transform: uppercase; + background: rgba(255, 255, 255, 0.35); + font-size: 12px; + height: 29.45px; + width: 137.28px; + padding: 5px 10px; + text-align: center !important; + +} + +.btn-info-outline, .btn-danger-outline { + -o-transition: all .8s; + -moz-transition: all .8s; + -webkit-transition: all .8s; + transition: all .8s; + color: #ffffff!important; + background-color: rgba(255, 255, 255, 0.35); + background-image: none; + border-color: transparent !important; + width: 137.28px; + text-transform: uppercase; + text-align: center !important; + height: 29.45px; + font-size: 12px; +} +.btn-info-outline.active, .btn-info-outline.focus, .btn-info-outline:active, .btn-info-outline:focus, .btn-info-outline:hover, .open>.btn-info-outline.dropdown-toggle { + color: #fff!important; + background-color: rgba(91, 192, 222, 0.75)!important; + border-color: transparent !important; +} + +@media (max-width: 1090px) { + .btn-danger-outline, .btn-info-outline, .btn-primary-outline, .btn-success-outline, .fa-eye:before, .fa-check:before,.fa-plus:before { + width: 104.61px !important; + content: ""; + } + } + +@media (max-width: 1090px) { + .caret { + display: none; + } + } + /* Settings menu */ .nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:focus, .nav-tabs.nav-justified>.active>a:hover { @@ -231,6 +331,7 @@ hr { .nav>li>a:focus, .nav>li>a:hover { background-color: rgba(255, 255, 255, 0.08); border-radius: 3px; + border: 1px solid transparent; } .nav .open>a, .nav .open>a:focus, .nav .open>a:hover { background-color: rgba(0, 0, 0, 0.25); @@ -253,11 +354,44 @@ a.active { .ui-state-highlight { background: var(--modal-bg-color); } - +legend { + border-bottom: 1px solid rgba(255, 255, 255, 0.25); +} /* Main page */ .backdrop { box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6) !important; } a>h4 { color: var(--accent-color); +} +.label-info { + background-color: var(--label-color); +} +.label-success { + background-color: rgba(92, 184, 92, 0.75); +} +.fa-film:before { + content: "\F008"; + color: rgba(255, 255, 255, 0.6); +} + +@media (max-width: 768px) { + .input-group-addon .btn-group { + position: absolute; + right: 0px; + top: 54px; + box-shadow: 0 0 0; + } +} + +/* Issues */ + +.side-back { + box-shadow: 0 0 10px #000000ad; +} +.form-control:focus { + border-color: transparent; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 3px #000; + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 3px #000; } \ No newline at end of file diff --git a/CSS/themes/ombi/plex.css b/CSS/themes/ombi/plex.css index dcc90cf3..f6cb74fe 100644 --- a/CSS/themes/ombi/plex.css +++ b/CSS/themes/ombi/plex.css @@ -20,4 +20,6 @@ --request-button-hover: #e59029; --loading-bar: #cc7b19 ; --accent-color: #f9be03; + --label-color: #cc7b19; + } \ No newline at end of file diff --git a/CSS/themes/ombi/space-gray.css b/CSS/themes/ombi/space-gray.css index 4db6ed4c..fa421ae2 100644 --- a/CSS/themes/ombi/space-gray.css +++ b/CSS/themes/ombi/space-gray.css @@ -20,4 +20,6 @@ --request-button-hover: #607D8B; --loading-bar: #81a6b7; --accent-color: #c3dde8; + --label-color: #607d8b; + }