[CSS] Default theme polish work, more consistent font sizes and improved dark theme colors

This commit is contained in:
Eliseu Amaro 2022-02-07 23:54:29 +00:00
parent 9a53f94b77
commit 99593a19ef
Signed by: eliseuamaro
GPG Key ID: 96DA09D4B97BC2D5
8 changed files with 51 additions and 71 deletions

View File

@ -24,7 +24,7 @@
{% if current_path starts with 'search' %}
<h3 class="heading-no-margin">{{ 'Notes found' | trans }}</h3>
{% else %}
<span class="section-title">{{ 'Notes' | trans }}</span>
<h1 class="section-title">{{ 'Notes' | trans }}</h1>
{% endif %}
{% endif %}
<nav class="feed-actions">

View File

@ -80,10 +80,10 @@ class Oomox
$current_border = $current_oomox_settings->getColourBorderLight() ?: '#d5d5d5';
$current_accent = $current_oomox_settings->getColourAccentLight() ?: '#a22430';
} else {
$current_foreground = $current_oomox_settings->getColourForegroundDark() ?: '#f0f6f6';
$current_background_hard = $current_oomox_settings->getColourBackgroundHardDark() ?: '#141216';
$current_background_card = $current_oomox_settings->getColourBackgroundCardDark() ?: '#131217';
$current_border = $current_oomox_settings->getColourBorderDark() ?: '#201f25';
$current_foreground = $current_oomox_settings->getColourForegroundDark() ?: '#eff0f1';
$current_background_hard = $current_oomox_settings->getColourBackgroundHardDark() ?: '#0E0E0F';
$current_background_card = $current_oomox_settings->getColourBackgroundCardDark() ?: '#0E0E0F';
$current_border = $current_oomox_settings->getColourBorderDark() ?: '#26262C';
$current_accent = $current_oomox_settings->getColourAccentDark() ?: '#5ddbcf';
}
} else {

View File

@ -54,10 +54,6 @@ hr {
top: var(--s);
}
.heading-no-margin {
margin-bottom: initial;
}
.page-header {
align-items: center;
background: var(--gradient) !important;

View File

@ -134,10 +134,6 @@
align-items: center;
}
.feed-header .section-title {
font-size: 1.383rem;
}
.feed-header .feed-actions {
margin-left: auto;
text-transform: capitalize;

View File

@ -85,9 +85,7 @@ details > summary::-webkit-details-marker {
display: none;
}
html {
font-size: 100%;
}
html {font-size: 100%;} /*12px*/
body {
font-family: 'Open Sans', sans-serif;
@ -101,50 +99,40 @@ p {
margin-bottom: 1rem;
}
h1, h2, h3, h4, h5, legend {
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 1.3;
margin: 3rem 0 1.38rem;
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, legend:first-child {
margin-top: initial;
}
h1, h2, h3, h4, h5 {
margin: 3rem 0 1.38rem;
font-family: 'Poppins', sans-serif;
font-weight: 900;
line-height: 1.3;
}
h1 {
font-size: 1.383rem;
margin-top: 0;
font-size: 1.383rem;
}
h2 {
font-size: 1.296rem;
}
h2 {font-size: 1.296rem;}
h3 {
font-size: 1.215rem;
}
h3 {font-size: 1.215rem;}
h4 {
font-size: 1.138rem;
}
h4 {font-size: 1.138rem;}
h5 {
font-size: 1.067rem;
}
h5 {font-size: 1.067rem;}
small, .text_small {font-size: 0.937rem;}
legend {
font-size: 1.296em;
}
.text_small, small {
font: .937rem 'Open Sans', sans-serif;
font-size: 1.25rem;
}
input[type=password], input[type=text], textarea {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
padding: 4px 6px;
padding: 6px 8px;
}
ul {

View File

@ -1,23 +1,23 @@
:root {
--s: .6rem;
--s: 0.666rem;
--unit: 1rem;
--m: 1.3rem;
--xl: 1.62rem;
--xxl: 3rem;
--m: 1.067rem;
--xl: 1.138rem;
--xxl: 3.2rem;
}
@media(prefers-color-scheme:dark) {
:root {
--foreground: #f0f6f6;
--background-hard: #141216;
--background-card: #131217;
--border: #26242D;
--foreground: #eff0f1;
--background-hard: #0E0E0F;
--background-card: #0E0E0F;
--border: #26262C;
--accent: #5ddbcf;
--shadow: 0 5px 20px -10px rgba(255,255,255,0.1)!important;
--shadow-inset-accent: inset 0 0 0 2px var(--accent);
--background-checkerboard: repeating-conic-gradient(#ffffff66 0 90deg,#ffffff33 0 180deg) 0 0/40px 40px round;
--gradient: linear-gradient(10deg,var(--border) 0,transparent 90%)!important;
--gradient-backwards: linear-gradient(290deg,var(--border) 0,var(--background-card) 100%)!important;
--gradient: linear-gradient(10deg,var(--border) -33%,transparent 66%)!important;
--gradient-backwards: linear-gradient(-10deg,var(--border) -33%,transparent 66%)!important;
}
}

View File

@ -1,5 +1,5 @@
label {
font-weight: 700;
font-weight: 900;
}
input + label {
@ -23,7 +23,7 @@ input[type=file] {
cursor: pointer;
fill: var(--foreground);
font-family: 'Open Sans', sans-serif !important;
font-weight: 700 !important;
font-weight: 900 !important;
margin: 3px;
}
@ -49,7 +49,7 @@ button, label {
}
button {
font-family: 'Poppins', sans-serif;
font-weight: 700 !important;
font-weight: 900 !important;
}
select::-ms-expand {

View File

@ -76,8 +76,6 @@
}
.details-subtitle-summary ~ [class|="form-row"] {
font-size: .937rem;
max-font-size: .937rem !important;
padding: var(--s);
}
@ -165,7 +163,7 @@
border-radius: var(--s);
display: block;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-weight: 900;
padding: 6px 8px;
width: max-content;
}
@ -177,7 +175,7 @@
.frame-section-paging {
display: block;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-weight: 900;
margin-left: auto;
margin-top: var(--s);
padding: 6px 12px;
@ -216,7 +214,7 @@
border: 1px solid var(--border);
border-radius: var(--s);
display: inline-block;
font-weight: 700;
font-weight: 900;
margin-right: var(--s);
margin-top: var(--s);
padding: 4px 8px;
@ -244,7 +242,8 @@
}
.profile-info-url-nickname {
font-size: var(--m);
font-size: 1.215rem;
font-weight: 900;
}
.profile-info-url-remote {
@ -257,7 +256,6 @@
.profile-stats {
align-self: center;
font-size: .937rem;
margin-left: auto;
opacity: .66;
text-align: right;
@ -302,18 +300,25 @@
.section-details-subtitle summary, .section-details-title summary {
background: var(--gradient);
border-radius: var(--s);
outline: 1px solid var(--border);
display: inline-block;
width: 100%;
}
.details-summary-title {
line-height: initial;
font-weight: 700;
font-size: 1.067em;
padding: 6px 12px;
font-size: 1.215rem;
font-weight: 900;
padding: 6px 8px;
}
.details-summary-subtitle {
font-weight: 700;
font-size: 1em;
font-weight: bold;
}
.heading-no-margin {
font-size: 1.215rem;
font-weight: 900;
}
.details-summary-title:after {
@ -358,10 +363,6 @@
width: 100%;
}
.section-form .section-details-subtitle summary {
border: 1px solid var(--border);
}
.section-form-legend {
font-weight: 700;
margin-bottom: var(--s);
@ -369,7 +370,6 @@
}
.section-title {
font-weight: 700;
margin-bottom: unset;
}