app/assets/stylesheets/material_design/application.css in material_design-0.3.0 vs app/assets/stylesheets/material_design/application.css in material_design-0.4.0
- old
+ new
@@ -1,107 +1,111 @@
:root {
/* color-scheme: light dark; */
- --md-sys-light-state-hover-state-layer-opacity: rgba(29, 27, 32, 0.08);
- --md-sys-dark-state-hover-state-layer-opacity: rgba(230, 224, 233, 0.08);
+ --md-sys-light-state-hover-state-layer-opacity: 0.08;
+ --md-sys-dark-state-hover-state-layer-opacity: 0.08;
/* Light scheme */
- --md-sys-light-primary: rgba(101 85 143 1);
- --md-sys-light-surface-tint: rgba(101 85 143 1);
- --md-sys-light-on-primary: rgba(255 255 255 1);
- --md-sys-light-primary-container: rgba(233 221 255 1);
- --md-sys-light-on-primary-container: rgba(32 16 71 1);
- --md-sys-light-secondary: rgba(98 91 113 1);
- --md-sys-light-on-secondary: rgba(255 255 255 1);
- --md-sys-light-secondary-container: rgba(232 222 248 1);
- --md-sys-light-on-secondary-container: rgba(30 25 43 1);
- --md-sys-light-tertiary: rgba(126 82 96 1);
- --md-sys-light-on-tertiary: rgba(255 255 255 1);
- --md-sys-light-tertiary-container: rgba(255 217 227 1);
- --md-sys-light-on-tertiary-container: rgba(49 16 29 1);
- --md-sys-light-error: rgba(186 26 26 1);
- --md-sys-light-on-error: rgba(255 255 255 1);
- --md-sys-light-error-container: rgba(255 218 214 1);
- --md-sys-light-on-error-container: rgba(65 0 2 1);
- --md-sys-light-background: rgba(253 247 255 1);
- --md-sys-light-on-background: rgba(29 27 32 1);
- --md-sys-light-surface: rgba(253 247 255 1);
- --md-sys-light-on-surface: rgba(29 27 32 1);
- --md-sys-light-surface-variant: rgba(231 224 235 1);
- --md-sys-light-on-surface-variant: rgba(73 69 78 1);
- --md-sys-light-outline: rgba(122 117 127 1);
- --md-sys-light-outline-variant: rgba(202 196 207 1);
- --md-sys-light-shadow: rgba(0 0 0 1);
- --md-sys-light-scrim: rgba(0 0 0 1);
- --md-sys-light-inverse-surface: rgba(50 47 53 1);
- --md-sys-light-inverse-on-surface: rgba(245 239 247 1);
- --md-sys-light-inverse-primary: rgba(207 189 254 1);
- --md-sys-light-primary-fixed: rgba(233 221 255 1);
- --md-sys-light-on-primary-fixed: rgba(32 16 71 1);
- --md-sys-light-primary-fixed-dim: rgba(207 189 254 1);
- --md-sys-light-on-primary-fixed-variant: rgba(77 61 117 1);
- --md-sys-light-secondary-fixed: rgba(232 222 248 1);
- --md-sys-light-on-secondary-fixed: rgba(30 25 43 1);
- --md-sys-light-secondary-fixed-dim: rgba(203 194 219 1);
- --md-sys-light-on-secondary-fixed-variant: rgba(74 68 88 1);
- --md-sys-light-tertiary-fixed: rgba(255 217 227 1);
- --md-sys-light-on-tertiary-fixed: rgba(49 16 29 1);
- --md-sys-light-tertiary-fixed-dim: rgba(239 184 200 1);
- --md-sys-light-on-tertiary-fixed-variant: rgba(99 59 72 1);
- --md-sys-light-surface-dim: rgba(222 216 224 1);
- --md-sys-light-surface-bright: rgba(253 247 255 1);
- --md-sys-light-surface-container-lowest: rgba(255 255 255 1);
- --md-sys-light-surface-container-low: rgba(248 242 250 1);
- --md-sys-light-surface-container: rgba(242 236 244 1);
- --md-sys-light-surface-container-high: rgba(236 230 238 1);
- --md-sys-light-surface-container-highest: rgba(230 224 233 1);
+ --md-sys-light-primary: 101, 85, 143;
+ --md-sys-light-surface-tint: 101 85 143;
+ --md-sys-light-on-primary: 255 255 255;
+ --md-sys-light-primary-container: 233 221 255;
+ --md-sys-light-on-primary-container: 32 16 71;
+ --md-sys-light-secondary: 98 91 113;
+ --md-sys-light-on-secondary: 255 255 255;
+ --md-sys-light-secondary-container: 232 222 248;
+ --md-sys-light-on-secondary-container: 30 25 43;
+ --md-sys-light-tertiary: 126 82 96;
+ --md-sys-light-on-tertiary: 255 255 255;
+ --md-sys-light-tertiary-container: 255 217 227;
+ --md-sys-light-on-tertiary-container: 49 16 29;
+ --md-sys-light-error: 186 26 26;
+ --md-sys-light-on-error: 255 255 255;
+ --md-sys-light-error-container: 255 218 214;
+ --md-sys-light-on-error-container: 65 0 2;
+ --md-sys-light-background: 253 247 255;
+ --md-sys-light-on-background: 29 27 32;
+ --md-sys-light-surface: 253 247 255;
+ --md-sys-light-on-surface: 29 27 32;
+ --md-sys-light-surface-variant: 231 224 235;
+ --md-sys-light-on-surface-variant: 73 69 78;
+ --md-sys-light-outline: 122 117 127;
+ --md-sys-light-outline-variant: 202 196 207;
+ --md-sys-light-shadow: 0 0 0;
+ --md-sys-light-scrim: 0 0 0;
+ --md-sys-light-inverse-surface: 50 47 53;
+ --md-sys-light-inverse-on-surface: 245 239 247;
+ --md-sys-light-inverse-primary: 207 189 254;
+ --md-sys-light-primary-fixed: 233 221 255;
+ --md-sys-light-on-primary-fixed: 32 16 71;
+ --md-sys-light-primary-fixed-dim: 207 189 254;
+ --md-sys-light-on-primary-fixed-variant: 77 61 117;
+ --md-sys-light-secondary-fixed: 232 222 248;
+ --md-sys-light-on-secondary-fixed: 30 25 43;
+ --md-sys-light-secondary-fixed-dim: 203 194 219;
+ --md-sys-light-on-secondary-fixed-variant: 74 68 88;
+ --md-sys-light-tertiary-fixed: 255 217 227;
+ --md-sys-light-on-tertiary-fixed: 49 16 29;
+ --md-sys-light-tertiary-fixed-dim: 239 184 200;
+ --md-sys-light-on-tertiary-fixed-variant: 99 59 72;
+ --md-sys-light-surface-dim: 222 216 224;
+ --md-sys-light-surface-bright: 253 247 255;
+ --md-sys-light-surface-container-lowest: 255 255 255;
+ --md-sys-light-surface-container-low: 248 242 250;
+ --md-sys-light-surface-container: 242 236 244;
+ --md-sys-light-surface-container-high: 236 230 238;
+ --md-sys-light-surface-container-highest: 230 224 233;
/* Dark scheme */
- --md-sys-dark-primary: rgba(207 189 254 1);
- --md-sys-dark-surface-tint: rgba(207 189 254 1);
- --md-sys-dark-on-primary: rgba(54 39 93 1);
- --md-sys-dark-primary-container: rgba(77 61 117 1);
- --md-sys-dark-on-primary-container: rgba(233 221 255 1);
- --md-sys-dark-secondary: rgba(203 194 219 1);
- --md-sys-dark-on-secondary: rgba(51 45 65 1);
- --md-sys-dark-secondary-container: rgba(74 68 88 1);
- --md-sys-dark-on-secondary-container: rgba(232 222 248 1);
- --md-sys-dark-tertiary: rgba(239 184 200 1);
- --md-sys-dark-on-tertiary: rgba(74 37 50 1);
- --md-sys-dark-tertiary-container: rgba(99 59 72 1);
- --md-sys-dark-on-tertiary-container: rgba(255 217 227 1);
- --md-sys-dark-error: rgba(255 180 171 1);
- --md-sys-dark-on-error: rgba(105 0 5 1);
- --md-sys-dark-error-container: rgba(147 0 10 1);
- --md-sys-dark-on-error-container: rgba(255 218 214 1);
- --md-sys-dark-background: rgba(20 18 24 1);
- --md-sys-dark-on-background: rgba(230 224 233 1);
- --md-sys-dark-surface: rgba(20 18 24 1);
- --md-sys-dark-on-surface: rgba(230 224 233 1);
- --md-sys-dark-surface-variant: rgba(73 69 78 1);
- --md-sys-dark-on-surface-variant: rgba(202 196 207 1);
- --md-sys-dark-outline: rgba(148 143 153 1);
- --md-sys-dark-outline-variant: rgba(73 69 78 1);
- --md-sys-dark-shadow: rgba(0 0 0 1);
- --md-sys-dark-scrim: rgba(0 0 0 1);
- --md-sys-dark-inverse-surface: rgba(230 224 233 1);
- --md-sys-dark-inverse-on-surface: rgba(50 47 53 1);
- --md-sys-dark-inverse-primary: rgba(101 85 143 1);
- --md-sys-dark-primary-fixed: rgba(233 221 255 1);
- --md-sys-dark-on-primary-fixed: rgba(32 16 71 1);
- --md-sys-dark-primary-fixed-dim: rgba(207 189 254 1);
- --md-sys-dark-on-primary-fixed-variant: rgba(77 61 117 1);
- --md-sys-dark-secondary-fixed: rgba(232 222 248 1);
- --md-sys-dark-on-secondary-fixed: rgba(30 25 43 1);
- --md-sys-dark-secondary-fixed-dim: rgba(203 194 219 1);
- --md-sys-dark-on-secondary-fixed-variant: rgba(74 68 88 1);
- --md-sys-dark-tertiary-fixed: rgba(255 217 227 1);
- --md-sys-dark-on-tertiary-fixed: rgba(49 16 29 1);
- --md-sys-dark-tertiary-fixed-dim: rgba(239 184 200 1);
- --md-sys-dark-on-tertiary-fixed-variant: rgba(99 59 72 1);
- --md-sys-dark-surface-dim: rgba(20 18 24 1);
- --md-sys-dark-surface-bright: rgba(59 56 62 1);
- --md-sys-dark-surface-container-lowest: rgba(15 13 19 1);
- --md-sys-dark-surface-container-low: rgba(29 27 32 1);
- --md-sys-dark-surface-container: rgba(33 31 36 1);
- --md-sys-dark-surface-container-high: rgba(43 41 47 1);
- --md-sys-dark-surface-container-highest: rgba(54 52 58 1);
+ --md-sys-dark-primary: 207 189 254;
+ --md-sys-dark-surface-tint: 207 189 254;
+ --md-sys-dark-on-primary: 54 39 93;
+ --md-sys-dark-primary-container: 77 61 117;
+ --md-sys-dark-on-primary-container: 233 221 255;
+ --md-sys-dark-secondary: 203 194 219;
+ --md-sys-dark-on-secondary: 51 45 65;
+ --md-sys-dark-secondary-container: 74 68 88;
+ --md-sys-dark-on-secondary-container: 232 222 248;
+ --md-sys-dark-tertiary: 239 184 200;
+ --md-sys-dark-on-tertiary: 74 37 50;
+ --md-sys-dark-tertiary-container: 99 59 72;
+ --md-sys-dark-on-tertiary-container: 255 217 227;
+ --md-sys-dark-error: 255 180 171;
+ --md-sys-dark-on-error: 105 0 5;
+ --md-sys-dark-error-container: 147 0 10;
+ --md-sys-dark-on-error-container: 255 218 214;
+ --md-sys-dark-background: 20 18 24;
+ --md-sys-dark-on-background: 230 224 233;
+ --md-sys-dark-surface: 20 18 24;
+ --md-sys-dark-on-surface: 230 224 233;
+ --md-sys-dark-surface-variant: 73 69 78;
+ --md-sys-dark-on-surface-variant: 202 196 207;
+ --md-sys-dark-outline: 148 143 153;
+ --md-sys-dark-outline-variant: 73 69 78;
+ --md-sys-dark-shadow: 0 0 0;
+ --md-sys-dark-scrim: 0 0 0;
+ --md-sys-dark-inverse-surface: 230 224 233;
+ --md-sys-dark-inverse-on-surface: 50 47 53;
+ --md-sys-dark-inverse-primary: 101 85 143;
+ --md-sys-dark-primary-fixed: 233 221 255;
+ --md-sys-dark-on-primary-fixed: 32 16 71;
+ --md-sys-dark-primary-fixed-dim: 207 189 254;
+ --md-sys-dark-on-primary-fixed-variant: 77 61 117;
+ --md-sys-dark-secondary-fixed: 232 222 248;
+ --md-sys-dark-on-secondary-fixed: 30 25 43;
+ --md-sys-dark-secondary-fixed-dim: 203 194 219;
+ --md-sys-dark-on-secondary-fixed-variant: 74 68 88;
+ --md-sys-dark-tertiary-fixed: 255 217 227;
+ --md-sys-dark-on-tertiary-fixed: 49 16 29;
+ --md-sys-dark-tertiary-fixed-dim: 239 184 200;
+ --md-sys-dark-on-tertiary-fixed-variant: 99 59 72;
+ --md-sys-dark-surface-dim: 20 18 24;
+ --md-sys-dark-surface-bright: 59 56 62;
+ --md-sys-dark-surface-container-lowest: 15 13 19;
+ --md-sys-dark-surface-container-low: 29 27 32;
+ --md-sys-dark-surface-container: 33 31 36;
+ --md-sys-dark-surface-container-high: 43 41 47;
+ --md-sys-dark-surface-container-highest: 54 52 58;
+}
+
+.text-center {
+ text-align: center;
}