From 22720816aa56d9689ab5b788833193468a0fcef3 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Vladim=C3=ADr=20Vondru=C5=A1?= Date: Sun, 22 Oct 2017 15:27:46 +0200 Subject: [PATCH] css: styling for buttons. --- css/m-components.css | 60 ++++++++++++++++++++++++++++++++++++++++++-- css/m-dark.css | 7 ++++++ css/m-light.css | 7 ++++++ 3 files changed, 72 insertions(+), 2 deletions(-) diff --git a/css/m-components.css b/css/m-components.css index 9ce07d65..ced8e640 100644 --- a/css/m-components.css +++ b/css/m-components.css @@ -603,6 +603,31 @@ dl.m-diary dd { padding: 0.9375rem 0.9375rem 0.9375rem 0.75rem; } +/* Button */ +a.m-button { + display: inline-block; + border-radius: var(--border-radius); + padding-top: 0.75rem; + padding-bottom: 0.75rem; + padding-left: 1.5rem; + padding-right: 1.5rem; + text-decoration: none; + text-align: center; + font-size: 1.17rem; +} +a.m-button.m-fullwidth { + display: block; + padding-left: 0; + padding-right: 0; +} +a.m-button .m-big:first-child { + font-size: 1.37rem; + font-weight: bold; +} +a.m-button .m-small:last-child { + font-size: 0.854rem; +} + /* Tables */ table.m-table { border-collapse: collapse; @@ -833,6 +858,37 @@ table.m-table tr.m-dim th, table.m-table th.m-dim { color: var(--dim-link-active-color); } +/* Colored button */ +a.m-button { color: var(--background-color); } +a.m-button.m-default { background-color: var(--default-color); } +a.m-button.m-primary { background-color: var(--primary-color); } +a.m-button.m-success { background-color: var(--success-color); } +a.m-button.m-warning { background-color: var(--warning-color); } +a.m-button.m-danger { background-color: var(--danger-color); } +a.m-button.m-info { background-color: var(--info-color); } +a.m-button.m-dim { background-color: var(--dim-color); } +a.m-button.m-default:hover, a.m-button.m-default:focus, a.m-button.m-default:active { + background-color: var(--default-button-active-color); +} +a.m-button.m-primary:hover, a.m-button.m-primary:focus, a.m-button.m-primary:active { + background-color: var(--primary-button-active-color); +} +a.m-button.m-success:hover, a.m-button.m-success:focus, a.m-button.m-success:active { + background-color: var(--success-button-active-color); +} +a.m-button.m-warning:hover, a.m-button.m-warning:focus, a.m-button.m-warning:active { + background-color: var(--warning-button-active-color); +} +a.m-button.m-danger:hover, a.m-button.m-danger:focus, a.m-button.m-danger:active { + background-color: var(--danger-button-active-color); +} +a.m-button.m-info:hover, a.m-button.m-info:focus, a.m-button.m-info:active { + background-color: var(--info-button-active-color); +} +a.m-button.m-dim:hover, a.m-button.m-dim:focus, a.m-button.m-dim:active { + background-color: var(--dim-button-active-color); +} + /* Image */ img.m-image { display: block; @@ -1166,7 +1222,7 @@ div.m-math.m-dim svg, svg.m-math.m-dim { fill: var(--dim-color); } /* Spacing after every block element, but not after the last */ p, ul, ol, dl, blockquote, hr, pre, figure.m-code-figure, article, article > header, article section, -.m-note, .m-frame, .m-block, +.m-note, .m-frame, .m-block, .m-button, div.m-scroll, table.m-table, div.m-image, img.m-image, figure.m-figure, .m-imagegrid, div.m-math { margin-bottom: 1rem; @@ -1174,7 +1230,7 @@ figure.m-figure, .m-imagegrid, div.m-math { p:last-child, ul:last-child, ol:last-child, dl:last-child, blockquote:last-child, hr:last-child, pre:last-child, figure.m-code-figure:last-child, article:last-child, article section:last-child, -.m-note:last-child, .m-frame:last-child, .m-block:last-child, +.m-note:last-child, .m-frame:last-child, .m-block:last-child, .m-button:last-child, table.m-table:last-child, img.m-image:last-child, div.m-image:last-child, figure.m-figure:last-child, .m-imagegrid:last-child, div.m-math:last-child { margin-bottom: 0; diff --git a/css/m-dark.css b/css/m-dark.css index 47a553e6..e4e8991a 100644 --- a/css/m-dark.css +++ b/css/m-dark.css @@ -69,36 +69,42 @@ --default-filled-background-color: #34424d; --default-filled-link-color: #5b9dd9; --default-filled-link-active-color: #a5c9ea; + --default-button-active-color: #a5c9ea; --primary-color: #a5c9ea; --primary-filled-color: #2f363f; --primary-filled-background-color: #a5c2db; --primary-filled-link-color: #2a75b6; --primary-filled-link-active-color: #2f363f; + --primary-button-active-color: #dcdcdc; --success-color: #3bd267; --success-filled-color: #acecbe; --success-filled-background-color: #2a703f; --success-filled-link-color: #3bd267; --success-filled-link-active-color: #acecbe; + --success-button-active-color: #acecbe; --warning-color: #c7cf2f; --warning-filled-color: #e9ecae; --warning-filled-background-color: #6d702a; --warning-filled-link-color: #b8bf2b; --warning-filled-link-active-color: #e9ecae; + --warning-button-active-color: #e9ecae; --danger-color: #cd3431; --danger-filled-color: #ff9391; --danger-filled-background-color: #702b2a; --danger-filled-link-color: #d85c59; --danger-filled-link-active-color: #ff9391; + --danger-button-active-color: #ff9391; --info-color: #2f83cc; --info-filled-color: #a5caeb; --info-filled-background-color: #2a4f70; --info-filled-link-color: #5297d7; --info-filled-link-active-color: #a5caeb; + --info-button-active-color: #5297d7; --dim-color: #747474; --dim-link-color: #acacac; @@ -107,6 +113,7 @@ --dim-filled-background-color: #2d3236; --dim-filled-link-color: #acacac; --dim-filled-link-active-color: #747474; + --dim-button-active-color: #acacac; } /* kate: indent-width 2; */ diff --git a/css/m-light.css b/css/m-light.css index d811e548..3d39534a 100644 --- a/css/m-light.css +++ b/css/m-light.css @@ -66,36 +66,42 @@ --default-filled-background-color: #fbf0ec; --default-filled-link-color: #ea7944; --default-filled-link-active-color: #cb4b16; + --default-button-active-color: #cb4b16; --primary-color: #cb4b16; --primary-filled-color: #fbe4d9; --primary-filled-background-color: #ef9069; --primary-filled-link-color: #782f0d; --primary-filled-link-active-color: #2f1205; + --primary-button-active-color: #000000; --success-color: #31c25d; --success-filled-color: #f4fcf6; --success-filled-background-color: #4dd376; --success-filled-link-color: #c5f2d1; --success-filled-link-active-color: #dcf6e3; + --success-button-active-color: #dcf6e3; --warning-color: #c7cf2f; --warning-filled-color: #fcfcf4; --warning-filled-background-color: #d1d34d; --warning-filled-link-color: #f0f1c7; --warning-filled-link-active-color: #f6f6dc; + --warning-button-active-color: #f6f6dc; --danger-color: #f60000; --danger-filled-color: #fdf3f3; --danger-filled-background-color: #e23e3e; --danger-filled-link-color: #f2c7c6; --danger-filled-link-active-color: #f6dddc; + --danger-button-active-color: #f6dddc; --info-color: #2e7dc5; --info-filled-color: #f4f8fc; --info-filled-background-color: #4c93d3; --info-filled-link-color: #c6ddf2; --info-filled-link-active-color: #dbeaf7; + --info-button-active-color: #c6ddf2; --dim-color: #bdbdbd; --dim-link-color: #c0c0c0; @@ -104,6 +110,7 @@ --dim-filled-background-color: #f1f1f1; --dim-filled-link-color: #c0c0c0; --dim-filled-link-active-color: #949494; + --dim-button-active-color: #c0c0c0; } /* kate: indent-width 2; */ -- 2.30.2