VulpesOS/assets/webapps/settings.gaiamobile.org/shared/style/headers.css
OverSu b38dea0597 Publish Vulpes Preview 15 sources for desktop, Android and Tundra
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
2026-09-30 23:13:03 +02:00

278 lines
9.8 KiB
CSS

section[role="region"] > header:first-child {
position: relative;
display: block;
z-index: 10;
padding: 0;
height: 5rem;
border: none;
}
section[role="region"] > header:first-child h1 {
font-size: 2.3rem;
line-height: 5rem;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
overflow: hidden;
margin: 0;
padding: 0 1rem;
height: 100%;
font-weight: 300;
font-style: italic;
text-align: center;
}
section[role="region"] > header:first-child h1 em {
font-weight: 400;
font-size: 1.5rem;
line-height: 1em;
font-style: normal;
}
section[role="region"] > header:first-child menu {
height: 100%;
padding: 0;
margin: 0;
}
html[dir="ltr"] section[role="region"] > header:first-child menu {
float: right;
}
html[dir="rtl"] section[role="region"] > header:first-child menu {
float: left;
}
section[role="region"] > header:first-child a,
section[role="region"] > header:first-child button {
box-sizing: border-box;
position: relative;
display: block;
overflow: hidden;
min-width: 5rem;
width: auto;
height: 5rem;
border: none;
background: none;
padding: 0 1rem;
margin: 0;
font-weight: 400;
font-size: 1.5rem;
line-height: 5rem;
border-radius: 0;
text-decoration: none;
text-align: center;
text-shadow: none;
font-style: italic;
}
html[dir="ltr"] section[role="region"] > header:first-child a,
html[dir="ltr"] section[role="region"] > header:first-child button {
float: left;
}
html[dir="rtl"] section[role="region"] > header:first-child a,
html[dir="rtl"] section[role="region"] > header:first-child button {
float: right;
}
section[role="region"] > header:first-child a:focus {
outline: none;
}
section[role="region"] > header:first-child button::-moz-focus-inner {
outline: none;
border: none;
margin-top: -0.2rem;
padding: 0;
}
section[role="region"] > header:first-child a[aria-disabled="true"],
section[role="region"] > header:first-child button[disabled] {
opacity: 0.3;
pointer-events: none;
}
section[role="region"] > header:first-child .icon {
display: block;
width: 3rem;
height: 5rem;
background: transparent no-repeat center / 3rem auto;
font-size: 0;
}
section[role="region"] > header {
z-index: 0;
height: auto;
}
section[role="region"] header h2 {
margin: 0;
padding: 0.8rem 3rem;
font-weight: 400;
font-size: 1.5rem;
line-height: 1.8rem;
}
section[role="region"] > header:first-child {
color: #fff;
background-color: #f97c17;
}
section[role="region"] > header:first-child h1 {
color: #fff;
}
section[role="region"] > header:first-child a,
section[role="region"] > header:first-child button {
color: rgba(0,0,0,0.6);
}
section[role="region"] > header:first-child a:active,
section[role="region"] > header:first-child button:active,
section[role="region"] > header:first-child a:hover,
section[role="region"] > header:first-child button:hover {
background-color: rgba(0,0,0,0.07);
}
section[role="region"] > header:first-child a:focus,
section[role="region"] > header:first-child button:focus {
background-color: transparent;
}
section[role="region"] > header:first-child .icon-add {
background-image: url(headers/images/icons/add.png);
}
section[role="region"] > header:first-child .icon-compose {
background-image: url(headers/images/icons/compose.png);
}
html[dir="ltr"] section[role="region"] > header:first-child .icon-edit {
background-image: url(headers/images/icons/edit.png);
}
html[dir="rtl"] section[role="region"] > header:first-child .icon-edit {
background-image: url(headers/images/icons/edit-rtl.png);
}
html[dir="ltr"] section[role="region"] > header:first-child .icon-send {
background-image: url(headers/images/icons/send.png);
}
html[dir="rtl"] section[role="region"] > header:first-child .icon-send {
background-image: url(headers/images/icons/send_rtl.png);
}
section[role="region"] > header:first-child .icon-close {
background-image: url(headers/images/icons/close.png);
}
html[dir="ltr"] section[role="region"] > header:first-child .icon-back {
background-image: url(headers/images/icons/left.png);
}
html[dir="rtl"] section[role="region"] > header:first-child .icon-back {
background-image: url(headers/images/icons/right.png);
}
section[role="region"] > header:first-child .icon-menu {
background-image: url(headers/images/icons/menu.png);
}
section[role="region"] > header:first-child .icon-user {
background-image: url(headers/images/icons/user.png);
}
section[role="region"] > header:first-child .icon-up {
background-image: url(headers/images/icons/up.png);
}
section[role="region"] > header:first-child .icon-down {
background-image: url(headers/images/icons/down.png);
}
section[role="region"] > header:first-child .icon-options {
background-image: url(headers/images/icons/options.png);
}
section[role="region"] header h2 {
color: #424242;
border-bottom: solid 0.1rem #e6e6e6;
}
.skin-comms section[role="region"] > header:first-child,
section[role="region"].skin-comms > header:first-child {
background-color: #00adad;
}
.skin-comms section[role="region"] > header:first-child a,
.skin-comms section[role="region"] > header:first-child button,
section[role="region"].skin-comms > header:first-child a,
section[role="region"].skin-comms > header:first-child button {
color: rgba(0,0,0,0.5);
}
.skin-comms section[role="region"] > header:first-child a:active,
.skin-comms section[role="region"] > header:first-child button:active,
.skin-comms section[role="region"] > header:first-child a:hover,
.skin-comms section[role="region"] > header:first-child button:hover,
section[role="region"].skin-comms > header:first-child a:active,
section[role="region"].skin-comms > header:first-child button:active,
section[role="region"].skin-comms > header:first-child a:hover,
section[role="region"].skin-comms > header:first-child button:hover {
background-color: rgba(0,0,0,0.1);
}
.skin-comms section[role="region"] > header:first-child a:focus,
.skin-comms section[role="region"] > header:first-child button:focus,
section[role="region"].skin-comms > header:first-child a:focus,
section[role="region"].skin-comms > header:first-child button:focus {
background-color: transparent;
}
section[role="region"].skin-dark > header:first-child,
.skin-dark > section[role="region"] > header:first-child {
background-color: #242d33;
}
.skin-dark section[role="region"] > header:first-child a,
.skin-dark section[role="region"] > header:first-child button,
section[role="region"].skin-dark > header:first-child a,
section[role="region"].skin-dark > header:first-child button {
color: #00aac5;
}
.skin-dark section[role="region"] > header:first-child a:active,
.skin-dark section[role="region"] > header:first-child button:active,
.skin-dark section[role="region"] > header:first-child a:hover,
.skin-dark section[role="region"] > header:first-child button:hover,
section[role="region"].skin-dark > header:first-child a:active,
section[role="region"].skin-dark > header:first-child button:active,
section[role="region"].skin-dark > header:first-child a:hover,
section[role="region"].skin-dark > header:first-child button:hover {
background-color: rgba(0,0,0,0.4);
}
.skin-dark section[role="region"] > header:first-child a:focus,
.skin-dark section[role="region"] > header:first-child button:focus,
section[role="region"].skin-dark > header:first-child a:focus,
section[role="region"].skin-dark > header:first-child button:focus {
background-color: transparent;
}
section[role="region"].skin-dark header h2,
.skin-dark > section[role="region"] header h2 {
background-color: #2c353b;
color: #fff;
border: none;
}
section[role="region"].skin-organic > header:first-child,
.skin-organic section[role="region"] > header:first-child {
color: #868692;
background-color: #f4f4f4;
}
section[role="region"].skin-organic > header:first-child h1,
.skin-organic section[role="region"] > header:first-child h1 {
color: #868692;
}
section[role="region"].skin-organic > header:first-child a,
section[role="region"].skin-organic > header:first-child button,
.skin-organic section[role="region"] > header:first-child a,
.skin-organic section[role="region"] > header:first-child button {
color: #00aac5;
}
section[role="region"].skin-organic > header:first-child a:focus,
section[role="region"].skin-organic > header:first-child button:focus,
.skin-organic section[role="region"] > header:first-child a:focus,
.skin-organic section[role="region"] > header:first-child button:focus {
background-color: transparent;
}
html[dir="ltr"] section[role="region"].skin-organic > header:first-child .icon-back,
html[dir="ltr"] .skin-organic section[role="region"] > header:first-child .icon-back {
background-image: url(headers/images/icons/organic/left.png);
}
html[dir="rtl"] section[role="region"].skin-organic > header:first-child .icon-back,
html[dir="rtl"] .skin-organic section[role="region"] > header:first-child .icon-back {
background-image: url(headers/images/icons/organic/right.png);
}
section[role="region"].skin-organic > header:first-child .icon-close,
.skin-organic section[role="region"] > header:first-child .icon-close {
background-image: url(headers/images/icons/organic/close.png);
}
section[role="region"].skin-organic > header:first-child .icon-add,
.skin-organic section[role="region"] > header:first-child .icon-add {
background-image: url(headers/images/icons/organic/add.png);
}
html[dir="ltr"] section[role="region"].skin-organic > header:first-child .icon-edit,
html[dir="ltr"] .skin-organic section[role="region"] > header:first-child .icon-edit {
background-image: url(headers/images/icons/organic/edit.png);
}
html[dir="rtl"] section[role="region"].skin-organic > header:first-child .icon-edit,
html[dir="rtl"] .skin-organic section[role="region"] > header:first-child .icon-edit {
background-image: url(headers/images/icons/organic/edit-rtl.png);
}
section[role="region"].skin-organic header h2,
.skin-organic section[role="region"] header h2 {
background-color: #e7e7e7;
color: #4d4d4d;
border: none;
}