wamo/gnu-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Eliseu Amaro 2022-02-07 23:54:29 +00:00
parent 9a53f94b77
commit 99593a19ef
No known key found for this signature in database
GPG Key ID: 96DA09D4B97BC2D5
8 changed files with 51 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/Collection/templates/collection/notes.html.twig
View File

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

8
plugins/Oomox/Controller/Oomox.php
View File

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

4
public/assets/default_theme/css/base.css
View File

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

4
public/assets/default_theme/css/pages/feeds.css
View File

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

46
public/assets/default_theme/css/reset.css
View File

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

20
public/assets/default_theme/css/root.css
View File

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

6
public/assets/default_theme/css/widgets/buttons.css
View File

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

32
public/assets/default_theme/css/widgets/sections.css
View File

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