diff --git a/ooiui/static/css/custom/navbar.css b/ooiui/static/css/custom/navbar.css index cf21995de..cb03686db 100644 --- a/ooiui/static/css/custom/navbar.css +++ b/ooiui/static/css/custom/navbar.css @@ -354,3 +354,237 @@ a#logged-in-user.dropdown-toggle { font-weight: bold; letter-spacing: 1px; } + + +* { + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + -webkit-transition: all 0s ease-in-out; + -moz-transition: all 0s ease-in-out; + -o-transition: all 0s ease-in-out; + transition: all 0s ease-in-out; +} + + + +#ribbon-container { + position: absolute; + top: 52px; + right: 2px; + overflow: visible; + /* so we can see the pseudo-elements we're going to add to the anchor */ + color: #02a3de; + font-size: 14px; + font-weight: bolder; + + /* font-size and line-height must be equal so we can account for the height of the banner */ + + line-height: 2px; + font-family: 'Montserrat', sans-serif; +} + +#ribbon-container:before { + content: ""; + height: 0; + width: 0; + display: block; + position: absolute; + top: 2px; + left: 0; + border-top: 15px solid rgba(0, 0, 0, .3); + /* These 4 border properties create the first part of our drop-shadow */ + + border-bottom: 15px solid rgba(0, 0, 0, .3); + border-right: 0px solid rgba(0, 0, 0, .3); + border-left: 15px solid transparent; +} + +#ribbon-container:after { + /* This adds the second part of our dropshadow */ + + content: ""; + height: 2px; + background: rgba(0, 0, 0, .3); + display: block; + position: absolute; + bottom: -2px; + left: 15px; + right: 3px; +} + +#ribbon-container a { + color: #fff; + display: block; + padding: 15px; + position: relative; + /* allows us to position our pseudo-elements properly */ + + background: #005088; + overflow: visible; + height: 15px; + margin-left: 15px; + + text-decoration: none; +} + +#ribbon-container a:after { + /* this creates the "folded" part of our ribbon */ + color: #02a3de; + content: ""; + height: 0; + width: 0; + display: block; + position: absolute; + bottom: -15px; + right: 0; + border-top: 15px solid #005088; + border-right: 15px solid transparent; +} + +#ribbon-container a:before { + /* this creates the "forked" part of our ribbon */ + color: #02a3de; + content: ""; + height: 0; + width: 0; + display: block; + position: absolute; + top: 0; + left: -15px; + border-top: 15px solid #005088; + border-bottom: 15px solid #005088; + border-right: 15px solid transparent; + border-left: 15px solid transparent; +} + +#ribbon-container a:hover { + color: #02a3de; + background: #005088; +} + +#ribbon-container a:hover:before { + /* this makes sure that the "forked" part of the ribbon changes color with the anchor on :hover */ + color: #fff; + border-top: 15px solid #005088; + border-bottom: 15px solid #005088; +} + + +/* ribbon-container-top ---------------------------------------------------------------------------------------------------------- */ + +#ribbon-container-top { + position: absolute; + top: 10px; + left: 35%; + overflow: visible; + /* so we can see the pseudo-elements we're going to add to the anchor */ + color: #02a3de; + font-size: 14px; + font-weight: bolder; + + /* font-size and line-height must be equal so we can account for the height of the banner */ + + line-height: 2px; + font-family: 'Montserrat', sans-serif; +} + +#ribbon-container-top:before { + content: ""; + height: 0; + width: 0; + display: block; + position: absolute; + top: 2px; + left: 0; + border-top: 15px solid rgba(0, 0, 0, .3); + /* These 4 border properties create the first part of our drop-shadow */ + + border-bottom: 15px solid rgba(0, 0, 0, .3); + border-right: 0px solid rgba(0, 0, 0, .3); + border-left: 15px solid transparent; +} + +#ribbon-container-top:after { + /* This adds the second part of our dropshadow */ + + content: ""; + height: 2px; + background: rgba(0, 0, 0, .3); + display: block; + position: absolute; + bottom: -2px; + left: 15px; + right: 3px; +} + +#ribbon-container-top a { + color: #fff; + display: block; + padding: 15px; + position: relative; + /* allows us to position our pseudo-elements properly */ + + background: #005088; + overflow: visible; + height: 15px; + margin-left: 15px; + /*margin-right: 15px;*/ + text-decoration: none; +} + +#ribbon-container-top img { + left: 187px; + height: 32px; + top: -22px; + position: absolute; +} + +#ribbon-container-top a:after { + + /* this creates the right "forked" part of our ribbon + color: #02a3de; + content: ""; + height: 0; + width: 0; + display: block; + position: absolute; + top: 0; + right: -15px; + border-top: 15px solid #005088; + border-bottom: 15px solid #005088; + border-right: 15px solid transparent; + border-left: 15px solid transparent;*/ +} + +#ribbon-container-top a:before { + /* this creates the "forked" part of our ribbon */ + color: #02a3de; + content: ""; + height: 0; + width: 0; + display: block; + position: absolute; + top: 0; + left: -15px; + border-top: 15px solid #005088; + border-bottom: 15px solid #005088; + border-right: 15px solid transparent; + border-left: 15px solid transparent; +} + +#ribbon-container-top a:hover { + color: #02a3de; + background: #005088; +} + +#ribbon-container-top a:hover:before { + /* this makes sure that the "forked" part of the ribbon changes color with the anchor on :hover */ + color: #fff; + border-top: 15px solid #005088; + border-bottom: 15px solid #005088; +} + +#navbar-menus { + margin-right: 30%; +} diff --git a/ooiui/static/img/new-badge-2-48.png b/ooiui/static/img/new-badge-2-48.png new file mode 100644 index 000000000..8d31c05b3 Binary files /dev/null and b/ooiui/static/img/new-badge-2-48.png differ diff --git a/ooiui/static/js/partials/Navbar.html b/ooiui/static/js/partials/Navbar.html index 5ea51b2c8..fd7f88707 100644 --- a/ooiui/static/js/partials/Navbar.html +++ b/ooiui/static/js/partials/Navbar.html @@ -1,4 +1,10 @@