makary/phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-06-08 04:18:52 +00:00
Code Issues Projects Releases Packages Wiki Activity

[ticket/17459] Start using CSS variables

Browse source 
PHPBB-17459
This commit is contained in:
Marc Alexander 2024-11-03 21:10:54 +01:00
parent 14d889f74f
commit 74084107ed
No known key found for this signature in database
GPG key ID: 50E0D2423696F995
3 changed files with 56 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
phpBB/styles/prosilver/theme/base.css
View file

@ -21,9 +21,26 @@
* line-heights want to be a multiple of this number in order to maintain * line-heights want to be a multiple of this number in order to maintain
* vertical rhythm.) * vertical rhythm.)
*/ */
:root {
/* Base font size */
--ps-font-base: 16px; /* [1] */
--ps-line-height: calc(var(--ps-font-base) * 1.5); /* [2] */
/* Headings */
--ps-font-h1: calc(var(--ps-font-base) * 1.5); /* 24px */
--ps-font-h2: calc(var(--ps-font-base) * 1.5); /* 24px */
--ps-font-h3: calc(var(--ps-font-base) * 1.25); /* 20px */
--ps-font-h4: calc(var(--ps-font-base) * 1.125); /* 18px */
/* Text and Paragraphs */
--ps-font-normal: var(--ps-font-base); /* 16px */
--ps-font-small: calc(var(--ps-font-base) * 0.875); /* 14px */
--ps-font-tiny: calc(var(--ps-font-base) * 0.75); /* 12px */
}
html { html {
font-size: 16px; /* [1] */ font-size: var(--ps-font-base);
line-height: 1.5; /* [2] */ line-height: var(--ps-line-height);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }

8
phpBB/styles/prosilver/theme/buttons.css
View file

@ -4,7 +4,7 @@
.button { .button {
font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica; font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica;
font-size: 16px; font-size: var(--ps-font-normal);
font-weight: 600; font-weight: 600;
line-height: 1.4; line-height: 1.4;
text-align: center; text-align: center;
@ -16,7 +16,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
height: 30px; height: calc(var(--ps-font-normal) * 1.875);
padding: 2px 8px; padding: 2px 8px;
cursor: pointer; cursor: pointer;
touch-action: manipulation; touch-action: manipulation;
@ -185,11 +185,11 @@
/* Responsive buttons in post body */ /* Responsive buttons in post body */
.post-buttons .dropdown { .post-buttons .dropdown {
top: 30px; top: calc(var(--ps-font-normal) * 1.875);
} }
.post-buttons .dropdown a { .post-buttons .dropdown a {
font-size: 16px; font-size: var(--ps-font-normal);
text-align: right; text-align: right;
display: block; display: block;
justify-content: start; justify-content: start;

66
phpBB/styles/prosilver/theme/common.css
View file

@ -13,7 +13,7 @@ html {
body { body {
font-family: Verdana, Helvetica, Arial, sans-serif; font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 16px; font-size: var(--ps-font-normal);
line-height: normal; line-height: normal;
word-wrap: break-word; word-wrap: break-word;
margin: 0; margin: 0;
@ -24,7 +24,7 @@ body {
h1 { h1 {
/* Forum name */ /* Forum name */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 24px; font-size: var(--ps-font-h1);
font-weight: bold; font-weight: bold;
margin-top: 15px; margin-top: 15px;
margin-right: 200px; margin-right: 200px;
@ -33,7 +33,7 @@ h1 {
h2 { h2 {
/* Forum header titles */ /* Forum header titles */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 24px; font-size: var(--ps-font-h2);
font-weight: normal; font-weight: normal;
margin: 0.8em 0 0.2em; margin: 0.8em 0 0.2em;
} }
@ -45,7 +45,7 @@ h2.solo {
h3 { h3 {
/* Sub-headers (also used as post headers, but defined later) */ /* Sub-headers (also used as post headers, but defined later) */
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 16px; font-size: var(--ps-font-normal);
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
@ -57,13 +57,13 @@ h3 {
h4 { h4 {
/* Forum and topic list titles */ /* Forum and topic list titles */
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif; font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
font-size: 18px; font-size: var(--ps-font-h4);
} }
p { p {
font-size: 14px; font-size: var(--ps-font-small);
line-height: 18px; line-height: calc(var(--ps-line-height) * 0.75);
margin-bottom: 20px; margin-bottom: calc(var(--ps-line-height) / 1.2);
} }
img { img {
@ -228,7 +228,7 @@ a:hover {
.panel { .panel {
border-radius: 7px; border-radius: 7px;
margin-bottom: 8px; margin-bottom: calc(var(--ps-font-base) * 0.5);
padding: 5px 10px; padding: 5px 10px;
} }
@ -262,8 +262,8 @@ ul.linklist {
} }
ul.linklist > li { ul.linklist > li {
font-size: 14px; font-size: var(--ps-font-small);
line-height: 30px; line-height: calc(var(--ps-line-height) * 1.25);
float: left; float: left;
width: auto; width: auto;
margin-right: 7px; margin-right: 7px;
@ -434,12 +434,12 @@ a.header-avatar img {
} }
.dropdown-button-control .dropdown { .dropdown-button-control .dropdown {
top: 30px; top: calc(var(--ps-line-height) * 1.25);
} }
.dropdown-button-control.dropdown-up .dropdown { .dropdown-button-control.dropdown-up .dropdown {
top: auto; top: auto;
bottom: 30px; bottom: calc(var(--ps-line-height) * 1.25);
} }
.dropdown .pointer, .dropdown .pointer,
@ -556,7 +556,7 @@ a.header-avatar img {
} }
.dropdown li { .dropdown li {
font-size: 14px !important; font-size: var(--ps-font-small) !important;
line-height: normal !important; line-height: normal !important;
text-align: left; text-align: left;
white-space: nowrap; white-space: nowrap;
@ -678,9 +678,9 @@ table.table1 {
} }
table.table1 thead th { table.table1 thead th {
font-size: 12px; font-size: var(--ps-font-tiny);
font-weight: normal; font-weight: normal;
line-height: 15px; line-height: calc(var(--ps-line-height) / 1.5);
text-transform: uppercase; text-transform: uppercase;
padding: 0 0 4px 3px; padding: 0 0 4px 3px;
} }
@ -694,7 +694,7 @@ table.table1 tbody tr {
} }
table.table1 td { table.table1 td {
font-size: 14px; font-size: var(--ps-font-small);
} }
table.table1 tbody td { table.table1 tbody td {
@ -831,7 +831,7 @@ table.info tbody th {
dl.details { dl.details {
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-size: 14px; font-size: var(--ps-font-small);
} }
dl.details dt { dl.details dt {
@ -882,7 +882,7 @@ fieldset.fields1 dl.pmlist dd.recipients {
/* Action-bars (container for post/reply buttons, pagination, etc.) /* Action-bars (container for post/reply buttons, pagination, etc.)
---------------------------------------- */ ---------------------------------------- */
.action-bar { .action-bar {
font-size: 14px; font-size: var(--ps-font-small);
margin: 4px 0; margin: 4px 0;
} }
@ -938,7 +938,7 @@ fieldset.fields1 dl.pmlist dd.recipients {
.pagination li.active span { .pagination li.active span {
font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica; font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica;
font-size: 16px; font-size: var(--ps-font-normal);
font-weight: normal; font-weight: normal;
line-height: 1.4; line-height: 1.4;
text-align: center; text-align: center;
@ -962,7 +962,7 @@ fieldset.fields1 dl.pmlist dd.recipients {
} }
.pagination li.page-jump a i { .pagination li.page-jump a i {
font-size: 20px; font-size: var(--ps-font-h3);
} }
.pagination .arrow a { .pagination .arrow a {
@ -982,10 +982,10 @@ fieldset.fields1 dl.pmlist dd.recipients {
.row .pagination li a, .row .pagination li a,
.row .pagination li span { .row .pagination li span {
font-size: 12px; font-size: var(--ps-font-tiny);
border-radius: 2px; border-radius: 2px;
width: 17px; width: calc(var(--ps-font-tiny) + 6px);
height: 22px; height: calc(var(--ps-font-normal) + 6px);
padding: 1px 3px; padding: 1px 3px;
} }
@ -1026,7 +1026,7 @@ fieldset.fields1 dl.pmlist dd.recipients {
.phpbb_alert div.alert_text > select, .phpbb_alert div.alert_text > select,
.phpbb_alert div.alert_text > textarea, .phpbb_alert div.alert_text > textarea,
.phpbb_alert div.alert_text > input { .phpbb_alert div.alert_text > input {
font-size: 14px; font-size: var(--ps-font-small);
} }
.darkenwrapper { .darkenwrapper {
@ -1141,13 +1141,13 @@ fieldset.fields1 dl.pmlist dd.recipients {
/* Miscellaneous styles /* Miscellaneous styles
---------------------------------------- */ ---------------------------------------- */
.copyright { .copyright {
font-size: 12px; font-size: var(--ps-font-tiny);
text-align: center; text-align: center;
padding: 10px; padding: 10px;
} }
.footer-row { .footer-row {
font-size: 12px; font-size: var(--ps-font-tiny);
line-height: 1.8; line-height: 1.8;
margin: 0; margin: 0;
} }
@ -1170,7 +1170,7 @@ fieldset.fields1 dl.pmlist dd.recipients {
} }
div.rules { div.rules {
font-size: 18px; font-size: var(--ps-font-h4);
border-radius: 7px; border-radius: 7px;
margin: 10px 0; margin: 10px 0;
padding: 5px 10px; padding: 5px 10px;
@ -1243,7 +1243,7 @@ ul.linklist:after,
} }
.member-search strong { .member-search strong {
font-size: 14px; font-size: var(--ps-font-small);
} }
.dropdown-extended { .dropdown-extended {
@ -1319,7 +1319,7 @@ ul.linklist:after,
} }
.dropdown-extended .footer { .dropdown-extended .footer {
font-size: 16px; font-size: var(--ps-font-normal);
text-align: center; text-align: center;
} }
@ -1372,7 +1372,7 @@ ul.linklist:after,
} }
.notification-time { .notification-time {
font-size: 12px; font-size: var(--ps-font-tiny);
text-align: right; text-align: right;
margin: 0; margin: 0;
} }
@ -1388,7 +1388,7 @@ ul.linklist:after,
.notifications-title { .notifications-title {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px !important; font-size: var(--ps-font-normal) !important;
} }
.notifications-title strong { .notifications-title strong {
@ -1404,7 +1404,7 @@ ul.linklist:after,
} }
.badge { .badge {
font-size: 12px; font-size: var(--ps-font-tiny);
line-height: 1; line-height: 1;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;