Added confirmation modals, fixed reply to emails, and added premailer
This commit is contained in:
Godwin
@@ -90,6 +90,7 @@ table {
|
||||
button,
|
||||
.button {
|
||||
@include button;
|
||||
vertical-align: top;
|
||||
|
||||
#main &[type="submit"] {
|
||||
background-color: $colour-5;
|
||||
@@ -111,6 +112,7 @@ button,
|
||||
background-color: $colour-5;
|
||||
}
|
||||
|
||||
&.delete,
|
||||
#main &.delete {
|
||||
background-color: $colour-4;
|
||||
}
|
||||
@@ -1280,6 +1282,97 @@ $header-tilt: 8deg;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
#primary-content {
|
||||
@include _(transition, 'filter 250ms ease-in-out, -webkit-filter 250ms ease-in-out');
|
||||
}
|
||||
|
||||
&.has-overlay {
|
||||
overflow: hidden;
|
||||
|
||||
#primary-content {
|
||||
-webkit-filter: blur(5px);
|
||||
@include _(filter, blur(5px));
|
||||
}
|
||||
|
||||
#overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#content-overlay {
|
||||
display: none;
|
||||
|
||||
body.has-overlay & {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dlg {
|
||||
@include before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba($black, 0);
|
||||
@include _(transition, background-color 250ms ease-in-out);
|
||||
}
|
||||
|
||||
&.open {
|
||||
@include before {
|
||||
background-color: rgba($black, 0.5);
|
||||
}
|
||||
|
||||
.dlg-content {
|
||||
@include _(transform, rotateZ(0deg));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dlg-content {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
max-width: 50rem;
|
||||
margin: auto;
|
||||
z-index: 1001;
|
||||
background-color: $white;
|
||||
text-align: center;
|
||||
@include _(transition, transform 500ms ease-in-out);
|
||||
@include _(transform, rotateX(-90deg));
|
||||
@include _(transform-origin, center 250%);
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 0.5em;
|
||||
background-color: $colour-5;
|
||||
color: $white;
|
||||
@include _(text-stroke, 1px rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
|
||||
.dlg-inner {
|
||||
padding: 0 2em 2em;
|
||||
}
|
||||
|
||||
button, .button {
|
||||
margin: 0 0.25em;
|
||||
}
|
||||
|
||||
.message {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
@include keyframes(fade-out) {
|
||||
to {
|
||||
@include _(opacity, 0.25);
|
||||
@@ -1296,33 +1389,6 @@ html :focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
html[data-input="kb"] {
|
||||
:focus,
|
||||
input[type="submit"]:focus,
|
||||
.check-box-field input:focus + label,
|
||||
.radio-button-field input:focus + label,
|
||||
.select-field select:focus,
|
||||
.workshop-link:focus .title,
|
||||
#main-nav .nav a:focus .title {
|
||||
outline: 0.25rem solid rgba($colour-2, 0.5);
|
||||
outline-offset: 0.2rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#main-nav .logo:focus {
|
||||
outline-offset: -0.2em;
|
||||
}
|
||||
|
||||
/*input:focus,
|
||||
textarea:focus,
|
||||
select:focus,
|
||||
.textarea {*/
|
||||
.workshop-link:focus,
|
||||
#main-nav .nav a:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin header-colour($page, $colour) {
|
||||
body.#{$page} {
|
||||
#header-title {
|
||||
@@ -2259,6 +2325,29 @@ html[data-lingua-franca-example="html"] {
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {
|
||||
html[data-input="kb"] {
|
||||
:focus,
|
||||
input[type="submit"]:focus,
|
||||
.check-box-field input:focus + label,
|
||||
.radio-button-field input:focus + label,
|
||||
.select-field select:focus,
|
||||
.workshop-link:focus .title,
|
||||
#main-nav .nav a:focus .title {
|
||||
outline: 0.25rem solid rgba($colour-2, 0.5);
|
||||
outline-offset: 0.2rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#main-nav .logo:focus {
|
||||
outline-offset: -0.2em;
|
||||
}
|
||||
|
||||
.workshop-link:focus,
|
||||
#main-nav .nav a:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@ body {
|
||||
width: 100% !important;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
margin: 0;
|
||||
margin: 1em;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -69,12 +69,25 @@ a {
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em;
|
||||
color: $black !important;
|
||||
}
|
||||
|
||||
p, blockquote {
|
||||
margin: 1em;
|
||||
font-size: 1.5em;
|
||||
line-height: 1.3333em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
margin-bottom: 2em;
|
||||
color: #666 !important;
|
||||
border: 0.1em solid #CCC;
|
||||
padding: 1em;
|
||||
border-style: none none solid solid;
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: $black !important;
|
||||
|
||||
@@ -117,6 +130,48 @@ table#ecxbb_full_width {
|
||||
}
|
||||
}
|
||||
|
||||
.error-report {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border: 0.15em solid #CCC;
|
||||
background-color: #EEE;
|
||||
font-size: 1.25em;
|
||||
margin-bottom: 2em;
|
||||
|
||||
th {
|
||||
background-color: #CCC;
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 0.25em 0.5em;
|
||||
|
||||
&:last-child {
|
||||
border-left: 0.15em solid #CCC;
|
||||
min-width: 40em;
|
||||
}
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
font-family: monospace;
|
||||
word-break: break-word;
|
||||
background-color: #FFF;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
color: #C33;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 1.5em;
|
||||
padding: 1em;
|
||||
background-color: #333;
|
||||
color: antiquewhite;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.diff, .ecxdiff {
|
||||
margin: 1em 0 5em 1em;
|
||||
overflow: auto;
|
||||
|
||||
Reference in New Issue
Block a user