/** * @TODO 2022_03_08 * * This comment is and should remain exactly duplicated in CB_UI.css. * * CBEqualizePageSettingsPart and CB_UI currently are working together and * competing with each other over the concept of the most basic look and * feel of a website. This includes fonts, background and text colors, and * choice of an "accent" color which is also the link color. * * This is a work in progress because CB_UI thought it was restarting this * process, but just kind of added more ideas to the mix. As a result we * still have two themes call CBLightTheme and CBDarkTheme although we also * have the concept of using the system preferred light or dark mode. * * The concept of at least a light and dark theme will continue and * possibly allowing other themes as well. Alter this comment as needed. * * Known requirements: * * - Allow a basic theme to be specified on any element which will * modify the background and text colors. This theme may match the * current user or site selected theme which is just the way things * are. * * - Allow a page settings class to completely withdraw from loading * this file and CB_UI and CBUI. * * * * * This file is used to give all platforms and browsers an equal starting point * for CSS. If there is anything very basic that's different among platforms or * browsers then rules should be added to this file to equalize and make the * experience the same for all browsers and platforms. Rules that commonly * change between themes or sites should not be placed in this file. * * --CBBackgroundOffsetColor * * This color should be used as the background color for CBArtworkElement * containers to render the CBArtworkElement aspect ratio box when the * actual image is not the same aspect ratio as specified on the * CBArtworkElement. * *
* *
* * With images the shape of the image container is often a unifying design * aspect for the page. So showing this background color when an image * doesn't match its container shape brings stability to the visual design. * * Sometimes beginning website administrators are unaware of concepts like * aspect ratio and sometimes advanced users don't have the time to make a * cropped image. In both cases use of this color can make the site look * more polished. */ * { margin: 0; /* 1 */ } html { font-size: 16px; /* 1 */ overflow-y: scroll; /* 2 */ text-rendering: optimizeLegibility; /* 3 */ -ms-text-size-adjust: 100%; /* 4 */ -webkit-text-size-adjust: 100%; /* 4 */ --CBButtonBackgroundColor: hsl(210, 80%, 50%); --CBButtonBackgroundColorDisabled: hsl(210, 80%, 30%); --CBButtonBackgroundColorHighlight: hsl(210, 80%, 60%); --CBButtonTextColor: hsl(0, 0%, 100%); --CBButtonTextColorDisabled: hsla(0, 0, 100%, 0.3); --CBMonospaceFontFamily: 'Menlo', 'Courier New', 'Courier', monospace; } @media screen { .CBDarkTheme { --CB_UI_paperColor: hsl(0, 0%, 12%); --CB_UI_borderColor: hsla(0, 0%, 100%, 0.1); --CBBackgroundColor1: hsl(0, 0%, 10%); --CBBackgroundColor2: hsl(0, 0%, 15%); --CBBackgroundColor3: hsl(0, 0%, 20%); --CBBackgroundOffsetColor: hsla(0, 0%, 100%, 0.05); --CBBackgroundColorForPanel: hsla(0, 0%, 100%, 0.05); --CBTextColor1: hsla(0, 0%, 100%, 0.9); --CBTextColor2: hsla(0, 0%, 100%, 0.6); --CBTextColor3: hsla(0, 0%, 100%, 0.3); --CBLineColor: hsla(0, 0%, 100%, 0.3); /* @deprecated use CBTextColors */ --CBTextColorForLinks: hsla(210, 80%, 50%, 0.9); /** * CBUIBorderColor is not translucent because it needs to be the same color * over any background color */ --CBUIBorderColor: hsl(0, 0%, 25%); --CBErrorBackgroundColor: hsl(0, 25%, 15%); background-color: var(--CBBackgroundColor1); color: var(--CBTextColor1); /* @deprecated use --CBBackgroundColor1 */ --CBBackgroundColor: var(--CBBackgroundColor1); /* deprecated use --CBTextColor1 */ --CBTextColor: var(--CBTextColor1); /* @deprecated use --CBBackgroundColor2 */ --CBUIBackgroundColor: var(--CBBackgroundColor2); } } .CBLightTheme { --CB_UI_paperColor: hsl(0, 0%, 100%); --CB_UI_borderColor: hsla(0, 0%, 0%, 0.1); --CBBackgroundColor1: hsl(0, 0%, 100%); --CBBackgroundColor2: hsl(0, 0%, 95%); --CBBackgroundColor3: hsl(0, 0%, 90%); --CBBackgroundOffsetColor: hsla(0, 0%, 0%, 0.05); --CBBackgroundColorForPanel: hsla(0, 0%, 100%, 0.8); --CBTextColor1: hsla(0, 0%, 0%, 0.9); --CBTextColor2: hsla(0, 0%, 0%, 0.6); --CBTextColor3: hsla(0, 0%, 0%, 0.3); --CBLineColor: hsla(0, 0%, 0%, 0.3); /* @deprecated use CBTextColors */ --CBTextColorForLinks: hsla(210, 80%, 50%, 0.9); /** * CBUIBorderColor is not translucent because it needs to be the same color * over any background color */ --CBUIBorderColor: hsl(0, 0%, 85%); --CBErrorBackgroundColor: hsl(0, 75%, 95%); background-color: var(--CBBackgroundColor1); color: var(--CBTextColor1); /* @deprecated use --CBBackgroundColor1 */ --CBBackgroundColor: var(--CBBackgroundColor1); /* deprecated use --CBTextColor1 */ --CBTextColor: var(--CBTextColor1); /* @deprecated use --CBBackgroundColor2 */ --CBUIBackgroundColor: var(--CBBackgroundColor2); } .CBBackgroundOffsetColor { background-color: var(--CBBackgroundOffsetColor); } a { color: var(--CBTextColorForLinks); } /** * The body element is rendered by CBHTMLOutput. These styles enable the footer * to be at the bottom of pages with short content. */ body { /* the body must be at least as tall as the viewport */ min-height: 100vh; /* the body is a vertical flexbox */ display: flex; flex-direction: column; /* the default value for align-items is stretch */ /* align-items: stretch; */ /* position absolutely positioned elements relative to the body */ position: relative; } /** * The body element should usually have 3 children. The header, the main * element, and the footer. By default the children will not flex, but the main * element will probably be allowed to grow. That style should be set by the * page renderer which is responsible for the main element. * * A page frame class can add its own container, in which case the frame class * will document its method of layout. * * The footer element should have the declaration: "margin-top: auto". This will * allow it to move to the bottom of short pages. This declaration should be * made by the style sheet of the footer. */ body > * { flex: none; } a:link, a:active, a:focus, a:hover { outline: none; } a img { border: none; } code, pre { font-family: var(--CBMonospaceFontFamily); } /** * @NOTE 2018_09_12 * * Why is this declaration in this file? * Why is it not just "overflow-x: auto;"? * * Consider removing this declaration and only adding it in places where * its context is fully documented. * * Similar pre element styles exist in CBContentStyleSheet.css. */ pre { overflow: auto; } button, input, select, textarea { box-sizing: border-box; /* 1 */ } input[type=email], input[type=text], input[type=url], textarea { border: 1px solid hsl(0, 0%, 80%); /* 1 */ } table { border-spacing: 0px; /* 1 */ } td, th { padding: 0; /* 1 */ text-align: left; vertical-align: baseline; /* 2 */ } /* z-index guide 500 Sticky menus and panels A menu or panel needs to be at a higher z-index so that elements declared later in the document scroll underneath the menu or panel. 1000 Full viewport modal shield A full viewport modal shield is a fixed element displayed underneath a model element used to prevent input from reaching the elements underneath. 1000 is the z-index of the shield element, so the modal elements above the shield may have a z-index of 1001 or some other number greater than 1000. No element should have a constant z-index of 1000 or higher. An element can adopt this z-index when it becomes modal and adopt more normal z-index when it when it is no longer modal. 1500 Full viewport error message shield A full viewport error message shield is like a full viewport modal shield except that it can potentially be displayed while a full viewport modal shield is being displayed and must have a higher z-index. 1500 is the z-index of the shield, so the error message elements may have a z-index of 1501 or greater. */ /* Footnotes --------- *: 1. The default margins are not generally helpful, especially on the `body` element. In the past the padding has also been removed but it turns out that much of the default padding is useful. html: 1. The value `16px` matches the default size used by most, if not all, browsers but it can be changed by the user in browser preferences. This guarantees that it is the value because most layouts can't really handle a root change of a font size. With the high quality zoom support that browsers have today, accessibility is not as much of a concern with regard to font size. 2. This forces a scrollbar to appear at all times on browsers that have scrollbars so that the layout does not shift between shorter and longer pages that may otherwise toggle the scrollbar's presence. 3. Setting the `text-rendering` property to "optimizeLegibility" allows basic font ligatures to be used. This behavior might eventually be on by default. 4. These rules prevent phone browsers from resizing text to a minimum size based on phone heuristics. This generally breaks the layout and degrades the experience rather then helping the user. button, input, select, textarea: 1. This rule allows form elements to be set to `100%` wide and properly fill that width. Without it, the element border widths make it slightly larger. Note: Any other attempts to equalize the form elements is most likely counterproductive. Most browsers degrade the appearance of these elements as soon as any visible property is applied. Views involving form elements should be designed to withstand slight appearance differences between browsers. input, textarea: 1. In apparently all browsers the the default colors for the input and textarea elements are different. This color closely resembles the default color for the input element. table: 1. This property is almost universally set on tables. The `normalize.css` file also has this style. td, th: 1. The default padding on table cells is not generally helpful. 2. The rule `vertical-align: baseline;` is confirmed to be correct here. It places the text at the top of the cell except when there are situations that affect the baseline (mixed text sizes, form fields) and then it places the baseline as close to the top as possible. */