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';

  2. 

  3. table,

  4. td,

  5. div {

  6.   box-sizing: border-box;

  7. }

  8. 

  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. }

  18. 

  19. .email-body {

  20.   td,

  21.   div,

  22.   a,

  23.   span {

  24.     line-height: inherit;

  25.   }

  26. }

  27. 

  28. a {

  29.   &,

  30.   &:visited,

  31.   span {

  32.     text-decoration: none;

  33.     color: $ui-highlight-color;

  34.   }

  35. 

  36.   #outlook & {

  37.     padding: 0;

  38.   }

  39. }

  40. 

  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. }

  49. 

  50. table {

  51.   border-spacing: 0;

  52.   mso-table-lspace: 0;

  53.   mso-table-rspace: 0;

  54. }

  55. 

  56. td {

  57.   vertical-align: top;

  58. }

  59. 

  60. .email-table,

  61. .content-section,

  62. .column,

  63. .column-cell {

  64.   width: 100%;

  65.   min-width: 100%;

  66. }

  67. 

  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. }

  75. 

  76. .email-start {

  77.   padding-top: 32px;

  78. }

  79. 

  80. .email-end {

  81.   padding-bottom: 32px;

  82. }

  83. 

  84. .email-body,

  85. html,

  86. body {

  87.   background-color: lighten($ui-base-color, 4%);

  88. }

  89. 

  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. }

  106. 

  107. .content-cell {

  108.   width: 100%;

  109.   min-width: 100%;

  110.   min-width: 0 !important;

  111. }

  112. 

  113. .column-cell {

  114.   padding-top: 16px;

  115.   padding-bottom: 16px;

  116.   vertical-align: top;

  117. 

  118.   &.button-cell {

  119.     padding-top: 0;

  120.   }

  121. }

  122. 

  123. .email-container {

  124.   max-width: 632px;

  125.   margin: 0 auto;

  126.   text-align: center;

  127. }

  128. 

  129. .email-row {

  130.   display: block;

  131.   max-width: 600px !important;

  132.   margin: 0 auto;

  133.   text-align: center;

  134.   clear: both;

  135. }

  136. 

  137. .col-0 {

  138.   max-width: 50px;

  139. }

  140. 

  141. .col-1 {

  142.   max-width: 100px;

  143. }

  144. 

  145. .col-2 {

  146.   max-width: 200px;

  147. }

  148. 

  149. .col-3 {

  150.   max-width: 300px;

  151. }

  152. 

  153. .col-4 {

  154.   max-width: 400px;

  155. }

  156. 

  157. .col-5 {

  158.   max-width: 500px;

  159. }

  160. 

  161. .col-6 {

  162.   max-width: 600px;

  163. }

  164. 

  165. .column-cell,

  166. .column-cell td,

  167. p {

  168.   font-family: Helvetica, Arial, sans-serif;

  169. 

  170.   @media only screen {

  171.     font-family: 'mastodon-font-sans-serif', sans-serif !important;

  172.   }

  173. }

  174. 

  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. }

  184. 

  185. p {

  186.   display: block;

  187.   margin-top: 0;

  188.   margin-bottom: 16px;

  189. 

  190.   &.small {

  191.     font-size: 13px;

  192.   }

  193. 

  194.   &.lead {

  195.     font-size: 19px;

  196.     line-height: 27px;

  197.   }

  198. }

  199. 

  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. }

  214. 

  215. h1 {

  216.   font-size: 26px;

  217.   line-height: 36px;

  218. }

  219. 

  220. h2 {

  221.   font-size: 23px;

  222.   line-height: 30px;

  223. }

  224. 

  225. h3 {

  226.   font-size: 19px;

  227.   line-height: 25px;

  228. }

  229. 

  230. h5 {

  231.   font-size: 16px;

  232.   line-height: 21px;

  233.   font-weight: 700;

  234.   color: lighten($ui-base-color, 34%);

  235. }

  236. 

  237. .input-cell {

  238.   h5 {

  239.     margin-top: 4px;

  240.   }

  241. }

  242. 

  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. }

  256. 

  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. }

  266. 

  267. .content-cell {

  268.   background-color: darken($ui-base-color, 4%);

  269. 

  270.   &.darker {

  271.     background-color: darken($ui-base-color, 8%);

  272.   }

  273. }

  274. 

  275. .hero {

  276.   background-color: $ui-base-color;

  277.   padding-top: 20px;

  278. }

  279. 

  280. .hero-with-button {

  281.   h1 {

  282.     margin-bottom: 4px;

  283.   }

  284. 

  285.   p.lead {

  286.     margin-bottom: 32px;

  287.   }

  288. 

  289.   padding-bottom: 16px;

  290. }

  291. 

  292. .header {

  293.   border-radius: 5px 5px 0 0;

  294.   background-color: darken($ui-base-color, 8%);

  295. 

  296.   .column-cell {

  297.     text-align: center;

  298.     padding-top: 20px;

  299.     padding-bottom: 8px;

  300.   }

  301. }

  302. 

  303. .content-start {

  304.   padding-top: 32px;

  305. }

  306. 

  307. .content-end {

  308.   border-radius: 0 0 5px 5px;

  309.   padding-top: 16px;

  310. }

  311. 

  312. .footer {

  313.   .column-cell,

  314.   p {

  315.     color: lighten($ui-base-color, 34%);

  316.   }

  317. 

  318.   p {

  319.     margin-bottom: 0;

  320.     font-size: 13px;

  321. 

  322.     &.small {

  323.       margin-bottom: 0;

  324.     }

  325.   }

  326. 

  327.   a {

  328.     color: lighten($ui-base-color, 34%);

  329.     text-decoration: underline;

  330.   }

  331. 

  332.   img {

  333.     opacity: 0.3;

  334.   }

  335. }

  336. 

  337. .logo {

  338.   position: relative;

  339.   left: -4px;

  340. }

  341. 

  342. .button {

  343.   display: table;

  344.   margin-left: auto;

  345.   margin-right: auto;

  346. 

  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;

  355. 

  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.     }

  364. 

  365.     a {

  366.       padding: 10px 22px !important;

  367.       line-height: 26px !important;

  368.       font-weight: 500 !important;

  369.     }

  370.   }

  371. 

  372.   &.button-small {

  373.     td {

  374.       border-radius: 4px;

  375.       font-size: 14px;

  376.       padding: 8px 16px;

  377. 

  378.       a {

  379.         padding: 5px 16px !important;

  380.         line-height: 26px !important;

  381.       }

  382.     }

  383.   }

  384. }

  385. 

  386. .button-default {

  387.   background-color: darken($ui-base-color, 8%);

  388. }

  389. 

  390. .button-primary {

  391.   background-color: darken($ui-highlight-color, 3%);

  392. }

  393. 

  394. .text-center {

  395.   text-align: center;

  396. }

  397. 

  398. .text-right {

  399.   text-align: right;

  400. }

  401. 

  402. .padded {

  403.   padding-left: 16px;

  404.   padding-right: 16px;

  405. }

  406. 

  407. .padded-bottom {

  408.   padding-bottom: 32px;

  409. }

  410. 

  411. .margin-bottom {

  412.   margin-bottom: 20px;

  413. }

  414. 

  415. .hero-icon {

  416.   width: 64px;

  417. 

  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.   }

  427. 

  428.   img {

  429.     max-width: 32px;

  430.     width: 32px;

  431.     height: 32px;

  432.     display: block;

  433.     line-height: 100%;

  434.   }

  435. }

  436. 

  437. .hr {

  438.   width: 100%;

  439. 

  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. }

  451. 

  452. .status {

  453.   padding-bottom: 32px;

  454. 

  455.   .status-header {

  456.     td {

  457.       font-size: 14px;

  458.       padding-bottom: 15px;

  459.     }

  460. 

  461.     bdi {

  462.       color: $white;

  463.       font-size: 16px;

  464.       display: block;

  465.       font-weight: 500;

  466.     }

  467. 

  468.     td:first-child {

  469.       padding-right: 10px;

  470.     }

  471. 

  472.     img {

  473.       width: 48px;

  474.       height: 48px;

  475.       border-radius: 4px;

  476.     }

  477.   }

  478. 

  479.   p {

  480.     font-size: 19px;

  481.     margin-bottom: 20px;

  482. 

  483.     &.status-footer {

  484.       color: lighten($ui-base-color, 26%);

  485.       font-size: 14px;

  486.       margin-bottom: 0;

  487. 

  488.       a {

  489.         color: lighten($ui-base-color, 26%);

  490.       }

  491.     }

  492.   }

  493. }

  494. 

  495. .border-top {

  496.   border-top: 1px solid lighten($ui-base-color, 8%);

  497. }

  498. 

  499. ul {

  500.   padding-left: 15px;

  501.   margin-top: 0;

  502.   margin-bottom: 0;

  503.   padding-top: 16px;

  504. 

  505.   li {

  506.     margin-bottom: 16px;

  507.     color: lighten($ui-base-color, 26%);

  508. 

  509.     span {

  510.       color: $ui-primary-color;

  511.     }

  512.   }

  513. }

  514. 

  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. }

  520. 

  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.   }

  532. 

  533.   .email-start {

  534.     padding-top: 16px !important;

  535.   }

  536. 

  537.   .email-end {

  538.     padding-bottom: 16px !important;

  539.   }

  540. 

  541.   .padded {

  542.     padding-left: 0 !important;

  543.     padding-right: 0 !important;

  544.   }

  545. }