Refactor navbar
This commit is contained in:
cuom1999
parent
a2243ca668
commit
8a73a8ff78
5 changed files with 186 additions and 230 deletions
|
|
@ -170,56 +170,17 @@ header {
|
||||||
}
|
}
|
||||||
|
|
||||||
#user-links {
|
#user-links {
|
||||||
display: inline;
|
display: flex;
|
||||||
float: right;
|
text-align: center;
|
||||||
color: #5c5954;
|
padding: 4px;
|
||||||
|
margin-right: 1em;
|
||||||
.anon {
|
gap: 5px;
|
||||||
margin-top: 1em;
|
&:hover {
|
||||||
padding-right: 10px;
|
color: black;
|
||||||
display: inline-flex;
|
border-radius: 2px;
|
||||||
min-height: 100%;
|
border: 0.5px solid black;
|
||||||
align-items: center;
|
cursor: pointer;
|
||||||
white-space: nowrap;
|
padding: 3.5px;
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > ul {
|
|
||||||
display: block;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
& > li > span {
|
|
||||||
height: 36px;
|
|
||||||
padding-top: 8px;
|
|
||||||
display: block;
|
|
||||||
white-space: nowrap;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-top: 2px solid $theme_color;
|
|
||||||
color: black;
|
|
||||||
background: rgba(255, 255, 255, 0.25);
|
|
||||||
margin: -2.75px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > img {
|
|
||||||
vertical-align: middle;
|
|
||||||
border-radius: $widget_border_radius;
|
|
||||||
display: inline;
|
|
||||||
margin: 2px 6px 0 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > span {
|
|
||||||
vertical-align: middle;
|
|
||||||
display: inline;
|
|
||||||
margin-top: 11px;
|
|
||||||
margin-right: 9px;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -280,14 +241,12 @@ nav {
|
||||||
}
|
}
|
||||||
|
|
||||||
a, button {
|
a, button {
|
||||||
display: inline-block;
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
vertical-align: middle;
|
|
||||||
color: black;
|
color: black;
|
||||||
padding: 13px 7px;
|
|
||||||
height: 18px;
|
|
||||||
border-top: 2px solid transparent;
|
|
||||||
border-bottom: 2px solid transparent;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: initial;
|
font-size: initial;
|
||||||
|
|
||||||
|
|
@ -306,7 +265,6 @@ nav {
|
||||||
// color: #FFF;
|
// color: #FFF;
|
||||||
border-top: 2px solid $theme_color;
|
border-top: 2px solid $theme_color;
|
||||||
color: $theme_color;
|
color: $theme_color;
|
||||||
background: white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-expand {
|
.nav-expand {
|
||||||
|
|
@ -368,16 +326,6 @@ nav {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-divider {
|
|
||||||
width: 1px;
|
|
||||||
vertical-align: middle;
|
|
||||||
padding-left: 3px;
|
|
||||||
display: inline-block;
|
|
||||||
height: 32px;
|
|
||||||
margin-right: 10px;
|
|
||||||
border-right: 3px solid rgba(255, 255, 255, 0.15);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
|
|
@ -541,26 +489,6 @@ noscript #noscript {
|
||||||
flex: 1 1 1px;
|
flex: 1 1 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#user-links {
|
|
||||||
height: 100%;
|
|
||||||
padding-right: 1em;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
padding: 0;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#page-container {
|
#page-container {
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -610,14 +538,13 @@ math {
|
||||||
|
|
||||||
#navicon {
|
#navicon {
|
||||||
transition-duration: 0.25s;
|
transition-duration: 0.25s;
|
||||||
display: block;
|
display: flex;
|
||||||
line-height: 26px;
|
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
color: $widget_black;
|
color: $widget_black;
|
||||||
padding: 0 0.25em;
|
padding: 0 0.25em;
|
||||||
margin: 4px 0.25em;
|
margin: 4px 0.25em;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
float: left;
|
flex-grow: 1;
|
||||||
|
|
||||||
&.hover {
|
&.hover {
|
||||||
color: #4db7fe;
|
color: #4db7fe;
|
||||||
|
|
@ -647,6 +574,8 @@ math {
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
text-align: left;
|
||||||
|
padding: 7px 13px;
|
||||||
|
|
||||||
.nav-expand {
|
.nav-expand {
|
||||||
float: right;
|
float: right;
|
||||||
|
|
@ -669,25 +598,13 @@ math {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#user-links {
|
|
||||||
& > ul > li {
|
|
||||||
& > a > span {
|
|
||||||
padding-top: 4px;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > ul {
|
|
||||||
left: 0 !important;
|
|
||||||
margin-top: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media not all and (max-width: 760px) {
|
@media(min-width: 800px) {
|
||||||
#nav-list {
|
#nav-list {
|
||||||
display: inline !important;
|
display: flex !important;
|
||||||
|
gap: 1.5em;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
&.home-menu-item {
|
&.home-menu-item {
|
||||||
|
|
@ -758,20 +675,6 @@ math {
|
||||||
background: lightgray;
|
background: lightgray;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-icons {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
float: left;
|
|
||||||
margin-right: 0.3em;
|
|
||||||
|
|
||||||
.navbar-icon {
|
|
||||||
font-size: 1.6em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.navbar-icon {
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.unread_boxes {
|
.unread_boxes {
|
||||||
background-color: red;
|
background-color: red;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
@ -879,18 +782,32 @@ select {
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-right-text {
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: small;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anon {
|
||||||
|
display: flex;
|
||||||
|
gap: 1em;
|
||||||
|
padding-right: 1em;
|
||||||
|
a {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 799px) {
|
@media (max-width: 799px) {
|
||||||
#user-links, .anon {
|
.nav-fa-icon {
|
||||||
padding-right: 0.5em;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(min-width: 800px) {
|
@media(min-width: 800px) {
|
||||||
.anon {
|
.normal-text {
|
||||||
padding-right: 1em;
|
font-weight: normal;
|
||||||
}
|
font-size: small;
|
||||||
.navbar-icons {
|
text-align: left;
|
||||||
margin-top: 6px;
|
|
||||||
}
|
}
|
||||||
#page-container {
|
#page-container {
|
||||||
background: #f1f2f2;
|
background: #f1f2f2;
|
||||||
|
|
@ -960,12 +877,6 @@ input::placeholder{
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.normal-text {
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: small;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-fa-icon {
|
.nav-fa-icon {
|
||||||
i {
|
i {
|
||||||
margin-right: 0.1em;
|
margin-right: 0.1em;
|
||||||
|
|
|
||||||
|
|
@ -1502,7 +1502,7 @@ a:hover {
|
||||||
color: rgb(102, 177, 250);
|
color: rgb(102, 177, 250);
|
||||||
}
|
}
|
||||||
a:active {
|
a:active {
|
||||||
color: rgb(255, 180, 29);
|
color: rgb(249, 146, 97);
|
||||||
}
|
}
|
||||||
* {
|
* {
|
||||||
-webkit-tap-highlight-color: transparent;
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
|
@ -1538,14 +1538,9 @@ header {
|
||||||
background-color: rgb(13, 14, 14);
|
background-color: rgb(13, 14, 14);
|
||||||
color: rgb(178, 172, 162);
|
color: rgb(178, 172, 162);
|
||||||
}
|
}
|
||||||
#user-links {
|
#user-links:hover {
|
||||||
color: rgb(176, 170, 159);
|
|
||||||
}
|
|
||||||
#user-links > ul > li > span:hover {
|
|
||||||
border-top-color: rgb(199, 70, 8);
|
|
||||||
color: rgb(232, 230, 227);
|
color: rgb(232, 230, 227);
|
||||||
background-image: initial;
|
border-color: rgb(140, 130, 115);
|
||||||
background-color: rgba(24, 26, 27, 0.25);
|
|
||||||
}
|
}
|
||||||
#nav-shadow {
|
#nav-shadow {
|
||||||
background-image: linear-gradient(rgb(49, 53, 55),
|
background-image: linear-gradient(rgb(49, 53, 55),
|
||||||
|
|
@ -1571,8 +1566,6 @@ nav ul li a,
|
||||||
nav ul li button {
|
nav ul li button {
|
||||||
text-decoration-color: initial;
|
text-decoration-color: initial;
|
||||||
color: rgb(232, 230, 227);
|
color: rgb(232, 230, 227);
|
||||||
border-top-color: transparent;
|
|
||||||
border-bottom-color: transparent;
|
|
||||||
}
|
}
|
||||||
nav ul li a:link,
|
nav ul li a:link,
|
||||||
nav ul li button:link {
|
nav ul li button:link {
|
||||||
|
|
@ -1589,8 +1582,6 @@ nav ul li a.active,
|
||||||
nav ul li button.active {
|
nav ul li button.active {
|
||||||
border-top-color: rgb(199, 70, 8);
|
border-top-color: rgb(199, 70, 8);
|
||||||
color: rgb(249, 146, 97);
|
color: rgb(249, 146, 97);
|
||||||
background-image: initial;
|
|
||||||
background-color: rgb(24, 26, 27);
|
|
||||||
}
|
}
|
||||||
nav ul li ul {
|
nav ul li ul {
|
||||||
color: rgb(232, 230, 227);
|
color: rgb(232, 230, 227);
|
||||||
|
|
@ -1619,9 +1610,6 @@ nav ul li.home-nav-element a:hover {
|
||||||
background-image: initial;
|
background-image: initial;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
nav .nav-divider {
|
|
||||||
border-right-color: rgba(48, 52, 54, 0.15);
|
|
||||||
}
|
|
||||||
hr {
|
hr {
|
||||||
color: rgba(232, 230, 227, 0.2);
|
color: rgba(232, 230, 227, 0.2);
|
||||||
}
|
}
|
||||||
|
|
@ -1724,7 +1712,7 @@ noscript #noscript {
|
||||||
color: rgb(178, 171, 161);
|
color: rgb(178, 171, 161);
|
||||||
}
|
}
|
||||||
#chat-icon {
|
#chat-icon {
|
||||||
color: rgb(205, 200, 194);
|
color: rgb(249, 146, 97);
|
||||||
}
|
}
|
||||||
#chat-icon:hover {
|
#chat-icon:hover {
|
||||||
color: rgb(114, 255, 114);
|
color: rgb(114, 255, 114);
|
||||||
|
|
@ -1800,7 +1788,10 @@ noscript #noscript {
|
||||||
color: rgb(152, 143, 129);
|
color: rgb(152, 143, 129);
|
||||||
}
|
}
|
||||||
#loading-bar {
|
#loading-bar {
|
||||||
background-color: rgb(122, 46, 40);
|
background-color: rgb(125, 44, 5);
|
||||||
|
}
|
||||||
|
.anon a {
|
||||||
|
color: rgb(232, 230, 227);
|
||||||
}
|
}
|
||||||
@media (min-width: 800px) {
|
@media (min-width: 800px) {
|
||||||
#page-container {
|
#page-container {
|
||||||
|
|
@ -1816,19 +1807,25 @@ noscript #noscript {
|
||||||
color: rgb(232, 230, 227);
|
color: rgb(232, 230, 227);
|
||||||
}
|
}
|
||||||
::-webkit-input-placeholder {
|
::-webkit-input-placeholder {
|
||||||
color: rgb(205, 200, 194);
|
color: rgb(249, 146, 97);
|
||||||
}
|
}
|
||||||
::placeholder {
|
::placeholder {
|
||||||
color: rgb(205, 200, 194);
|
color: rgb(249, 146, 97);
|
||||||
}
|
}
|
||||||
input::-webkit-input-placeholder {
|
input::-webkit-input-placeholder {
|
||||||
color: rgb(205, 200, 194);
|
color: rgb(249, 146, 97);
|
||||||
}
|
}
|
||||||
input::placeholder {
|
input::placeholder {
|
||||||
color: rgb(205, 200, 194);
|
color: rgb(249, 146, 97);
|
||||||
}
|
}
|
||||||
::-webkit-input-placeholder {
|
::-webkit-input-placeholder {
|
||||||
color: rgb(205, 200, 194);
|
color: rgb(249, 146, 97);
|
||||||
|
}
|
||||||
|
.nav-fa-icon i {
|
||||||
|
color: rgb(232, 230, 227);
|
||||||
|
}
|
||||||
|
.nav-fa-icon-active i {
|
||||||
|
color: rgb(249, 146, 97);
|
||||||
}
|
}
|
||||||
.table {
|
.table {
|
||||||
background-image: initial;
|
background-image: initial;
|
||||||
|
|
@ -1921,7 +1918,7 @@ input::placeholder {
|
||||||
}
|
}
|
||||||
.left-sidebar-item.active {
|
.left-sidebar-item.active {
|
||||||
color: rgb(232, 230, 227);
|
color: rgb(232, 230, 227);
|
||||||
background-color: rgb(3, 66, 54);
|
background-color: rgb(125, 44, 5);
|
||||||
}
|
}
|
||||||
.left-sidebar-item.active .sidebar-icon {
|
.left-sidebar-item.active .sidebar-icon {
|
||||||
color: rgb(232, 230, 227);
|
color: rgb(232, 230, 227);
|
||||||
|
|
@ -1976,7 +1973,7 @@ input::placeholder {
|
||||||
color: rgb(232, 230, 227);
|
color: rgb(232, 230, 227);
|
||||||
}
|
}
|
||||||
.left-sidebar-item.active:hover {
|
.left-sidebar-item.active:hover {
|
||||||
background-color: rgb(3, 66, 54);
|
background-color: rgb(125, 44, 5);
|
||||||
color: rgb(232, 230, 227);
|
color: rgb(232, 230, 227);
|
||||||
}
|
}
|
||||||
.sidebar-icon {
|
.sidebar-icon {
|
||||||
|
|
@ -2406,7 +2403,7 @@ a.user-redirect:hover {
|
||||||
color: rgb(224, 90, 72);
|
color: rgb(224, 90, 72);
|
||||||
}
|
}
|
||||||
.button, button, input[type="submit"] {
|
.button, button, input[type="submit"] {
|
||||||
background-color: rgb(3, 66, 54);
|
background-color: rgb(125, 44, 5);
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px;
|
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px;
|
||||||
text-decoration-color: initial;
|
text-decoration-color: initial;
|
||||||
|
|
@ -2452,18 +2449,18 @@ a.user-redirect:hover {
|
||||||
}
|
}
|
||||||
.button.btn-darkGreen, button.btn-darkGreen, input[type="submit"].btn-darkGreen {
|
.button.btn-darkGreen, button.btn-darkGreen, input[type="submit"].btn-darkGreen {
|
||||||
background-image: initial;
|
background-image: initial;
|
||||||
background-color: rgb(3, 66, 54);
|
background-color: rgb(125, 44, 5);
|
||||||
}
|
}
|
||||||
.button:hover, button:hover, input[type="submit"]:hover {
|
.button:hover, button:hover, input[type="submit"]:hover {
|
||||||
background-color: rgb(3, 66, 54);
|
background-color: rgb(125, 44, 5);
|
||||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
|
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
|
||||||
}
|
}
|
||||||
.button:focus, button:focus, input[type="submit"]:focus {
|
.button:focus, button:focus, input[type="submit"]:focus {
|
||||||
background-color: rgb(3, 66, 54);
|
background-color: rgb(125, 44, 5);
|
||||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
|
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
|
||||||
}
|
}
|
||||||
.button:active, button:active, input[type="submit"]:hover {
|
.button:active, button:active, input[type="submit"]:hover {
|
||||||
background-color: rgb(3, 66, 54);
|
background-color: rgb(125, 44, 5);
|
||||||
box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px;
|
box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px;
|
||||||
}
|
}
|
||||||
input[type="text"], input[type="password"], input[type="email"], input[type="number"] {
|
input[type="text"], input[type="password"], input[type="email"], input[type="number"] {
|
||||||
|
|
@ -2513,8 +2510,8 @@ input[type="text"]:focus, input[type="password"]:focus {
|
||||||
.tabs > ul > li.active > span:hover,
|
.tabs > ul > li.active > span:hover,
|
||||||
.tabs > ul > li.active > a,
|
.tabs > ul > li.active > a,
|
||||||
.tabs > ul > li.active > span {
|
.tabs > ul > li.active > span {
|
||||||
color: rgb(205, 200, 194);
|
color: rgb(249, 146, 97);
|
||||||
border-bottom-color: rgb(126, 117, 103);
|
border-bottom-color: rgb(199, 70, 8);
|
||||||
background-image: initial;
|
background-image: initial;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
@ -2561,9 +2558,9 @@ ul.pagination a:hover {
|
||||||
ul.pagination > li > a,
|
ul.pagination > li > a,
|
||||||
ul.pagination > li > span {
|
ul.pagination > li > span {
|
||||||
text-decoration-color: initial;
|
text-decoration-color: initial;
|
||||||
color: rgb(205, 200, 194);
|
color: rgb(249, 146, 97);
|
||||||
background-color: rgb(24, 26, 27);
|
background-color: rgb(24, 26, 27);
|
||||||
border-color: rgb(126, 117, 103);
|
border-color: rgb(199, 70, 8);
|
||||||
}
|
}
|
||||||
ul.pagination > .disabled-page > a {
|
ul.pagination > .disabled-page > a {
|
||||||
color: rgb(157, 148, 136);
|
color: rgb(157, 148, 136);
|
||||||
|
|
@ -2577,7 +2574,7 @@ ul.pagination > .disabled-page > span {
|
||||||
}
|
}
|
||||||
ul.pagination > .active-page > a {
|
ul.pagination > .active-page > a {
|
||||||
color: rgb(232, 230, 227);
|
color: rgb(232, 230, 227);
|
||||||
background-color: rgb(3, 66, 54);
|
background-color: rgb(125, 44, 5);
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
}
|
}
|
||||||
ul.pagination > .active-page > span {
|
ul.pagination > .active-page > span {
|
||||||
|
|
@ -2635,7 +2632,7 @@ a.close:hover {
|
||||||
}
|
}
|
||||||
.sidebox h3 .fa {
|
.sidebox h3 .fa {
|
||||||
background-image: initial;
|
background-image: initial;
|
||||||
background-color: rgb(3, 66, 54);
|
background-color: rgb(125, 44, 5);
|
||||||
color: rgb(232, 230, 227);
|
color: rgb(232, 230, 227);
|
||||||
}
|
}
|
||||||
.sidebox-content {
|
.sidebox-content {
|
||||||
|
|
@ -3107,7 +3104,7 @@ a.voted {
|
||||||
color: rgb(232, 230, 227);
|
color: rgb(232, 230, 227);
|
||||||
}
|
}
|
||||||
.chat-input-icon {
|
.chat-input-icon {
|
||||||
color: rgb(205, 200, 194);
|
color: rgb(249, 146, 97);
|
||||||
}
|
}
|
||||||
.chat-input-icon:hover {
|
.chat-input-icon:hover {
|
||||||
background-image: initial;
|
background-image: initial;
|
||||||
|
|
@ -3873,11 +3870,67 @@ mjx-merror {
|
||||||
mjx-assistive-mml {
|
mjx-assistive-mml {
|
||||||
border-color: initial !important;
|
border-color: initial !important;
|
||||||
}
|
}
|
||||||
.recently-attempted ul {
|
mjx-stretchy-v > mjx-ext {
|
||||||
list-style-image: initial;
|
border-color: transparent;
|
||||||
}
|
}
|
||||||
.organization-row:last-child {
|
.noUi-target,
|
||||||
border-bottom-color: initial;
|
.noUi-target * {
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
.noUi-target {
|
||||||
|
background-image: initial;
|
||||||
|
background-color: rgb(27, 29, 30);
|
||||||
|
border-color: rgb(60, 65, 68);
|
||||||
|
box-shadow: rgb(32, 35, 37) 0px 1px 1px inset,
|
||||||
|
rgb(62, 68, 70) 0px 3px 6px -5px;
|
||||||
|
}
|
||||||
|
.noUi-connect {
|
||||||
|
background-image: initial;
|
||||||
|
background-color: rgb(50, 147, 140);
|
||||||
|
box-shadow: rgba(38, 42, 43, 0.45) 0px 0px 3px inset;
|
||||||
|
}
|
||||||
|
.noUi-handle {
|
||||||
|
border-color: rgb(59, 64, 66);
|
||||||
|
background-image: initial;
|
||||||
|
background-color: rgb(24, 26, 27);
|
||||||
|
box-shadow: rgb(24, 26, 27) 0px 0px 1px inset,
|
||||||
|
rgb(35, 38, 40) 0px 1px 7px inset,
|
||||||
|
rgb(62, 68, 70) 0px 3px 6px -3px;
|
||||||
|
}
|
||||||
|
.noUi-active {
|
||||||
|
box-shadow: rgb(24, 26, 27) 0px 0px 1px inset,
|
||||||
|
rgb(43, 47, 49) 0px 1px 7px inset,
|
||||||
|
rgb(62, 68, 70) 0px 3px 6px -3px;
|
||||||
|
}
|
||||||
|
.noUi-handle::after,
|
||||||
|
.noUi-handle::before {
|
||||||
|
background-image: initial;
|
||||||
|
background-color: rgb(38, 41, 42);
|
||||||
|
}
|
||||||
|
[disabled] .noUi-connect {
|
||||||
|
background-image: initial;
|
||||||
|
background-color: rgb(64, 69, 72);
|
||||||
|
}
|
||||||
|
.noUi-pips {
|
||||||
|
color: rgb(168, 160, 149);
|
||||||
|
}
|
||||||
|
.noUi-value-sub {
|
||||||
|
color: rgb(200, 195, 188);
|
||||||
|
}
|
||||||
|
.noUi-marker {
|
||||||
|
background-image: initial;
|
||||||
|
background-color: rgb(53, 57, 59);
|
||||||
|
}
|
||||||
|
.noUi-marker-large,
|
||||||
|
.noUi-marker-sub {
|
||||||
|
background-image: initial;
|
||||||
|
background-color: rgb(72, 78, 81);
|
||||||
|
}
|
||||||
|
.noUi-tooltip {
|
||||||
|
border-color: rgb(59, 64, 66);
|
||||||
|
background-image: initial;
|
||||||
|
background-color: rgb(24, 26, 27);
|
||||||
|
color: rgb(232, 230, 227);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Override Style */
|
/* Override Style */
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 782 KiB After Width: | Height: | Size: 278 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 278 KiB |
|
|
@ -210,21 +210,21 @@
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
<nav id="navigation" class="unselectable">
|
<nav id="navigation" class="unselectable">
|
||||||
<div id="nav-container">
|
<div id="nav-container" style="display: flex">
|
||||||
<span id="navicon"><i class="fa fa-bars"></i></span>
|
<span id="navicon"><i class="fa fa-bars"></i></span>
|
||||||
<ul id="nav-list">
|
<ul id="nav-list">
|
||||||
<li style="margin-right:1.5em" class="home-nav-element"><a href="{{ url('home') }}">{% include "site-logo-fragment.html" %}</a></li>
|
<li class="home-nav-element" style="margin-right: 1em"><a href="{{ url('home') }}">{% include "site-logo-fragment.html" %}</a></li>
|
||||||
<li class="home-nav-element"><span class="nav-divider"></span></li>
|
|
||||||
<li class="home-menu-item"><a href="{{ url('home') }}" class="nav-home">{{ _('Home') }}</a></li>
|
<li class="home-menu-item"><a href="{{ url('home') }}" class="nav-home">{{ _('Home') }}</a></li>
|
||||||
{% for node in mptt_tree(nav_bar) recursive %}
|
{% for node in mptt_tree(nav_bar) recursive %}
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ node.path }}" id="fa-icon-links" class="normal-text nav-{{ node.key }}{% if node.key in nav_tab %} active{% endif %}" style="font-size: smaller; margin-right: 1.5em; text-align: left;">
|
<a href="{{ node.path }}" id="fa-icon-links" class="normal-text nav-{{ node.key }}{% if node.key in nav_tab %} active{% endif %}">
|
||||||
<span class="nav-fa-icon{{'-active' if node.key in nav_tab else''}}">
|
<span class="nav-fa-icon{{'-active' if node.key in nav_tab else''}}">
|
||||||
{% if node.key == "problems" %} <i class="fa fa-pencil"></i> {% endif %}
|
{% if node.key == "problems" %} <i class="fa fa-pencil"></i> {% endif %}
|
||||||
{% if node.key == "submit" %} <i class="fa fa-neuter"></i> {% endif %}
|
{% if node.key == "submit" %} <i class="fa fa-code"></i> {% endif %}
|
||||||
{% if node.key == "user" %} <i class="fa fa-user"></i> {% endif %}
|
{% if node.key == "user" %} <i class="fa fa-user"></i> {% endif %}
|
||||||
{% if node.key == "contest" %} <i class="fa fa-graduation-cap"></i> {% endif %}
|
{% if node.key == "contest" %} <i class="fa fa-graduation-cap"></i> {% endif %}
|
||||||
{% if node.key == "about" %} <i class="fa fa-group"></i> {% endif %}
|
{% if node.key == "group" %} <i class="fa fa-group"></i> {% endif %}
|
||||||
|
{% if node.key == "about" %} <i class="fa fa-at"></i> {% endif %}
|
||||||
</span>
|
</span>
|
||||||
{{ user_trans(node.label) }}
|
{{ user_trans(node.label) }}
|
||||||
{% if not node.is_leaf_node %}
|
{% if not node.is_leaf_node %}
|
||||||
|
|
@ -238,59 +238,51 @@
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<div style="float: right; display: inline-flex; font-size: larger; align-items: center; height: 100%;">
|
<div style="display: flex; font-size: larger; align-items: center; height: 100%; gap: 1em;">
|
||||||
<span class="navbar-icons">
|
{% if request.user.is_authenticated %}
|
||||||
{% if request.user.is_authenticated %}
|
<span title="{{_('Chat')}}">
|
||||||
<span title="{{_('Chat')}}">
|
<a id="chat-icon" href="{{ url('chat', '') }}" class="fa fa-wechat navbar-icon" aria-hidden="true" style="font-size: 22.5px;">
|
||||||
<a id="chat-icon" href="{{ url('chat', '') }}" class="fa fa-wechat navbar-icon" aria-hidden="true" style="font-size: 22.5px;">
|
{% set unread_chat = request.profile.count_unread_chat_boxes %}
|
||||||
{% set unread_chat = request.profile.count_unread_chat_boxes %}
|
{% if unread_chat %}
|
||||||
{% if unread_chat %}
|
<sub class="unread_boxes">{{unread_chat}}</sub>
|
||||||
<sub class="unread_boxes">{{unread_chat}}</sub>
|
{% endif %}
|
||||||
{% endif %}
|
</a>
|
||||||
</a>
|
</span>
|
||||||
</span>
|
|
||||||
|
|
||||||
{% set unseen_cnt = request.profile.count_unseen_notifications %}
|
{% set unseen_cnt = request.profile.count_unseen_notifications %}
|
||||||
<span title="{{_('Notification')}}" class="{{ 'notification-open' if unseen_cnt > 0 }}">
|
<span title="{{_('Notification')}}" class="{{ 'notification-open' if unseen_cnt > 0 }}">
|
||||||
<a href="{{ url('notification') }}" class="fa fa-bell-o navbar-icon" id="notification" aria-hidden="true" style="font-size: 22.5px;">
|
<a href="{{ url('notification') }}" class="fa fa-bell-o navbar-icon" id="notification" aria-hidden="true" style="font-size: 22.5px;">
|
||||||
{% if unseen_cnt > 0 %}
|
{% if unseen_cnt > 0 %}
|
||||||
<sub class="unread_boxes">{{unseen_cnt}}</sub>
|
<sub class="unread_boxes">{{unseen_cnt}}</sub>
|
||||||
{% endif %}
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
{% endif %}
|
|
||||||
<span title="{{_('Language')}}">
|
|
||||||
<div class="navbar-icon" id="nav-lang-icon" aria-hidden="true" style="font-size: 22.5px;">
|
|
||||||
{% if LANGUAGE_CODE == "vi" %}
|
|
||||||
<h4 class="normal-text" style="color: black;">Tiếng Việt</h4>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if LANGUAGE_CODE == "en" %}
|
</a>
|
||||||
<h4 class="normal-text" style="color: black;">English</h4>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
<div id="lang-dropdown" class="dropdown" role="tooltip">
|
|
||||||
{% for language in language_info_list(LANGUAGES) %}
|
|
||||||
<div value="{{ language.code }}"
|
|
||||||
class="dropdown-item lang-dropdown-item" style="{{'font-weight: bold' if language.code == LANGUAGE_CODE}}">
|
|
||||||
{{ language.name_local }}
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
<span title="{{_('Dark Mode')}}">
|
|
||||||
<a class="fa fa-moon-o navbar-icon black" id="nav-darkmode-icon" aria-hidden="true" href="?darkmode=1" style="font-size: 22.5px;"></a>
|
|
||||||
</span>
|
</span>
|
||||||
|
{% endif %}
|
||||||
|
<span title="{{_('Language')}}">
|
||||||
|
<div class="navbar-icon" id="nav-lang-icon" aria-hidden="true" style="font-size: 22.5px;">
|
||||||
|
{% if LANGUAGE_CODE == "vi" %}
|
||||||
|
<h4 class="black nav-right-text">Tiếng Việt</h4>
|
||||||
|
{% endif %}
|
||||||
|
{% if LANGUAGE_CODE == "en" %}
|
||||||
|
<h4 class="black nav-right-text">English</h4>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<div id="lang-dropdown" class="dropdown" role="tooltip">
|
||||||
|
{% for language in language_info_list(LANGUAGES) %}
|
||||||
|
<div value="{{ language.code }}"
|
||||||
|
class="dropdown-item lang-dropdown-item" style="{{'font-weight: bold' if language.code == LANGUAGE_CODE}}">
|
||||||
|
{{ language.name_local }}
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<span title="{{_('Dark Mode')}}">
|
||||||
|
<a class="fa fa-moon-o navbar-icon black" id="nav-darkmode-icon" aria-hidden="true" href="?darkmode=1" style="font-size: 22.5px;"></a>
|
||||||
</span>
|
</span>
|
||||||
{% if request.user.is_authenticated %}
|
{% if request.user.is_authenticated %}
|
||||||
<span id="user-links" class="navbar-icons">
|
<span id="user-links">
|
||||||
<ul><li>
|
<img src="{{ gravatar(request.profile, 32) }}" height="24" width="24">
|
||||||
<span>
|
<i class="fa fa-angle-down" style="font-size: 18px; padding-top: 8px;"></i>
|
||||||
<img src="{{ gravatar(request.profile, 32) }}" height="24" width="24">{# -#}
|
|
||||||
<span>
|
|
||||||
<b class="{{request.profile.css_class}}">{{ request.user.username }}</b>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</li></ul>
|
|
||||||
</span>
|
</span>
|
||||||
<div class="dropdown" id="userlink_dropdown" role="tooptip">
|
<div class="dropdown" id="userlink_dropdown" role="tooptip">
|
||||||
<a href="{{ url('user_page') }}">
|
<a href="{{ url('user_page') }}">
|
||||||
|
|
@ -328,9 +320,9 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<span class="anon navbar-icons">
|
<span class="anon">
|
||||||
<a href="{{ url('auth_login') }}?next={{ LOGIN_RETURN_PATH|urlencode }}" style="margin-right: 20px;"><h4 class="normal-text">{{ _('Log in') }}</h4></a>
|
<a href="{{ url('auth_login') }}?next={{ LOGIN_RETURN_PATH|urlencode }}"><h4 class="nav-right-text">{{ _('Log in') }}</h4></a>
|
||||||
<a href="{{ url('registration_register') }}"><h4 class="normal-text">{{ _('Sign up') }}</h4></a>
|
<a href="{{ url('registration_register') }}"><h4 class="nav-right-text">{{ _('Sign up') }}</h4></a>
|
||||||
</span>
|
</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue