@wso2/identity-cypress-test-base/branding/stylesheets/login-portal.css

Commonly used commands, configs, utilities for cypress integration & e2e tests in WSO2 Identity Server front-end applications.

/************************************************/
/*                                              */
/*          Koala Sports Theme Overrides        */
/*                                              */
/************************************************/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');

:root {
    --primaryColor: #7ec4d8;
    --primaryColorDarker: #3897b0;
    --backgroundColor: #1f2028;
    --accentColor: #ffd01b;
    --borderColor: #4b4c53;
    --borderRadius: 3px;
    --fontFamily: 'Roboto Slab', serif;
}

/*-----------------------------
       Page Background
------------------------------*/

/* Default Page */
.login-portal.layout {
    background: var(--backgroundColor);
}

/* Default Page with Blurred Patch */
.login-portal.layout .page-wrapper {
    background: var(--backgroundColor);
}

/* Only add the background image in higher resolution displays. */
@media only screen and (min-width: 480px) {
    .login-portal.layout .page-wrapper {
        background-image: url(https://cdn.statically.io/gh/wso2/identity-cypress-test-base/main/branding/images/bg-overlay.png);
        background-repeat: no-repeat;
        background-size: 600px;
        background-position-y: bottom;
        background-position-x: 5%;
    }
}

/* Error, Success Pages */
.login-portal.layout .page-wrapper.success-page, .login-portal.layout .page-wrapper.error-page {
    background: var(--backgroundColor);
}

/*-----------------------------
            Logo
------------------------------*/

/* Logo */
.login-portal.layout .center-segment .portal-logo img {
    margin-bottom: 1em;
    max-width: 100px;
}

/*-----------------------------
          Buttons
------------------------------*/

/* Buttons */
.ui.primary.button:not(.basic.link-button) {
    background: var(--primaryColor) !important;
    color: #ffffff !important;
}

/*-----------------------------
           Login Box
------------------------------*/

/* Login Box */
.login-portal.layout .center-segment>.ui.container>.ui.segment {
    border-radius: var(--borderRadius);
    border-bottom: 3px solid var(--accentColor);
    padding-bottom: 1.8em;
    box-shadow: 3px 6px 8px 2px rgb(0 0 0 / 20%);
}

/* Login Box Links */
.login-portal.layout .clickable-link {
    color: var(--primaryColor);
}

/* Login Box Link Button */
.login-portal.layout .segment-form .ui.large.fluid.button.link-button {
    background: transparent;
    color: var(--primaryColor);
}

/*-----------------------------
           Login Box
------------------------------*/

/* Footer */
.login-portal.layout .footer {
    border-top: 1px solid var(--borderColor);
}

/*-----------------------------
        Anchor Tags
------------------------------*/

/* Anchor Tags */
a {
    color: var(--primaryColor);
}

a:hover {
    color: var(--primaryColorDarker) !important;
}

/*-----------------------------
    Cookie Consent Banner
------------------------------*/

.ui.segment.cookie-consent-banner.inverted {
    background: var(--backgroundColor);
    border: 3px solid var(--accentColor);
}

/*-----------------------------
            Fonts
------------------------------*/

/* Body */
body {
    font-family: var(--fontFamily);
}

/* Headings */
h1,
h2,
h3,
h4,
h5 {
    font-family: var(--fontFamily);
}

.ui.header {
    font-family: var(--fontFamily);
}

/* Inputs */
.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="time"],
.ui.form input[type="text"],
.ui.form input[type="file"],
.ui.form input[type="url"] {

  font-family: var(--fontFamily);
}

.ui.input > input {
    font-family: var(--fontFamily);
}

/* Search */
.ui.search > .results .result .title {
    font-family: var(--fontFamily);
}

.ui.search > .results > .message .header {
    font-family: var(--fontFamily);
}

.ui.category.search > .results .category > .name {
    font-family: var(--fontFamily);
}

/* Menus */
.ui.menu {
    font-family: var(--fontFamily);
}

/* Message */
.ui.message .header {
    font-family: var(--fontFamily);
}

/* Table */
.ui.sortable.table thead th:after {
    font-family: var(--fontFamily);
}

/* Button */
.ui.button {
    font-family: var(--fontFamily);
}

/* Text Container */
.ui.text.container {
    font-family: var(--fontFamily);
}

/* List */
.ui.list .list > .item .header,
.ui.list > .item .header {
    font-family: var(--fontFamily);
}

/* Steps */
.ui.steps .step .title {
    font-family: var(--fontFamily);
}

/* Accordion */
.ui.accordion .title:not(.ui) {
    font-family: var(--fontFamily);
}

/* Modal */
.ui.modal > .header {
    font-family: var(--fontFamily);
}

/* Popup */
.ui.popup > .header {
    font-family: var(--fontFamily);
}

/* Cards */
.ui.cards > .card > .content > .header,
.ui.card > .content > .header {
    font-family: var(--fontFamily);
}

/* Items */
.ui.items > .item > .content > .header {
    font-family: var(--fontFamily);
}

/* Statistics */
.ui.statistics .statistic > .value,
.ui.statistic > .value {
    font-family: var(--fontFamily);
}