f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-06 07:52:40 +00:00
Code Wiki Activity

Tidy NavBar Less

Browse Source
This commit is contained in:
Trevor Buckner
2023-04-12 17:35:18 -04:00
parent 45b7d7da88
commit 891bf528cd
1 changed files with 278 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

255
client/homebrew/navbar/navbar.less
View File

@@ -1,166 +1,167 @@
@import 'naturalcrit/styles/colors.less'; @import "naturalcrit/styles/colors.less";
@navbarHeight : 28px; @navbarHeight : 28px;
@keyframes pinkColoring { @keyframes pinkColoring {
//from {color: white;} 0% {color : pink;}
//to {color: red;} 50% {color : pink;}
0% {color: pink;} 75% {color : red;}
50% {color: pink;} 100% {color : pink;}
75% {color: red;}
100% {color: pink;}
} }
.homebrew nav{ .homebrew nav {
.homebrewLogo{ .homebrewLogo {
.animate(color); .animate(color);
font-family : CodeBold; font-family : CodeBold;
font-size : 12px; font-size : 12px;
color : white; color : white;
div{ div {
margin-top : 2px; margin-top : 2px;
margin-bottom : -2px; margin-bottom : -2px;
} }
&:hover{ &:hover {
color : @blue; color : @blue;
} }
} }
.editTitle.navItem{ .editTitle.navItem {
padding : 2px 12px; padding : 2px 12px;
input{ input {
font-family : "Open Sans", sans-serif;
font-size : 12px;
font-weight : 800;
width : 250px; width : 250px;
margin : 0; margin : 0;
padding : 2px; padding : 2px;
background-color : transparent;
font-family : 'Open Sans', sans-serif;
font-size : 12px;
font-weight : 800;
color : white;
text-align : center; text-align : center;
color : white;
border : 1px solid @blue; border : 1px solid @blue;
outline : none; outline : none;
background-color : transparent;
} }
.charCount{ .charCount {
display : inline-block; display : inline-block;
vertical-align : bottom;
margin-left : 8px; margin-left : 8px;
color : #666;
text-align : right; text-align : right;
&.max{ vertical-align : bottom;
color : #666;
&.max {
color : @red; color : @red;
} }
} }
} }
.brewTitle.navItem{ .brewTitle.navItem {
height: 100%;
font-size : 12px; font-size : 12px;
font-weight : 800; font-weight : 800;
color : white; height : 100%;
text-align : center; text-align : center;
text-transform : initial; text-transform : initial;
color : white;
background-color : transparent;
flex-grow : 1; flex-grow : 1;
background-color: transparent;
} }
.save-menu { .save-menu {
.dropdown { .dropdown {
z-index: 1000; z-index : 1000;
} }
.navItem i.fa-power-off { .navItem i.fa-power-off {
color : red; color : red;
&.active { &.active {
color : rgb(0, 182, 52); color : rgb(0, 182, 52);
filter : drop-shadow(0 0 2px rgba(0, 182, 52, 0.765)) filter : drop-shadow(0 0 2px rgba(0, 182, 52, 0.765));
} }
} }
} }
.patreon.navItem{ .patreon.navItem {
border-left : 1px solid #666;
border-right : 1px solid #666; border-right : 1px solid #666;
border-left : 1px solid #666;
&:hover i { &:hover i {
color: red; color : red;
} }
i{ i {
.animate(color); .animate(color);
animation-name: pinkColoring; animation-name : pinkColoring;
animation-duration: 2s; animation-duration : 2s;
color: pink; color : pink;
} }
} }
.recent.navItem { .recent.navItem {
position : relative; position : relative;
.dropdown{ .dropdown {
position : absolute; position : absolute;
top : 28px;
left : 0px;
z-index : 10000; z-index : 10000;
width : 100%; top : 28px;
left : 0;
overflow : hidden auto; overflow : hidden auto;
width : 100%;
max-height : ~"calc(100vh - 28px)"; max-height : ~"calc(100vh - 28px)";
scrollbar-color : #666 #333; scrollbar-color : #666 #333;
scrollbar-width : thin; scrollbar-width : thin;
h4{ h4 {
font-size : 0.8em;
display : block; display : block;
box-sizing : border-box; box-sizing : border-box;
padding : 5px 0px; padding : 5px 0;
background-color : #333;
font-size : 0.8em;
color : #bbb;
text-align : center; text-align : center;
color : #BBB;
border-top : 1px solid #888; border-top : 1px solid #888;
&:nth-of-type(1){ background-color: darken(@teal, 20%); } background-color : #333;
&:nth-of-type(2){ background-color: darken(@purple, 30%); } &:nth-of-type(1) {
background-color : darken(@teal, 20%);
} }
.item{ &:nth-of-type(2) {
background-color : darken(@purple, 30%);
}
}
.item {
#backgroundColorsHover; #backgroundColorsHover;
.animate(background-color); .animate(background-color);
position : relative; position : relative;
display : block; display : block;
overflow : clip;
box-sizing : border-box; box-sizing : border-box;
padding : 8px 5px 13px; padding : 8px 5px 13px;
background-color : #333;
color : white;
text-decoration : none; text-decoration : none;
color : white;
border-top : 1px solid #888; border-top : 1px solid #888;
overflow : clip; background-color : #333;
.clear{ .clear {
display : none;
position : absolute; position : absolute;
top : 50%; top : 50%;
transform : translateY(-50%); right : 0;
right : 0px; display : none;
width : 20px; width : 20px;
height : 100%; height : 100%;
background-color : #333; transform : translateY(-50%);
opacity : 70%; opacity : 70%;
border-radius : 3px; border-radius : 3px;
background-color : #333;
&:hover { &:hover {
opacity : 100%; opacity : 100%;
} }
i { i {
text-align : center;
font-size : 10px; font-size : 10px;
width : 100%;
height : 100%;
margin : 0; margin : 0;
height :100%; text-align : center;
width :100%;
} }
} }
&:hover{ &:hover {
background-color : @blue; background-color : @blue;
.clear {
.clear{
display : grid; display : grid;
place-content : center; place-content : center;
} }
} }
.title{ .title {
display : inline-block; display : inline-block;
overflow : hidden; overflow : hidden;
width : 100%; width : 100%;
text-overflow : ellipsis;
white-space : nowrap; white-space : nowrap;
text-overflow : ellipsis;
} }
.time{ .time {
font-size : 0.7em;
position : absolute; position : absolute;
right : 2px; right : 2px;
bottom : 2px; bottom : 2px;
font-size : 0.7em;
color : #888; color : #888;
} }
} }
@@ -168,110 +169,110 @@
} }
.metadata.navItem { .metadata.navItem {
position : relative; position : relative;
padding: 0;
align-items: center;
display : flex; display : flex;
flex-grow: 1; align-items : center;
height: 100%; height : 100%;
i{ padding : 0;
margin-right: 10px; flex-grow : 1;
i {
margin-right : 10px;
} }
.window{ .window {
position : absolute; position : absolute;
z-index : -1;
bottom : 0; bottom : 0;
width : 440px;
left : 50%; left : 50%;
display : flex;
justify-content : flex-start;
width : 440px;
max-height : ~"calc(100vh - 28px)"; max-height : ~"calc(100vh - 28px)";
background-color : #333; margin : 0 auto;
padding : 0 10px 5px;
transition : transform 0.4s, opacity 0.4s;
border : 3px solid #444; border : 3px solid #444;
border-top : unset; border-top : unset;
border-radius : 0 0 5px 5px; border-radius : 0 0 5px 5px;
background-color : #333;
box-shadow : inset 0 7px 9px -7px #111; box-shadow : inset 0 7px 9px -7px #111;
display : flex;
flex-flow : row wrap; flex-flow : row wrap;
justify-content : flex-start;
align-content : baseline; align-content : baseline;
padding : 0px 10px 5px; &.active {
margin : 0 auto; transform : translateX(-50%) translateY(100%);
z-index : -1; opacity : 1;
transition : transform 0.4s, opacity 0.4s;
&.active{
transform: translateX(-50%) translateY(100%);
opacity: 1;
} }
&.inactive{ &.inactive {
transform: translateX(-50%) translateY(0%); transform : translateX(-50%) translateY(0%);
opacity: 0; opacity : 0;
} }
.row{ .row {
display : flex; display : flex;
flex-flow : row wrap;
width : 100%; width : 100%;
h4{ flex-flow : row wrap;
h4 {
display : block; display : block;
box-sizing : border-box; box-sizing : border-box;
padding : 5px 0px; min-width : 76px;
color : #bbb; padding : 5px 0;
text-align : center; text-align : center;
color : #BBB;
flex-basis : 20%; flex-basis : 20%;
flex-grow : 1; flex-grow : 1;
min-width : 76px;
} }
p{ p {
font-family : 'Open Sans', sans-serif; font-family : "Open Sans", sans-serif;
font-size : 10px; font-size : 10px;
font-weight : normal; font-weight : normal;
text-transform : initial;
padding : 5px 0; padding : 5px 0;
text-transform : initial;
flex-basis : 80%; flex-basis : 80%;
flex-grow : 1; flex-grow : 1;
.tag{ .tag {
border : 2px solid grey;
padding : 2px;
margin : 2px 2px;
display : inline-block; display : inline-block;
margin : 2px 2px;
padding : 2px;
border : 2px solid grey;
border-radius : 5px; border-radius : 5px;
background-color : #444; background-color : #444;
} }
a.userPageLink{ a.userPageLink {
text-decoration: none; text-decoration : none;
color: white;
&:hover{
text-decoration: underline;
}
}
}
&:nth-of-type(even){
background-color: #555;
}
}
}
}
.warning.navItem{
position : relative;
background-color : @orange;
color : white; color : white;
&:hover>.dropdown{ &:hover {
text-decoration : underline;
}
}
}
&:nth-of-type(even) {
background-color : #555;
}
}
}
}
.warning.navItem {
position : relative;
color : white;
background-color : @orange;
&:hover > .dropdown {
visibility : visible; visibility : visible;
} }
.dropdown{ .dropdown {
position : absolute; position : absolute;
display : block;
top : 28px;
left : 0px;
visibility : hidden;
z-index : 10000; z-index : 10000;
top : 28px;
left : 0;
display : block;
visibility : hidden;
box-sizing : border-box; box-sizing : border-box;
width : 100%; width : 100%;
padding : 13px 5px; padding : 13px 5px;
background-color : #333;
text-align : center; text-align : center;
background-color : #333;
} }
} }
.account.navItem{ .account.navItem {
min-width: 100px; min-width : 100px;
} }
.account.username.navItem{ .account.username.navItem {
text-transform: none; text-transform : none;
} }
} }