/* * ============================== * === Introduction === * ============================== * This file affects The User Interface (email settings, etc): * * Change here *do not* affect these interface areas: * - The Admininistration Interface * - Webmail Lite * - Tuxedo * * Each section has a number of CSS rules to affect a section of the * interface. Section comments include a description of the affected part * of the interface, and a list of what the changes in the example do. * * The code for each block is commented out so that the changes will not take * effect by default. To try out a rule, uncomment its section, and the * changes will take effect upon the next refresh of the affected web page. */ /* * ============================== * === User Interface === * ============================== * * The following settings only apply to the User Interface. */ /* * .loginContentCell holds all of the content for the loging system * * - change the order and alignment of the login interface * - Add margin to the items inside * - Remove the shadow of the login * */ #loginContentCell { display: flex; flex-direction: column; } .login-info-content { margin: 60px auto 0 auto; order: 2; } #login-form-wrapper { order: 1; box-shadow: none; margin: 10px auto 0 auto; } /* * #login-form-table input[type="submit"] holds the input button * to start session * * - Make the cursor pointer * - Adding border color * - text color blue when hover and blue when not * - adding shadows * - background white when hover and blue when not * */ #login-form-table input[type="submit"] { background-color: #00567b; border: solid #00567b 2px; transition: .3s; color: white; box-shadow: .5px .5px 1px .5px #4A4A4A; cursor: pointer; } #login-form-table input[type="submit"]:hover { border: solid #00567b 2px; background-color: white; box-shadow: 1px 1px 1px .5px #4A4A4A; color: #00567b; } /* * For the User Interface pages, you may use .MagicBody to reference the * tag. * * - Add a light green tinge to the background. * - Remove border from the main container * - Add shadow to the main container * - Remove shadow from the login container */ .MagicBody { background-image: none; background-color: #F6FFF6; } .MagicOuterTable { border: none; box-shadow: 0px 0px 10px 0px #4A4A4A; } #login-form-wrapper { box-shadow: none; } /* * .MagicContentCell holds all of the content beside the navigation bar, and * is the main content container. * * - Increase the font size to make it easier to read. * - Add additional padding. * * The h2 inside .MagicContentCell is the main header at the top of the page. * * - Increase the font size. * - Set the font colour to black. */ .MagicContentCell { font-size: 125%; padding-right: 5px; padding-bottom: 5px; } .MagicContentCell h2 { font-size: 160%; } /* * .MagicCopyRight contains your company information and the copyright notice. * * - Fade the copyright a little to make your company information more * prominent. */ .MagicCopyRight { color: #00567b; background-color: white; } .MagicCopyRight td { font-size: 10px; } .MagicCompanyFooter td { font-weight: bold; color: white; background-color: #00567b; line-height: 15px; border-top: 12px solid transparent; border-bottom: 12px solid transparent; } .MagicCompanyFooter td a { color: white; } .MagicCompanyFooter td a:hover { color: blue; } /* === LOGIN TO SEE THE CHANGES === */ /* * #loggedinas is the container in the top-left that shows the currently * logged in user. * * - Make the title bold. * - Make the background color blue * - Remove the border * - Add border radius * - Change text color to white * - Add letter spacing. */ #loggedinas { background-color: #18558c; font-weight: bold; border: none; border-radius: 8px; color: white; } #loggedinas strong { color: white; font-weight: 100; letter-spacing: .5px; } /* * #MagicMenu is the main navigation menu on the left hand side. * * - Make the text bold. * - Make the link texts blue. */ #MagicMenu ul li a { font-weight: 900; color: #0000A0; } /* * div.minibutton's are used throughout the interface for applying settings * and refreshing information. * * - Add shading. * - Add blue borders * - Add transition * - Add color text blue when hover and white when not * - Add background color white when hover and blue if not */ div.minibutton { border: solid #00567b 2px; background-color: #00567b; transition: .3s; color: white; box-shadow: .5px .5px 1px .5px #4A4A4A; } div.minibutton:hover { border: solid #00567b 2px; background-color: white; color: #00567b; } #EmailOptions td div.minibutton a { background-image: none; background-color: transparent; font-weight: 900; color: inherit; } /* * .error is the class for error messages. These message are usually inside * td or div HTML elements. * * - Removing the background color * - Changing the text color to red * - Adding an underline * - Removing the border */ table.MagicDataTable .error { font-weight: 900; color: red; background-color: white; border: none!important; text-decoration: underline } /* * .MagicNavTabis and #header-logout-btn contains the button to logout * * - adjusting the height and width of the a tag * - removing the background color when is not hoverd and addign yellow color when hover * - Modifying height and width */ .MagicNavTab { background-color: white; border: 2px solid #fcbc1d; transition: .3s; padding: 0; height: 30px; } .MagicNavTab:hover { background-color: #fcbc1d; } #header-logout-btn { display: flex; margin: auto 0; padding: 0px; justify-content: center; align-items: center; color: black; height: 100%; width: 100%; } /* Adding animation to make the interface more interactive * #headerLogo and #rightHeaderLogo contains the logo of your company * * - adjusting the animation, position and transition for the animation * NOTE: to see the full animation, activate it and reload the page */ #HeaderLogo { overflow: hidden; } #rightHeaderLogo { transform: translateX(350px); animation-name: fadein-logo; animation-duration: 1s; animation-delay: .3s; animation-iteration-count: 1; animation-fill-mode: forwards; animation-timing-function: ease-out; } @keyframes fadein-logo { 100% { transform: translateX(0px); } }