app/assets/stylesheets/pages_core/admin/components/header.css
header {
background: var(--background-invert-color);
padding: 1.25rem 1rem 0rem 1rem;
color: var(--text-invert-color);
display: flex;
flex-wrap: wrap;
gap: 1rem;
a,
a:visited {
background: none;
border: 0;
padding: 0;
margin: 0;
color: var(--text-invert-color);
}
.logo {
background: url("pages/admin/icon.svg");
background-repeat: no-repeat;
min-height: 27px;
padding-left: 38px;
}
.site-name {
color: var(--text-invert-color);
flex-grow: 1;
h1 {
margin: 0;
padding: 0;
display: inline;
font-size: 1.4rem;
letter-spacing: -0.04rem;
font-weight: normal;
a {
font-weight: 800;
text-decoration: none;
padding-right: 6px;
}
}
}
.user {
display: flex;
align-items: center;
a {
border-left: 1px solid var(--text-light-color);
padding-left: 10px;
margin-left: 6px;
&:first-of-type {
border-left: none;
padding-left: 0px;
margin-left: 0px;
}
}
}
.tabs {
display: flex;
overflow: scroll;
width: 100%;
gap: 8px;
ul {
padding: 0px;
margin: 0px;
list-style-type: none;
display: flex;
gap: 4px;
&.account {
flex-grow: 1;
justify-content: flex-end;
}
}
li {
margin: 0;
padding: 0;
}
a,
a:visited {
background: #333;
color: var(--text-invert-color);
display: block;
float: left;
padding: 0 15px;
line-height: 32px;
height: 32px;
margin: 0px;
text-decoration: none;
}
a:hover,
a.current,
a.current:visited {
background: linear-gradient(to bottom, #cfcfcf 0%, #fefefe 100%);
color: var(--text-color);
}
}
}
.content-tabs {
list-style-type: none;
margin: 24px 0px -12px -18px;
padding: 0;
li {
color: hsla(0, 0%, 0%, 0.25);
display: inline;
background: transparent;
padding: 6px 17px;
}
li.current {
background: var(--background-color);
padding: 5px 16px;
border: 1px solid #cae6f1;
border-bottom: 1px solid var(--background-color);
font-weight: var(--bold-weight);
a,
a:visited {
text-decoration: none;
color: #444;
}
}
}
.page-description {
background: linear-gradient(to bottom, #dceef6 0%, #e7f3f9 100%);
margin: 0;
padding: 16px 32px;
display: block;
border-bottom: 1px solid #d4eaf4;
color: var(--text-color);
h3 {
font-weight: var(--bold-weight);
}
em {
font-style: normal;
color: #4a5357;
}
.links {
float: right;
a {
border-left: 1px solid #779cb3;
padding-left: 8px;
margin-left: 8px;
&:first-of-type {
border-left: none;
padding-left: 0px;
margin-left: 0px;
}
&.current {
font-weight: var(--bold-weight);
text-decoration: none;
color: var(--text-color);
}
}
}
.separator {
color: #779cb3;
margin: 0 4px;
}
}
main .page-description h3 {
margin: 0;
padding: 0;
font-size: 0.875rem;
text-shadow: #e9f6ff 1px 1px 1px;
}