css: styling for buttons.

diff --git a/css/m-components.css b/css/m-components.css
index 9ce07d65339238851842d563da32b6c8dd562d12..ced8e640f9dd9ee0fcc3c3e740d247a58433614b 100644 (file)
--- 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 47a553e6934e09e88286234b15457e441d82667c..e4e8991ab04e82ef72b939f83aa6ae7b02b7738b 100644 (file)
--- 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 d811e548d94f5d33825e319c0344de33c9786594..3d39534aeaf72950d2cb7f7cb589a47733b94aa2 100644 (file)
--- 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; */