overseer/assets/styles/gargoyle.scss
Gregory Ballantine 4cfffbd219
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
Fixed search button positioning
2024-05-21 10:06:37 -04:00

147 lines
2.3 KiB
SCSS

$primary-color: orangered;
$primary-color-highlight: darken($primary-color, 10%);
$box-shadow-1: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
$box-shadow-2: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
$nav-bar-height: 60px;
body{
padding: $nav-bar-height 0 0;
background: lightgrey;
}
a{
color: $primary-color;
transition: all 230ms ease-in-out;
&:hover{
color: $primary-color-highlight;
}
}
.button.button-primary,
button.button-primary,
input[type="button"].button-primary,
input[type="reset"].button-primary,
input[type="submit"].button-primary{
background-color: $primary-color;
color: white;
transition: all 230ms ease-in-out;
&:hover{
background-color: $primary-color-highlight;
}
}
.container.fluid{
width: calc(100% - 60px);
max-width: 100%;
margin-left: 30px;
margin-right: 30px;
}
#nav-bar{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: $nav-bar-height;
background: #212121;
box-shadow: $box-shadow-1;
color: white;
.nav-bar-left{
float: left;
}
.nav-bar-right{
float: right;
}
ul{
list-style: none;
li{
display: inline-block;
}
}
.site-logo,
.nav-link a{
padding: 10px 12px;
font-size: 2.5rem;
text-decoration: none;
}
.site-logo{
padding-left: 35px;
font-weight: bold;
}
#search-form{
display: inline-block;
padding: 10px 0;
li{
display: inline-block;
}
input{
display: inline-block;
width: 256px;
}
}
#search-button{
display: inline-block;
margin-left: 0;
margin-right: 35px;
padding: 0 10px;
background: $primary-color;
border: 1px solid white;
color: white;
font-size: 1.5rem;
font-weight: bold;
transition: all 200ms ease-in-out;
&:hover{
background: $primary-color-highlight;
color: #eee;
}
}
}
#main-content{
margin-top: 25px;
padding: 20px 32px;
background: white;
box-shadow: $box-shadow-2;
}
#record-actions{
p{
margin-bottom: 0;
font-size: 2rem;
}
}
#item-header,
#license-header{
margin-bottom: 25px;
h1,
p{
display: inline-block;
margin-bottom: 7px;
}
.item-added-date,
.item-updated-date,
.license-added-date,
.license-updated-date{
margin-bottom: 5px;
color: #666;
font-size: 1.6rem;
font-style: italic;
}
}