logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe git clone https://hacktivis.me/git/mastofe.git

mailer.scss (7495B)

    

  1. @import 'mastodon/variables';
  3. table,
  4. td,
  5. div {
  6.   box-sizing: border-box;
  7. }
  9. html,
  10. body {
  11.   width: 100% !important;
  12.   min-width: 100%;
  13.   margin: 0;
  14.   padding: 0;
  15.   -webkit-text-size-adjust: 100%;
  16.   -ms-text-size-adjust: 100%;
  17. }
  19. .email-body {
  20.   td,
  21.   div,
  22.   a,
  23.   span {
  24.     line-height: inherit;
  25.   }
  26. }
  28. a {
  29.   &,
  30.   &:visited,
  31.   span {
  32.     text-decoration: none;
  33.     color: $ui-highlight-color;
  34.   }
  36.   #outlook & {
  37.     padding: 0;
  38.   }
  39. }
  41. img {
  42.   outline: none;
  43.   border: 0;
  44.   text-decoration: none;
  45.   -ms-interpolation-mode: bicubic;
  46.   clear: both;
  47.   line-height: 100%;
  48. }
  50. table {
  51.   border-spacing: 0;
  52.   mso-table-lspace: 0;
  53.   mso-table-rspace: 0;
  54. }
  56. td {
  57.   vertical-align: top;
  58. }
  60. .email-table,
  61. .content-section,
  62. .column,
  63. .column-cell {
  64.   width: 100%;
  65.   min-width: 100%;
  66. }
  68. .email-body {
  69.   font-size: 0 !important;
  70.   line-height: 100%;
  71.   text-align: center;
  72.   padding-left: 16px;
  73.   padding-right: 16px;
  74. }
  76. .email-start {
  77.   padding-top: 32px;
  78. }
  80. .email-end {
  81.   padding-bottom: 32px;
  82. }
  84. .email-body,
  85. html,
  86. body {
  87.   background-color: lighten($ui-base-color, 4%);
  88. }
  90. .email-container,
  91. .email-row,
  92. .col-0,
  93. .col-1,
  94. .col-2,
  95. .col-3,
  96. .col-4,
  97. .col-5,
  98. .col-6, {
  99.   font-size: 0;
  100.   display: inline-block;
  101.   width: 100%;
  102.   min-width: 100%;
  103.   min-width: 0 !important;
  104.   vertical-align: top;
  105. }
  107. .content-cell {
  108.   width: 100%;
  109.   min-width: 100%;
  110.   min-width: 0 !important;
  111. }
  113. .column-cell {
  114.   padding-top: 16px;
  115.   padding-bottom: 16px;
  116.   vertical-align: top;
  118.   &.button-cell {
  119.     padding-top: 0;
  120.   }
  121. }
  123. .email-container {
  124.   max-width: 632px;
  125.   margin: 0 auto;
  126.   text-align: center;
  127. }
  129. .email-row {
  130.   display: block;
  131.   max-width: 600px !important;
  132.   margin: 0 auto;
  133.   text-align: center;
  134.   clear: both;
  135. }
  137. .col-0 {
  138.   max-width: 50px;
  139. }
  141. .col-1 {
  142.   max-width: 100px;
  143. }
  145. .col-2 {
  146.   max-width: 200px;
  147. }
  149. .col-3 {
  150.   max-width: 300px;
  151. }
  153. .col-4 {
  154.   max-width: 400px;
  155. }
  157. .col-5 {
  158.   max-width: 500px;
  159. }
  161. .col-6 {
  162.   max-width: 600px;
  163. }
  165. .column-cell,
  166. .column-cell td,
  167. p {
  168.   font-family: Helvetica, Arial, sans-serif;
  170.   @media only screen {
  171.     font-family: 'mastodon-font-sans-serif', sans-serif !important;
  172.   }
  173. }
  175. .email-body .column-cell,
  176. .column-cell,
  177. p {
  178.   font-size: 15px;
  179.   line-height: 23px;
  180.   color: $ui-primary-color;
  181.   mso-line-height-rule: exactly;
  182.   text-rendering: optimizelegibility;
  183. }
  185. p {
  186.   display: block;
  187.   margin-top: 0;
  188.   margin-bottom: 16px;
  190.   &.small {
  191.     font-size: 13px;
  192.   }
  194.   &.lead {
  195.     font-size: 19px;
  196.     line-height: 27px;
  197.   }
  198. }
  200. h1,
  201. h2,
  202. h3,
  203. h4,
  204. h5,
  205. h6 {
  206.   color: $ui-secondary-color;
  207.   margin-left: 0;
  208.   margin-right: 0;
  209.   margin-top: 20px;
  210.   margin-bottom: 8px;
  211.   padding: 0;
  212.   font-weight: 500;
  213. }
  215. h1 {
  216.   font-size: 26px;
  217.   line-height: 36px;
  218. }
  220. h2 {
  221.   font-size: 23px;
  222.   line-height: 30px;
  223. }
  225. h3 {
  226.   font-size: 19px;
  227.   line-height: 25px;
  228. }
  230. h5 {
  231.   font-size: 16px;
  232.   line-height: 21px;
  233.   font-weight: 700;
  234.   color: lighten($ui-base-color, 34%);
  235. }
  237. .input-cell {
  238.   h5 {
  239.     margin-top: 4px;
  240.   }
  241. }
  243. .input {
  244.   td {
  245.     background: darken($ui-base-color, 8%);
  246.     border-radius: 4px;
  247.     padding: 16px;
  248.     line-height: 20px;
  249.     mso-line-height-rule: exactly;
  250.     border-radius: 4px;
  251.     text-align: center;
  252.     font-weight: 500;
  253.     font-size: 17px;
  254.   }
  255. }
  257. .content-cell,
  258. .blank-cell {
  259.   width: 100%;
  260.   font-size: 0;
  261.   text-align: center;
  262.   vertical-align: top;
  263.   padding-left: 16px;
  264.   padding-right: 16px;
  265. }
  267. .content-cell {
  268.   background-color: darken($ui-base-color, 4%);
  270.   &.darker {
  271.     background-color: darken($ui-base-color, 8%);
  272.   }
  273. }
  275. .hero {
  276.   background-color: $ui-base-color;
  277.   padding-top: 20px;
  278. }
  280. .hero-with-button {
  281.   h1 {
  282.     margin-bottom: 4px;
  283.   }
  285.   p.lead {
  286.     margin-bottom: 32px;
  287.   }
  289.   padding-bottom: 16px;
  290. }
  292. .header {
  293.   border-radius: 5px 5px 0 0;
  294.   background-color: darken($ui-base-color, 8%);
  296.   .column-cell {
  297.     text-align: center;
  298.     padding-top: 20px;
  299.     padding-bottom: 8px;
  300.   }
  301. }
  303. .content-start {
  304.   padding-top: 32px;
  305. }
  307. .content-end {
  308.   border-radius: 0 0 5px 5px;
  309.   padding-top: 16px;
  310. }
  312. .footer {
  313.   .column-cell,
  314.   p {
  315.     color: lighten($ui-base-color, 34%);
  316.   }
  318.   p {
  319.     margin-bottom: 0;
  320.     font-size: 13px;
  322.     &.small {
  323.       margin-bottom: 0;
  324.     }
  325.   }
  327.   a {
  328.     color: lighten($ui-base-color, 34%);
  329.     text-decoration: underline;
  330.   }
  332.   img {
  333.     opacity: 0.3;
  334.   }
  335. }
  337. .logo {
  338.   position: relative;
  339.   left: -4px;
  340. }
  342. .button {
  343.   display: table;
  344.   margin-left: auto;
  345.   margin-right: auto;
  347.   td {
  348.     line-height: 20px;
  349.     mso-line-height-rule: exactly;
  350.     border-radius: 4px;
  351.     text-align: center;
  352.     font-weight: 500;
  353.     font-size: 17px;
  354.     padding: 0 !important;
  356.     a,
  357.     a span {
  358.       color: $primary-text-color;
  359.       display: block !important;
  360.       text-align: center !important;
  361.       vertical-align: top !important;
  362.       line-height: inherit !important;
  363.     }
  365.     a {
  366.       padding: 10px 22px !important;
  367.       line-height: 26px !important;
  368.       font-weight: 500 !important;
  369.     }
  370.   }
  372.   &.button-small {
  373.     td {
  374.       border-radius: 4px;
  375.       font-size: 14px;
  376.       padding: 8px 16px;
  378.       a {
  379.         padding: 5px 16px !important;
  380.         line-height: 26px !important;
  381.       }
  382.     }
  383.   }
  384. }
  386. .button-default {
  387.   background-color: darken($ui-base-color, 8%);
  388. }
  390. .button-primary {
  391.   background-color: darken($ui-highlight-color, 3%);
  392. }
  394. .text-center {
  395.   text-align: center;
  396. }
  398. .text-right {
  399.   text-align: right;
  400. }
  402. .padded {
  403.   padding-left: 16px;
  404.   padding-right: 16px;
  405. }
  407. .padded-bottom {
  408.   padding-bottom: 32px;
  409. }
  411. .margin-bottom {
  412.   margin-bottom: 20px;
  413. }
  415. .hero-icon {
  416.   width: 64px;
  418.   td {
  419.     text-align: center;
  420.     vertical-align: middle;
  421.     line-height: 100%;
  422.     mso-line-height-rule: exactly;
  423.     padding: 16px;
  424.     border-radius: 80px;
  425.     background: $success-green;
  426.   }
  428.   img {
  429.     max-width: 32px;
  430.     width: 32px;
  431.     height: 32px;
  432.     display: block;
  433.     line-height: 100%;
  434.   }
  435. }
  437. .hr {
  438.   width: 100%;
  440.   td {
  441.     font-size: 0;
  442.     line-height: 1px;
  443.     mso-line-height-rule: exactly;
  444.     min-height: 1px;
  445.     overflow: hidden;
  446.     height: 2px;
  447.     background-color: transparent !important;
  448.     border-top: 1px solid lighten($ui-base-color, 8%);
  449.   }
  450. }
  452. .status {
  453.   padding-bottom: 32px;
  455.   .status-header {
  456.     td {
  457.       font-size: 14px;
  458.       padding-bottom: 15px;
  459.     }
  461.     bdi {
  462.       color: $white;
  463.       font-size: 16px;
  464.       display: block;
  465.       font-weight: 500;
  466.     }
  468.     td:first-child {
  469.       padding-right: 10px;
  470.     }
  472.     img {
  473.       width: 48px;
  474.       height: 48px;
  475.       border-radius: 4px;
  476.     }
  477.   }
  479.   p {
  480.     font-size: 19px;
  481.     margin-bottom: 20px;
  483.     &.status-footer {
  484.       color: lighten($ui-base-color, 26%);
  485.       font-size: 14px;
  486.       margin-bottom: 0;
  488.       a {
  489.         color: lighten($ui-base-color, 26%);
  490.       }
  491.     }
  492.   }
  493. }
  495. .border-top {
  496.   border-top: 1px solid lighten($ui-base-color, 8%);
  497. }
  499. ul {
  500.   padding-left: 15px;
  501.   margin-top: 0;
  502.   margin-bottom: 0;
  503.   padding-top: 16px;
  505.   li {
  506.     margin-bottom: 16px;
  507.     color: lighten($ui-base-color, 26%);
  509.     span {
  510.       color: $ui-primary-color;
  511.     }
  512.   }
  513. }
  515. @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  516.   body {
  517.     min-height: 1024px !important;
  518.   }
  519. }
  521. @media (max-width: 697px) {
  522.   .email-container,
  523.   .col-1,
  524.   .col-2,
  525.   .col-3,
  526.   .col-4,
  527.   .col-5,
  528.   .col-6 {
  529.     width: 100% !important;
  530.     max-width: none !important;
  531.   }
  533.   .email-start {
  534.     padding-top: 16px !important;
  535.   }
  537.   .email-end {
  538.     padding-bottom: 16px !important;
  539.   }
  541.   .padded {
  542.     padding-left: 0 !important;
  543.     padding-right: 0 !important;
  544.   }
  545. }