topaLE
/
nextcloud_blue_dark_themes
mirror of https://github.com/topa-LE/nextcloud_blue_dark_themes.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

added guest.css

master
Torsten Paul 4 years ago
parent
e2002c81ed
commit
3a831cd639
1 changed files with 552 additions and 705 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 437
      tpDEsign/core/css/guest.css

437
tpDEsign/core/css/guest.css
View File

@ -1,14 +1,46 @@
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; cursor:default; } html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {
html { height:100%; } margin : 0;
article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; } padding : 0;
body { line-height:1.5; } border : 0;
table { border-collapse:separate; border-spacing:0; white-space:nowrap; } outline : 0;
caption, th, td { text-align:left; font-weight:normal; } font-weight : inherit;
table, td, th { vertical-align:middle; } font-size : 100%;
a { border:0; color:#0f161d; text-decoration:none;} font-family : inherit;
a, a *, input, input *, select, .button span, label { cursor:pointer; } vertical-align : baseline;
ul { list-style:none; } cursor : default;
}
html {
height : 100%;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section {
display : block;
}
body {
line-height : 1.5;
}
table {
border-collapse : separate;
border-spacing : 0;
white-space : nowrap;
}
caption, th, td {
text-align : left;
font-weight : normal;
}
table, td, th {
vertical-align : middle;
}
a {
border : 0;
color : #0f161d;
text-decoration : none;
}
a, a *, input, input *, select, .button span, label {
cursor : pointer;
}
ul {
list-style : none;
}
body { body {
font-weight : normal; font-weight : normal;
font-size : 18px; font-size : 18px;
@ -17,43 +49,30 @@ body {
color : #0f161d; color : #0f161d;
text-align : center; text-align : center;
background-color : #0f161d; background-color : #0f161d;
background-image: url('../img/bg_login.jpg'); background-image : url("../img/bg_login.jpg");
/* background-position: 50% 50%; */
background-repeat : no-repeat; background-repeat : no-repeat;
background-size : 100%; background-size : 100%;
background-attachment : inherit; background-attachment : inherit;
min-height: 80%; /* fix sticky footer */ min-height : 80%;
height : auto; height : auto;
} }
/* Various fonts settings */
#body-login a { #body-login a {
color : #0f161d !important ; color : #0f161d !important ;
font-weight : 600; font-weight : 600;
} }
#body-login a:not(.button):hover, #body-login a:not(.button):hover, #body-login a:not(.button):focus {
#body-login a:not(.button):focus {
/* text-decoration: underline; */
color : #d66a06; color : #d66a06;
text-decoration-skip-ink: auto;
} }
#showAdvanced { #showAdvanced {
color : #0f161d; color : #0f161d;
} }
em { em {
font-style : normal; font-style : normal;
opacity: .5; opacity : 0.5;
} }
h2, h3, h4 {
/* heading styles */
h2,
h3,
h4 {
font-weight : bold; font-weight : bold;
} }
h2 { h2 {
font-size : 22px; font-size : 22px;
margin-bottom : 12px; margin-bottom : 12px;
@ -63,17 +82,14 @@ h3 {
font-size : 18px; font-size : 18px;
margin : 12px 0; margin : 12px 0;
} }
/* Global content */
body { body {
display : flex; display : flex;
flex-direction : column; flex-direction : column;
justify-content : center; justify-content : center;
align-items : center; align-items : center;
} }
#header .logo { #header .logo {
background-image: url('../img/logo/logo_login.png'); background-image : url("../img/logo/logo_login.png");
background-repeat : no-repeat; background-repeat : no-repeat;
background-size : 256px; background-size : 256px;
background-position : center; background-position : center;
@ -82,22 +98,18 @@ body {
max-height : 200px; max-height : 200px;
margin : 0 auto; margin : 0 auto;
position : relative; position : relative;
left: unset; left : initial;
} }
#header .logo img { #header .logo img {
opacity : 0; opacity : 0;
max-width : 100%; max-width : 100%;
max-height : 200px; max-height : 200px;
} }
.wrapper { .wrapper {
width : 100%; width : 100%;
max-width : 500px; max-width : 500px;
margin-top : 170px !important ; margin-top : 170px !important ;
} }
/* Default FORM */
form { form {
position : relative; position : relative;
margin : auto; margin : auto;
@ -106,9 +118,6 @@ form {
form fieldset { form fieldset {
width : 260px; width : 260px;
margin : auto auto 20px; margin : auto auto 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select : none; user-select : none;
} }
form #sqliteInformation { form #sqliteInformation {
@ -128,26 +137,18 @@ form fieldset legend, #datadirContent label {
form #datadirField legend { form #datadirField legend {
margin-bottom : 15px; margin-bottom : 15px;
} }
/* View more button */
#showAdvanced { #showAdvanced {
padding: 13px; /* increase clickable area of Advanced dropdown */ padding : 13px;
} }
#showAdvanced img { #showAdvanced img {
vertical-align: middle; /* adjust position of Advanced dropdown arrow */ vertical-align : middle;
} }
#submit-wrapper, #reset-password-wrapper, #alternative-logins {
/* Buttons and input */
#submit-wrapper,
#reset-password-wrapper,
#alternative-logins {
display : flex; display : flex;
align-items : center; align-items : center;
justify-content : center; justify-content : center;
position: relative; /* Make the wrapper the containing block of its position : relative;
absolutely positioned descendant icons */
} }
#alternative-logins { #alternative-logins {
margin : auto; margin : auto;
display : block; display : block;
@ -155,7 +156,6 @@ form #datadirField legend {
max-width : 400px; max-width : 400px;
overflow : hidden; overflow : hidden;
} }
#alternative-logins a { #alternative-logins a {
margin : 10px 5px; margin : 10px 5px;
display : block; display : block;
@ -164,7 +164,6 @@ form #datadirField legend {
overflow : hidden; overflow : hidden;
text-overflow : ellipsis; text-overflow : ellipsis;
} }
#alternative-logins a.button::before { #alternative-logins a.button::before {
content : ""; content : "";
background-repeat : no-repeat; background-repeat : no-repeat;
@ -175,12 +174,10 @@ form #datadirField legend {
display : inline-block; display : inline-block;
vertical-align : bottom; vertical-align : bottom;
} }
#alternative-logins .button { #alternative-logins .button {
color : #0082c9; color : #0082c9;
padding : 12px 20px; padding : 12px 20px;
} }
@media only screen and (max-width: 1024px) { @media only screen and (max-width: 1024px) {
.wrapper { .wrapper {
margin-top : 0; margin-top : 0;
@ -189,63 +186,37 @@ form #datadirField legend {
margin : auto; margin : auto;
} }
} }
#submit-wrapper .submit-icon, #reset-password-wrapper .submit-icon {
#submit-wrapper .submit-icon,
#reset-password-wrapper .submit-icon {
position : absolute; position : absolute;
top : 22px; top : 22px;
right : 24px; right : 24px;
transition : right 100ms ease-in-out; transition : right 100ms ease-in-out;
pointer-events: none; /* The submit icon is positioned on the submit button. pointer-events : none;
From the user point of view the icon is part of the
button, so the clicks on the icon have to be
applied to the button instead. */
} }
#submit-wrapper { #submit-wrapper {
margin : 0 auto; margin : 0 auto;
} }
#submit-wrapper input.login:hover ~ .submit-icon.icon-confirm-white, #submit-wrapper input.login:focus ~ .submit-icon.icon-confirm-white, #submit-wrapper input.login:active ~ .submit-icon.icon-confirm-white {
#submit-wrapper input.login:hover ~ .submit-icon.icon-confirm-white,
#submit-wrapper input.login:focus ~ .submit-icon.icon-confirm-white,
#submit-wrapper input.login:active ~ .submit-icon.icon-confirm-white {
right : 20px; right : 20px;
} }
#reset-password-submit { #reset-password-submit {
padding : 10px; padding : 10px;
overflow : hidden; overflow : hidden;
text-overflow : ellipsis; text-overflow : ellipsis;
} }
#submit-wrapper .icon-loading-small { #submit-wrapper .icon-loading-small {
position : absolute; position : absolute;
top : 22px; top : 22px;
right : 26px; right : 26px;
} }
input, input:not([type="range"]), a.button {
input, textarea, select, button, div[contenteditable=true] {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
input,
input:not([type='range']),
a.button {
font-size : 20px; font-size : 20px;
margin : 5px; margin : 5px;
padding : 11px 10px 9px; padding : 11px 10px 9px;
outline : none; outline : none;
border-radius: 3px; /* --border-radius */ border-radius : 3px;
-webkit-appearance: none; }
} input[type="submit"], input[type="submit"].icon-confirm, input[type="button"], button, a.button, .button, select {
input[type='submit'],
input[type='submit'].icon-confirm,
input[type='button'],
button,
a.button,
.button,
select {
display : inline-block; display : inline-block;
width : auto; width : auto;
min-width : 25px; min-width : 25px;
@ -254,25 +225,20 @@ select {
font-weight : bold; font-weight : bold;
color : #555; color : #555;
border : none; border : none;
border-radius: 100px; /* --border-radius-pill */ border-radius : 100px;
cursor : pointer; cursor : pointer;
} }
input[type='text'], input[type="text"], input[type="tel"], input[type="password"], input[type="email"] {
input[type='tel'],
input[type='password'],
input[type='email'] {
width : 249px; width : 249px;
background : #fff; background : #fff;
color : #555; color : #555;
cursor : text; cursor : text;
font-family : inherit; font-family : inherit;
-webkit-appearance: textfield;
-moz-appearance: textfield;
box-sizing : content-box; box-sizing : content-box;
border : none; border : none;
font-weight : normal; font-weight : normal;
} }
input[type='password'].password-with-toggle, input[type='text'].password-with-toggle { input[type="password"].password-with-toggle, input[type="text"].password-with-toggle {
width : 219px; width : 219px;
padding-right : 40px; padding-right : 40px;
} }
@ -286,11 +252,8 @@ input.login {
height : 50px; height : 50px;
background-position : right 16px center; background-position : right 16px center;
} }
input[type='submit'], input[type="submit"], input[type="submit"].icon-confirm, input.updateButton, input.update-continue {
input[type='submit'].icon-confirm, padding : 10px 20px;
input.updateButton,
input.update-continue {
padding: 10px 20px; /* larger log in and installation buttons */
overflow : hidden; overflow : hidden;
text-overflow : ellipsis; text-overflow : ellipsis;
} }
@ -299,39 +262,25 @@ input.update-continue {
padding : 10px 20px; padding : 10px 20px;
color : #666 !important ; color : #666 !important ;
display : inline-block; display : inline-block;
border-radius: 100px; /* --border-radius-pill */ border-radius : 100px;
margin : 15px 5px; margin : 15px 5px;
} }
.updateAnyways a.updateAnywaysButton:hover { .updateAnyways a.updateAnywaysButton:hover {
color : #222 !important ; color : #222 !important ;
} }
button::-moz-focus-inner, input::-moz-focus-inner {
/* Get rid of the inside dotted line in Firefox */
button::-moz-focus-inner,
input::-moz-focus-inner {
border : 0; border : 0;
} }
input.primary, button.primary, a.primary {
input.primary, border : #0f161d solid 1px;
button.primary,
a.primary {
border: 1px solid #0f161d;
background-color : #232e3a; background-color : #232e3a;
color : #f3f3f3; color : #f3f3f3;
transition : color 100ms ease-in-out; transition : color 100ms ease-in-out;
} }
input.primary:not(:disabled):hover, input.primary:not(:disabled):focus, button.primary:not(:disabled):hover, button.primary:not(:disabled):focus, a.primary:not(:disabled):hover, a.primary:not(:disabled):focus {
input.primary:not(:disabled):hover, color : rgb(255, 255, 255, 0.8);
input.primary:not(:disabled):focus, }
button.primary:not(:disabled):hover, input[type="checkbox"].checkbox {
button.primary:not(:disabled):focus,
a.primary:not(:disabled):hover,
a.primary:not(:disabled):focus {
color: rgba(255, 255, 255, .8);
}
/* Checkboxes - white only for login */
input[type='checkbox'].checkbox {
position : absolute; position : absolute;
left : -10000px; left : -10000px;
top : auto; top : auto;
@ -339,51 +288,47 @@ input[type='checkbox'].checkbox {
height : 1px; height : 1px;
overflow : hidden; overflow : hidden;
} }
input[type='checkbox'].checkbox + label { input[type="checkbox"].checkbox + label {
user-select : none; user-select : none;
} }
input[type='checkbox'].checkbox:disabled + label, input[type="checkbox"].checkbox:disabled + label, input[type="checkbox"].checkbox:disabled + label:before {
input[type='checkbox'].checkbox:disabled + label:before {
cursor : default; cursor : default;
} }
input[type='checkbox'].checkbox + label:before { input[type="checkbox"].checkbox + label:before {
content : ''; content : '';
display : inline-block; display : inline-block;
vertical-align : middle; vertical-align : middle;
margin : 3px; margin : 3px;
margin-top : 1px; margin-top : 1px;
border: 1px solid #888; border : #888 solid 1px;
border-radius : 1px; border-radius : 1px;
height : 10px; height : 10px;
width : 10px; width : 10px;
background-position : center; background-position : center;
} }
input[type='checkbox'].checkbox--white + label:before { input[type="checkbox"].checkbox--white + label:before {
border-color : #ddd; border-color : #ddd;
} }
input[type='checkbox'].checkbox--white:not(:disabled):not(:checked) + label:hover:before, input[type="checkbox"].checkbox--white:not(:disabled):not(:checked) + label:hover:before, input[type="checkbox"].checkbox--white:focus + label:before {
input[type='checkbox'].checkbox--white:focus + label:before {
border-color : #fff; border-color : #fff;
} }
input[type='checkbox'].checkbox--white:checked + label:before { input[type="checkbox"].checkbox--white:checked + label:before {
background-color : #eee; background-color : #eee;
border-color : #eee; border-color : #eee;
} }
input[type='checkbox'].checkbox--white:disabled + label:before { input[type="checkbox"].checkbox--white:disabled + label:before {
background-color : #666 !important ; background-color : #666 !important ;
border-color : #999 !important ; border-color : #999 !important ;
} }
input[type='checkbox'].checkbox--white:checked:disabled + label:before { input[type="checkbox"].checkbox--white:checked:disabled + label:before {
border-color : #666; border-color : #666;
background-color : #222; background-color : #222;
} }
input[type='checkbox'].checkbox--white:checked + label:before { input[type="checkbox"].checkbox--white:checked + label:before {
background-color : transparent !important ; background-color : transparent !important ;
border-color : #fff !important ; border-color : #fff !important ;
background-image: url('../img/actions/checkbox-mark-white.svg'); background-image : url("../img/actions/checkbox-mark-white.svg");
} }
/* Password strength meter */
.strengthify-wrapper { .strengthify-wrapper {
display : inline-block; display : inline-block;
position : relative; position : relative;
@ -400,12 +345,10 @@ input[type='checkbox'].checkbox--white:checked + label:before {
padding : 3px 6px; padding : 3px 6px;
text-align : center; text-align : center;
} }
/* Show password toggle */
#show, #dbpassword-toggle { #show, #dbpassword-toggle {
position : absolute; position : absolute;
right : 1em; right : 1em;
top: .8em; top : 0.8em;
float : right; float : right;
} }
#show + label, #dbpassword-toggle + label { #show + label, #dbpassword-toggle + label {
@ -415,27 +358,25 @@ input[type='checkbox'].checkbox--white:checked + label:before {
padding : 14px !important ; padding : 14px !important ;
} }
#show:checked + label, #dbpassword-toggle:checked + label, #personal-show:checked + label { #show:checked + label, #dbpassword-toggle:checked + label, #personal-show:checked + label {
opacity: .8; opacity : 0.8;
} }
#show + label, #dbpassword-toggle + label, #personal-show + label { #show + label, #dbpassword-toggle + label, #personal-show + label {
position : absolute !important ; position : absolute !important ;
height : 20px; height : 20px;
width : 24px; width : 24px;
background-image: url('../img/actions/toggle.svg?v=1'); background-image : url("../img/actions/toggle.svg?v=1");
background-repeat : no-repeat; background-repeat : no-repeat;
background-position : center; background-position : center;
opacity: .3; opacity : 0.3;
} }
#show + label:before, #dbpassword-toggle + label:before, #personal-show + label:before { #show + label:before, #dbpassword-toggle + label:before, #personal-show + label:before {
display : none; display : none;
} }
/* Feedback for keyboard focus and mouse hover */ #show:focus + label, #dbpassword-toggle:focus + label, #personal-show:focus + label, #show + label:hover, #dbpassword-toggle + label:hover, #personal-show + label:hover {
#show:focus + label, #dbpassword-toggle:focus + label, #personal-show:focus + label,
#show + label:hover, #dbpassword-toggle + label:hover, #personal-show + label:hover {
opacity : 1; opacity : 1;
} }
#pass2, input[name='personal-password-clone'] { #pass2, input[name="personal-password-clone"] {
padding: .6em 2.5em .4em .4em; padding : 0.6em 2.5em 0.4em 0.4em;
width : 8em; width : 8em;
} }
#personal-show + label { #personal-show + label {
@ -445,42 +386,30 @@ input[type='checkbox'].checkbox--white:checked + label:before {
display : block; display : block;
} }
#passwordbutton { #passwordbutton {
margin-left: .5em; margin-left : 0.5em;
} }
p.info, form fieldset legend, #datadirContent label, form fieldset .warning-info, form input[type="checkbox"] + label {
/* Dark subtle label text */
p.info,
form fieldset legend,
#datadirContent label,
form fieldset .warning-info,
form input[type='checkbox']+label {
text-align : center; text-align : center;
color : #fff; color : #fff;
} }
/* overrides another !important statement that sets this to unreadable black */ form .warning input[type="checkbox"]:hover + label, form .warning input[type="checkbox"]:focus + label, form .warning input[type="checkbox"] + label {
form .warning input[type='checkbox']:hover+label,
form .warning input[type='checkbox']:focus+label,
form .warning input[type='checkbox']+label {
color : #fff !important ; color : #fff !important ;
} }
.body-login-container.two-factor { .body-login-container.two-factor {
max-width : 290px; max-width : 290px;
margin : 15px auto 0; margin : 15px auto 0;
} }
.two-factor-provider { .two-factor-provider {
display : flex; display : flex;
border-radius: 3px; /* --border-radius */ border-radius : 3px;
margin : 12px 0; margin : 12px 0;
border: 1px solid transparent; border : transparent solid 1px;
text-align : left; text-align : left;
align-items : center; align-items : center;
text-decoration : none !important ; text-decoration : none !important ;
} }
.two-factor-provider:hover, .two-factor-provider:hover, .two-factor-provider:focus, .two-factor-provider:active {
.two-factor-provider:focus, border : #fff solid 1px;
.two-factor-provider:active {
border: 1px solid #fff;
} }
.two-factor-provider img { .two-factor-provider img {
width : 64px; width : 64px;
@ -505,11 +434,10 @@ form .warning input[type='checkbox']+label {
width : 100%; width : 100%;
padding : 10px; padding : 10px;
margin : 0 0 5px 0; margin : 0 0 5px 0;
border-radius: 100px; /* --border-radius-pill */ border-radius : 100px;
font-size : 20px; font-size : 20px;
} }
.two-factor-primary { .two-factor-primary {
/* Fix for 'Use backup codes' button not taking correct styles */
padding : 14px !important ; padding : 14px !important ;
width : 226px; width : 226px;
} }
@ -517,9 +445,6 @@ form .warning input[type='checkbox']+label {
display : inline-block; display : inline-block;
padding : 12px; padding : 12px;
} }
/* Additional login options */
#remember_login { #remember_login {
margin : 18px 5px 0 16px !important ; margin : 18px 5px 0 16px !important ;
} }
@ -529,15 +454,13 @@ form .warning input[type='checkbox']+label {
text-align : center; text-align : center;
width : 100%; width : 100%;
} }
#lost-password, #lost-password, #lost-password-back, #reset-password-wrapper + a {
#lost-password-back,
#reset-password-wrapper + a {
display : inline-block; display : inline-block;
font-weight : normal !important ; font-weight : normal !important ;
padding : 12px; padding : 12px;
color : #fff; color : #fff;
cursor : pointer; cursor : pointer;
text-shadow: 0 0 2px rgba(0, 0, 0, .4); /* better readability on bright background */ text-shadow : 0 0 2px rgb(0, 0, 0, 0.4);
} }
#lost-password { #lost-password {
margin-top : -6px; margin-top : -6px;
@ -547,15 +470,13 @@ form .warning input[type='checkbox']+label {
float : right; float : right;
color : #0f161d; color : #0f161d;
} }
/* Alternative Logins */
#alternative-logins legend { #alternative-logins legend {
margin-bottom : 10px; margin-bottom : 10px;
} }
#alternative-logins li { #alternative-logins li {
height : 40px; height : 40px;
white-space : nowrap; white-space : nowrap;
padding: 05px; padding : 5px;
} }
#alternative-logins li a { #alternative-logins li a {
width : 100%; width : 100%;
@ -564,17 +485,12 @@ form .warning input[type='checkbox']+label {
box-sizing : border-box; box-sizing : border-box;
background-color : #0082c9; background-color : #0082c9;
color : white; color : white;
border-radius: 100px; /* --border-radius-pill */ border-radius : 100px;
} }
/* fixes for update page TODO should be fixed some time in a proper way */
/* this is just for an error while updating the ownCloud instance */
.updateProgress .error { .updateProgress .error {
margin-top : 10px; margin-top : 10px;
margin-bottom : 10px; margin-bottom : 10px;
} }
/* Database selector on install page */
form #selectDbType { form #selectDbType {
text-align : center; text-align : center;
white-space : nowrap; white-space : nowrap;
@ -591,11 +507,10 @@ form #selectDbType label {
background : #f8f8f8; background : #f8f8f8;
color : #888; color : #888;
cursor : pointer; cursor : pointer;
border: 1px solid #ddd; border : #ddd solid 1px;
padding : 10px 17px; padding : 10px 17px;
} }
form #selectDbType label.ui-state-hover, form #selectDbType label.ui-state-hover, form #selectDbType label.ui-state-active {
form #selectDbType label.ui-state-active {
font-weight : normal; font-weight : normal;
color : #000; color : #000;
background-color : #e8e8e8; background-color : #e8e8e8;
@ -606,15 +521,8 @@ form #selectDbType .ui-visual-focus {
form #selectDbType label span { form #selectDbType label span {
display : none; display : none;
} }
.grouptop, .groupmiddle, .groupbottom {
/* Nicely grouping input field sets */
.grouptop,
.groupmiddle,
.groupbottom {
position : relative; position : relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select : none; user-select : none;
} }
.grouptop input { .grouptop input {
@ -629,73 +537,52 @@ form #selectDbType label span {
border-top : 0 !important ; border-top : 0 !important ;
border-bottom : 0 !important ; border-bottom : 0 !important ;
border-radius : 0 !important ; border-radius : 0 !important ;
box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important; box-shadow : 0 1px 0 rgb(0, 0, 0, 0.1) inset !important ;
} }
.groupbottom input { .groupbottom input {
margin-top : 0 !important ; margin-top : 0 !important ;
border-top : 0 !important ; border-top : 0 !important ;
border-top-right-radius : 0 !important ; border-top-right-radius : 0 !important ;
border-top-left-radius : 0 !important ; border-top-left-radius : 0 !important ;
box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important; box-shadow : 0 1px 0 rgb(0, 0, 0, 0.1) inset !important ;
} }
.groupbottom input[type=submit] { .groupbottom input[type="submit"] {
box-shadow : none !important ; box-shadow : none !important ;
} }
#install-recommended-apps + label span { #install-recommended-apps + label span {
display : inline-block; display : inline-block;
opacity: .7; opacity : 0.7;
} }
.body-login-container, .warning, .update, .error {
/* Errors */
/* Warnings and errors are the same */
.body-login-container,
.warning,
.update,
.error {
display : block; display : block;
margin-top : 15px; margin-top : 15px;
padding : 15px; padding : 15px;
background-color: rgba(0,0,0,.3); background-color : rgb(0, 0, 0, 0.3);
color : #fff; color : #fff;
text-align : left; text-align : left;
word-wrap: break-word; overflow-wrap : break-word;
border-radius: 10px; /* --border-radius-large */ border-radius : 10px;
cursor : default; cursor : default;
-moz-user-select: text;
-webkit-user-select: text;
-ms-user-select: text;
user-select : text; user-select : text;
} }
.body-login-container h2, .warning h2, .update h2, .error h2 {
.body-login-container h2,
.warning h2,
.update h2,
.error h2 {
color : #fff; color : #fff;
text-align : center; text-align : center;
} }
/* TODO: Change all .warning/.update/.error to .body-login-container */
.body-login-container .icon-big { .body-login-container .icon-big {
background-size : 70px; background-size : 70px;
height : 70px; height : 70px;
} }
.body-login-container form { .body-login-container form {
width : initial; width : initial;
} }
.body-login-container p:not(:last-child) { .body-login-container p:not(:last-child) {
margin-bottom : 12px; margin-bottom : 12px;
} }
.warning.updateAnyways { .warning.updateAnyways {
text-align : center; text-align : center;
} }
.warning legend, .warning legend, .warning a, .error a {
.warning a,
.error a {
color : #fff !important ; color : #fff !important ;
font-weight : bold !important ; font-weight : bold !important ;
opacity : 1; opacity : 1;
@ -722,17 +609,13 @@ form #selectDbType label span {
a.warning { a.warning {
cursor : pointer; cursor : pointer;
} }
fieldset.warning legend, fieldset.warning legend, fieldset.update legend {
fieldset.update legend {
top : 18px; top : 18px;
position : relative; position : relative;
} }
fieldset.warning legend + p, fieldset.warning legend + p, fieldset.update legend + p {
fieldset.update legend + p {
margin-top : 12px; margin-top : 12px;
} }
/* Various paragraph styles */
.infogroup { .infogroup {
margin : 8px 0; margin : 8px 0;
} }
@ -741,17 +624,11 @@ fieldset.update legend + p {
} }
p.info { p.info {
margin : 35px auto; margin : 35px auto;
/* margin-right: 794px; */ text-shadow : 0 0 2px rgb(0, 0, 0, 0.4);
text-shadow: 0 0 2px rgba(0, 0, 0, .4); /* better readability on bright background */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select : none; user-select : none;
font-size : 20px; font-size : 20px;
color : #0f161d; color : #0f161d;
} }
/* Update */
.update { .update {
width : inherit; width : inherit;
text-align : center; text-align : center;
@ -775,7 +652,7 @@ p.info {
.update-show-detailed { .update-show-detailed {
padding : 12px; padding : 12px;
display : block; display : block;
opacity: .75; opacity : 0.75;
} }
.update-show-detailed .icon-caret-white { .update-show-detailed .icon-caret-white {
display : inline-block; display : inline-block;
@ -786,37 +663,31 @@ p.info {
margin : 10px; margin : 10px;
background-size : 32px; background-size : 32px;
} }
/* Icons */
.icon-info-white { .icon-info-white {
background-image: url('../img/actions/info-white.svg?v=2'); background-image : url("../img/actions/info-white.svg?v=2");
} }
.icon-error-white { .icon-error-white {
background-image: url('../img/actions/error-white.svg?v=1'); background-image : url("../img/actions/error-white.svg?v=1");
} }
.icon-caret-white { .icon-caret-white {
background-image: url('../img/actions/caret-white.svg?v=1'); background-image : url("../img/actions/caret-white.svg?v=1");
} }
.icon-confirm { .icon-confirm {
background-image: url('../img/actions/confirm.svg?v=2'); background-image : url("../img/actions/confirm.svg?v=2");
} }
.icon-confirm-white { .icon-confirm-white {
background-image: url('../img/actions/confirm-white.svg?v=2'); background-image : url("../img/actions/confirm-white.svg?v=2");
} }
.icon-checkmark-white { .icon-checkmark-white {
background-image: url('../img/actions/checkmark-white.svg?v=1'); background-image : url("../img/actions/checkmark-white.svg?v=1");
} }
/* Loading */
.float-spinner { .float-spinner {
margin-top : -32px; margin-top : -32px;
padding-top : 32px; padding-top : 32px;
height : 32px; height : 32px;
display : none; display : none;
} }
[class^='icon-'], [class*=' icon-'] { [class^="icon-"], [class*=" icon-"] {
background-repeat : no-repeat; background-repeat : no-repeat;
background-position : center; background-position : center;
min-width : 16px; min-width : 16px;
@ -835,18 +706,15 @@ p.info {
top : 50%; top : 50%;
left : 50%; left : 50%;
border-radius : 100%; border-radius : 100%;
-webkit-animation: rotate .8s infinite linear; animation : rotate 0.8s linear infinite;
animation: rotate .8s infinite linear;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin : center; transform-origin : center;
} }
.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after { .loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after {
border: 2px solid rgba(150, 150, 150, 0.5); border : rgb(150, 150, 150, 0.5) solid 2px;
border-top-color : #646464; border-top-color : #646464;
} }
.icon-loading-dark:after, .icon-loading-small-dark:after { .icon-loading-dark:after, .icon-loading-small-dark:after {
border: 2px solid rgba(187, 187, 187, 0.5); border : rgb(187, 187, 187, 0.5) solid 2px;
border-top-color : #bbb; border-top-color : #bbb;
} }
.icon-loading-small:after, .icon-loading-small-dark:after { .icon-loading-small:after, .icon-loading-small-dark:after {
@ -854,57 +722,37 @@ p.info {
width : 16px; width : 16px;
margin : -9px 0 0 -9px; margin : -9px 0 0 -9px;
} }
/* Css replaced elements don't have ::after nor ::before */ img.icon-loading, object.icon-loading, video.icon-loading, button.icon-loading, textarea.icon-loading, input.icon-loading, select.icon-loading, div[contenteditable="true"].icon-loading {
img.icon-loading, object.icon-loading, video.icon-loading, button.icon-loading, textarea.icon-loading, input.icon-loading, select.icon-loading, div[contenteditable=true].icon-loading { background-image : url("../img/loading.gif");
background-image: url('../img/loading.gif');
}
img.icon-loading-dark, object.icon-loading-dark, video.icon-loading-dark, button.icon-loading-dark, textarea.icon-loading-dark, input.icon-loading-dark, select.icon-loading-dark, div[contenteditable=true].icon-loading-dark {
background-image: url('../img/loading-dark.gif');
}
img.icon-loading-small, object.icon-loading-small, video.icon-loading-small, button.icon-loading-small, textarea.icon-loading-small, input.icon-loading-small, select.icon-loading-small, div[contenteditable=true].icon-loading-small {
background-image: url('../img/loading-small.gif');
} }
img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-small-dark, button.icon-loading-small-dark, textarea.icon-loading-small-dark, input.icon-loading-small-dark, select.icon-loading-small-dark, div[contenteditable=true].icon-loading-small-dark { img.icon-loading-dark, object.icon-loading-dark, video.icon-loading-dark, button.icon-loading-dark, textarea.icon-loading-dark, input.icon-loading-dark, select.icon-loading-dark, div[contenteditable="true"].icon-loading-dark {
background-image: url('../img/loading-small-dark.gif'); background-image : url("../img/loading-dark.gif");
} }
@-webkit-keyframes rotate { img.icon-loading-small, object.icon-loading-small, video.icon-loading-small, button.icon-loading-small, textarea.icon-loading-small, input.icon-loading-small, select.icon-loading-small, div[contenteditable="true"].icon-loading-small {
from { background-image : url("../img/loading-small.gif");
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
} }
img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-small-dark, button.icon-loading-small-dark, textarea.icon-loading-small-dark, input.icon-loading-small-dark, select.icon-loading-small-dark, div[contenteditable="true"].icon-loading-small-dark {
background-image : url("../img/loading-small-dark.gif");
} }
@keyframes rotate { @keyframes rotate {
from { from {
-webkit-transform: rotate(0deg);
transform : rotate(0deg); transform : rotate(0deg);
} }
to { to {
-webkit-transform: rotate(360deg);
transform : rotate(360deg); transform : rotate(360deg);
} }
} }
/* FOOTER */
footer { footer {
height : 70px; height : 70px;
margin-top : auto; margin-top : auto;
} }
footer .info .entity-name { footer .info .entity-name {
font-weight : bold; font-weight : bold;
} }
.hidden { .hidden {
display : none; display : none;
} }
label.infield, .hidden-visually {
/* keep the labels for screen readers but hide them since we use placeholders */
label.infield,
.hidden-visually {
position : absolute; position : absolute;
left : -10000px; left : -10000px;
top : auto; top : auto;
@ -912,7 +760,6 @@ label.infield,
height : 1px; height : 1px;
overflow : hidden; overflow : hidden;
} }
a.legal { a.legal {
font-size : smaller; font-size : smaller;
} }

Write Preview
Loading…
Cancel
Save