Commit e360ea7d authored by Côme Chilliet's avatar Côme Chilliet
Browse files

:sparkles: feat(themes) Switch breezy to proportional fonts to ease theme making

Using font-size: 75% so that 1em is 12px which was previous value

issue #5852
Showing with 52 additions and 55 deletions
+52 -55
...@@ -3,7 +3,8 @@ input:focus, ...@@ -3,7 +3,8 @@ input:focus,
select, select,
textarea, textarea,
textarea:focus { textarea:focus {
font-size: 12px; font-size: inherit;
font-size: 1em;
} }
input[type=text], input[type=text],
input[type=password], input[type=password],
......
...@@ -54,3 +54,9 @@ ...@@ -54,3 +54,9 @@
@tab-border-color: #999; @tab-border-color: #999;
@tab-active-background-color: #f8f8f8; @tab-active-background-color: #f8f8f8;
@tab-title-color-disabled: grey; @tab-title-color-disabled: grey;
@font-family: arial,helvetica,sans-serif;
@font-size: 75%;
@text-font-size: 1em;
@title-font-size: 1.1em;
@big-title-font-size: 1.2em;
@import "colors"; @import "colors";
input, input:focus, select, textarea, textarea:focus { input, input:focus, select, textarea, textarea:focus {
font-size: 12px; font-size: inherit;
font-size: @text-font-size;
} }
input[type=text], input[type=password], select { input[type=text], input[type=password], select {
......
...@@ -5,7 +5,7 @@ p.fusiondirectoryLoginWarning { ...@@ -5,7 +5,7 @@ p.fusiondirectoryLoginWarning {
text-align: center; text-align: center;
color: @warning-red-color; color: @warning-red-color;
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: @text-font-size;
@media (max-width: 640px) { @media (max-width: 640px) {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
...@@ -52,7 +52,7 @@ div#window-titlebar { ...@@ -52,7 +52,7 @@ div#window-titlebar {
> p { > p {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 24px; font-size: 2em;
font-weight: bold; font-weight: bold;
} }
} }
......
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
/* Side menu */ /* Side menu */
ul.menu { ul.menu {
font-size: @text-font-size;
&, & ul { &, & ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
...@@ -22,8 +23,6 @@ ul.menu { ...@@ -22,8 +23,6 @@ ul.menu {
background-color: @background-second-color; background-color: @background-second-color;
border: 1px solid @border-color-1; border: 1px solid @border-color-1;
> a { > a {
font-family: arial,helvetica,sans-serif;
font-size: 12px;
font-weight: bold; font-weight: bold;
color: @text-color; color: @text-color;
text-decoration: none; text-decoration: none;
...@@ -42,7 +41,6 @@ ul.menu { ...@@ -42,7 +41,6 @@ ul.menu {
color: @text-color; color: @text-color;
text-decoration: none; text-decoration: none;
font-weight: normal; font-weight: normal;
font-size: 12px;
vertical-align: middle; vertical-align: middle;
margin: 2px 0; margin: 2px 0;
padding-top: 2px; padding-top: 2px;
......
...@@ -21,8 +21,7 @@ margin-bottom: 0; ...@@ -21,8 +21,7 @@ margin-bottom: 0;
text-align: right; text-align: right;
vertical-align: middle; vertical-align: middle;
background-color: @background-color; background-color: @background-color;
font-family: arial,helvetica,sans-serif; font-size: .9em;
font-size: 11px;
} }
html.rtl div.pluginfo { html.rtl div.pluginfo {
text-align: left; text-align: left;
...@@ -39,7 +38,6 @@ border-right-width: 0; ...@@ -39,7 +38,6 @@ border-right-width: 0;
padding-top: 10px; padding-top: 10px;
padding-bottom: 0; padding-bottom: 0;
text-align: right; text-align: right;
font-family: arial,helvetica,sans-serif;
clear: both; clear: both;
} }
p.plugbottom { p.plugbottom {
......
...@@ -59,7 +59,7 @@ padding-bottom: 3px; ...@@ -59,7 +59,7 @@ padding-bottom: 3px;
/* The style for the info of an active setup */ /* The style for the info of an active setup */
#menucell.setup-navigation li.menuitem a.navigation-info { #menucell.setup-navigation li.menuitem a.navigation-info {
font-size: 1em; font-size: @text-font-size;
color: @text-color; color: @text-color;
margin: 0; margin: 0;
cursor: default; cursor: default;
......
...@@ -4,22 +4,26 @@ body { ...@@ -4,22 +4,26 @@ body {
margin: 0; margin: 0;
background-color: @background-color; background-color: @background-color;
color: @text-color; color: @text-color;
font-family: arial,helvetica,sans-serif; font-family: @font-family;
font-size: 12px; font-size: @font-size;
}
table {
font-size:inherit;
} }
h1 { h1 {
font-size: 14px; font-size: @big-title-font-size;
color: @title-color; color: @title-color;
} }
h2,h3,h4,h5,h6 { h2,h3,h4,h5,h6 {
font-size: 13px; font-size: @title-font-size;
color: @title-color; color: @title-color;
} }
td,p,b,th { td,p,b,th {
font-size: 12px; font-size: @text-font-size;
} }
img { img {
...@@ -64,9 +68,8 @@ text-align: right; ...@@ -64,9 +68,8 @@ text-align: right;
/* Title bar */ /* Title bar */
a.maintitlebar,div.maintitlebar { a.maintitlebar,div.maintitlebar {
font-family: arial,helvetica,sans-serif;
text-decoration: none; text-decoration: none;
font-size: 12px; font-size: @text-font-size;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
...@@ -113,8 +116,7 @@ border-right-width: 0; ...@@ -113,8 +116,7 @@ border-right-width: 0;
padding-top: 3px; padding-top: 3px;
padding-bottom: 0; padding-bottom: 0;
text-align: right; text-align: right;
font-family: arial,helvetica,sans-serif; font-size: .8em;
font-size: 10px;
} }
html.rtl div.copynotice { html.rtl div.copynotice {
text-align: left; text-align: left;
...@@ -129,7 +131,6 @@ height: 1px; ...@@ -129,7 +131,6 @@ height: 1px;
.must { .must {
color: @warning-red-color; color: @warning-red-color;
font-family: arial,helvetica,sans-serif;
} }
img.center { img.center {
...@@ -206,8 +207,7 @@ width: auto; ...@@ -206,8 +207,7 @@ width: auto;
div.contentboxh > p { div.contentboxh > p {
margin: 2px; margin: 2px;
font-family: arial,helvetica,sans-serif; font-size: 1.3em;
font-size: 16px;
font-weight: bold; font-weight: bold;
vertical-align: middle; vertical-align: middle;
} }
...@@ -372,7 +372,7 @@ z-index: 90; ...@@ -372,7 +372,7 @@ z-index: 90;
#pulldown ul li { #pulldown ul li {
margin: 0 3px 0 0; margin: 0 3px 0 0;
padding: 0; padding: 0;
font-size: 12px; font-size: @text-font-size;
line-height: 1em; line-height: 1em;
list-style-type: none; list-style-type: none;
} }
...@@ -508,8 +508,7 @@ margin: 0; ...@@ -508,8 +508,7 @@ margin: 0;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
background-color: @background-second-color; background-color: @background-second-color;
font-family: arial,helvetica,sans-serif; font-size: 1.5em;
font-size: 18px;
} }
.plugtop img { .plugtop img {
height: 32px; height: 32px;
...@@ -559,7 +558,7 @@ html.rtl div#header-right { ...@@ -559,7 +558,7 @@ html.rtl div#header-right {
text-align: left; text-align: left;
} }
div#header-right div.version { div#header-right div.version {
font-size: 20px; font-size: 1.8em;
} }
/* Header col */ /* Header col */
...@@ -626,7 +625,7 @@ color: @text-color; ...@@ -626,7 +625,7 @@ color: @text-color;
white-space: nowrap; white-space: nowrap;
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
font-size: 1em; font-size: @text-font-size;
} }
html.ltr div#header-left .plugtop { html.ltr div#header-left .plugtop {
margin: 0; margin: 0;
......
...@@ -4,10 +4,9 @@ table.tabs-header { ...@@ -4,10 +4,9 @@ table.tabs-header {
width: 100%; width: 100%;
border: none; border: none;
border-spacing: 0; border-spacing: 0;
font-family: arial,helvetica,sans-serif;
text-decoration: none; text-decoration: none;
color: @link-color; color: @link-color;
font-size: 13px; font-size: @title-font-size;
font-weight: bold; font-weight: bold;
> tbody > tr > td { > tbody > tr > td {
padding: 0; padding: 0;
......
...@@ -3,7 +3,7 @@ p.fusiondirectoryLoginWarning { ...@@ -3,7 +3,7 @@ p.fusiondirectoryLoginWarning {
text-align: center; text-align: center;
color: #dd0000; color: #dd0000;
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: 1em;
} }
@media (max-width: 640px) { @media (max-width: 640px) {
p.fusiondirectoryLoginWarning { p.fusiondirectoryLoginWarning {
...@@ -52,7 +52,7 @@ div#window-titlebar > img { ...@@ -52,7 +52,7 @@ div#window-titlebar > img {
div#window-titlebar > p { div#window-titlebar > p {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 24px; font-size: 2em;
font-weight: bold; font-weight: bold;
} }
div#window-content > div { div#window-content > div {
......
...@@ -4,6 +4,9 @@ ...@@ -4,6 +4,9 @@
vertical-align: top; vertical-align: top;
} }
/* Side menu */ /* Side menu */
ul.menu {
font-size: 1em;
}
ul.menu, ul.menu,
ul.menu ul { ul.menu ul {
margin: 0; margin: 0;
...@@ -20,8 +23,6 @@ ul.menu > li { ...@@ -20,8 +23,6 @@ ul.menu > li {
border: 1px solid #c0c2c3; border: 1px solid #c0c2c3;
} }
ul.menu > li > a { ul.menu > li > a {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
font-weight: bold; font-weight: bold;
color: #31363b; color: #31363b;
text-decoration: none; text-decoration: none;
...@@ -39,7 +40,6 @@ ul.menu ul > li > a { ...@@ -39,7 +40,6 @@ ul.menu ul > li > a {
color: #31363b; color: #31363b;
text-decoration: none; text-decoration: none;
font-weight: normal; font-weight: normal;
font-size: 12px;
vertical-align: middle; vertical-align: middle;
margin: 2px 0; margin: 2px 0;
padding-top: 2px; padding-top: 2px;
......
...@@ -18,8 +18,7 @@ div.pluginfo { ...@@ -18,8 +18,7 @@ div.pluginfo {
text-align: right; text-align: right;
vertical-align: middle; vertical-align: middle;
background-color: #eff0f1; background-color: #eff0f1;
font-family: arial, helvetica, sans-serif; font-size: .9em;
font-size: 11px;
} }
html.rtl div.pluginfo { html.rtl div.pluginfo {
text-align: left; text-align: left;
...@@ -35,7 +34,6 @@ html.rtl div.pluginfo { ...@@ -35,7 +34,6 @@ html.rtl div.pluginfo {
padding-top: 10px; padding-top: 10px;
padding-bottom: 0; padding-bottom: 0;
text-align: right; text-align: right;
font-family: arial, helvetica, sans-serif;
clear: both; clear: both;
} }
p.plugbottom { p.plugbottom {
......
...@@ -3,10 +3,13 @@ body { ...@@ -3,10 +3,13 @@ body {
background-color: #eff0f1; background-color: #eff0f1;
color: #31363b; color: #31363b;
font-family: arial, helvetica, sans-serif; font-family: arial, helvetica, sans-serif;
font-size: 12px; font-size: 75%;
}
table {
font-size: inherit;
} }
h1 { h1 {
font-size: 14px; font-size: 1.2em;
color: #31363b; color: #31363b;
} }
h2, h2,
...@@ -14,14 +17,14 @@ h3, ...@@ -14,14 +17,14 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 13px; font-size: 1.1em;
color: #31363b; color: #31363b;
} }
td, td,
p, p,
b, b,
th { th {
font-size: 12px; font-size: 1em;
} }
img { img {
border: none; border: none;
...@@ -59,9 +62,8 @@ html.rtl div.scrollbody { ...@@ -59,9 +62,8 @@ html.rtl div.scrollbody {
/* Title bar */ /* Title bar */
a.maintitlebar, a.maintitlebar,
div.maintitlebar { div.maintitlebar {
font-family: arial, helvetica, sans-serif;
text-decoration: none; text-decoration: none;
font-size: 12px; font-size: 1em;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
...@@ -105,8 +107,7 @@ div.copynotice { ...@@ -105,8 +107,7 @@ div.copynotice {
padding-top: 3px; padding-top: 3px;
padding-bottom: 0; padding-bottom: 0;
text-align: right; text-align: right;
font-family: arial, helvetica, sans-serif; font-size: .8em;
font-size: 10px;
} }
html.rtl div.copynotice { html.rtl div.copynotice {
text-align: left; text-align: left;
...@@ -119,7 +120,6 @@ hr { ...@@ -119,7 +120,6 @@ hr {
} }
.must { .must {
color: #dd0000; color: #dd0000;
font-family: arial, helvetica, sans-serif;
} }
img.center { img.center {
text-align: center; text-align: center;
...@@ -185,8 +185,7 @@ div.contentboxh { ...@@ -185,8 +185,7 @@ div.contentboxh {
} }
div.contentboxh > p { div.contentboxh > p {
margin: 2px; margin: 2px;
font-family: arial, helvetica, sans-serif; font-size: 1.3em;
font-size: 16px;
font-weight: bold; font-weight: bold;
vertical-align: middle; vertical-align: middle;
} }
...@@ -335,7 +334,7 @@ html.rtl #pulldown { ...@@ -335,7 +334,7 @@ html.rtl #pulldown {
#pulldown ul li { #pulldown ul li {
margin: 0 3px 0 0; margin: 0 3px 0 0;
padding: 0; padding: 0;
font-size: 12px; font-size: 1em;
line-height: 1em; line-height: 1em;
list-style-type: none; list-style-type: none;
} }
...@@ -478,8 +477,7 @@ html.rtl div#header-left { ...@@ -478,8 +477,7 @@ html.rtl div#header-left {
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
background-color: #f3f4f4; background-color: #f3f4f4;
font-family: arial, helvetica, sans-serif; font-size: 1.5em;
font-size: 18px;
} }
.plugtop img { .plugtop img {
height: 32px; height: 32px;
...@@ -525,7 +523,7 @@ html.rtl div#header-right { ...@@ -525,7 +523,7 @@ html.rtl div#header-right {
text-align: left; text-align: left;
} }
div#header-right div.version { div#header-right div.version {
font-size: 20px; font-size: 1.8em;
} }
/* Header col */ /* Header col */
div.setup-header { div.setup-header {
......
...@@ -2,10 +2,9 @@ table.tabs-header { ...@@ -2,10 +2,9 @@ table.tabs-header {
width: 100%; width: 100%;
border: none; border: none;
border-spacing: 0; border-spacing: 0;
font-family: arial, helvetica, sans-serif;
text-decoration: none; text-decoration: none;
color: #2980b9; color: #2980b9;
font-size: 13px; font-size: 1.1em;
font-weight: bold; font-weight: bold;
} }
table.tabs-header > tbody > tr > td { table.tabs-header > tbody > tr > td {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment