diff --git a/allauth_ens/scss/_base.scss b/allauth_ens/scss/_base.scss index 62e26c4..fd4a340 100644 --- a/allauth_ens/scss/_base.scss +++ b/allauth_ens/scss/_base.scss @@ -57,7 +57,7 @@ $main-max-width: 500px; .content-wrapper { display: flex; - flex-flow: row nowrap; + flex-flow: row wrap; align-items: center; /* Blocks */ @@ -68,13 +68,17 @@ $main-max-width: 500px; } @media (min-width: 500px) { + & { + flex-flow: row nowrap; + } + & > section { flex: 1 1 auto; min-width: 250px; } } - @media (min-width: 120px) { + @media (min-width: 1200px) { & > section { flex: 1 1 auto; min-width: 350px; @@ -216,7 +220,6 @@ section { .method-list { display: flex; flex-flow: row wrap; - justify-content: space-between; & > .method-wrapper { flex: 1 100%; diff --git a/allauth_ens/static/allauth_ens/screen.css b/allauth_ens/static/allauth_ens/screen.css index 4bfa440..648dd92 100644 --- a/allauth_ens/static/allauth_ens/screen.css +++ b/allauth_ens/static/allauth_ens/screen.css @@ -160,7 +160,7 @@ b { /* line 58, ../../scss/_base.scss */ .content-wrapper { display: flex; - flex-flow: row nowrap; + flex-flow: row wrap; align-items: center; /* Blocks */ } @@ -171,20 +171,24 @@ b { } @media (min-width: 500px) { /* line 71, ../../scss/_base.scss */ + .content-wrapper { + flex-flow: row nowrap; + } + /* line 75, ../../scss/_base.scss */ .content-wrapper > section { flex: 1 1 auto; min-width: 250px; } } -@media (min-width: 120px) { - /* line 78, ../../scss/_base.scss */ +@media (min-width: 1200px) { + /* line 82, ../../scss/_base.scss */ .content-wrapper > section { flex: 1 1 auto; min-width: 350px; } } -/* line 86, ../../scss/_base.scss */ +/* line 90, ../../scss/_base.scss */ #providers { width: 150px; min-width: unset; @@ -194,7 +198,7 @@ b { /********** * Header * **********/ -/* line 100, ../../scss/_base.scss */ +/* line 104, ../../scss/_base.scss */ header { display: flex; align-items: stretch; @@ -210,7 +214,7 @@ header::after { content: ""; clear: both; } -/* line 114, ../../scss/_base.scss */ +/* line 118, ../../scss/_base.scss */ header a { color: #fff !important; } @@ -219,7 +223,7 @@ header a:focus, header a:hover { background: #d43f3a; text-decoration: none; } -/* line 123, ../../scss/_base.scss */ +/* line 127, ../../scss/_base.scss */ header .right { display: flex; flex-flow: column; @@ -230,25 +234,25 @@ header .right { font-size: 14px; text-align: center; } -/* line 136, ../../scss/_base.scss */ +/* line 140, ../../scss/_base.scss */ header .right > * { flex: 0 0 auto; } -/* line 139, ../../scss/_base.scss */ +/* line 143, ../../scss/_base.scss */ header .right > * > * { display: block; padding: 5px 10px; } -/* line 145, ../../scss/_base.scss */ +/* line 149, ../../scss/_base.scss */ header .right #connect-status { font-weight: normal; font-size: 12px; } -/* line 149, ../../scss/_base.scss */ +/* line 153, ../../scss/_base.scss */ header .right #connect-status .fa { margin-right: 5px; } -/* line 155, ../../scss/_base.scss */ +/* line 159, ../../scss/_base.scss */ header h1 { flex: 1 1 auto; padding: 15px 25px; @@ -257,11 +261,11 @@ header h1 { /************ * Messages * ************/ -/* line 168, ../../scss/_base.scss */ +/* line 172, ../../scss/_base.scss */ .messages-container { padding: 0 15px; } -/* line 171, ../../scss/_base.scss */ +/* line 175, ../../scss/_base.scss */ .messages-container::after { display: block; content: ""; @@ -269,30 +273,30 @@ header h1 { height: 2px; } -/* line 179, ../../scss/_base.scss */ +/* line 183, ../../scss/_base.scss */ .messages-list { padding: 10px 0; } -/* line 189, ../../scss/_base.scss */ +/* line 193, ../../scss/_base.scss */ .message { padding: 5px; font-size: 14px; color: #292b2c; } -/* line 184, ../../scss/_base.scss */ +/* line 188, ../../scss/_base.scss */ .message.info { color: #28a1c5; } -/* line 184, ../../scss/_base.scss */ +/* line 188, ../../scss/_base.scss */ .message.success { color: #2d672d; } -/* line 184, ../../scss/_base.scss */ +/* line 188, ../../scss/_base.scss */ .message.warning { color: #b06d0f; } -/* line 184, ../../scss/_base.scss */ +/* line 188, ../../scss/_base.scss */ .message.error { color: #b52b27; } @@ -300,24 +304,23 @@ header h1 { /*********** * Content * ***********/ -/* line 208, ../../scss/_base.scss */ +/* line 212, ../../scss/_base.scss */ section > * + * { margin-top: 15px; } /* Methods list */ -/* line 216, ../../scss/_base.scss */ +/* line 220, ../../scss/_base.scss */ .method-list { display: flex; flex-flow: row wrap; - justify-content: space-between; } -/* line 221, ../../scss/_base.scss */ +/* line 224, ../../scss/_base.scss */ .method-list > .method-wrapper { flex: 1 100%; padding: 2px 0; } -/* line 225, ../../scss/_base.scss */ +/* line 228, ../../scss/_base.scss */ .method-list > .method-wrapper a { transition: background 0.15s, color 0.15s, border-color 0.15s; display: block; @@ -347,11 +350,11 @@ section > * + * { } /* Connected accounts list */ -/* line 249, ../../scss/_base.scss */ +/* line 252, ../../scss/_base.scss */ .connections-providers-list > * + * { margin-top: 2px; } -/* line 253, ../../scss/_base.scss */ +/* line 256, ../../scss/_base.scss */ .connections-providers-list > * > .heading { width: 100%; padding: 10px; @@ -364,7 +367,7 @@ section > * + * { content: ""; clear: both; } -/* line 262, ../../scss/_base.scss */ +/* line 265, ../../scss/_base.scss */ .connections-providers-list > * > .heading .connect { transition: background 0.15s, color 0.15s, border-color 0.15s; display: block; @@ -395,29 +398,29 @@ section > * + * { color: #fff; } -/* line 274, ../../scss/_base.scss */ +/* line 277, ../../scss/_base.scss */ .connections-list { border-left: 5px solid #f7f7f9; } -/* line 277, ../../scss/_base.scss */ +/* line 280, ../../scss/_base.scss */ .connections-list > * { padding: 10px; font-size: 14px; } -/* line 281, ../../scss/_base.scss */ +/* line 284, ../../scss/_base.scss */ .connections-list > * + * { border-top: 1px dotted #eceeef; } -/* line 285, ../../scss/_base.scss */ +/* line 288, ../../scss/_base.scss */ .connections-list > * > .fa { margin-right: 5px; } -/* line 289, ../../scss/_base.scss */ +/* line 292, ../../scss/_base.scss */ .connections-list > * .delete { float: right; margin-top: -2px; } -/* line 293, ../../scss/_base.scss */ +/* line 296, ../../scss/_base.scss */ .connections-list > * .delete [type=submit] { transition: background 0.15s, color 0.15s, border-color 0.15s; display: block; @@ -446,17 +449,17 @@ section > * + * { background: #b52b27; color: #fff; } -/* line 302, ../../scss/_base.scss */ +/* line 305, ../../scss/_base.scss */ .connections-list form { display: inline-block; } /* E-mail adresses list */ -/* line 311, ../../scss/_base.scss */ +/* line 314, ../../scss/_base.scss */ .emailaddress-list .emailaddress { border-bottom: 1px dotted #464a4c; } -/* line 315, ../../scss/_base.scss */ +/* line 318, ../../scss/_base.scss */ .emailaddress-list .emailaddress .summary { height: 45px; } @@ -466,13 +469,13 @@ section > * + * { content: ""; clear: both; } -/* line 320, ../../scss/_base.scss */ +/* line 323, ../../scss/_base.scss */ .emailaddress-list .emailaddress .summary > * { float: left; height: 100%; padding: 12px; } -/* line 326, ../../scss/_base.scss */ +/* line 329, ../../scss/_base.scss */ .emailaddress-list .emailaddress .summary > .primary, .emailaddress-list .emailaddress .summary > .verified-status { float: right; width: 45px; @@ -480,25 +483,25 @@ section > * + * { text-align: center; font-size: 20px; } -/* line 334, ../../scss/_base.scss */ +/* line 337, ../../scss/_base.scss */ .emailaddress-list .emailaddress .summary > .email { padding: 12px; font-weight: bold; } -/* line 339, ../../scss/_base.scss */ +/* line 342, ../../scss/_base.scss */ .emailaddress-list .emailaddress .summary > .primary { color: #025aa5; } -/* line 343, ../../scss/_base.scss */ +/* line 346, ../../scss/_base.scss */ .emailaddress-list .emailaddress .summary > .verified { color: #449d44; } -/* line 347, ../../scss/_base.scss */ +/* line 350, ../../scss/_base.scss */ .emailaddress-list .emailaddress .summary > .unverified { color: #ec971f; } -/* line 356, ../../scss/_base.scss */ +/* line 359, ../../scss/_base.scss */ .actions { margin-bottom: 10px; } @@ -508,7 +511,7 @@ section > * + * { content: ""; clear: both; } -/* line 361, ../../scss/_base.scss */ +/* line 364, ../../scss/_base.scss */ .actions > * { float: right; margin-right: 10px; @@ -518,7 +521,7 @@ section > * + * { /********* * Forms * *********/ -/* line 393, ../../scss/_base.scss */ +/* line 396, ../../scss/_base.scss */ .input-wrapper { position: relative; display: block; @@ -531,13 +534,13 @@ section > * + * { content: ""; clear: both; } -/* line 401, ../../scss/_base.scss */ +/* line 404, ../../scss/_base.scss */ .input-wrapper label { margin-right: 10px; color: rgba(0, 0, 0, 0.38); font-size: 16px; } -/* line 408, ../../scss/_base.scss */ +/* line 411, ../../scss/_base.scss */ .input-wrapper .transform-label label { padding-left: 0; width: 100%; @@ -558,7 +561,7 @@ section > * + * { text-overflow: ellipsis; white-space: nowrap; } -/* line 430, ../../scss/_base.scss */ +/* line 433, ../../scss/_base.scss */ .input-wrapper input.field:not([type=checkbox]) { height: 30px; width: 100%; @@ -568,80 +571,80 @@ section > * + * { border-bottom: 1px solid rgba(0, 0, 0, 0.12); font-size: 16px; } -/* line 444, ../../scss/_base.scss */ +/* line 447, ../../scss/_base.scss */ .input-wrapper input[type="checkbox"] { vertical-align: sub; width: 20px; height: 20px; } -/* line 450, ../../scss/_base.scss */ +/* line 453, ../../scss/_base.scss */ .input-wrapper select { height: 30px; background: #fff; } -/* line 468, ../../scss/_base.scss */ +/* line 471, ../../scss/_base.scss */ .input-wrapper.input-focused label, .input-wrapper.input-focused .messages { color: inherit; } -/* line 474, ../../scss/_base.scss */ +/* line 477, ../../scss/_base.scss */ .input-wrapper.input-focused .transform-label label, .input-wrapper.input-has-value .transform-label label { transform: translate3d(0, 6.5px, 0) scale(0.75); } -/* line 456, ../../scss/_base.scss */ +/* line 459, ../../scss/_base.scss */ .input-wrapper.input-has-value { color: #449d44; } -/* line 460, ../../scss/_base.scss */ +/* line 463, ../../scss/_base.scss */ .input-wrapper.input-has-value input.field { padding-bottom: 0px; border-width: 2px; border-color: #449d44; } -/* line 456, ../../scss/_base.scss */ +/* line 459, ../../scss/_base.scss */ .input-wrapper.input-error { color: #d9534f; } -/* line 460, ../../scss/_base.scss */ +/* line 463, ../../scss/_base.scss */ .input-wrapper.input-error input.field { padding-bottom: 0px; border-width: 2px; border-color: #d9534f; } -/* line 456, ../../scss/_base.scss */ +/* line 459, ../../scss/_base.scss */ .input-wrapper.input-focused { color: #025aa5; } -/* line 460, ../../scss/_base.scss */ +/* line 463, ../../scss/_base.scss */ .input-wrapper.input-focused input.field { padding-bottom: 0px; border-width: 2px; border-color: #025aa5; } -/* line 483, ../../scss/_base.scss */ +/* line 486, ../../scss/_base.scss */ .input-wrapper .messages-spacer { float: right; min-height: 10px; min-width: 1px; } -/* line 489, ../../scss/_base.scss */ +/* line 492, ../../scss/_base.scss */ .input-wrapper .messages { color: rgba(0, 0, 0, 0.38); } -/* line 492, ../../scss/_base.scss */ +/* line 495, ../../scss/_base.scss */ .input-wrapper .messages > * { padding-top: 5px; font-size: 12px; } -/* line 499, ../../scss/_base.scss */ +/* line 502, ../../scss/_base.scss */ .input-wrapper.input-checkbox > :first-child, .input-wrapper.input-radio > :first-child { display: block; } -/* line 505, ../../scss/_base.scss */ +/* line 508, ../../scss/_base.scss */ .buttons-choices { display: inline-flex; } -/* line 508, ../../scss/_base.scss */ +/* line 511, ../../scss/_base.scss */ .buttons-choices > button { transition: background 0.15s, color 0.15s, border-color 0.15s; flex: 0 1 auto; @@ -650,28 +653,28 @@ section > * + * { background: #daeeff; color: #636c72; } -/* line 517, ../../scss/_base.scss */ +/* line 520, ../../scss/_base.scss */ .buttons-choices > button:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; } -/* line 522, ../../scss/_base.scss */ +/* line 525, ../../scss/_base.scss */ .buttons-choices > button:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } -/* line 527, ../../scss/_base.scss */ +/* line 530, ../../scss/_base.scss */ .buttons-choices > button:focus { background: #43a7fd; color: white; } -/* line 532, ../../scss/_base.scss */ +/* line 535, ../../scss/_base.scss */ .buttons-choices > button.selected { background: #025aa5; color: white; } -/* line 538, ../../scss/_base.scss */ +/* line 541, ../../scss/_base.scss */ [type=submit]:not(.link) { transition: background 0.15s, color 0.15s, border-color 0.15s; display: block; @@ -698,7 +701,7 @@ section > * + * { color: #fff; } -/* line 544, ../../scss/_base.scss */ +/* line 547, ../../scss/_base.scss */ [type=submit].link { transition: background 0.15s, color 0.15s, border-color 0.15s; color: #025aa5; @@ -715,23 +718,23 @@ section > * + * { cursor: pointer; } -/* line 553, ../../scss/_base.scss */ +/* line 556, ../../scss/_base.scss */ .form-inline { display: flex; align-items: center; } -/* line 557, ../../scss/_base.scss */ +/* line 560, ../../scss/_base.scss */ .form-inline > .input-wrapper { flex: 1 0 auto; } -/* line 561, ../../scss/_base.scss */ +/* line 564, ../../scss/_base.scss */ .form-inline [type=submit] { margin-top: -5px; margin-left: 8px; font-size: 14px; } -/* line 568, ../../scss/_base.scss */ +/* line 571, ../../scss/_base.scss */ .btn { transition: background 0.15s, color 0.15s, border-color 0.15s; display: block; @@ -751,7 +754,7 @@ section > * + * { cursor: pointer; } -/* line 573, ../../scss/_base.scss */ +/* line 576, ../../scss/_base.scss */ .btn-primary { background: #025aa5; color: #fff; @@ -762,7 +765,7 @@ section > * + * { color: #fff; } -/* line 574, ../../scss/_base.scss */ +/* line 577, ../../scss/_base.scss */ .btn-success { background: #449d44; color: #fff; diff --git a/allauth_ens/templates/account/login.html b/allauth_ens/templates/account/login.html index 9c35064..99c4ab8 100644 --- a/allauth_ens/templates/account/login.html +++ b/allauth_ens/templates/account/login.html @@ -39,9 +39,10 @@ - {% include "socialaccount/snippets/login_extra.html" %} +{% include "socialaccount/snippets/login_extra.html" %} +
{% endif %}