libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 Packages Activity Actions

Remove support for IE (#11271)

Browse source 
Closes #11268
This commit is contained in:
Martin Bartoš 2022-04-22 10:38:41 +02:00 committed by GitHub
parent 435a78364f
commit 53ea60b8d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 19 additions and 467 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
testsuite/integration-arquillian/HOW-TO-RUN.md
View file

@ -454,7 +454,7 @@ For the available versions, take a look at the directory [tests/other/server-con
## Admin Console UI tests ## Admin Console UI tests
The UI tests are real-life, UI focused integration tests. Hence they do not support the default HtmlUnit browser. Only the following real-life browsers are supported: Mozilla Firefox, Google Chrome and Internet Explorer. For details on how to run the tests with these browsers, please refer to [Different Browsers](#different-browsers) chapter. The UI tests are real-life, UI focused integration tests. Hence they do not support the default HtmlUnit browser. Only the following real-life browsers are supported: Mozilla Firefox and Google Chrome. For details on how to run the tests with these browsers, please refer to [Different Browsers](#different-browsers) chapter.
The UI tests are focused on the Admin Console. They are placed in the `console` module and are disabled by default. The UI tests are focused on the Admin Console. They are placed in the `console` module and are disabled by default.
@ -598,13 +598,6 @@ Although technically they can be run with almost every test in the testsuite, th
* **Driver download required:** [ChromeDriver](https://sites.google.com/a/chromium.org/chromedriver/) that corresponds with your version of the browser * **Driver download required:** [ChromeDriver](https://sites.google.com/a/chromium.org/chromedriver/) that corresponds with your version of the browser
* **Run with:** `-Dbrowser=chrome -Dwebdriver.chrome.driver=path/to/chromedriver` * **Run with:** `-Dbrowser=chrome -Dwebdriver.chrome.driver=path/to/chromedriver`
#### Internet Explorer
* **Supported test modules:** `console`, `base-ui`
* **Supported version:** 11
* **Driver download required:** [Internet Explorer Driver Server](http://www.seleniumhq.org/download/); recommended version [3.5.1 32-bit](http://selenium-release.storage.googleapis.com/3.5/IEDriverServer_Win32_3.5.1.zip)
* **Run with:** `-Dbrowser=internetExplorer -Dwebdriver.ie.driver=path/to/IEDriverServer.exe -Dauth.server.ssl.required=false`
Note: We currently do not support SSL in IE.
#### Apple Safari #### Apple Safari
* **Supported test modules:** `base-ui` * **Supported test modules:** `base-ui`
* **Supported version:** latest stable * **Supported version:** latest stable
@ -619,7 +612,7 @@ Note: We currently do not support SSL in IE.
#### Automatic driver downloads #### Automatic driver downloads
You can rely on automatic driver downloads which is provided by [Arquillian Drone](http://arquillian.org/arquillian-extension-drone/#_automatic_download). To do so just omit the `-Dwebdriver.{browser}.driver` CLI argument when running the tests. You can rely on automatic driver downloads which is provided by [Arquillian Drone](http://arquillian.org/arquillian-extension-drone/#_automatic_download). To do so just omit the `-Dwebdriver.{browser}.driver` CLI argument when running the tests.
By default latest driver version is always downloaded. To download a specific version, add `-DfirefoxDriverVersion`, `-DchromeDriverVersion` or `-DieDriverVersion` CLI argument. By default latest driver version is always downloaded. To download a specific version, add `-DfirefoxDriverVersion` or `-DchromeDriverVersion` CLI argument.
#### Mobile browsers #### Mobile browsers
The support for testing with the mobile browsers is implemented using the [Appium](http://appium.io/) project. The support for testing with the mobile browsers is implemented using the [Appium](http://appium.io/) project.

8
testsuite/integration-arquillian/tests/base/src/main/java/org/keycloak/testsuite/console/page/fragment/LocaleDropdown.java
View file

@ -8,7 +8,6 @@ import org.jboss.logging.Logger;
import org.openqa.selenium.By; import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement; import org.openqa.selenium.WebElement;
import org.openqa.selenium.ie.InternetExplorerDriver;
import org.openqa.selenium.interactions.Actions; import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.support.FindBy; import org.openqa.selenium.support.FindBy;
@ -43,12 +42,9 @@ public class LocaleDropdown {
// open the menu // open the menu
if (driver instanceof IOSDriver) { // TODO: Fix this! It's a very, very, ... very nasty hack for Safari on iOS - see KEYCLOAK-7947 if (driver instanceof IOSDriver) { // TODO: Fix this! It's a very, very, ... very nasty hack for Safari on iOS - see KEYCLOAK-7947
((IOSDriver) driver).executeScript("arguments[0].setAttribute('style', 'display: block')", dropDownMenu); ((IOSDriver) driver).executeScript("arguments[0].setAttribute('style', 'display: block')", dropDownMenu);
} } else if (driver instanceof AndroidDriver) { // Android needs to tap (no cursor)
else if (driver instanceof AndroidDriver || driver instanceof InternetExplorerDriver) { // Android needs to tap (no cursor)
// and IE has some bug so needs to click as well (instead of moving cursor)
currentLocaleLink.click(); currentLocaleLink.click();
} } else {
else {
Actions actions = new Actions(driver); Actions actions = new Actions(driver);
log.info("Moving mouse cursor to the localization menu"); log.info("Moving mouse cursor to the localization menu");
actions.moveToElement(currentLocaleLink, -10, 0) actions.moveToElement(currentLocaleLink, -10, 0)

3
testsuite/integration-arquillian/tests/base/src/main/java/org/keycloak/testsuite/drone/KeycloakWebDriverConfigurator.java
View file

@ -61,9 +61,6 @@ public class KeycloakWebDriverConfigurator {
} }
private void acceptAllSSLCerts(WebDriverConfiguration webDriverCfg, DesiredCapabilities capabilitiesToAdd) { private void acceptAllSSLCerts(WebDriverConfiguration webDriverCfg, DesiredCapabilities capabilitiesToAdd) {
if (webDriverCfg.getBrowser().equals("internetexplorer")) {
return; // IE not supported
}
capabilitiesToAdd.setCapability(CapabilityType.ACCEPT_SSL_CERTS, true); capabilitiesToAdd.setCapability(CapabilityType.ACCEPT_SSL_CERTS, true);
capabilitiesToAdd.setCapability(CapabilityType.ACCEPT_INSECURE_CERTS, true); capabilitiesToAdd.setCapability(CapabilityType.ACCEPT_INSECURE_CERTS, true);
} }

21
testsuite/integration-arquillian/tests/base/src/main/java/org/keycloak/testsuite/page/PatternFlyClosableAlert.java
View file

@ -17,9 +17,7 @@
package org.keycloak.testsuite.page; package org.keycloak.testsuite.page;
import org.keycloak.testsuite.util.WaitUtils; import org.keycloak.testsuite.util.WaitUtils;
import org.openqa.selenium.WebDriverException;
import org.openqa.selenium.WebElement; import org.openqa.selenium.WebElement;
import org.openqa.selenium.ie.InternetExplorerDriver;
import org.openqa.selenium.support.FindBy; import org.openqa.selenium.support.FindBy;
import static org.junit.Assert.assertEquals; import static org.junit.Assert.assertEquals;
@ -87,20 +85,11 @@ public class PatternFlyClosableAlert extends AbstractPatternFlyAlert {
} }
public void close() { public void close() {
try { closeButton.click();
closeButton.click(); WaitUtils.pause(500);
WaitUtils.pause(500); // Sometimes, when a test is too fast, // Sometimes, when a test is too fast,
// one of the consecutive alerts is not displayed; // one of the consecutive alerts is not displayed;
// to prevent this we need to slow down a bit // to prevent this we need to slow down a bit
}
catch (WebDriverException e) {
if (driver instanceof InternetExplorerDriver) {
log.warn("Failed to close the alert; test is probably too slow and alert has already closed itself");
}
else {
throw e;
}
}
} }
} }

46
testsuite/integration-arquillian/tests/base/src/main/java/org/keycloak/testsuite/util/URLUtils.java
View file

@ -5,7 +5,6 @@ import org.jboss.logging.Logger;
import org.keycloak.common.util.KeycloakUriBuilder; import org.keycloak.common.util.KeycloakUriBuilder;
import org.openqa.selenium.TimeoutException; import org.openqa.selenium.TimeoutException;
import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebDriver;
import org.openqa.selenium.ie.InternetExplorerDriver;
import org.openqa.selenium.support.ui.ExpectedCondition; import org.openqa.selenium.support.ui.ExpectedCondition;
import org.openqa.selenium.support.ui.WebDriverWait; import org.openqa.selenium.support.ui.WebDriverWait;
@ -29,22 +28,10 @@ public final class URLUtils {
private static Logger log = Logger.getLogger(URLUtils.class); private static Logger log = Logger.getLogger(URLUtils.class);
public static void navigateToUri(String uri) { public static void navigateToUri(String uri) {
navigateToUri(uri, true);
}
private static void navigateToUri(String uri, boolean enableIEWorkaround) {
WebDriver driver = getCurrentDriver(); WebDriver driver = getCurrentDriver();
log.info("starting navigation"); log.info("starting navigation");
// In IE, sometime the current URL is not correct; one of the indicators is that the target URL
// equals the current URL
if (driver instanceof InternetExplorerDriver && driver.getCurrentUrl().equals(uri)) {
log.info("IE workaround: target URL equals current URL - refreshing the page");
driver.navigate().refresh();
waitForPageToLoad();
}
log.info("current URL: " + driver.getCurrentUrl()); log.info("current URL: " + driver.getCurrentUrl());
log.info("navigating to " + uri); log.info("navigating to " + uri);
if (driver.getCurrentUrl().equals(uri)) { // Some browsers won't do anything if navigating to the same URL; this "fixes" it if (driver.getCurrentUrl().equals(uri)) { // Some browsers won't do anything if navigating to the same URL; this "fixes" it
@ -58,19 +45,7 @@ public final class URLUtils {
waitForPageToLoad(); waitForPageToLoad();
log.info("new current URL: " + driver.getCurrentUrl()); log.info("new current URL: " + driver.getCurrentUrl());
log.info("navigation complete");
// In IE, after deleting the cookies for test realm, the first loaded page in master's admin console
// contains invalid URL (misses #/realms/[realm] or contains state and code fragments), although the
// address bar states the correct URL; seemingly this is another bug in IE WebDriver)
if (enableIEWorkaround && driver instanceof InternetExplorerDriver
&& (driver.getCurrentUrl().matches("^[^#]+/#state=[^#/&]+&code=[^#/&]+$")
|| driver.getCurrentUrl().matches("^.+/auth/admin/[^/]+/console/$"))) {
log.info("IE workaround: reloading the page after deleting the cookies...");
navigateToUri(uri, false);
}
else {
log.info("navigation complete");
}
} }
public static boolean currentUrlEquals(String url) { public static boolean currentUrlEquals(String url) {
@ -109,27 +84,14 @@ public final class URLUtils {
return urlCheck(urlMatches(regex)); return urlCheck(urlMatches(regex));
} }
private static boolean urlCheck(ExpectedCondition condition) {
return urlCheck(condition, false);
}
@SuppressWarnings("unchecked") @SuppressWarnings("unchecked")
private static boolean urlCheck(ExpectedCondition condition, boolean secondTry) { private static boolean urlCheck(ExpectedCondition condition) {
WebDriver driver = getCurrentDriver(); WebDriver driver = getCurrentDriver();
try { try {
(new WebDriverWait(driver, 5, 100)).until(condition); (new WebDriverWait(driver, 5, 100)).until(condition);
} } catch (TimeoutException e) {
catch (TimeoutException e) { return false;
if (driver instanceof InternetExplorerDriver && !secondTry) {
// IE WebDriver has sometimes invalid current URL
log.info("IE workaround: checking URL failed at first attempt - refreshing the page and trying one more time...");
driver.navigate().refresh();
urlCheck(condition, true);
}
else {
return false;
}
} }
return true; return true;
} }

4
testsuite/integration-arquillian/tests/base/src/test/resources/arquillian.xml
View file

@ -45,10 +45,6 @@
<property name="chromeArguments">${chromeArguments}</property> <property name="chromeArguments">${chromeArguments}</property>
<property name="chromeDriverVersion">${chromeDriverVersion}</property> <property name="chromeDriverVersion">${chromeDriverVersion}</property>
<!-- internet explorer -->
<property name="ieDriverArch">${ieDriverArch}</property>
<property name="ieDriverVersion">${ieDriverVersion}</property>
<!-- appium --> <!-- appium -->
<property name="appium.platformName">${appium.platformName}</property> <property name="appium.platformName">${appium.platformName}</property>
<property name="appium.deviceName">${appium.deviceName}</property> <property name="appium.deviceName">${appium.deviceName}</property>

2
testsuite/integration-arquillian/tests/other/console/pom.xml
View file

@ -33,7 +33,7 @@
<properties> <properties>
<keycloak.theme.dir>${auth.server.home}/themes</keycloak.theme.dir> <keycloak.theme.dir>${auth.server.home}/themes</keycloak.theme.dir>
<supportedBrowsers>firefox|chrome|internetExplorer|safari|chromeHeadless|edge</supportedBrowsers> <supportedBrowsers>firefox|chrome|safari|chromeHeadless|edge</supportedBrowsers>
</properties> </properties>
<build> <build>

182
themes/src/main/resources/theme/keycloak/login/resources/css/login.css
View file

@ -11,167 +11,28 @@
height: 100%; height: 100%;
} }
/*IE compatibility*/
.pf-c-form-control {
font-size: 14px;
font-size: var(--pf-global--FontSize--sm);
border-width: 1px;
border-width: var(--pf-global--BorderWidth--sm);;
border-color: #EDEDED #EDEDED #8A8D90 #EDEDED;
border-color: var(--pf-global--BorderColor--300) var(--pf-global--BorderColor--300) var(--pf-global--BorderColor--200) var(--pf-global--BorderColor--300);
background-color: #FFFFFF;
background-color: var(--pf-global--BackgroundColor--100);
height: 36px;
height: calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom));
padding: 5px 0.5rem;
padding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft);
}
textarea.pf-c-form-control { textarea.pf-c-form-control {
height: auto; height: auto;
} }
.pf-c-form-control:hover, .pf-c-form-control:focus {
border-bottom-color: #0066CC;
border-bottom-color: var(--pf-global--primary-color--100);
border-bottom-width: 2px;
border-bottom-width: var(--pf-global--BorderWidth--md);
}
.pf-c-form-control[aria-invalid="true"] {
border-bottom-color: #C9190B;
border-bottom-color: var(--pf-global--danger-color--100);
border-bottom-width: 2px;
border-bottom-width: var(--pf-global--BorderWidth--md);
}
.pf-c-check__label, .pf-c-radio__label {
font-size: 14px;
font-size: var(--pf-global--FontSize--sm);
}
.pf-c-alert.pf-m-inline {
margin-bottom: 0.5rem; /* default - IE compatibility */
margin-bottom: var(--pf-global--spacer--sm);
padding: 0.25rem;
padding: var(--pf-global--spacer--xs);
border: solid #ededed;
border: solid var(--pf-global--BorderColor--300);
border-width: 1px;
border-width: var(--pf-c-alert--m-inline--BorderTopWidth) var(--pf-c-alert--m-inline--BorderRightWidth) var(--pf-c-alert--m-inline--BorderBottomWidth) var(--pf-c-alert--m-inline--BorderLeftWidth);
display: -ms-flexbox;
display: grid;
-ms-grid-columns: max-content 1fr max-content;
grid-template-columns:max-content 1fr max-content;
grid-template-columns: var(--pf-c-alert--grid-template-columns);
grid-template-rows: 1fr auto;
grid-template-rows: var(--pf-c-alert--grid-template-rows);
}
.pf-c-alert.pf-m-inline::before {
position: absolute;
top: -1px;
top: var(--pf-c-alert--m-inline--before--Top);
bottom: -1px;
bottom: var(--pf-c-alert--m-inline--before--Bottom);
left: 0;
width: 3px;
width: var(--pf-c-alert--m-inline--before--Width);
content: "";
background-color: #FFFFFF;
background-color: var(--pf-global--BackgroundColor--100);
}
.pf-c-alert.pf-m-inline.pf-m-success::before {
background-color: #92D400;
background-color: var(--pf-global--success-color--100);
}
.pf-c-alert.pf-m-inline.pf-m-danger::before {
background-color: #C9190B;
background-color: var(--pf-global--danger-color--100);
}
.pf-c-alert.pf-m-inline.pf-m-warning::before {
background-color: #F0AB00;
background-color: var(--pf-global--warning-color--100);
}
.pf-c-alert.pf-m-inline .pf-c-alert__icon {
padding: 1rem 0.5rem 1rem 1rem;
padding: var(--pf-c-alert--m-inline__icon--PaddingTop) var(--pf-c-alert--m-inline__icon--PaddingRight) var(--pf-c-alert--m-inline__icon--PaddingBottom) var(--pf-c-alert--m-inline__icon--PaddingLeft);
font-size: 16px;
font-size: var(--pf-c-alert--m-inline__icon--FontSize);
}
.pf-c-alert.pf-m-success .pf-c-alert__icon {
color: #92D400;
color: var(--pf-global--success-color--100);
}
.pf-c-alert.pf-m-success .pf-c-alert__title {
color: #486B00;
color: var(--pf-global--success-color--200);
}
.pf-c-alert.pf-m-danger .pf-c-alert__icon {
color: #C9190B;
color: var(--pf-global--danger-color--100);
}
.pf-c-alert.pf-m-danger .pf-c-alert__title {
color: #A30000;
color: var(--pf-global--danger-color--200);
}
.pf-c-alert.pf-m-warning .pf-c-alert__icon {
color: #F0AB00;
color: var(--pf-global--warning-color--100);
}
.pf-c-alert.pf-m-warning .pf-c-alert__title {
color: #795600;
color: var(--pf-global--warning-color--200);
}
.pf-c-alert__title { .pf-c-alert__title {
font-size: 14px; /* default - IE compatibility */ font-size: var(--pf-global--FontSize--xs);
font-size: var(--pf-global--FontSize--sm);
padding: 5px 8px;
padding: var(--pf-c-alert__title--PaddingTop) var(--pf-c-alert__title--PaddingRight) var(--pf-c-alert__title--PaddingBottom) var(--pf-c-alert__title--PaddingLeft);
} }
.pf-c-button{ p.instruction {
padding:0.375rem 1rem; margin: 5px 0;
padding: var(--pf-global--spacer--form-element) var(--pf-global--spacer--md);
} }
/* default - IE compatibility */
.pf-m-primary {
color: #FFFFFF;
background-color: #0066CC;
background-color: var(--pf-global--primary-color--100);
}
/* default - IE compatibility */
.pf-m-primary:hover {
background-color: #004080;
background-color: var(--pf-global--primary-color--200);
}
/* default - IE compatibility */
.pf-c-button.pf-m-control { .pf-c-button.pf-m-control {
border: solid 1px;
border: solid var(--pf-global--BorderWidth--sm); border: solid var(--pf-global--BorderWidth--sm);
border-color: rgba(230, 230, 230, 0.5); border-color: rgba(230, 230, 230, 0.5);
} }
/*End of IE compatibility*/
h1#kc-page-title { h1#kc-page-title {
margin-top: 10px; margin-top: 10px;
} }
#kc-locale ul { #kc-locale ul {
background-color: #FFF;
background-color: var(--pf-global--BackgroundColor--100); background-color: var(--pf-global--BackgroundColor--100);
display: none; display: none;
top: 20px; top: 20px;
@ -187,19 +48,14 @@ h1#kc-page-title {
display:block; display:block;
} }
/* IE compatibility */
#kc-locale-dropdown a { #kc-locale-dropdown a {
color: #6A6E73;
color: var(--pf-global--Color--200); color: var(--pf-global--Color--200);
text-align: right; text-align: right;
font-size: 14px;
font-size: var(--pf-global--FontSize--sm); font-size: var(--pf-global--FontSize--sm);
} }
/* IE compatibility */
a#kc-current-locale-link::after { a#kc-current-locale-link::after {
content: "\2c5"; content: "\2c5";
margin-left: 4px;
margin-left: var(--pf-global--spacer--xs) margin-left: var(--pf-global--spacer--xs)
} }
@ -335,7 +191,6 @@ div.kc-logo-text span {
} }
.required { .required {
color: #A30000; /* default - IE compatibility */
color: var(--pf-global--danger-color--200); color: var(--pf-global--danger-color--200);
} }
@ -406,12 +261,10 @@ ul#kc-totp-supported-apps {
} }
.kc-social-gray { .kc-social-gray {
color: #737679; /* default - IE compatibility */
color: var(--pf-global--Color--200); color: var(--pf-global--Color--200);
} }
.kc-social-item { .kc-social-item {
margin-bottom: 0.5rem; /* default - IE compatibility */
margin-bottom: var(--pf-global--spacer--sm); margin-bottom: var(--pf-global--spacer--sm);
font-size: 15px; font-size: 15px;
text-align: center; text-align: center;
@ -584,32 +437,6 @@ ul#kc-totp-supported-apps {
width: 40%; width: 40%;
} }
/* Internet Explorer 11 compatibility workaround for select-authenticator screen */
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
.select-auth-box-parent {
border-top: 1px solid #f0f0f0;
padding-top: 1rem;
padding-bottom: 1rem;
cursor: pointer;
}
.select-auth-box-headline {
font-size: 16px;
color: #06c;
font-weight: bold;
}
.select-auth-box-desc {
font-size: 14px;
}
.pf-l-stack {
flex-basis: 100%;
}
}
/* End of IE11 workaround for select-authenticator screen */
.select-auth-box-arrow{ .select-auth-box-arrow{
display: flex; display: flex;
align-items: center; align-items: center;
@ -661,7 +488,6 @@ ul#kc-totp-supported-apps {
padding: 0 20px; padding: 0 20px;
max-width: 500px; max-width: 500px;
border-top: 4px solid; border-top: 4px solid;
border-color: #0066CC; /* default - IE compatibility */
border-color: var(--pf-global--primary-color--100); border-color: var(--pf-global--primary-color--100);
} }

