mirror of
https://github.com/phpbb/phpbb.git
synced 2025-06-07 20:08:53 +00:00
[ticket/17459] Start using CSS variables
PHPBB-17459
This commit is contained in:
Marc Alexander
parent
14d889f74f
commit
74084107ed
3 changed files with 56 additions and 39 deletions
|
|
@ -21,9 +21,26 @@
|
|||
* line-heights want to be a multiple of this number in order to maintain
|
||||
* 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 {
|
||||
font-size: 16px; /* [1] */
|
||||
line-height: 1.5; /* [2] */
|
||||
font-size: var(--ps-font-base);
|
||||
line-height: var(--ps-line-height);
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
.button {
|
||||
font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica;
|
||||
font-size: 16px;
|
||||
font-size: var(--ps-font-normal);
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
height: 30px;
|
||||
height: calc(var(--ps-font-normal) * 1.875);
|
||||
padding: 2px 8px;
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
|
|
@ -185,11 +185,11 @@
|
|||
|
||||
/* Responsive buttons in post body */
|
||||
.post-buttons .dropdown {
|
||||
top: 30px;
|
||||
top: calc(var(--ps-font-normal) * 1.875);
|
||||
}
|
||||
|
||||
.post-buttons .dropdown a {
|
||||
font-size: 16px;
|
||||
font-size: var(--ps-font-normal);
|
||||
text-align: right;
|
||||
display: block;
|
||||
justify-content: start;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ html {
|
|||
|
||||
body {
|
||||
font-family: Verdana, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
font-size: var(--ps-font-normal);
|
||||
line-height: normal;
|
||||
word-wrap: break-word;
|
||||
margin: 0;
|
||||
|
|
@ -24,7 +24,7 @@ body {
|
|||
h1 {
|
||||
/* Forum name */
|
||||
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
|
||||
font-size: 24px;
|
||||
font-size: var(--ps-font-h1);
|
||||
font-weight: bold;
|
||||
margin-top: 15px;
|
||||
margin-right: 200px;
|
||||
|
|
@ -33,7 +33,7 @@ h1 {
|
|||
h2 {
|
||||
/* Forum header titles */
|
||||
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
|
||||
font-size: 24px;
|
||||
font-size: var(--ps-font-h2);
|
||||
font-weight: normal;
|
||||
margin: 0.8em 0 0.2em;
|
||||
}
|
||||
|
|
@ -45,7 +45,7 @@ h2.solo {
|
|||
h3 {
|
||||
/* Sub-headers (also used as post headers, but defined later) */
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 16px;
|
||||
font-size: var(--ps-font-normal);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1px solid transparent;
|
||||
|
|
@ -57,13 +57,13 @@ h3 {
|
|||
h4 {
|
||||
/* Forum and topic list titles */
|
||||
font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
font-size: var(--ps-font-h4);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
margin-bottom: 20px;
|
||||
font-size: var(--ps-font-small);
|
||||
line-height: calc(var(--ps-line-height) * 0.75);
|
||||
margin-bottom: calc(var(--ps-line-height) / 1.2);
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -228,7 +228,7 @@ a:hover {
|
|||
|
||||
.panel {
|
||||
border-radius: 7px;
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: calc(var(--ps-font-base) * 0.5);
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
|
|
@ -262,8 +262,8 @@ ul.linklist {
|
|||
}
|
||||
|
||||
ul.linklist > li {
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
font-size: var(--ps-font-small);
|
||||
line-height: calc(var(--ps-line-height) * 1.25);
|
||||
float: left;
|
||||
width: auto;
|
||||
margin-right: 7px;
|
||||
|
|
@ -434,12 +434,12 @@ a.header-avatar img {
|
|||
}
|
||||
|
||||
.dropdown-button-control .dropdown {
|
||||
top: 30px;
|
||||
top: calc(var(--ps-line-height) * 1.25);
|
||||
}
|
||||
|
||||
.dropdown-button-control.dropdown-up .dropdown {
|
||||
top: auto;
|
||||
bottom: 30px;
|
||||
bottom: calc(var(--ps-line-height) * 1.25);
|
||||
}
|
||||
|
||||
.dropdown .pointer,
|
||||
|
|
@ -556,7 +556,7 @@ a.header-avatar img {
|
|||
}
|
||||
|
||||
.dropdown li {
|
||||
font-size: 14px !important;
|
||||
font-size: var(--ps-font-small) !important;
|
||||
line-height: normal !important;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
|
|
@ -678,9 +678,9 @@ table.table1 {
|
|||
}
|
||||
|
||||
table.table1 thead th {
|
||||
font-size: 12px;
|
||||
font-size: var(--ps-font-tiny);
|
||||
font-weight: normal;
|
||||
line-height: 15px;
|
||||
line-height: calc(var(--ps-line-height) / 1.5);
|
||||
text-transform: uppercase;
|
||||
padding: 0 0 4px 3px;
|
||||
}
|
||||
|
|
@ -694,7 +694,7 @@ table.table1 tbody tr {
|
|||
}
|
||||
|
||||
table.table1 td {
|
||||
font-size: 14px;
|
||||
font-size: var(--ps-font-small);
|
||||
}
|
||||
|
||||
table.table1 tbody td {
|
||||
|
|
@ -831,7 +831,7 @@ table.info tbody th {
|
|||
|
||||
dl.details {
|
||||
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
font-size: var(--ps-font-small);
|
||||
}
|
||||
|
||||
dl.details dt {
|
||||
|
|
@ -882,7 +882,7 @@ fieldset.fields1 dl.pmlist dd.recipients {
|
|||
/* Action-bars (container for post/reply buttons, pagination, etc.)
|
||||
---------------------------------------- */
|
||||
.action-bar {
|
||||
font-size: 14px;
|
||||
font-size: var(--ps-font-small);
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
|
|
@ -938,7 +938,7 @@ fieldset.fields1 dl.pmlist dd.recipients {
|
|||
|
||||
.pagination li.active span {
|
||||
font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica;
|
||||
font-size: 16px;
|
||||
font-size: var(--ps-font-normal);
|
||||
font-weight: normal;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
|
|
@ -962,7 +962,7 @@ fieldset.fields1 dl.pmlist dd.recipients {
|
|||
}
|
||||
|
||||
.pagination li.page-jump a i {
|
||||
font-size: 20px;
|
||||
font-size: var(--ps-font-h3);
|
||||
}
|
||||
|
||||
.pagination .arrow a {
|
||||
|
|
@ -982,10 +982,10 @@ fieldset.fields1 dl.pmlist dd.recipients {
|
|||
|
||||
.row .pagination li a,
|
||||
.row .pagination li span {
|
||||
font-size: 12px;
|
||||
font-size: var(--ps-font-tiny);
|
||||
border-radius: 2px;
|
||||
width: 17px;
|
||||
height: 22px;
|
||||
width: calc(var(--ps-font-tiny) + 6px);
|
||||
height: calc(var(--ps-font-normal) + 6px);
|
||||
padding: 1px 3px;
|
||||
}
|
||||
|
||||
|
|
@ -1026,7 +1026,7 @@ fieldset.fields1 dl.pmlist dd.recipients {
|
|||
.phpbb_alert div.alert_text > select,
|
||||
.phpbb_alert div.alert_text > textarea,
|
||||
.phpbb_alert div.alert_text > input {
|
||||
font-size: 14px;
|
||||
font-size: var(--ps-font-small);
|
||||
}
|
||||
|
||||
.darkenwrapper {
|
||||
|
|
@ -1141,13 +1141,13 @@ fieldset.fields1 dl.pmlist dd.recipients {
|
|||
/* Miscellaneous styles
|
||||
---------------------------------------- */
|
||||
.copyright {
|
||||
font-size: 12px;
|
||||
font-size: var(--ps-font-tiny);
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.footer-row {
|
||||
font-size: 12px;
|
||||
font-size: var(--ps-font-tiny);
|
||||
line-height: 1.8;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -1170,7 +1170,7 @@ fieldset.fields1 dl.pmlist dd.recipients {
|
|||
}
|
||||
|
||||
div.rules {
|
||||
font-size: 18px;
|
||||
font-size: var(--ps-font-h4);
|
||||
border-radius: 7px;
|
||||
margin: 10px 0;
|
||||
padding: 5px 10px;
|
||||
|
|
@ -1243,7 +1243,7 @@ ul.linklist:after,
|
|||
}
|
||||
|
||||
.member-search strong {
|
||||
font-size: 14px;
|
||||
font-size: var(--ps-font-small);
|
||||
}
|
||||
|
||||
.dropdown-extended {
|
||||
|
|
@ -1319,7 +1319,7 @@ ul.linklist:after,
|
|||
}
|
||||
|
||||
.dropdown-extended .footer {
|
||||
font-size: 16px;
|
||||
font-size: var(--ps-font-normal);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -1372,7 +1372,7 @@ ul.linklist:after,
|
|||
}
|
||||
|
||||
.notification-time {
|
||||
font-size: 12px;
|
||||
font-size: var(--ps-font-tiny);
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -1388,7 +1388,7 @@ ul.linklist:after,
|
|||
|
||||
.notifications-title {
|
||||
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
|
||||
font-size: 16px !important;
|
||||
font-size: var(--ps-font-normal) !important;
|
||||
}
|
||||
|
||||
.notifications-title strong {
|
||||
|
|
@ -1404,7 +1404,7 @@ ul.linklist:after,
|
|||
}
|
||||
|
||||
.badge {
|
||||
font-size: 12px;
|
||||
font-size: var(--ps-font-tiny);
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue