mirror of
https://github.com/Steffo99/bluelib.git
synced 2025-01-03 00:54:20 +00:00
🔧 Replace .container-main with .layout-*
This commit is contained in:
parent
3fb2679646
commit
bfe5a48282
12 changed files with 1021 additions and 595 deletions
10
index.html
10
index.html
|
|
@ -11,7 +11,6 @@
|
|||
</style>
|
||||
</head>
|
||||
<body class="theme-bluelib">
|
||||
<main class="main">
|
||||
<hgroup>
|
||||
<h1>
|
||||
Bluelib 2
|
||||
|
|
@ -20,6 +19,8 @@
|
|||
RYG style, in pure CSS
|
||||
</h2>
|
||||
</hgroup>
|
||||
<div class="layout layout-threecol">
|
||||
<main class="main layout-threecol-center">
|
||||
<section>
|
||||
<h3>
|
||||
Welcome to bluelib!
|
||||
|
|
@ -435,5 +436,12 @@
|
|||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<nav class="layout-threecol-left">
|
||||
I'm wrong.
|
||||
</nav>
|
||||
<nav class="layout-threecol-right">
|
||||
I'm right :)
|
||||
</nav>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
116
src/rules/skeleton.less
vendored
116
src/rules/skeleton.less
vendored
|
|
@ -1,33 +1,127 @@
|
|||
@{bluelib} {
|
||||
// --- Root ---
|
||||
/// ===== Root =====
|
||||
/// Every HTML document using Bluelib must define a root, an element where all bluelib styles can start being applied.
|
||||
/// Elements outside the root won't be styled at all, allowing Bluelib's styling to be contained in components or modules of a website.
|
||||
|
||||
color: @bA;
|
||||
@{bluelib} {
|
||||
|
||||
// Set the background defined in the palette
|
||||
background-color: @hex-background;
|
||||
|
||||
// Set the base color to the foreground defined in the palette
|
||||
.bluelib-color(@hex-foreground);
|
||||
|
||||
// By default, text should use the main font
|
||||
.font-text();
|
||||
|
||||
/// ===== All =====
|
||||
/// By default, browsers style elements with some weird rules.
|
||||
/// This is an attempt to correct them, and to implement some Bluelib magic.
|
||||
|
||||
&, @{all} {
|
||||
|
||||
// Globally set the box-sizing to border-box, as content-box is completely insane
|
||||
&, &::before, &::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Bluelib magic!
|
||||
// This rule sets the color of all text to be equal to the current .bluelib-color() at 100% opacity.
|
||||
// Thanks, CSS variables!
|
||||
color: @bA;
|
||||
|
||||
/* Disable outline, as we already highlight focused elements; if it's not enough, let me know */
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/// ===== Layouts =====
|
||||
/// Layouts arrange the content displayed inside the root.
|
||||
/// Layouts are the second element in the Bluelib hierarchy, immediately following the root.
|
||||
/// Ideally, a single layout should be used per page.
|
||||
|
||||
// --- Containers ---
|
||||
// The base layout class.
|
||||
@{layout} {
|
||||
display: grid;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
|
||||
@{container-main} {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// A layout with a single container spanning the whole screen.
|
||||
@{layout-fill} {
|
||||
padding: 4px;
|
||||
|
||||
grid-template-areas:
|
||||
"single";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
@{layout-fill-single} {
|
||||
grid-area: single;
|
||||
}
|
||||
|
||||
// A layout with a centered 1024px wide main container and two symmetric containers at the sides.
|
||||
@{layout-threecol} {
|
||||
padding: 4px;
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
grid-template-areas:
|
||||
"left center right";
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
// If the side containers would be smaller than 128px (if the screen is narrower than 1280px), the smaller containers are moved below the main one.
|
||||
@media screen and (max-width: 1280px) {
|
||||
grid-template-areas:
|
||||
"center center"
|
||||
"left right";
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
|
||||
// Keep the container limited to 1024px and centered
|
||||
max-width: 1024px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
|
||||
@{layout-threecol-left} {
|
||||
grid-area: left;
|
||||
|
||||
// --- Panels ---
|
||||
// Remember to use BOTH the panel AND the panel-* class when using a panel element!
|
||||
@media screen and (min-width: 1281px) {
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
// Base panel
|
||||
@media screen and (max-width: 1280px) {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
@{layout-threecol-center} {
|
||||
grid-area: center;
|
||||
|
||||
// Ensure the container doesn't eat up all the space
|
||||
max-width: 1024px;
|
||||
}
|
||||
|
||||
@{layout-threecol-right} {
|
||||
grid-area: right;
|
||||
|
||||
@media screen and (min-width: 1281px) {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
/// ===== Panels =====
|
||||
/// Panels are the main sectioning elements available in Bluelib.
|
||||
/// Many instance of them should be present on the page!
|
||||
/// They should group small amounts of tightly related content, which can be understood more or less separately from the rest of the page.
|
||||
|
||||
// The base panel class.
|
||||
@{panel} {
|
||||
margin: 8px 0;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -133,7 +133,6 @@
|
|||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnFK_uQQ.ttf) format('truetype');
|
||||
}
|
||||
.bluelib {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
background-color: #ffffff;
|
||||
--bluelib-color-r: 24;
|
||||
--bluelib-color-g: 24;
|
||||
|
|
@ -144,15 +143,84 @@
|
|||
.bluelib,
|
||||
.bluelib *,
|
||||
.bluelib .all {
|
||||
box-sizing: border-box;
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
/* Disable outline, as we already highlight focused elements; if it's not enough, let me know */
|
||||
outline: none !important;
|
||||
}
|
||||
.bluelib .container-main {
|
||||
.bluelib,
|
||||
.bluelib *,
|
||||
.bluelib .all,
|
||||
.bluelib::before,
|
||||
.bluelib *::before,
|
||||
.bluelib .all::before,
|
||||
.bluelib::after,
|
||||
.bluelib *::after,
|
||||
.bluelib .all::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.bluelib .layout {
|
||||
display: grid;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
.bluelib .layout-fill {
|
||||
padding: 4px;
|
||||
grid-template-areas: "single";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
.bluelib .layout-fill > main,
|
||||
.bluelib .layout-fill-single {
|
||||
grid-area: single;
|
||||
}
|
||||
.bluelib .layout-threecol {
|
||||
padding: 4px;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
.bluelib .layout-threecol {
|
||||
grid-template-areas: "left center right";
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
.bluelib .layout-threecol {
|
||||
grid-template-areas: "center center" "left right";
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
max-width: 1024px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
.bluelib .layout-threecol-left {
|
||||
grid-area: left;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
.bluelib .layout-threecol-left {
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
.bluelib .layout-threecol-left {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
.bluelib .layout-threecol-center {
|
||||
grid-area: center;
|
||||
max-width: 1024px;
|
||||
}
|
||||
.bluelib .layout-threecol-right {
|
||||
grid-area: right;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
.bluelib .layout-threecol-right {
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
.bluelib .layout-threecol-right {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
.bluelib .panel {
|
||||
margin: 8px 0;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -134,7 +134,6 @@
|
|||
}
|
||||
body,
|
||||
.bluelib {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
background-color: #ffffff;
|
||||
--bluelib-color-r: 24;
|
||||
--bluelib-color-g: 24;
|
||||
|
|
@ -148,18 +147,105 @@ body *,
|
|||
.bluelib *,
|
||||
body .all,
|
||||
.bluelib .all {
|
||||
box-sizing: border-box;
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
/* Disable outline, as we already highlight focused elements; if it's not enough, let me know */
|
||||
outline: none !important;
|
||||
}
|
||||
body main,
|
||||
.bluelib main,
|
||||
body .container-main,
|
||||
.bluelib .container-main {
|
||||
body,
|
||||
.bluelib,
|
||||
body *,
|
||||
.bluelib *,
|
||||
body .all,
|
||||
.bluelib .all,
|
||||
body::before,
|
||||
.bluelib::before,
|
||||
body *::before,
|
||||
.bluelib *::before,
|
||||
body .all::before,
|
||||
.bluelib .all::before,
|
||||
body::after,
|
||||
.bluelib::after,
|
||||
body *::after,
|
||||
.bluelib *::after,
|
||||
body .all::after,
|
||||
.bluelib .all::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body .layout,
|
||||
.bluelib .layout {
|
||||
display: grid;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
body .layout-fill,
|
||||
.bluelib .layout-fill {
|
||||
padding: 4px;
|
||||
grid-template-areas: "single";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
body .layout-fill-single,
|
||||
.bluelib .layout-fill-single {
|
||||
grid-area: single;
|
||||
}
|
||||
body .layout-threecol,
|
||||
.bluelib .layout-threecol {
|
||||
padding: 4px;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
body .layout-threecol,
|
||||
.bluelib .layout-threecol {
|
||||
grid-template-areas: "left center right";
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
body .layout-threecol,
|
||||
.bluelib .layout-threecol {
|
||||
grid-template-areas: "center center" "left right";
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
max-width: 1024px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
body .layout-threecol-left,
|
||||
.bluelib .layout-threecol-left {
|
||||
grid-area: left;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
body .layout-threecol-left,
|
||||
.bluelib .layout-threecol-left {
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
body .layout-threecol-left,
|
||||
.bluelib .layout-threecol-left {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
body .layout-threecol-center,
|
||||
.bluelib .layout-threecol-center {
|
||||
grid-area: center;
|
||||
max-width: 1024px;
|
||||
}
|
||||
body .layout-threecol-right,
|
||||
.bluelib .layout-threecol-right {
|
||||
grid-area: right;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
body .layout-threecol-right,
|
||||
.bluelib .layout-threecol-right {
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
body .layout-threecol-right,
|
||||
.bluelib .layout-threecol-right {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
body .panel,
|
||||
.bluelib .panel,
|
||||
|
|
@ -874,12 +960,12 @@ body .form-input,
|
|||
justify-self: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
body form .button,
|
||||
.bluelib form .button,
|
||||
body button,
|
||||
.bluelib button,
|
||||
body form button,
|
||||
.bluelib form button,
|
||||
body input[type="submit"],
|
||||
.bluelib input[type="submit"],
|
||||
body .button,
|
||||
.bluelib .button,
|
||||
body form button,
|
||||
.bluelib form button,
|
||||
body .form-submit,
|
||||
|
|
@ -906,12 +992,12 @@ body .form-buttons:last-child,
|
|||
.bluelib .form-buttons:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
body .button,
|
||||
.bluelib .button,
|
||||
body button,
|
||||
.bluelib button,
|
||||
body input[type="submit"],
|
||||
.bluelib input[type="submit"] {
|
||||
.bluelib input[type="submit"],
|
||||
body .button,
|
||||
.bluelib .button {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -924,56 +1010,56 @@ body input[type="submit"],
|
|||
font-size: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
body .button:hover,
|
||||
.bluelib .button:hover,
|
||||
body button:hover,
|
||||
.bluelib button:hover,
|
||||
body input[type="submit"]:hover,
|
||||
.bluelib input[type="submit"]:hover {
|
||||
.bluelib input[type="submit"]:hover,
|
||||
body .button:hover,
|
||||
.bluelib .button:hover {
|
||||
background-color: rgba(calc(var(--bluelib-color-r) - 20), calc(var(--bluelib-color-g) - 20), calc(var(--bluelib-color-b) - 20), 1);
|
||||
}
|
||||
body .button:focus-visible,
|
||||
.bluelib .button:focus-visible,
|
||||
body button:focus-visible,
|
||||
.bluelib button:focus-visible,
|
||||
body input[type="submit"]:focus-visible,
|
||||
.bluelib input[type="submit"]:focus-visible {
|
||||
.bluelib input[type="submit"]:focus-visible,
|
||||
body .button:focus-visible,
|
||||
.bluelib .button:focus-visible {
|
||||
outline: 4px solid rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7) !important;
|
||||
}
|
||||
body .button:active,
|
||||
.bluelib .button:active,
|
||||
body button:active,
|
||||
.bluelib button:active,
|
||||
body input[type="submit"]:active,
|
||||
.bluelib input[type="submit"]:active {
|
||||
.bluelib input[type="submit"]:active,
|
||||
body .button:active,
|
||||
.bluelib .button:active {
|
||||
background-color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
||||
}
|
||||
body .button[disabled]:hover,
|
||||
.bluelib .button[disabled]:hover,
|
||||
body button[disabled]:hover,
|
||||
.bluelib button[disabled]:hover,
|
||||
body input[type="submit"][disabled]:hover,
|
||||
.bluelib input[type="submit"][disabled]:hover,
|
||||
body .button .status-disabled:hover,
|
||||
.bluelib .button .status-disabled:hover,
|
||||
body .button[disabled]:hover,
|
||||
.bluelib .button[disabled]:hover,
|
||||
body button .status-disabled:hover,
|
||||
.bluelib button .status-disabled:hover,
|
||||
body input[type="submit"] .status-disabled:hover,
|
||||
.bluelib input[type="submit"] .status-disabled:hover {
|
||||
.bluelib input[type="submit"] .status-disabled:hover,
|
||||
body .button .status-disabled:hover,
|
||||
.bluelib .button .status-disabled:hover {
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
}
|
||||
body .button[disabled]:active,
|
||||
.bluelib .button[disabled]:active,
|
||||
body button[disabled]:active,
|
||||
.bluelib button[disabled]:active,
|
||||
body input[type="submit"][disabled]:active,
|
||||
.bluelib input[type="submit"][disabled]:active,
|
||||
body .button .status-disabled:active,
|
||||
.bluelib .button .status-disabled:active,
|
||||
body .button[disabled]:active,
|
||||
.bluelib .button[disabled]:active,
|
||||
body button .status-disabled:active,
|
||||
.bluelib button .status-disabled:active,
|
||||
body input[type="submit"] .status-disabled:active,
|
||||
.bluelib input[type="submit"] .status-disabled:active {
|
||||
.bluelib input[type="submit"] .status-disabled:active,
|
||||
body .button .status-disabled:active,
|
||||
.bluelib .button .status-disabled:active {
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
}
|
||||
body .button-fill-width,
|
||||
|
|
@ -1072,12 +1158,12 @@ body .button-toggle-on .status-disabled:active,
|
|||
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
||||
}
|
||||
body .input,
|
||||
.bluelib .input,
|
||||
body input,
|
||||
.bluelib input,
|
||||
body select,
|
||||
.bluelib select {
|
||||
.bluelib select,
|
||||
body .input,
|
||||
.bluelib .input {
|
||||
border-style: solid;
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
|
|
@ -1085,135 +1171,135 @@ body select,
|
|||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
body .input::placeholder,
|
||||
.bluelib .input::placeholder,
|
||||
body input::placeholder,
|
||||
.bluelib input::placeholder,
|
||||
body select::placeholder,
|
||||
.bluelib select::placeholder {
|
||||
.bluelib select::placeholder,
|
||||
body .input::placeholder,
|
||||
.bluelib .input::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
||||
opacity: 1;
|
||||
}
|
||||
body .input:optional,
|
||||
.bluelib .input:optional,
|
||||
body input:optional,
|
||||
.bluelib input:optional,
|
||||
body select:optional,
|
||||
.bluelib select:optional,
|
||||
body .input:optional::placeholder,
|
||||
.bluelib .input:optional::placeholder,
|
||||
body .input:optional,
|
||||
.bluelib .input:optional,
|
||||
body input:optional::placeholder,
|
||||
.bluelib input:optional::placeholder,
|
||||
body select:optional::placeholder,
|
||||
.bluelib select:optional::placeholder {
|
||||
.bluelib select:optional::placeholder,
|
||||
body .input:optional::placeholder,
|
||||
.bluelib .input:optional::placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
body .input:invalid:not(:placeholder-shown),
|
||||
.bluelib .input:invalid:not(:placeholder-shown),
|
||||
body input:invalid:not(:placeholder-shown),
|
||||
.bluelib input:invalid:not(:placeholder-shown),
|
||||
body select:invalid:not(:placeholder-shown),
|
||||
.bluelib select:invalid:not(:placeholder-shown) {
|
||||
.bluelib select:invalid:not(:placeholder-shown),
|
||||
body .input:invalid:not(:placeholder-shown),
|
||||
.bluelib .input:invalid:not(:placeholder-shown) {
|
||||
--bluelib-color-r: 200;
|
||||
--bluelib-color-g: 0;
|
||||
--bluelib-color-b: 0;
|
||||
}
|
||||
body .input:hover,
|
||||
.bluelib .input:hover,
|
||||
body input:hover,
|
||||
.bluelib input:hover,
|
||||
body select:hover,
|
||||
.bluelib select:hover,
|
||||
body .input:focus,
|
||||
.bluelib .input:focus,
|
||||
body .input:hover,
|
||||
.bluelib .input:hover,
|
||||
body input:focus,
|
||||
.bluelib input:focus,
|
||||
body select:focus,
|
||||
.bluelib select:focus {
|
||||
.bluelib select:focus,
|
||||
body .input:focus,
|
||||
.bluelib .input:focus {
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
|
||||
color: rgba(calc(var(--bluelib-color-r) - 50), calc(var(--bluelib-color-g) - 50), calc(var(--bluelib-color-b) - 50), 1);
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
||||
}
|
||||
body .input:hover::placeholder,
|
||||
.bluelib .input:hover::placeholder,
|
||||
body input:hover::placeholder,
|
||||
.bluelib input:hover::placeholder,
|
||||
body select:hover::placeholder,
|
||||
.bluelib select:hover::placeholder,
|
||||
body .input:focus::placeholder,
|
||||
.bluelib .input:focus::placeholder,
|
||||
body .input:hover::placeholder,
|
||||
.bluelib .input:hover::placeholder,
|
||||
body input:focus::placeholder,
|
||||
.bluelib input:focus::placeholder,
|
||||
body select:focus::placeholder,
|
||||
.bluelib select:focus::placeholder {
|
||||
.bluelib select:focus::placeholder,
|
||||
body .input:focus::placeholder,
|
||||
.bluelib .input:focus::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
|
||||
}
|
||||
body .input[disabled],
|
||||
.bluelib .input[disabled],
|
||||
body input[disabled],
|
||||
.bluelib input[disabled],
|
||||
body select[disabled],
|
||||
.bluelib select[disabled],
|
||||
body .input .status-disabled,
|
||||
.bluelib .input .status-disabled,
|
||||
body .input[disabled],
|
||||
.bluelib .input[disabled],
|
||||
body input .status-disabled,
|
||||
.bluelib input .status-disabled,
|
||||
body select .status-disabled,
|
||||
.bluelib select .status-disabled {
|
||||
.bluelib select .status-disabled,
|
||||
body .input .status-disabled,
|
||||
.bluelib .input .status-disabled {
|
||||
border-style: dashed;
|
||||
}
|
||||
body .input[disabled]:hover,
|
||||
.bluelib .input[disabled]:hover,
|
||||
body input[disabled]:hover,
|
||||
.bluelib input[disabled]:hover,
|
||||
body select[disabled]:hover,
|
||||
.bluelib select[disabled]:hover,
|
||||
body .input .status-disabled:hover,
|
||||
.bluelib .input .status-disabled:hover,
|
||||
body .input[disabled]:hover,
|
||||
.bluelib .input[disabled]:hover,
|
||||
body input .status-disabled:hover,
|
||||
.bluelib input .status-disabled:hover,
|
||||
body select .status-disabled:hover,
|
||||
.bluelib select .status-disabled:hover,
|
||||
body .input[disabled]:focus,
|
||||
.bluelib .input[disabled]:focus,
|
||||
body .input .status-disabled:hover,
|
||||
.bluelib .input .status-disabled:hover,
|
||||
body input[disabled]:focus,
|
||||
.bluelib input[disabled]:focus,
|
||||
body select[disabled]:focus,
|
||||
.bluelib select[disabled]:focus,
|
||||
body .input .status-disabled:focus,
|
||||
.bluelib .input .status-disabled:focus,
|
||||
body .input[disabled]:focus,
|
||||
.bluelib .input[disabled]:focus,
|
||||
body input .status-disabled:focus,
|
||||
.bluelib input .status-disabled:focus,
|
||||
body select .status-disabled:focus,
|
||||
.bluelib select .status-disabled:focus {
|
||||
.bluelib select .status-disabled:focus,
|
||||
body .input .status-disabled:focus,
|
||||
.bluelib .input .status-disabled:focus {
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||
}
|
||||
body .input[disabled]:hover::placeholder,
|
||||
.bluelib .input[disabled]:hover::placeholder,
|
||||
body input[disabled]:hover::placeholder,
|
||||
.bluelib input[disabled]:hover::placeholder,
|
||||
body select[disabled]:hover::placeholder,
|
||||
.bluelib select[disabled]:hover::placeholder,
|
||||
body .input .status-disabled:hover::placeholder,
|
||||
.bluelib .input .status-disabled:hover::placeholder,
|
||||
body .input[disabled]:hover::placeholder,
|
||||
.bluelib .input[disabled]:hover::placeholder,
|
||||
body input .status-disabled:hover::placeholder,
|
||||
.bluelib input .status-disabled:hover::placeholder,
|
||||
body select .status-disabled:hover::placeholder,
|
||||
.bluelib select .status-disabled:hover::placeholder,
|
||||
body .input[disabled]:focus::placeholder,
|
||||
.bluelib .input[disabled]:focus::placeholder,
|
||||
body .input .status-disabled:hover::placeholder,
|
||||
.bluelib .input .status-disabled:hover::placeholder,
|
||||
body input[disabled]:focus::placeholder,
|
||||
.bluelib input[disabled]:focus::placeholder,
|
||||
body select[disabled]:focus::placeholder,
|
||||
.bluelib select[disabled]:focus::placeholder,
|
||||
body .input .status-disabled:focus::placeholder,
|
||||
.bluelib .input .status-disabled:focus::placeholder,
|
||||
body .input[disabled]:focus::placeholder,
|
||||
.bluelib .input[disabled]:focus::placeholder,
|
||||
body input .status-disabled:focus::placeholder,
|
||||
.bluelib input .status-disabled:focus::placeholder,
|
||||
body select .status-disabled:focus::placeholder,
|
||||
.bluelib select .status-disabled:focus::placeholder {
|
||||
.bluelib select .status-disabled:focus::placeholder,
|
||||
body .input .status-disabled:focus::placeholder,
|
||||
.bluelib .input .status-disabled:focus::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
||||
}
|
||||
body .input-field,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -133,7 +133,6 @@
|
|||
src: url(https://fonts.gstatic.com/s/firasans/v11/va9B4kDNxMZdWfMOD5VnFK_uQQ.ttf) format('truetype');
|
||||
}
|
||||
.bluelib {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
background-color: #0d193b;
|
||||
--bluelib-color-r: 160;
|
||||
--bluelib-color-g: 204;
|
||||
|
|
@ -144,15 +143,84 @@
|
|||
.bluelib,
|
||||
.bluelib *,
|
||||
.bluelib .all {
|
||||
box-sizing: border-box;
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
/* Disable outline, as we already highlight focused elements; if it's not enough, let me know */
|
||||
outline: none !important;
|
||||
}
|
||||
.bluelib .container-main {
|
||||
.bluelib,
|
||||
.bluelib *,
|
||||
.bluelib .all,
|
||||
.bluelib::before,
|
||||
.bluelib *::before,
|
||||
.bluelib .all::before,
|
||||
.bluelib::after,
|
||||
.bluelib *::after,
|
||||
.bluelib .all::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.bluelib .layout {
|
||||
display: grid;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
.bluelib .layout-fill {
|
||||
padding: 4px;
|
||||
grid-template-areas: "single";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
.bluelib .layout-fill > main,
|
||||
.bluelib .layout-fill-single {
|
||||
grid-area: single;
|
||||
}
|
||||
.bluelib .layout-threecol {
|
||||
padding: 4px;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
.bluelib .layout-threecol {
|
||||
grid-template-areas: "left center right";
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
.bluelib .layout-threecol {
|
||||
grid-template-areas: "center center" "left right";
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
max-width: 1024px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
.bluelib .layout-threecol-left {
|
||||
grid-area: left;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
.bluelib .layout-threecol-left {
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
.bluelib .layout-threecol-left {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
.bluelib .layout-threecol-center {
|
||||
grid-area: center;
|
||||
max-width: 1024px;
|
||||
}
|
||||
.bluelib .layout-threecol-right {
|
||||
grid-area: right;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
.bluelib .layout-threecol-right {
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
.bluelib .layout-threecol-right {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
.bluelib .panel {
|
||||
margin: 8px 0;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -134,7 +134,6 @@
|
|||
}
|
||||
body,
|
||||
.bluelib {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
background-color: #0d193b;
|
||||
--bluelib-color-r: 160;
|
||||
--bluelib-color-g: 204;
|
||||
|
|
@ -148,18 +147,105 @@ body *,
|
|||
.bluelib *,
|
||||
body .all,
|
||||
.bluelib .all {
|
||||
box-sizing: border-box;
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
/* Disable outline, as we already highlight focused elements; if it's not enough, let me know */
|
||||
outline: none !important;
|
||||
}
|
||||
body main,
|
||||
.bluelib main,
|
||||
body .container-main,
|
||||
.bluelib .container-main {
|
||||
body,
|
||||
.bluelib,
|
||||
body *,
|
||||
.bluelib *,
|
||||
body .all,
|
||||
.bluelib .all,
|
||||
body::before,
|
||||
.bluelib::before,
|
||||
body *::before,
|
||||
.bluelib *::before,
|
||||
body .all::before,
|
||||
.bluelib .all::before,
|
||||
body::after,
|
||||
.bluelib::after,
|
||||
body *::after,
|
||||
.bluelib *::after,
|
||||
body .all::after,
|
||||
.bluelib .all::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body .layout,
|
||||
.bluelib .layout {
|
||||
display: grid;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
body .layout-fill,
|
||||
.bluelib .layout-fill {
|
||||
padding: 4px;
|
||||
grid-template-areas: "single";
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
body .layout-fill-single,
|
||||
.bluelib .layout-fill-single {
|
||||
grid-area: single;
|
||||
}
|
||||
body .layout-threecol,
|
||||
.bluelib .layout-threecol {
|
||||
padding: 4px;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
body .layout-threecol,
|
||||
.bluelib .layout-threecol {
|
||||
grid-template-areas: "left center right";
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
body .layout-threecol,
|
||||
.bluelib .layout-threecol {
|
||||
grid-template-areas: "center center" "left right";
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
max-width: 1024px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1280px;
|
||||
}
|
||||
}
|
||||
body .layout-threecol-left,
|
||||
.bluelib .layout-threecol-left {
|
||||
grid-area: left;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
body .layout-threecol-left,
|
||||
.bluelib .layout-threecol-left {
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
body .layout-threecol-left,
|
||||
.bluelib .layout-threecol-left {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
body .layout-threecol-center,
|
||||
.bluelib .layout-threecol-center {
|
||||
grid-area: center;
|
||||
max-width: 1024px;
|
||||
}
|
||||
body .layout-threecol-right,
|
||||
.bluelib .layout-threecol-right {
|
||||
grid-area: right;
|
||||
}
|
||||
@media screen and (min-width: 1281px) {
|
||||
body .layout-threecol-right,
|
||||
.bluelib .layout-threecol-right {
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1280px) {
|
||||
body .layout-threecol-right,
|
||||
.bluelib .layout-threecol-right {
|
||||
justify-self: stretch;
|
||||
}
|
||||
}
|
||||
body .panel,
|
||||
.bluelib .panel,
|
||||
|
|
@ -874,12 +960,12 @@ body .form-input,
|
|||
justify-self: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
body form .button,
|
||||
.bluelib form .button,
|
||||
body button,
|
||||
.bluelib button,
|
||||
body form button,
|
||||
.bluelib form button,
|
||||
body input[type="submit"],
|
||||
.bluelib input[type="submit"],
|
||||
body .button,
|
||||
.bluelib .button,
|
||||
body form button,
|
||||
.bluelib form button,
|
||||
body .form-submit,
|
||||
|
|
@ -906,12 +992,12 @@ body .form-buttons:last-child,
|
|||
.bluelib .form-buttons:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
body .button,
|
||||
.bluelib .button,
|
||||
body button,
|
||||
.bluelib button,
|
||||
body input[type="submit"],
|
||||
.bluelib input[type="submit"] {
|
||||
.bluelib input[type="submit"],
|
||||
body .button,
|
||||
.bluelib .button {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -924,56 +1010,56 @@ body input[type="submit"],
|
|||
font-size: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
body .button:hover,
|
||||
.bluelib .button:hover,
|
||||
body button:hover,
|
||||
.bluelib button:hover,
|
||||
body input[type="submit"]:hover,
|
||||
.bluelib input[type="submit"]:hover {
|
||||
.bluelib input[type="submit"]:hover,
|
||||
body .button:hover,
|
||||
.bluelib .button:hover {
|
||||
background-color: rgba(calc(var(--bluelib-color-r) + 20), calc(var(--bluelib-color-g) + 20), calc(var(--bluelib-color-b) + 20), 1);
|
||||
}
|
||||
body .button:focus-visible,
|
||||
.bluelib .button:focus-visible,
|
||||
body button:focus-visible,
|
||||
.bluelib button:focus-visible,
|
||||
body input[type="submit"]:focus-visible,
|
||||
.bluelib input[type="submit"]:focus-visible {
|
||||
.bluelib input[type="submit"]:focus-visible,
|
||||
body .button:focus-visible,
|
||||
.bluelib .button:focus-visible {
|
||||
outline: 4px solid rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7) !important;
|
||||
}
|
||||
body .button:active,
|
||||
.bluelib .button:active,
|
||||
body button:active,
|
||||
.bluelib button:active,
|
||||
body input[type="submit"]:active,
|
||||
.bluelib input[type="submit"]:active {
|
||||
.bluelib input[type="submit"]:active,
|
||||
body .button:active,
|
||||
.bluelib .button:active {
|
||||
background-color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
||||
}
|
||||
body .button[disabled]:hover,
|
||||
.bluelib .button[disabled]:hover,
|
||||
body button[disabled]:hover,
|
||||
.bluelib button[disabled]:hover,
|
||||
body input[type="submit"][disabled]:hover,
|
||||
.bluelib input[type="submit"][disabled]:hover,
|
||||
body .button .status-disabled:hover,
|
||||
.bluelib .button .status-disabled:hover,
|
||||
body .button[disabled]:hover,
|
||||
.bluelib .button[disabled]:hover,
|
||||
body button .status-disabled:hover,
|
||||
.bluelib button .status-disabled:hover,
|
||||
body input[type="submit"] .status-disabled:hover,
|
||||
.bluelib input[type="submit"] .status-disabled:hover {
|
||||
.bluelib input[type="submit"] .status-disabled:hover,
|
||||
body .button .status-disabled:hover,
|
||||
.bluelib .button .status-disabled:hover {
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
}
|
||||
body .button[disabled]:active,
|
||||
.bluelib .button[disabled]:active,
|
||||
body button[disabled]:active,
|
||||
.bluelib button[disabled]:active,
|
||||
body input[type="submit"][disabled]:active,
|
||||
.bluelib input[type="submit"][disabled]:active,
|
||||
body .button .status-disabled:active,
|
||||
.bluelib .button .status-disabled:active,
|
||||
body .button[disabled]:active,
|
||||
.bluelib .button[disabled]:active,
|
||||
body button .status-disabled:active,
|
||||
.bluelib button .status-disabled:active,
|
||||
body input[type="submit"] .status-disabled:active,
|
||||
.bluelib input[type="submit"] .status-disabled:active {
|
||||
.bluelib input[type="submit"] .status-disabled:active,
|
||||
body .button .status-disabled:active,
|
||||
.bluelib .button .status-disabled:active {
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
}
|
||||
body .button-fill-width,
|
||||
|
|
@ -1072,12 +1158,12 @@ body .button-toggle-on .status-disabled:active,
|
|||
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.2);
|
||||
}
|
||||
body .input,
|
||||
.bluelib .input,
|
||||
body input,
|
||||
.bluelib input,
|
||||
body select,
|
||||
.bluelib select {
|
||||
.bluelib select,
|
||||
body .input,
|
||||
.bluelib .input {
|
||||
border-style: solid;
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
|
|
@ -1085,135 +1171,135 @@ body select,
|
|||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
body .input::placeholder,
|
||||
.bluelib .input::placeholder,
|
||||
body input::placeholder,
|
||||
.bluelib input::placeholder,
|
||||
body select::placeholder,
|
||||
.bluelib select::placeholder {
|
||||
.bluelib select::placeholder,
|
||||
body .input::placeholder,
|
||||
.bluelib .input::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
||||
opacity: 1;
|
||||
}
|
||||
body .input:optional,
|
||||
.bluelib .input:optional,
|
||||
body input:optional,
|
||||
.bluelib input:optional,
|
||||
body select:optional,
|
||||
.bluelib select:optional,
|
||||
body .input:optional::placeholder,
|
||||
.bluelib .input:optional::placeholder,
|
||||
body .input:optional,
|
||||
.bluelib .input:optional,
|
||||
body input:optional::placeholder,
|
||||
.bluelib input:optional::placeholder,
|
||||
body select:optional::placeholder,
|
||||
.bluelib select:optional::placeholder {
|
||||
.bluelib select:optional::placeholder,
|
||||
body .input:optional::placeholder,
|
||||
.bluelib .input:optional::placeholder {
|
||||
font-style: italic;
|
||||
}
|
||||
body .input:invalid:not(:placeholder-shown),
|
||||
.bluelib .input:invalid:not(:placeholder-shown),
|
||||
body input:invalid:not(:placeholder-shown),
|
||||
.bluelib input:invalid:not(:placeholder-shown),
|
||||
body select:invalid:not(:placeholder-shown),
|
||||
.bluelib select:invalid:not(:placeholder-shown) {
|
||||
.bluelib select:invalid:not(:placeholder-shown),
|
||||
body .input:invalid:not(:placeholder-shown),
|
||||
.bluelib .input:invalid:not(:placeholder-shown) {
|
||||
--bluelib-color-r: 255;
|
||||
--bluelib-color-g: 125;
|
||||
--bluelib-color-b: 125;
|
||||
}
|
||||
body .input:hover,
|
||||
.bluelib .input:hover,
|
||||
body input:hover,
|
||||
.bluelib input:hover,
|
||||
body select:hover,
|
||||
.bluelib select:hover,
|
||||
body .input:focus,
|
||||
.bluelib .input:focus,
|
||||
body .input:hover,
|
||||
.bluelib .input:hover,
|
||||
body input:focus,
|
||||
.bluelib input:focus,
|
||||
body select:focus,
|
||||
.bluelib select:focus {
|
||||
.bluelib select:focus,
|
||||
body .input:focus,
|
||||
.bluelib .input:focus {
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.6);
|
||||
color: rgba(calc(var(--bluelib-color-r) + 50), calc(var(--bluelib-color-g) + 50), calc(var(--bluelib-color-b) + 50), 1);
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
|
||||
}
|
||||
body .input:hover::placeholder,
|
||||
.bluelib .input:hover::placeholder,
|
||||
body input:hover::placeholder,
|
||||
.bluelib input:hover::placeholder,
|
||||
body select:hover::placeholder,
|
||||
.bluelib select:hover::placeholder,
|
||||
body .input:focus::placeholder,
|
||||
.bluelib .input:focus::placeholder,
|
||||
body .input:hover::placeholder,
|
||||
.bluelib .input:hover::placeholder,
|
||||
body input:focus::placeholder,
|
||||
.bluelib input:focus::placeholder,
|
||||
body select:focus::placeholder,
|
||||
.bluelib select:focus::placeholder {
|
||||
.bluelib select:focus::placeholder,
|
||||
body .input:focus::placeholder,
|
||||
.bluelib .input:focus::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.7);
|
||||
}
|
||||
body .input[disabled],
|
||||
.bluelib .input[disabled],
|
||||
body input[disabled],
|
||||
.bluelib input[disabled],
|
||||
body select[disabled],
|
||||
.bluelib select[disabled],
|
||||
body .input .status-disabled,
|
||||
.bluelib .input .status-disabled,
|
||||
body .input[disabled],
|
||||
.bluelib .input[disabled],
|
||||
body input .status-disabled,
|
||||
.bluelib input .status-disabled,
|
||||
body select .status-disabled,
|
||||
.bluelib select .status-disabled {
|
||||
.bluelib select .status-disabled,
|
||||
body .input .status-disabled,
|
||||
.bluelib .input .status-disabled {
|
||||
border-style: dashed;
|
||||
}
|
||||
body .input[disabled]:hover,
|
||||
.bluelib .input[disabled]:hover,
|
||||
body input[disabled]:hover,
|
||||
.bluelib input[disabled]:hover,
|
||||
body select[disabled]:hover,
|
||||
.bluelib select[disabled]:hover,
|
||||
body .input .status-disabled:hover,
|
||||
.bluelib .input .status-disabled:hover,
|
||||
body .input[disabled]:hover,
|
||||
.bluelib .input[disabled]:hover,
|
||||
body input .status-disabled:hover,
|
||||
.bluelib input .status-disabled:hover,
|
||||
body select .status-disabled:hover,
|
||||
.bluelib select .status-disabled:hover,
|
||||
body .input[disabled]:focus,
|
||||
.bluelib .input[disabled]:focus,
|
||||
body .input .status-disabled:hover,
|
||||
.bluelib .input .status-disabled:hover,
|
||||
body input[disabled]:focus,
|
||||
.bluelib input[disabled]:focus,
|
||||
body select[disabled]:focus,
|
||||
.bluelib select[disabled]:focus,
|
||||
body .input .status-disabled:focus,
|
||||
.bluelib .input .status-disabled:focus,
|
||||
body .input[disabled]:focus,
|
||||
.bluelib .input[disabled]:focus,
|
||||
body input .status-disabled:focus,
|
||||
.bluelib input .status-disabled:focus,
|
||||
body select .status-disabled:focus,
|
||||
.bluelib select .status-disabled:focus {
|
||||
.bluelib select .status-disabled:focus,
|
||||
body .input .status-disabled:focus,
|
||||
.bluelib .input .status-disabled:focus {
|
||||
border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.3);
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
|
||||
background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
|
||||
}
|
||||
body .input[disabled]:hover::placeholder,
|
||||
.bluelib .input[disabled]:hover::placeholder,
|
||||
body input[disabled]:hover::placeholder,
|
||||
.bluelib input[disabled]:hover::placeholder,
|
||||
body select[disabled]:hover::placeholder,
|
||||
.bluelib select[disabled]:hover::placeholder,
|
||||
body .input .status-disabled:hover::placeholder,
|
||||
.bluelib .input .status-disabled:hover::placeholder,
|
||||
body .input[disabled]:hover::placeholder,
|
||||
.bluelib .input[disabled]:hover::placeholder,
|
||||
body input .status-disabled:hover::placeholder,
|
||||
.bluelib input .status-disabled:hover::placeholder,
|
||||
body select .status-disabled:hover::placeholder,
|
||||
.bluelib select .status-disabled:hover::placeholder,
|
||||
body .input[disabled]:focus::placeholder,
|
||||
.bluelib .input[disabled]:focus::placeholder,
|
||||
body .input .status-disabled:hover::placeholder,
|
||||
.bluelib .input .status-disabled:hover::placeholder,
|
||||
body input[disabled]:focus::placeholder,
|
||||
.bluelib input[disabled]:focus::placeholder,
|
||||
body select[disabled]:focus::placeholder,
|
||||
.bluelib select[disabled]:focus::placeholder,
|
||||
body .input .status-disabled:focus::placeholder,
|
||||
.bluelib .input .status-disabled:focus::placeholder,
|
||||
body .input[disabled]:focus::placeholder,
|
||||
.bluelib .input[disabled]:focus::placeholder,
|
||||
body input .status-disabled:focus::placeholder,
|
||||
.bluelib input .status-disabled:focus::placeholder,
|
||||
body select .status-disabled:focus::placeholder,
|
||||
.bluelib select .status-disabled:focus::placeholder {
|
||||
.bluelib select .status-disabled:focus::placeholder,
|
||||
body .input .status-disabled:focus::placeholder,
|
||||
.bluelib .input .status-disabled:focus::placeholder {
|
||||
color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.4);
|
||||
}
|
||||
body .input-field,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,14 @@
|
|||
@bluelib: ~".bluelib";
|
||||
@all: ~"*, .all";
|
||||
@container-main: ~".container-main";
|
||||
|
||||
@layout: ~".layout";
|
||||
@layout-fill: ~".layout-fill";
|
||||
@layout-fill-single: ~"@{layout-fill} > main, .layout-fill-single";
|
||||
@layout-threecol: ~".layout-threecol";
|
||||
@layout-threecol-left: ~".layout-threecol-left";
|
||||
@layout-threecol-center: ~".layout-threecol-center";
|
||||
@layout-threecol-right: ~".layout-threecol-right";
|
||||
|
||||
@panel: ~".panel";
|
||||
@panel-box: ~".panel-box";
|
||||
@panel-blockquote: ~".panel-blockquote";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,14 @@
|
|||
@bluelib: ~"body, .bluelib";
|
||||
@all: ~"*, .all";
|
||||
@container-main: ~"main, .container-main";
|
||||
|
||||
@layout: ~".layout";
|
||||
@layout-fill: ~".layout-fill";
|
||||
@layout-fill-single: ~".layout-fill-single";
|
||||
@layout-threecol: ~".layout-threecol";
|
||||
@layout-threecol-left: ~".layout-threecol-left";
|
||||
@layout-threecol-center: ~".layout-threecol-center";
|
||||
@layout-threecol-right: ~".layout-threecol-right";
|
||||
|
||||
@panel: ~".panel, .panel-box, section, .panel-blockquote, blockquote, .panel-aside, aside, .panel-split";
|
||||
@panel-box: ~".panel-box, section, .panel-blockquote, blockquote, .panel-aside, aside";
|
||||
@panel-blockquote: ~".panel-blockquote, blockquote";
|
||||
|
|
@ -17,12 +25,12 @@
|
|||
@form-input: ~"form @{input-field}, form @{input-select}, .form-input";
|
||||
@form-submit: ~'form @{button}, form button, .form-submit';
|
||||
@form-buttons: ~'.form-buttons';
|
||||
@button: ~'.button, button, input[type="submit"]';
|
||||
@button: ~'button, input[type="submit"], .button';
|
||||
@button-fill-width: ~'.button-fill-width';
|
||||
@button-toggle: ~'.button-toggle';
|
||||
@button-toggle-off: ~'.button-toggle-off';
|
||||
@button-toggle-on: ~'.button-toggle-on';
|
||||
@input: ~'.input, input, select';
|
||||
@input: ~'input, select, .input';
|
||||
@input-field: ~'.input-field, input[type="color"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="file"], input[type="image"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]';
|
||||
@input-select: ~'select:not([multiple]), .input-select';
|
||||
@input-select-optgroup: ~'optgroup, .input-select-optgroup';
|
||||
|
|
|
|||
Loading…
Reference in a new issue