207
themes/src/main/resources/theme/keycloak/login/resources/css/tile.css
View file

@ -1,207 +0,0 @@
/*Internet Explorer 11 compatibility workaround - IE does not support CSS variables */
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
.pf-c-tile {
position: relative;
display: -ms-inline-grid;
display: inline-grid;
padding: 1.5rem 1.5rem 1.5rem 1.5rem;
margin-bottom: 0.25rem;
text-align: center;
cursor: pointer;
background-color: #fff;
grid-template-rows: -webkit-min-content;
-ms-grid-rows: -webkit-min-content;
-ms-grid-rows: min-content;
grid-template-rows: min-content;
}
.pf-c-tile::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
content: "";
border: 1px solid #d2d2d2;
border-radius: 3px;
}
.pf-c-tile:hover {
border: 1px solid #06c;
border-radius: 3px;
}
.pf-c-tile:hover .pf-c-tile__title,
.pf-c-tile:hover .pf-c-tile__icon {
color: #06c;
}
.pf-c-tile__input:checked + .pf-c-tile .pf-c-tile__title,
.pf-c-tile__input:checked + .pf-c-tile .pf-c-tile__icon {
color: #06c;
}
.pf-c-tile__input:checked + .pf-c-tile {
border: 2px solid #06c;
border-radius: 3px;
}
.pf-c-tile.pf-m-disabled {
pointer-events: none;
}
.pf-c-tile__header {
display: flex;
align-items: center;
justify-content: center;
}
.pf-c-tile__header.pf-m-stacked {
flex-direction: column;
justify-content: initial;
}
.pf-c-tile__header.pf-m-stacked .pf-c-tile__icon {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.25rem;
}
.pf-c-tile__title {
color: #6a6e73;
}
.pf-c-tile__body {
font-size: 0.75rem;
color: #6a6e73;
}
.pf-c-tile__icon {
margin-right: 0.5rem;
font-size: 1.5rem;
color: #6a6e73;
}
}
/*End of the IE11 workaround*/
.pf-c-tile {
--pf-c-tile--PaddingTop: var(--pf-global--spacer--lg);
--pf-c-tile--PaddingRight: var(--pf-global--spacer--lg);
--pf-c-tile--PaddingBottom: var(--pf-global--spacer--lg);
--pf-c-tile--PaddingLeft: var(--pf-global--spacer--lg);
--pf-c-tile--BackgroundColor: var(--pf-global--BackgroundColor--100);
--pf-c-tile--before--BorderColor: var(--pf-global--BorderColor--100);
--pf-c-tile--before--BorderWidth: var(--pf-global--BorderWidth--sm);
--pf-c-tile--before--BorderRadius: var(--pf-global--BorderRadius--sm);
--pf-c-tile--hover--before--BorderColor: var(--pf-global--primary-color--100);
--pf-c-tile--m-selected--before--BorderWidth: var(--pf-global--BorderWidth--md);
--pf-c-tile--m-selected--before--BorderColor: var(--pf-global--primary-color--100);
--pf-c-tile--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
--pf-c-tile--focus--before--BorderColor: var(--pf-global--primary-color--100);
--pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
--pf-c-tile__title--Color: var(--pf-global--Color--100);
--pf-c-tile--hover__title--Color: var(--pf-global--primary-color--100);
--pf-c-tile--m-selected__title--Color: var(--pf-global--primary-color--100);
--pf-c-tile--focus__title--Color: var(--pf-global--primary-color--100);
--pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--100);
--pf-c-tile__icon--MarginRight: var(--pf-global--spacer--sm);
--pf-c-tile__icon--FontSize: var(--pf-global--icon--FontSize--md);
--pf-c-tile__icon--Color: var(--pf-global--Color--100);
--pf-c-tile--hover__icon--Color: var(--pf-global--primary-color--100);
--pf-c-tile--m-selected__icon--Color: var(--pf-global--primary-color--100);
--pf-c-tile--m-disabled__icon--Color: var(--pf-global--disabled-color--100);
--pf-c-tile--focus__icon--Color: var(--pf-global--primary-color--100);
--pf-c-tile__header--m-stacked__icon--MarginBottom: var(--pf-global--spacer--xs);
--pf-c-tile__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--lg);
--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--xl);
--pf-c-tile__body--Color: var(--pf-global--Color--100);
--pf-c-tile__body--FontSize: var(--pf-global--FontSize--xs);
--pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--100);
position: relative;
display: inline-grid;
padding: var(--pf-c-tile--PaddingTop) var(--pf-c-tile--PaddingRight) var(--pf-c-tile--PaddingBottom) var(--pf-c-tile--PaddingLeft);
margin-bottom: 0.25rem;
text-align: center;
cursor: pointer;
background-color: var(--pf-c-tile--BackgroundColor);
grid-template-rows: min-content;
overflow: hidden;
}
.pf-c-tile::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
content: "";
border: var(--pf-c-tile--before--BorderWidth) solid var(--pf-c-tile--before--BorderColor);
border-radius: var(--pf-c-tile--before--BorderRadius);
}
.pf-c-tile:hover {
--pf-c-tile__title--Color: var(--pf-c-tile--hover__title--Color);
--pf-c-tile__icon--Color: var(--pf-c-tile--hover__icon--Color);
--pf-c-tile--before--BorderColor: var(--pf-c-tile--hover--before--BorderColor);
}
.pf-c-tile__input:checked + .pf-c-tile {
--pf-c-tile__title--Color: var(--pf-c-tile--m-selected__title--Color);
--pf-c-tile__icon--Color: var(--pf-c-tile--m-selected__icon--Color);
--pf-c-tile--before--BorderWidth: var(--pf-c-tile--m-selected--before--BorderWidth);
--pf-c-tile--before--BorderColor: var(--pf-c-tile--m-selected--before--BorderColor);
}
.pf-c-tile:focus {
--pf-c-tile__title--Color: var(--pf-c-tile--focus__title--Color);
--pf-c-tile__icon--Color: var(--pf-c-tile--focus__icon--Color);
--pf-c-tile--before--BorderWidth: var(--pf-c-tile--focus--before--BorderWidth);
--pf-c-tile--before--BorderColor: var(--pf-c-tile--focus--before--BorderColor);
}
.pf-c-tile.pf-m-disabled {
--pf-c-tile--BackgroundColor: var(--pf-c-tile--m-disabled--BackgroundColor);
--pf-c-tile__title--Color: var(--pf-c-tile--m-disabled__title--Color);
--pf-c-tile__body--Color: var(--pf-c-tile--m-disabled__body--Color);
--pf-c-tile--before--BorderWidth: 0;
--pf-c-tile__icon--Color: var(--pf-c-tile--m-disabled__icon--Color);
pointer-events: none;
}
.pf-c-tile.pf-m-display-lg .pf-c-tile__header.pf-m-stacked {
--pf-c-tile__icon--FontSize: var(--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize);
}
.pf-c-tile__input {
display: none;
}
.pf-c-tile__header {
display: flex;
align-items: center;
justify-content: center;
}
.pf-c-tile__header.pf-m-stacked {
--pf-c-tile__icon--MarginRight: 0;
--pf-c-tile__icon--FontSize: var(--pf-c-tile__header--m-stacked__icon--FontSize);
flex-direction: column;
justify-content: initial;
}
.pf-c-tile__header.pf-m-stacked .pf-c-tile__icon {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--pf-c-tile__header--m-stacked__icon--MarginBottom);
}
.pf-c-tile__title {
color: var(--pf-c-tile__title--Color);
}
.pf-c-tile__body {
font-size: var(--pf-c-tile__body--FontSize);
color: var(--pf-c-tile__body--Color);
}
.pf-c-tile__icon {
margin-right: var(--pf-c-tile__icon--MarginRight);
font-size: var(--pf-c-tile__icon--FontSize);
color: var(--pf-c-tile__icon--Color);
}

2
themes/src/main/resources/theme/keycloak/login/theme.properties
View file

@ -1,7 +1,7 @@
parent=base parent=base
import=common/keycloak import=common/keycloak
styles=css/login.css css/tile.css styles=css/login.css
stylesCommon=web_modules/@patternfly/react-core/dist/styles/base.css web_modules/@patternfly/react-core/dist/styles/app.css node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css lib/pficon/pficon.css stylesCommon=web_modules/@patternfly/react-core/dist/styles/base.css web_modules/@patternfly/react-core/dist/styles/app.css node_modules/patternfly/dist/css/patternfly.min.css node_modules/patternfly/dist/css/patternfly-additions.min.css lib/pficon/pficon.css
meta=viewport==width=device-width,initial-scale=1 meta=viewport==width=device-width,initial-scale=1