From feb4c434d1723a38a8991e1be0fc8ca5536d9b08 Mon Sep 17 00:00:00 2001 From: abias Date: Mon, 29 May 2023 20:40:00 -0400 Subject: [PATCH 01/26] Refactor route data --- src/server/index.tsx | 21 +++- .../components/community/communities.tsx | 20 +++- src/shared/components/community/community.tsx | 51 ++++---- src/shared/components/home/admin-settings.tsx | 38 +++--- src/shared/components/home/home.tsx | 48 ++++---- src/shared/components/home/instances.tsx | 24 ++-- src/shared/components/modlog.tsx | 69 ++++++----- src/shared/components/person/inbox.tsx | 107 +++++++++-------- src/shared/components/person/profile.tsx | 17 ++- .../person/registration-applications.tsx | 41 ++++--- src/shared/components/person/reports.tsx | 111 ++++++++++-------- src/shared/components/post/create-post.tsx | 29 +++-- src/shared/components/post/post.tsx | 41 ++++--- .../create-private-message.tsx | 26 ++-- src/shared/components/search.tsx | 95 +++++++++------ src/shared/interfaces.ts | 8 +- src/shared/routes.ts | 7 +- src/shared/utils.ts | 6 +- 18 files changed, 451 insertions(+), 308 deletions(-) diff --git a/src/server/index.tsx b/src/server/index.tsx index a93595e0..4ab4f76f 100644 --- a/src/server/index.tsx +++ b/src/server/index.tsx @@ -129,7 +129,7 @@ server.get("/*", async (req, res) => { // This bypasses errors, so that the client can hit the error on its own, // in order to remove the jwt on the browser. Necessary for wrong jwts let site: GetSiteResponse | undefined = undefined; - let routeData: any[] = []; + let routeData: Record = {}; let errorPageData: ErrorPageData | undefined; try { let try_site: any = await client.getSite(getSiteForm); @@ -160,18 +160,27 @@ server.get("/*", async (req, res) => { }; if (activeRoute?.fetchInitialData) { - routeData = await Promise.all([ - ...activeRoute.fetchInitialData(initialFetchReq), - ]); + const routeDataKeysAndVals = await Promise.all( + Object.entries(activeRoute.fetchInitialData(initialFetchReq)).map( + async ([key, val]) => [key, await val] + ) + ); + + routeData = routeDataKeysAndVals.reduce((acc, [key, val]) => { + acc[key] = val; + + return acc; + }, {}); } } } catch (error) { errorPageData = getErrorPageData(error, site); } + const error = Object.values(routeData).find(val => val?.error)?.error; + // Redirect to the 404 if there's an API error - if (routeData[0] && routeData[0].error) { - const error = routeData[0].error; + if (error) { console.error(error); if (error === "instance_is_private") { return res.redirect(`/signup`); diff --git a/src/shared/components/community/communities.tsx b/src/shared/components/community/communities.tsx index 2e147b83..53e0e967 100644 --- a/src/shared/components/community/communities.tsx +++ b/src/shared/components/community/communities.tsx @@ -16,6 +16,7 @@ import { i18n } from "../../i18next"; import { WebSocketService } from "../../services"; import { QueryParams, + WithPromiseKeys, getPageFromString, getQueryParams, getQueryString, @@ -36,6 +37,10 @@ import { CommunityLink } from "./community-link"; const communityLimit = 50; +interface CommunitiesData { + listCommunitiesResponse: ListCommunitiesResponse; +} + interface CommunitiesState { listCommunitiesResponse?: ListCommunitiesResponse; loading: boolean; @@ -88,7 +93,7 @@ function refetch() { export class Communities extends Component { private subscription?: Subscription; - private isoData = setIsoData(this.context); + private isoData = setIsoData(this.context); state: CommunitiesState = { loading: true, siteRes: this.isoData.site_res, @@ -105,10 +110,11 @@ export class Communities extends Component { // Only fetch the data if coming from another route if (this.isoData.path === this.context.router.route.match.url) { - const listRes = this.isoData.routeData[0] as ListCommunitiesResponse; + const { listCommunitiesResponse } = this.isoData.routeData; + this.state = { ...this.state, - listCommunitiesResponse: listRes, + listCommunitiesResponse, loading: false, }; } else { @@ -312,7 +318,9 @@ export class Communities extends Component { query: { listingType, page }, client, auth, - }: InitialFetchRequest>): Promise[] { + }: InitialFetchRequest< + QueryParams + >): WithPromiseKeys { const listCommunitiesForm: ListCommunities = { type_: getListingTypeFromQuery(listingType), sort: "TopMonth", @@ -321,7 +329,9 @@ export class Communities extends Component { auth: auth, }; - return [client.listCommunities(listCommunitiesForm)]; + return { + listCommunitiesResponse: client.listCommunities(listCommunitiesForm), + }; } parseMessage(msg: any) { diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx index af562c19..f3ab1e21 100644 --- a/src/shared/components/community/community.tsx +++ b/src/shared/components/community/community.tsx @@ -33,6 +33,7 @@ import { import { UserService, WebSocketService } from "../../services"; import { QueryParams, + WithPromiseKeys, commentsToFlatNodes, communityRSSUrl, createCommentLikeRes, @@ -76,6 +77,12 @@ import { SiteSidebar } from "../home/site-sidebar"; import { PostListings } from "../post/post-listings"; import { CommunityLink } from "./community-link"; +interface CommunityData { + communityResponse: GetCommunityResponse; + postsResponse?: GetPostsResponse; + commentsResponse?: GetCommentsResponse; +} + interface State { communityRes?: GetCommunityResponse; communityLoading: boolean; @@ -115,7 +122,7 @@ export class Community extends Component< RouteComponentProps<{ name: string }>, State > { - private isoData = setIsoData(this.context); + private isoData = setIsoData(this.context); private subscription?: Subscription; state: State = { communityLoading: true, @@ -137,23 +144,20 @@ export class Community extends Component< // Only fetch the data if coming from another route if (this.isoData.path == this.context.router.route.match.url) { + const { communityResponse, commentsResponse, postsResponse } = + this.isoData.routeData; + this.state = { ...this.state, - communityRes: this.isoData.routeData[0] as GetCommunityResponse, + communityRes: communityResponse, }; - const postsRes = this.isoData.routeData[1] as - | GetPostsResponse - | undefined; - const commentsRes = this.isoData.routeData[2] as - | GetCommentsResponse - | undefined; - if (postsRes) { - this.state = { ...this.state, posts: postsRes.posts }; + if (postsResponse) { + this.state = { ...this.state, posts: postsResponse.posts }; } - if (commentsRes) { - this.state = { ...this.state, comments: commentsRes.comments }; + if (commentsResponse) { + this.state = { ...this.state, comments: commentsResponse.comments }; } this.state = { @@ -189,16 +193,16 @@ export class Community extends Component< path, query: { dataType: urlDataType, page: urlPage, sort: urlSort }, auth, - }: InitialFetchRequest>): Promise[] { + }: InitialFetchRequest< + QueryParams + >): WithPromiseKeys { const pathSplit = path.split("/"); - const promises: Promise[] = []; const communityName = pathSplit[2]; const communityForm: GetCommunity = { name: communityName, auth, }; - promises.push(client.getCommunity(communityForm)); const dataType = getDataTypeFromQuery(urlDataType); @@ -206,6 +210,9 @@ export class Community extends Component< const page = getPageFromString(urlPage); + let postsResponse: Promise | undefined = undefined; + let commentsResponse: Promise | undefined = undefined; + if (dataType === DataType.Post) { const getPostsForm: GetPosts = { community_name: communityName, @@ -216,8 +223,8 @@ export class Community extends Component< saved_only: false, auth, }; - promises.push(client.getPosts(getPostsForm)); - promises.push(Promise.resolve()); + + postsResponse = client.getPosts(getPostsForm); } else { const getCommentsForm: GetComments = { community_name: communityName, @@ -228,11 +235,15 @@ export class Community extends Component< saved_only: false, auth, }; - promises.push(Promise.resolve()); - promises.push(client.getComments(getCommentsForm)); + + commentsResponse = client.getComments(getCommentsForm); } - return promises; + return { + communityResponse: client.getCommunity(communityForm), + commentsResponse, + postsResponse, + }; } get documentTitle(): string { diff --git a/src/shared/components/home/admin-settings.tsx b/src/shared/components/home/admin-settings.tsx index d266db58..4419cf36 100644 --- a/src/shared/components/home/admin-settings.tsx +++ b/src/shared/components/home/admin-settings.tsx @@ -2,7 +2,6 @@ import autosize from "autosize"; import { Component, linkEvent } from "inferno"; import { BannedPersonsResponse, - GetBannedPersons, GetFederatedInstancesResponse, GetSiteResponse, PersonView, @@ -16,6 +15,7 @@ import { i18n } from "../../i18next"; import { InitialFetchRequest } from "../../interfaces"; import { WebSocketService } from "../../services"; import { + WithPromiseKeys, capitalizeFirstLetter, isBrowser, myAuth, @@ -35,6 +35,11 @@ import RateLimitForm from "./rate-limit-form"; import { SiteForm } from "./site-form"; import { TaglineForm } from "./tagline-form"; +interface AdminSettingsData { + bannedPersonsResponse: BannedPersonsResponse; + federatedInstancesResponse: GetFederatedInstancesResponse; +} + interface AdminSettingsState { siteRes: GetSiteResponse; instancesRes?: GetFederatedInstancesResponse; @@ -45,7 +50,7 @@ interface AdminSettingsState { export class AdminSettings extends Component { private siteConfigTextAreaId = `site-config-${randomStr()}`; - private isoData = setIsoData(this.context); + private isoData = setIsoData(this.context); private subscription?: Subscription; state: AdminSettingsState = { siteRes: this.isoData.site_res, @@ -62,11 +67,13 @@ export class AdminSettings extends Component { // Only fetch the data if coming from another route if (this.isoData.path == this.context.router.route.match.url) { + const { bannedPersonsResponse, federatedInstancesResponse } = + this.isoData.routeData; + this.state = { ...this.state, - banned: (this.isoData.routeData[0] as BannedPersonsResponse).banned, - instancesRes: this.isoData - .routeData[1] as GetFederatedInstancesResponse, + banned: bannedPersonsResponse.banned, + instancesRes: federatedInstancesResponse, loading: false, }; } else { @@ -84,17 +91,16 @@ export class AdminSettings extends Component { } } - static fetchInitialData(req: InitialFetchRequest): Promise[] { - let promises: Promise[] = []; - - let auth = req.auth; - if (auth) { - let bannedPersonsForm: GetBannedPersons = { auth }; - promises.push(req.client.getBannedPersons(bannedPersonsForm)); - promises.push(req.client.getFederatedInstances({ auth })); - } - - return promises; + static fetchInitialData({ + auth, + client, + }: InitialFetchRequest): WithPromiseKeys { + return { + bannedPersonsResponse: client.getBannedPersons({ auth: auth as string }), + federatedInstancesResponse: client.getFederatedInstances({ + auth: auth as string, + }) as Promise, + }; } componentDidMount() { diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index 52a82126..e85c3e66 100644 --- a/src/shared/components/home/home.tsx +++ b/src/shared/components/home/home.tsx @@ -69,6 +69,7 @@ import { toast, trendingFetchLimit, updatePersonBlock, + WithPromiseKeys, wsClient, wsSubscribe, } from "../../utils"; @@ -103,6 +104,12 @@ interface HomeProps { page: number; } +interface HomeData { + postsResponse?: GetPostsResponse; + commentsResponse?: GetCommentsResponse; + trendingResponse: ListCommunitiesResponse; +} + function getDataTypeFromQuery(type?: string): DataType { return type ? DataType[type] : DataType.Post; } @@ -237,7 +244,7 @@ function getRss(listingType: ListingType) { } export class Home extends Component { - private isoData = setIsoData(this.context); + private isoData = setIsoData(this.context); private subscription?: Subscription; state: HomeState = { trendingCommunities: [], @@ -264,22 +271,15 @@ export class Home extends Component { // Only fetch the data if coming from another route if (this.isoData.path === this.context.router.route.match.url) { - const postsRes = this.isoData.routeData[0] as - | GetPostsResponse - | undefined; - const commentsRes = this.isoData.routeData[1] as - | GetCommentsResponse - | undefined; - const trendingRes = this.isoData.routeData[2] as - | ListCommunitiesResponse - | undefined; + const { trendingResponse, commentsResponse, postsResponse } = + this.isoData.routeData; - if (postsRes) { - this.state = { ...this.state, posts: postsRes.posts }; + if (postsResponse) { + this.state = { ...this.state, posts: postsResponse.posts }; } - if (commentsRes) { - this.state = { ...this.state, comments: commentsRes.comments }; + if (commentsResponse) { + this.state = { ...this.state, comments: commentsResponse.comments }; } if (isBrowser()) { @@ -290,7 +290,7 @@ export class Home extends Component { const taglines = this.state?.siteRes?.taglines ?? []; this.state = { ...this.state, - trendingCommunities: trendingRes?.communities ?? [], + trendingCommunities: trendingResponse?.communities ?? [], loading: false, tagline: getRandomFromList(taglines)?.content, }; @@ -317,7 +317,7 @@ export class Home extends Component { client, auth, query: { dataType: urlDataType, listingType, page: urlPage, sort: urlSort }, - }: InitialFetchRequest>): Promise[] { + }: InitialFetchRequest>): WithPromiseKeys { const dataType = getDataTypeFromQuery(urlDataType); // TODO figure out auth default_listingType, default_sort_type @@ -328,6 +328,9 @@ export class Home extends Component { const promises: Promise[] = []; + let postsResponse: Promise | undefined = undefined; + let commentsResponse: Promise | undefined = undefined; + if (dataType === DataType.Post) { const getPostsForm: GetPosts = { type_, @@ -338,8 +341,7 @@ export class Home extends Component { auth, }; - promises.push(client.getPosts(getPostsForm)); - promises.push(Promise.resolve()); + postsResponse = client.getPosts(getPostsForm); } else { const getCommentsForm: GetComments = { page, @@ -349,8 +351,8 @@ export class Home extends Component { saved_only: false, auth, }; - promises.push(Promise.resolve()); - promises.push(client.getComments(getCommentsForm)); + + commentsResponse = client.getComments(getCommentsForm); } const trendingCommunitiesForm: ListCommunities = { @@ -361,7 +363,11 @@ export class Home extends Component { }; promises.push(client.listCommunities(trendingCommunitiesForm)); - return promises; + return { + trendingResponse: client.listCommunities(trendingCommunitiesForm), + commentsResponse, + postsResponse, + }; } get documentTitle(): string { diff --git a/src/shared/components/home/instances.tsx b/src/shared/components/home/instances.tsx index 674374d0..fd1ed617 100644 --- a/src/shared/components/home/instances.tsx +++ b/src/shared/components/home/instances.tsx @@ -12,6 +12,7 @@ import { i18n } from "../../i18next"; import { InitialFetchRequest } from "../../interfaces"; import { WebSocketService } from "../../services"; import { + WithPromiseKeys, isBrowser, relTags, setIsoData, @@ -21,6 +22,10 @@ import { } from "../../utils"; import { HtmlTags } from "../common/html-tags"; +interface InstancesData { + federatedInstancesResponse: GetFederatedInstancesResponse; +} + interface InstancesState { siteRes: GetSiteResponse; instancesRes?: GetFederatedInstancesResponse; @@ -28,7 +33,7 @@ interface InstancesState { } export class Instances extends Component { - private isoData = setIsoData(this.context); + private isoData = setIsoData(this.context); state: InstancesState = { siteRes: this.isoData.site_res, loading: true, @@ -45,8 +50,7 @@ export class Instances extends Component { if (this.isoData.path == this.context.router.route.match.url) { this.state = { ...this.state, - instancesRes: this.isoData - .routeData[0] as GetFederatedInstancesResponse, + instancesRes: this.isoData.routeData.federatedInstancesResponse, loading: false, }; } else { @@ -54,12 +58,14 @@ export class Instances extends Component { } } - static fetchInitialData(req: InitialFetchRequest): Promise[] { - let promises: Promise[] = []; - - promises.push(req.client.getFederatedInstances({})); - - return promises; + static fetchInitialData({ + client, + }: InitialFetchRequest): WithPromiseKeys { + return { + federatedInstancesResponse: client.getFederatedInstances( + {} + ) as Promise, + }; } get documentTitle(): string { diff --git a/src/shared/components/modlog.tsx b/src/shared/components/modlog.tsx index ef28816b..cb4b37f4 100644 --- a/src/shared/components/modlog.tsx +++ b/src/shared/components/modlog.tsx @@ -39,6 +39,7 @@ import { WebSocketService } from "../services"; import { Choice, QueryParams, + WithPromiseKeys, amAdmin, amMod, debounce, @@ -83,6 +84,13 @@ type View = | AdminPurgePostView | AdminPurgeCommentView; +interface ModlogData { + modlogResponse: GetModlogResponse; + communityResponse?: GetCommunityResponse; + modUserResponse?: GetPersonDetailsResponse; + userResponse?: GetPersonDetailsResponse; +} + interface ModlogType { id: number; type_: ModlogActionType; @@ -642,7 +650,7 @@ export class Modlog extends Component< RouteComponentProps<{ communityId?: string }>, ModlogState > { - private isoData = setIsoData(this.context); + private isoData = setIsoData(this.context); private subscription?: Subscription; state: ModlogState = { @@ -667,35 +675,35 @@ export class Modlog extends Component< // Only fetch the data if coming from another route if (this.isoData.path === this.context.router.route.match.url) { + const { + modlogResponse, + communityResponse, + modUserResponse, + userResponse, + } = this.isoData.routeData; + this.state = { ...this.state, - res: this.isoData.routeData[0] as GetModlogResponse, + res: modlogResponse, }; - const communityRes: GetCommunityResponse | undefined = - this.isoData.routeData[1]; - // Getting the moderators this.state = { ...this.state, - communityMods: communityRes?.moderators, + communityMods: communityResponse?.moderators, }; - const filteredModRes: GetPersonDetailsResponse | undefined = - this.isoData.routeData[2]; - if (filteredModRes) { + if (modUserResponse) { this.state = { ...this.state, - modSearchOptions: [personToChoice(filteredModRes.person_view)], + modSearchOptions: [personToChoice(modUserResponse.person_view)], }; } - const filteredUserRes: GetPersonDetailsResponse | undefined = - this.isoData.routeData[3]; - if (filteredUserRes) { + if (userResponse) { this.state = { ...this.state, - userSearchOptions: [personToChoice(filteredUserRes.person_view)], + userSearchOptions: [personToChoice(userResponse.person_view)], }; } @@ -986,9 +994,10 @@ export class Modlog extends Component< query: { modId: urlModId, page, userId: urlUserId, actionType }, auth, site, - }: InitialFetchRequest>): Promise[] { + }: InitialFetchRequest< + QueryParams + >): WithPromiseKeys { const pathSplit = path.split("/"); - const promises: Promise[] = []; const communityId = getIdFromString(pathSplit[2]); const modId = !site.site_view.local_site.hide_modlog_mod_names ? getIdFromString(urlModId) @@ -1005,41 +1014,47 @@ export class Modlog extends Component< auth, }; - promises.push(client.getModlog(modlogForm)); + let communityResponse: Promise | undefined = + undefined; if (communityId) { const communityForm: GetCommunity = { id: communityId, auth, }; - promises.push(client.getCommunity(communityForm)); - } else { - promises.push(Promise.resolve()); + + communityResponse = client.getCommunity(communityForm); } + let modUserResponse: Promise | undefined = + undefined; + if (modId) { const getPersonForm: GetPersonDetails = { person_id: modId, auth, }; - promises.push(client.getPersonDetails(getPersonForm)); - } else { - promises.push(Promise.resolve()); + modUserResponse = client.getPersonDetails(getPersonForm); } + let userResponse: Promise | undefined = undefined; + if (userId) { const getPersonForm: GetPersonDetails = { person_id: userId, auth, }; - promises.push(client.getPersonDetails(getPersonForm)); - } else { - promises.push(Promise.resolve()); + userResponse = client.getPersonDetails(getPersonForm); } - return promises; + return { + modlogResponse: client.getModlog(modlogForm), + communityResponse, + modUserResponse, + userResponse, + }; } parseMessage(msg: any) { diff --git a/src/shared/components/person/inbox.tsx b/src/shared/components/person/inbox.tsx index 8145ab62..6393fc62 100644 --- a/src/shared/components/person/inbox.tsx +++ b/src/shared/components/person/inbox.tsx @@ -29,6 +29,7 @@ import { i18n } from "../../i18next"; import { CommentViewType, InitialFetchRequest } from "../../interfaces"; import { UserService, WebSocketService } from "../../services"; import { + WithPromiseKeys, commentsToFlatNodes, createCommentLikeRes, editCommentRes, @@ -69,6 +70,13 @@ enum ReplyEnum { Mention, Message, } + +interface InboxData { + repliesResponse: GetRepliesResponse; + personMentionsResponse: GetPersonMentionsResponse; + privateMessagesResponse: PrivateMessagesResponse; +} + type ReplyType = { id: number; type_: ReplyEnum; @@ -90,7 +98,7 @@ interface InboxState { } export class Inbox extends Component { - private isoData = setIsoData(this.context); + private isoData = setIsoData(this.context); private subscription?: Subscription; state: InboxState = { unreadOrAll: UnreadOrAll.Unread, @@ -115,17 +123,18 @@ export class Inbox extends Component { this.subscription = wsSubscribe(this.parseMessage); // Only fetch the data if coming from another route - if (this.isoData.path == this.context.router.route.match.url) { + if (this.isoData.path === this.context.router.route.match.url) { + const { + personMentionsResponse, + privateMessagesResponse, + repliesResponse, + } = this.isoData.routeData; + this.state = { ...this.state, - replies: - (this.isoData.routeData[0] as GetRepliesResponse).replies || [], - mentions: - (this.isoData.routeData[1] as GetPersonMentionsResponse).mentions || - [], - messages: - (this.isoData.routeData[2] as PrivateMessagesResponse) - .private_messages || [], + replies: repliesResponse.replies ?? [], + mentions: personMentionsResponse.mentions ?? [], + messages: privateMessagesResponse.private_messages ?? [], loading: false, }; this.state = { ...this.state, combined: this.buildCombined() }; @@ -481,53 +490,51 @@ export class Inbox extends Component { i.refetch(); } - static fetchInitialData(req: InitialFetchRequest): Promise[] { - let promises: Promise[] = []; + static fetchInitialData({ + auth, + client, + }: InitialFetchRequest): WithPromiseKeys { + const sort: CommentSortType = "New"; - let sort: CommentSortType = "New"; - let auth = req.auth; + // It can be /u/me, or /username/1 + const repliesForm: GetReplies = { + sort, + unread_only: true, + page: 1, + limit: fetchLimit, + auth: auth as string, + }; - if (auth) { - // It can be /u/me, or /username/1 - let repliesForm: GetReplies = { - sort: "New", - unread_only: true, - page: 1, - limit: fetchLimit, - auth, - }; - promises.push(req.client.getReplies(repliesForm)); + const personMentionsForm: GetPersonMentions = { + sort, + unread_only: true, + page: 1, + limit: fetchLimit, + auth: auth as string, + }; - let personMentionsForm: GetPersonMentions = { - sort, - unread_only: true, - page: 1, - limit: fetchLimit, - auth, - }; - promises.push(req.client.getPersonMentions(personMentionsForm)); + const privateMessagesForm: GetPrivateMessages = { + unread_only: true, + page: 1, + limit: fetchLimit, + auth: auth as string, + }; - let privateMessagesForm: GetPrivateMessages = { - unread_only: true, - page: 1, - limit: fetchLimit, - auth, - }; - promises.push(req.client.getPrivateMessages(privateMessagesForm)); - } - - return promises; + return { + privateMessagesResponse: client.getPrivateMessages(privateMessagesForm), + personMentionsResponse: client.getPersonMentions(personMentionsForm), + repliesResponse: client.getReplies(repliesForm), + }; } refetch() { - let sort = this.state.sort; - let unread_only = this.state.unreadOrAll == UnreadOrAll.Unread; - let page = this.state.page; - let limit = fetchLimit; - let auth = myAuth(); + const { sort, page, unreadOrAll } = this.state; + const unread_only = unreadOrAll === UnreadOrAll.Unread; + const limit = fetchLimit; + const auth = myAuth(); if (auth) { - let repliesForm: GetReplies = { + const repliesForm: GetReplies = { sort, unread_only, page, @@ -536,7 +543,7 @@ export class Inbox extends Component { }; WebSocketService.Instance.send(wsClient.getReplies(repliesForm)); - let personMentionsForm: GetPersonMentions = { + const personMentionsForm: GetPersonMentions = { sort, unread_only, page, @@ -547,7 +554,7 @@ export class Inbox extends Component { wsClient.getPersonMentions(personMentionsForm) ); - let privateMessagesForm: GetPrivateMessages = { + const privateMessagesForm: GetPrivateMessages = { unread_only, page, limit, diff --git a/src/shared/components/person/profile.tsx b/src/shared/components/person/profile.tsx index 42c7c306..00a44197 100644 --- a/src/shared/components/person/profile.tsx +++ b/src/shared/components/person/profile.tsx @@ -29,6 +29,7 @@ import { InitialFetchRequest, PersonDetailsView } from "../../interfaces"; import { UserService, WebSocketService } from "../../services"; import { QueryParams, + WithPromiseKeys, canMod, capitalizeFirstLetter, createCommentLikeRes, @@ -67,6 +68,10 @@ import { CommunityLink } from "../community/community-link"; import { PersonDetails } from "./person-details"; import { PersonListing } from "./person-listing"; +interface ProfileData { + personResponse: GetPersonDetailsResponse; +} + interface ProfileState { personRes?: GetPersonDetailsResponse; loading: boolean; @@ -152,7 +157,7 @@ export class Profile extends Component< RouteComponentProps<{ username: string }>, ProfileState > { - private isoData = setIsoData(this.context); + private isoData = setIsoData(this.context); private subscription?: Subscription; state: ProfileState = { loading: true, @@ -175,7 +180,7 @@ export class Profile extends Component< if (this.isoData.path === this.context.router.route.match.url) { this.state = { ...this.state, - personRes: this.isoData.routeData[0] as GetPersonDetailsResponse, + personRes: this.isoData.routeData.personResponse, loading: false, }; } else { @@ -223,7 +228,9 @@ export class Profile extends Component< path, query: { page, sort, view: urlView }, auth, - }: InitialFetchRequest>): Promise[] { + }: InitialFetchRequest< + QueryParams + >): WithPromiseKeys { const pathSplit = path.split("/"); const username = pathSplit[2]; @@ -238,7 +245,9 @@ export class Profile extends Component< auth, }; - return [client.getPersonDetails(form)]; + return { + personResponse: client.getPersonDetails(form), + }; } componentDidMount() { diff --git a/src/shared/components/person/registration-applications.tsx b/src/shared/components/person/registration-applications.tsx index 39b65900..72ac5016 100644 --- a/src/shared/components/person/registration-applications.tsx +++ b/src/shared/components/person/registration-applications.tsx @@ -13,6 +13,7 @@ import { i18n } from "../../i18next"; import { InitialFetchRequest } from "../../interfaces"; import { UserService, WebSocketService } from "../../services"; import { + WithPromiseKeys, fetchLimit, isBrowser, myAuth, @@ -33,6 +34,10 @@ enum UnreadOrAll { All, } +interface RegistrationApplicationsData { + listRegistrationApplicationsResponse: ListRegistrationApplicationsResponse; +} + interface RegistrationApplicationsState { listRegistrationApplicationsResponse?: ListRegistrationApplicationsResponse; siteRes: GetSiteResponse; @@ -45,7 +50,7 @@ export class RegistrationApplications extends Component< any, RegistrationApplicationsState > { - private isoData = setIsoData(this.context); + private isoData = setIsoData(this.context); private subscription?: Subscription; state: RegistrationApplicationsState = { siteRes: this.isoData.site_res, @@ -63,11 +68,11 @@ export class RegistrationApplications extends Component< this.subscription = wsSubscribe(this.parseMessage); // Only fetch the data if coming from another route - if (this.isoData.path == this.context.router.route.match.url) { + if (this.isoData.path === this.context.router.route.match.url) { this.state = { ...this.state, - listRegistrationApplicationsResponse: this.isoData - .routeData[0] as ListRegistrationApplicationsResponse, + listRegistrationApplicationsResponse: + this.isoData.routeData.listRegistrationApplicationsResponse, loading: false, }; } else { @@ -192,21 +197,21 @@ export class RegistrationApplications extends Component< this.refetch(); } - static fetchInitialData(req: InitialFetchRequest): Promise[] { - let promises: Promise[] = []; + static fetchInitialData({ + auth, + client, + }: InitialFetchRequest): WithPromiseKeys { + const form: ListRegistrationApplications = { + unread_only: true, + page: 1, + limit: fetchLimit, + auth: auth as string, + }; - let auth = req.auth; - if (auth) { - let form: ListRegistrationApplications = { - unread_only: true, - page: 1, - limit: fetchLimit, - auth, - }; - promises.push(req.client.listRegistrationApplications(form)); - } - - return promises; + return { + listRegistrationApplicationsResponse: + client.listRegistrationApplications(form), + }; } refetch() { diff --git a/src/shared/components/person/reports.tsx b/src/shared/components/person/reports.tsx index 3c00f545..51b41c92 100644 --- a/src/shared/components/person/reports.tsx +++ b/src/shared/components/person/reports.tsx @@ -22,6 +22,7 @@ import { i18n } from "../../i18next"; import { InitialFetchRequest } from "../../interfaces"; import { UserService, WebSocketService } from "../../services"; import { + WithPromiseKeys, amAdmin, fetchLimit, isBrowser, @@ -60,6 +61,12 @@ enum MessageEnum { PrivateMessageReport, } +interface ReportsData { + commentReportsResponse: ListCommentReportsResponse; + postReportsResponse: ListPostReportsResponse; + privateMessageReportsResponse?: ListPrivateMessageReportsResponse; +} + type ItemType = { id: number; type_: MessageEnum; @@ -80,7 +87,7 @@ interface ReportsState { } export class Reports extends Component { - private isoData = setIsoData(this.context); + private isoData = setIsoData(this.context); private subscription?: Subscription; state: ReportsState = { unreadOrAll: UnreadOrAll.Unread, @@ -100,21 +107,20 @@ export class Reports extends Component { this.subscription = wsSubscribe(this.parseMessage); // Only fetch the data if coming from another route - if (this.isoData.path == this.context.router.route.match.url) { + if (this.isoData.path === this.context.router.route.match.url) { + const { + commentReportsResponse, + postReportsResponse, + privateMessageReportsResponse, + } = this.isoData.routeData; + this.state = { ...this.state, - listCommentReportsResponse: this.isoData - .routeData[0] as ListCommentReportsResponse, - listPostReportsResponse: this.isoData - .routeData[1] as ListPostReportsResponse, + listCommentReportsResponse: commentReportsResponse, + listPostReportsResponse: postReportsResponse, + listPrivateMessageReportsResponse: privateMessageReportsResponse, }; - if (amAdmin()) { - this.state = { - ...this.state, - listPrivateMessageReportsResponse: this.isoData - .routeData[2] as ListPrivateMessageReportsResponse, - }; - } + this.state = { ...this.state, combined: this.buildCombined(), @@ -432,73 +438,78 @@ export class Reports extends Component { i.refetch(); } - static fetchInitialData(req: InitialFetchRequest): Promise[] { - let promises: Promise[] = []; + static fetchInitialData({ + auth, + client, + }: InitialFetchRequest): WithPromiseKeys { + const unresolved_only = true; + const page = 1; + const limit = fetchLimit; - let unresolved_only = true; - let page = 1; - let limit = fetchLimit; - let auth = req.auth; + const commentReportsForm: ListCommentReports = { + unresolved_only, + page, + limit, + auth: auth as string, + }; - if (auth) { - let commentReportsForm: ListCommentReports = { + const postReportsForm: ListPostReports = { + unresolved_only, + page, + limit, + auth: auth as string, + }; + + const data: WithPromiseKeys = { + commentReportsResponse: client.listCommentReports(commentReportsForm), + postReportsResponse: client.listPostReports(postReportsForm), + }; + + if (amAdmin()) { + const privateMessageReportsForm: ListPrivateMessageReports = { unresolved_only, page, limit, - auth, + auth: auth as string, }; - promises.push(req.client.listCommentReports(commentReportsForm)); - let postReportsForm: ListPostReports = { - unresolved_only, - page, - limit, - auth, - }; - promises.push(req.client.listPostReports(postReportsForm)); - - if (amAdmin()) { - let privateMessageReportsForm: ListPrivateMessageReports = { - unresolved_only, - page, - limit, - auth, - }; - promises.push( - req.client.listPrivateMessageReports(privateMessageReportsForm) - ); - } + data.privateMessageReportsResponse = client.listPrivateMessageReports( + privateMessageReportsForm + ); } - return promises; + return data; } refetch() { - let unresolved_only = this.state.unreadOrAll == UnreadOrAll.Unread; - let page = this.state.page; - let limit = fetchLimit; - let auth = myAuth(); + const unresolved_only = this.state.unreadOrAll === UnreadOrAll.Unread; + const page = this.state.page; + const limit = fetchLimit; + const auth = myAuth(); + if (auth) { - let commentReportsForm: ListCommentReports = { + const commentReportsForm: ListCommentReports = { unresolved_only, page, limit, auth, }; + WebSocketService.Instance.send( wsClient.listCommentReports(commentReportsForm) ); - let postReportsForm: ListPostReports = { + const postReportsForm: ListPostReports = { unresolved_only, page, limit, auth, }; + WebSocketService.Instance.send(wsClient.listPostReports(postReportsForm)); if (amAdmin()) { - let privateMessageReportsForm: ListPrivateMessageReports = { + const privateMessageReportsForm: ListPrivateMessageReports = { unresolved_only, page, limit, diff --git a/src/shared/components/post/create-post.tsx b/src/shared/components/post/create-post.tsx index d8a2ccef..f43cbb07 100644 --- a/src/shared/components/post/create-post.tsx +++ b/src/shared/components/post/create-post.tsx @@ -16,6 +16,7 @@ import { WebSocketService } from "../../services"; import { Choice, QueryParams, + WithPromiseKeys, enableDownvotes, enableNsfw, getIdFromString, @@ -36,6 +37,10 @@ export interface CreatePostProps { communityId?: number; } +interface CreatePostData { + communityResponse?: GetCommunityResponse; +} + function getCreatePostQueryParams() { return getQueryParams({ communityId: getIdFromString, @@ -52,7 +57,7 @@ export class CreatePost extends Component< RouteComponentProps>, CreatePostState > { - private isoData = setIsoData(this.context); + private isoData = setIsoData(this.context); private subscription?: Subscription; state: CreatePostState = { siteRes: this.isoData.site_res, @@ -71,14 +76,12 @@ export class CreatePost extends Component< // Only fetch the data if coming from another route if (this.isoData.path === this.context.router.route.match.url) { - const communityRes = this.isoData.routeData[0] as - | GetCommunityResponse - | undefined; + const { communityResponse } = this.isoData.routeData; - if (communityRes) { + if (communityResponse) { const communityChoice: Choice = { - label: communityRes.community_view.community.name, - value: communityRes.community_view.community.id.toString(), + label: communityResponse.community_view.community.name, + value: communityResponse.community_view.community.id.toString(), }; this.state = { @@ -206,8 +209,10 @@ export class CreatePost extends Component< client, query: { communityId }, auth, - }: InitialFetchRequest>): Promise[] { - const promises: Promise[] = []; + }: InitialFetchRequest< + QueryParams + >): WithPromiseKeys { + const data: WithPromiseKeys = {}; if (communityId) { const form: GetCommunity = { @@ -215,12 +220,10 @@ export class CreatePost extends Component< id: getIdFromString(communityId), }; - promises.push(client.getCommunity(form)); - } else { - promises.push(Promise.resolve()); + data.communityResponse = client.getCommunity(form); } - return promises; + return data; } parseMessage(msg: any) { diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx index 96d7911e..fc8245de 100644 --- a/src/shared/components/post/post.tsx +++ b/src/shared/components/post/post.tsx @@ -60,6 +60,7 @@ import { toast, trendingFetchLimit, updatePersonBlock, + WithPromiseKeys, wsClient, wsSubscribe, } from "../../utils"; @@ -72,6 +73,11 @@ import { PostListing } from "./post-listing"; const commentsShownInterval = 15; +interface PostData { + postResponse: GetPostResponse; + commentsResponse: GetCommentsResponse; +} + interface PostState { postId?: number; commentId?: number; @@ -91,7 +97,7 @@ interface PostState { export class Post extends Component { private subscription?: Subscription; - private isoData = setIsoData(this.context); + private isoData = setIsoData(this.context); private commentScrollDebounced: () => void; state: PostState = { postId: getIdFromProps(this.props), @@ -115,11 +121,13 @@ export class Post extends Component { this.state = { ...this.state, commentSectionRef: createRef() }; // Only fetch the data if coming from another route - if (this.isoData.path == this.context.router.route.match.url) { + if (this.isoData.path === this.context.router.route.match.url) { + const { commentsResponse, postResponse } = this.isoData.routeData; + this.state = { ...this.state, - postRes: this.isoData.routeData[0] as GetPostResponse, - commentsRes: this.isoData.routeData[1] as GetCommentsResponse, + postRes: postResponse, + commentsRes: commentsResponse, }; if (this.state.commentsRes) { @@ -197,19 +205,18 @@ export class Post extends Component { } } - static fetchInitialData(req: InitialFetchRequest): Promise[] { - let pathSplit = req.path.split("/"); - let promises: Promise[] = []; + static fetchInitialData(req: InitialFetchRequest): WithPromiseKeys { + const pathSplit = req.path.split("/"); - let pathType = pathSplit.at(1); - let id = pathSplit.at(2) ? Number(pathSplit.at(2)) : undefined; - let auth = req.auth; + const pathType = pathSplit.at(1); + const id = pathSplit.at(2) ? Number(pathSplit.at(2)) : undefined; + const auth = req.auth; - let postForm: GetPost = { + const postForm: GetPost = { auth, }; - let commentsForm: GetComments = { + const commentsForm: GetComments = { max_depth: commentTreeMaxDepth, sort: "Hot", type_: "All", @@ -218,7 +225,7 @@ export class Post extends Component { }; // Set the correct id based on the path type - if (pathType == "post") { + if (pathType === "post") { postForm.id = id; commentsForm.post_id = id; } else { @@ -226,10 +233,10 @@ export class Post extends Component { commentsForm.parent_id = id; } - promises.push(req.client.getPost(postForm)); - promises.push(req.client.getComments(commentsForm)); - - return promises; + return { + postResponse: req.client.getPost(postForm), + commentsResponse: req.client.getComments(commentsForm), + }; } componentWillUnmount() { diff --git a/src/shared/components/private_message/create-private-message.tsx b/src/shared/components/private_message/create-private-message.tsx index 327386cb..c897c44e 100644 --- a/src/shared/components/private_message/create-private-message.tsx +++ b/src/shared/components/private_message/create-private-message.tsx @@ -12,6 +12,7 @@ import { i18n } from "../../i18next"; import { InitialFetchRequest } from "../../interfaces"; import { WebSocketService } from "../../services"; import { + WithPromiseKeys, getRecipientIdFromProps, isBrowser, myAuth, @@ -24,6 +25,10 @@ import { HtmlTags } from "../common/html-tags"; import { Spinner } from "../common/icon"; import { PrivateMessageForm } from "./private-message-form"; +interface CreatePrivateMessageData { + recipientDetailsResponse: GetPersonDetailsResponse; +} + interface CreatePrivateMessageState { siteRes: GetSiteResponse; recipientDetailsRes?: GetPersonDetailsResponse; @@ -35,7 +40,7 @@ export class CreatePrivateMessage extends Component< any, CreatePrivateMessageState > { - private isoData = setIsoData(this.context); + private isoData = setIsoData(this.context); private subscription?: Subscription; state: CreatePrivateMessageState = { siteRes: this.isoData.site_res, @@ -52,11 +57,10 @@ export class CreatePrivateMessage extends Component< this.subscription = wsSubscribe(this.parseMessage); // Only fetch the data if coming from another route - if (this.isoData.path == this.context.router.route.match.url) { + if (this.isoData.path === this.context.router.route.match.url) { this.state = { ...this.state, - recipientDetailsRes: this.isoData - .routeData[0] as GetPersonDetailsResponse, + recipientDetailsRes: this.isoData.routeData.recipientDetailsResponse, loading: false, }; } else { @@ -74,15 +78,21 @@ export class CreatePrivateMessage extends Component< WebSocketService.Instance.send(wsClient.getPersonDetails(form)); } - static fetchInitialData(req: InitialFetchRequest): Promise[] { - let person_id = Number(req.path.split("/").pop()); - let form: GetPersonDetails = { + static fetchInitialData( + req: InitialFetchRequest + ): WithPromiseKeys { + const person_id = Number(req.path.split("/").pop()); + + const form: GetPersonDetails = { person_id, sort: "New", saved_only: false, auth: req.auth, }; - return [req.client.getPersonDetails(form)]; + + return { + recipientDetailsResponse: req.client.getPersonDetails(form), + }; } get documentTitle(): string { diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx index 9f762785..c62c7a98 100644 --- a/src/shared/components/search.tsx +++ b/src/shared/components/search.tsx @@ -32,6 +32,7 @@ import { WebSocketService } from "../services"; import { Choice, QueryParams, + WithPromiseKeys, capitalizeFirstLetter, commentsToFlatNodes, communityToChoice, @@ -80,6 +81,14 @@ interface SearchProps { page: number; } +interface SearchData { + communityResponse?: GetCommunityResponse; + listCommunitiesResponse?: ListCommunitiesResponse; + creatorDetailsResponse?: GetPersonDetailsResponse; + searchResponse?: SearchResponse; + resolveObjectResponse?: ResolveObjectResponse; +} + type FilterType = "creator" | "community"; interface SearchState { @@ -237,7 +246,7 @@ function getListing( } export class Search extends Component { - private isoData = setIsoData(this.context); + private isoData = setIsoData(this.context); private subscription?: Subscription; state: SearchState = { searchLoading: false, @@ -271,45 +280,44 @@ export class Search extends Component { // Only fetch the data if coming from another route if (this.isoData.path === this.context.router.route.match.url) { - const communityRes = this.isoData.routeData[0] as - | GetCommunityResponse - | undefined; - const communitiesRes = this.isoData.routeData[1] as - | ListCommunitiesResponse - | undefined; + const { + communityResponse, + creatorDetailsResponse, + listCommunitiesResponse, + resolveObjectResponse, + searchResponse, + } = this.isoData.routeData; + // This can be single or multiple communities given - if (communitiesRes) { + if (listCommunitiesResponse) { this.state = { ...this.state, - communities: communitiesRes.communities, + communities: listCommunitiesResponse.communities, }; } - if (communityRes) { + if (communityResponse) { this.state = { ...this.state, - communities: [communityRes.community_view], + communities: [communityResponse.community_view], communitySearchOptions: [ - communityToChoice(communityRes.community_view), + communityToChoice(communityResponse.community_view), ], }; } - const creatorRes = this.isoData.routeData[2] as GetPersonDetailsResponse; - this.state = { ...this.state, - creatorDetails: creatorRes, - creatorSearchOptions: creatorRes - ? [personToChoice(creatorRes.person_view)] + creatorDetails: creatorDetailsResponse, + creatorSearchOptions: creatorDetailsResponse + ? [personToChoice(creatorDetailsResponse.person_view)] : [], }; if (q !== "") { this.state = { ...this.state, - searchResponse: this.isoData.routeData[3] as SearchResponse, - resolveObjectResponse: this.isoData - .routeData[4] as ResolveObjectResponse, + searchResponse, + resolveObjectResponse, searchLoading: false, }; } else { @@ -342,17 +350,21 @@ export class Search extends Component { client, auth, query: { communityId, creatorId, q, type, sort, listingType, page }, - }: InitialFetchRequest>): Promise[] { - const promises: Promise[] = []; - + }: InitialFetchRequest< + QueryParams + >): WithPromiseKeys { const community_id = getIdFromString(communityId); + let communityResponse: Promise | undefined = + undefined; + let listCommunitiesResponse: Promise | undefined = + undefined; if (community_id) { const getCommunityForm: GetCommunity = { id: community_id, auth, }; - promises.push(client.getCommunity(getCommunityForm)); - promises.push(Promise.resolve()); + + communityResponse = client.getCommunity(getCommunityForm); } else { const listCommunitiesForm: ListCommunities = { type_: defaultListingType, @@ -360,23 +372,29 @@ export class Search extends Component { limit: fetchLimit, auth, }; - promises.push(Promise.resolve()); - promises.push(client.listCommunities(listCommunitiesForm)); + + listCommunitiesResponse = client.listCommunities(listCommunitiesForm); } const creator_id = getIdFromString(creatorId); + let creatorDetailsResponse: Promise | undefined = + undefined; if (creator_id) { const getCreatorForm: GetPersonDetails = { person_id: creator_id, auth, }; - promises.push(client.getPersonDetails(getCreatorForm)); - } else { - promises.push(Promise.resolve()); + + creatorDetailsResponse = client.getPersonDetails(getCreatorForm); } const query = getSearchQueryFromQuery(q); + let searchResponse: Promise | undefined = undefined; + let resolveObjectResponse: + | Promise + | undefined = undefined; + if (query) { const form: SearchForm = { q: query, @@ -391,21 +409,26 @@ export class Search extends Component { }; if (query !== "") { - promises.push(client.search(form)); + searchResponse = client.search(form); if (auth) { const resolveObjectForm: ResolveObject = { q: query, auth, }; - promises.push(client.resolveObject(resolveObjectForm)); + resolveObjectResponse = client + .resolveObject(resolveObjectForm) + .catch(() => undefined); } - } else { - promises.push(Promise.resolve()); - promises.push(Promise.resolve()); } } - return promises; + return { + communityResponse, + creatorDetailsResponse, + listCommunitiesResponse, + resolveObjectResponse, + searchResponse, + }; } get documentTitle(): string { diff --git a/src/shared/interfaces.ts b/src/shared/interfaces.ts index a6b2ae47..dc4490cb 100644 --- a/src/shared/interfaces.ts +++ b/src/shared/interfaces.ts @@ -5,15 +5,15 @@ import { ErrorPageData } from "./utils"; /** * This contains serialized data, it needs to be deserialized before use. */ -export interface IsoData { +export interface IsoData { path: string; - routeData: any[]; + routeData: T; site_res: GetSiteResponse; errorPageData?: ErrorPageData; } -export type IsoDataOptionalSite = Partial & - Pick>; +export type IsoDataOptionalSite = Partial> & + Pick, Exclude, "site_res">>; export interface ILemmyConfig { wsHost?: string; diff --git a/src/shared/routes.ts b/src/shared/routes.ts index b5c28189..81771d03 100644 --- a/src/shared/routes.ts +++ b/src/shared/routes.ts @@ -22,13 +22,14 @@ import { Post } from "./components/post/post"; import { CreatePrivateMessage } from "./components/private_message/create-private-message"; import { Search } from "./components/search"; import { InitialFetchRequest } from "./interfaces"; +import { WithPromiseKeys } from "./utils"; -interface IRoutePropsWithFetch extends IRouteProps { +interface IRoutePropsWithFetch extends IRouteProps { // TODO Make sure this one is good. - fetchInitialData?(req: InitialFetchRequest): Promise[]; + fetchInitialData?(req: InitialFetchRequest): WithPromiseKeys; } -export const routes: IRoutePropsWithFetch[] = [ +export const routes: IRoutePropsWithFetch>[] = [ { path: `/`, component: Home, diff --git a/src/shared/utils.ts b/src/shared/utils.ts index 5648df00..fe83977d 100644 --- a/src/shared/utils.ts +++ b/src/shared/utils.ts @@ -1262,7 +1262,7 @@ export function isBrowser() { return typeof window !== "undefined"; } -export function setIsoData(context: any): IsoData { +export function setIsoData(context: any): IsoData { // If its the browser, you need to deserialize the data from the window if (isBrowser()) { return window.isoData; @@ -1557,6 +1557,10 @@ export type QueryParams> = { [key in keyof T]?: string; }; +export type WithPromiseKeys = { + [K in keyof T]: Promise; +}; + export function getQueryParams>(processors: { [K in keyof T]: (param: string) => T[K]; }): T { From a170a0cc74184cdf2c2a6c87f282d43871610acf Mon Sep 17 00:00:00 2001 From: Florian Heft Date: Wed, 14 Jun 2023 01:04:53 +0200 Subject: [PATCH 02/26] Added npm scripts to rebuild theme files * Add Bootstrap 4 dependency * Add scripts to compile theme files using SASS * Remove circular dependency of theme variables and Bootstrap base variables --- package.json | 6 +- .../css/themes/_variables.darkly-red.scss | 108 ++++++++++++++++++ src/assets/css/themes/_variables.darkly.scss | 4 +- .../css/themes/_variables.litely-red.scss | 47 ++++++++ src/assets/css/themes/_variables.litely.scss | 24 +++- src/assets/css/themes/darkly-red.scss | 2 + src/assets/css/themes/darkly.scss | 2 + src/assets/css/themes/litely-red.scss | 2 + src/assets/css/themes/litely.scss | 2 + 9 files changed, 188 insertions(+), 9 deletions(-) create mode 100644 src/assets/css/themes/_variables.darkly-red.scss create mode 100644 src/assets/css/themes/_variables.litely-red.scss create mode 100644 src/assets/css/themes/darkly-red.scss create mode 100644 src/assets/css/themes/darkly.scss create mode 100644 src/assets/css/themes/litely-red.scss create mode 100644 src/assets/css/themes/litely.scss diff --git a/package.json b/package.json index 413144e3..2e09e897 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,9 @@ "dev": "yarn start", "lint": "node generate_translations.js && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx \"src/**\" && prettier --check \"src/**/*.{ts,tsx,js,css,scss}\"", "prepare": "husky install", - "start": "yarn build:dev --watch" + "start": "yarn build:dev --watch", + "themes:build": "sass src/assets/css/themes/:src/assets/css/themes", + "themes:watch": "sass --watch src/assets/css/themes/:src/assets/css/themes" }, "lint-staged": { "*.{ts,tsx,js}": [ @@ -102,7 +104,7 @@ "@types/toastify-js": "^1.11.1", "@typescript-eslint/eslint-plugin": "^5.59.5", "@typescript-eslint/parser": "^5.59.5", - "bootswatch": "^5.2.3", + "bootstrap-v4": "npm:bootstrap@^4.6.2", "eslint": "^8.40.0", "eslint-plugin-inferno": "^7.32.2", "eslint-plugin-prettier": "^4.2.1", diff --git a/src/assets/css/themes/_variables.darkly-red.scss b/src/assets/css/themes/_variables.darkly-red.scss new file mode 100644 index 00000000..c36cbb3d --- /dev/null +++ b/src/assets/css/themes/_variables.darkly-red.scss @@ -0,0 +1,108 @@ +$white: #fff; +$gray-100: #f8f9fa; +$gray-200: #ebebeb; +$gray-300: #dee2e6; +$gray-400: #ced4da; +$gray-500: #adb5bd; +$gray-600: #888; +$gray-700: #444; +$gray-800: #303030; +$gray-900: #222; +$black: #000; +$blue: #375a7f; +$indigo: #6610f2; +$purple: #6f42c1; +$pink: #e83e8c; +$red: #e74c3c; +$orange: #fd7e14; +$yellow: #f39c12; +$green: #00bc8c; +$teal: #20c997; +$cyan: #3498db; +$primary: $blue; +$secondary: #444; +$success: $green; +$info: $cyan; +$warning: $yellow; +$danger: $red; +$light: $gray-800; +$dark: $gray-300; +$yiq-contrasted-threshold: 175; +$body-bg: $gray-900; +$body-color: $gray-300; +$link-color: $red; +$font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol"; +$font-size-base: 0.9375rem; +$h1-font-size: 3rem; +$h2-font-size: 2.5rem; +$h3-font-size: 2rem; +$text-muted: $gray-600; +$table-accent-bg: $gray-800; +$table-border-color: $gray-700; +$input-border-color: $body-bg; +$input-group-addon-color: $gray-500; +$input-group-addon-bg: $gray-700; +$custom-file-color: $gray-500; +$custom-file-border-color: $body-bg; +$dropdown-bg: $gray-900; +$dropdown-border-color: $gray-700; +$dropdown-divider-bg: $gray-700; +$dropdown-link-color: $white; +$dropdown-link-hover-color: $white; +$dropdown-link-hover-bg: $primary; +$nav-link-padding-x: 2rem; +$nav-link-disabled-color: $gray-500; +$nav-tabs-border-color: $gray-700; +$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color + transparent; +$nav-tabs-link-active-color: $white; +$nav-tabs-link-active-border-color: $nav-tabs-border-color + $nav-tabs-border-color transparent; +$navbar-padding-y: 1rem; +$navbar-dark-color: rgba($white, 0.6); +$navbar-dark-hover-color: $white; +$navbar-light-color: rgba($white, 0.6); +$navbar-light-hover-color: $white; +$navbar-light-active-color: $white; +$navbar-light-toggler-border-color: rgba($gray-900, 0.1); +$pagination-color: $white; +$pagination-bg: $success; +$pagination-border-width: 0; +$pagination-border-color: transparent; +$pagination-hover-color: $white; +$pagination-hover-bg: lighten($success, 10%); +$pagination-hover-border-color: transparent; +$pagination-active-bg: $pagination-hover-bg; +$pagination-active-border-color: transparent; +$pagination-disabled-color: $white; +$pagination-disabled-bg: darken($success, 15%); +$pagination-disabled-border-color: transparent; +$jumbotron-bg: $gray-800; +$card-cap-bg: $gray-700; +$card-bg: $gray-800; +$popover-bg: $gray-800; +$popover-header-bg: $gray-700; +$toast-background-color: $gray-700; +$toast-header-background-color: $gray-800; +$modal-content-bg: $gray-800; +$modal-content-border-color: $gray-700; +$modal-header-border-color: $gray-700; +$progress-bg: $gray-700; +$list-group-bg: $gray-800; +$list-group-border-color: $gray-700; +$list-group-hover-bg: $gray-700; +$breadcrumb-bg: $gray-700; +$close-color: $white; +$close-text-shadow: none; +$pre-color: inherit; +$mark-bg: #333; +$custom-select-bg: $secondary; +$custom-select-color: $white; +$input-bg: $secondary; +$input-color: $white; +$input-disabled-bg: darken($secondary, 10%); +$light: $gray-800; +$navbar-light-brand-color: $white; +$navbar-light-brand-hover-color: $navbar-light-brand-color; diff --git a/src/assets/css/themes/_variables.darkly.scss b/src/assets/css/themes/_variables.darkly.scss index 668f5a62..608b4001 100644 --- a/src/assets/css/themes/_variables.darkly.scss +++ b/src/assets/css/themes/_variables.darkly.scss @@ -103,5 +103,5 @@ $input-bg: $secondary; $input-color: $white; $input-disabled-bg: darken($secondary, 10%); $light: $gray-800; -$navbar-light-brand-color: $navbar-dark-active-color; -$navbar-light-brand-hover-color: $navbar-dark-active-color; +$navbar-light-brand-color: $white; +$navbar-light-brand-hover-color: $navbar-light-brand-color; diff --git a/src/assets/css/themes/_variables.litely-red.scss b/src/assets/css/themes/_variables.litely-red.scss new file mode 100644 index 00000000..2c4c72e8 --- /dev/null +++ b/src/assets/css/themes/_variables.litely-red.scss @@ -0,0 +1,47 @@ +$white: #fff; +$gray-100: #f8f9fa; +$gray-200: #e9ecef; +$gray-300: #dee2e6; +$gray-400: #ced4da; +$gray-500: #adb5bd; +$gray-600: #6c757d; +$gray-700: #495057; +$gray-800: #343a40; +$gray-900: #212529; +$black: #000; +$blue: #007bff; +$indigo: #6610f2; +$white: #ffffff; +$orange: #f1641e; +$cyan: #02bdc2; +$green: #00c853; +$primary: #d84848; +$secondary: $green; +$info: $cyan; +$body-color: $gray-700; +$link-color: $primary; +$red: #d8486a; +$border-radius: 0.5rem; +$border-radius-lg: 0.5rem; +$border-radius-sm: 1rem; +$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Droid Sans", + "Segoe UI", "Helvetica", Arial, sans-serif; +$headings-color: $gray-700; +$input-btn-focus-color: rgba($primary, 0.75); +$form-feedback-valid-color: $info; +$navbar-light-color: $gray-600; +$black: #222222; +$navbar-dark-toggler-border-color: rgba($black, 0.1); +$navbar-light-active-color: $gray-900; +$card-color: $gray-700; +$card-cap-color: $gray-700; +$info: $blue; +$body-bg: #fff; +$success: $indigo; +$danger: darken($primary, 24%); +$navbar-light-hover-color: $gray-900; +$card-bg: $gray-100; +$border-color: $gray-700; +$mark-bg: rgb(255, 252, 239); +$font-weight-bold: 600; +$rounded-pill: 0.25rem; diff --git a/src/assets/css/themes/_variables.litely.scss b/src/assets/css/themes/_variables.litely.scss index cfb12052..1f78cd28 100644 --- a/src/assets/css/themes/_variables.litely.scss +++ b/src/assets/css/themes/_variables.litely.scss @@ -1,11 +1,25 @@ +$white: #fff; +$gray-100: #f8f9fa; +$gray-200: #e9ecef; +$gray-300: #dee2e6; +$gray-400: #ced4da; +$gray-500: #adb5bd; +$gray-600: #6c757d; +$gray-700: #495057; +$gray-800: #343a40; +$gray-900: #212529; +$black: #000; +$blue: #007bff; +$indigo: #6610f2; $white: #ffffff; $orange: #f1641e; $cyan: #02bdc2; $green: #00c853; -$secondary: $green; -$body-color: $gray-700; -$link-color: theme-color("primary"); $primary: $orange; +$secondary: $green; +$info: $cyan; +$body-color: $gray-700; +$link-color: $primary; $red: #d8486a; $border-radius: 0.5rem; $border-radius-lg: 0.5rem; @@ -13,8 +27,8 @@ $border-radius-sm: 1rem; $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Droid Sans", "Segoe UI", "Helvetica", Arial, sans-serif; $headings-color: $gray-700; -$input-btn-focus-color: rgba($component-active-bg, 0.75); -$form-feedback-valid-color: theme-color("info"); +$input-btn-focus-color: rgba($primary, 0.75); +$form-feedback-valid-color: $info; $navbar-light-color: $gray-600; $black: #222222; $navbar-dark-toggler-border-color: rgba($black, 0.1); diff --git a/src/assets/css/themes/darkly-red.scss b/src/assets/css/themes/darkly-red.scss new file mode 100644 index 00000000..f6dfb3df --- /dev/null +++ b/src/assets/css/themes/darkly-red.scss @@ -0,0 +1,2 @@ +@import "variables.darkly-red"; +@import "../../../../node_modules/bootstrap-v4/scss/bootstrap"; diff --git a/src/assets/css/themes/darkly.scss b/src/assets/css/themes/darkly.scss new file mode 100644 index 00000000..ef808d56 --- /dev/null +++ b/src/assets/css/themes/darkly.scss @@ -0,0 +1,2 @@ +@import "variables.darkly"; +@import "../../../../node_modules/bootstrap-v4/scss/bootstrap"; diff --git a/src/assets/css/themes/litely-red.scss b/src/assets/css/themes/litely-red.scss new file mode 100644 index 00000000..388d70bd --- /dev/null +++ b/src/assets/css/themes/litely-red.scss @@ -0,0 +1,2 @@ +@import "variables.litely-red"; +@import "../../../../node_modules/bootstrap-v4/scss/bootstrap"; diff --git a/src/assets/css/themes/litely.scss b/src/assets/css/themes/litely.scss new file mode 100644 index 00000000..061bcc48 --- /dev/null +++ b/src/assets/css/themes/litely.scss @@ -0,0 +1,2 @@ +@import "variables.litely"; +@import "../../../../node_modules/bootstrap-v4/scss/bootstrap"; From 20c3b6bfb3ddbdecdd046ce34cf8cf5d96a4634b Mon Sep 17 00:00:00 2001 From: Florian Heft Date: Wed, 14 Jun 2023 01:14:05 +0200 Subject: [PATCH 03/26] Recompiled theme files using latest Bootstrap 4 * Rebuild the existing theme files using the new build system (93f00c9e). * Files should be functionally the same apart from possibly some Bootstrap fixes. Most of the diff is reordering and formatting (e.g. color values). --- src/assets/css/themes/darkly-red.css | 2635 +++++++++++++-------- src/assets/css/themes/darkly.css | 2625 +++++++++++++-------- src/assets/css/themes/litely-red.css | 3165 ++++++++++++++++---------- src/assets/css/themes/litely.css | 2851 ++++++++++++++--------- 4 files changed, 7156 insertions(+), 4120 deletions(-) diff --git a/src/assets/css/themes/darkly-red.css b/src/assets/css/themes/darkly-red.css index d742f8c9..073c3258 100644 --- a/src/assets/css/themes/darkly-red.css +++ b/src/assets/css/themes/darkly-red.css @@ -1,3 +1,10 @@ +@charset "UTF-8"; +/*! + * Bootstrap v4.6.2 (https://getbootstrap.com/) + * Copyright 2011-2022 The Bootstrap Authors + * Copyright 2011-2022 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + */ :root { --blue: #375a7f; --indigo: #6610f2; @@ -31,17 +38,20 @@ --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } + *, -::after, -::before { +*::before, +*::after { box-sizing: border-box; } + html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; - -webkit-tap-highlight-color: transparent; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } + article, aside, figcaption, @@ -54,11 +64,12 @@ nav, section { display: block; } + body { margin: 0; - font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - "Helvetica Neue", Cantarell, Arial, sans-serif, "Apple Color Emoji", - "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol"; font-size: 0.9375rem; font-weight: 400; line-height: 1.5; @@ -66,14 +77,17 @@ body { text-align: left; background-color: #222; } + [tabindex="-1"]:focus:not(:focus-visible) { outline: 0 !important; } + hr { box-sizing: content-box; height: 0; overflow: visible; } + h1, h2, h3, @@ -83,52 +97,63 @@ h6 { margin-top: 0; margin-bottom: 0.5rem; } + p { margin-top: 0; margin-bottom: 1rem; } -abbr[data-original-title], -abbr[title] { + +abbr[title], +abbr[data-original-title] { text-decoration: underline; text-decoration: underline dotted; cursor: help; border-bottom: 0; text-decoration-skip-ink: none; } + address { margin-bottom: 1rem; font-style: normal; line-height: inherit; } -dl, + ol, -ul { +ul, +dl { margin-top: 0; margin-bottom: 1rem; } + ol ol, +ul ul, ol ul, -ul ol, -ul ul { +ul ol { margin-bottom: 0; } + dt { font-weight: 700; } + dd { margin-bottom: 0.5rem; margin-left: 0; } + blockquote { margin: 0 0 1rem; } + b, strong { font-weight: bolder; } + small { font-size: 80%; } + sub, sup { position: relative; @@ -136,57 +161,68 @@ sup { line-height: 0; vertical-align: baseline; } + sub { bottom: -0.25em; } + sup { top: -0.5em; } + a { color: #e74c3c; text-decoration: none; background-color: transparent; } a:hover { - color: #a62f22; + color: #bf2718; text-decoration: underline; } -a:not([href]) { + +a:not([href]):not([class]) { color: inherit; text-decoration: none; } -a:not([href]):hover { +a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } + +pre, code, kbd, -pre, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; } + pre { margin-top: 0; margin-bottom: 1rem; overflow: auto; -ms-overflow-style: scrollbar; } + figure { margin: 0 0 1rem; } + img { vertical-align: middle; border-style: none; } + svg { overflow: hidden; vertical-align: middle; } + table { border-collapse: collapse; } + caption { padding-top: 0.75rem; padding-bottom: 0.75rem; @@ -194,78 +230,94 @@ caption { text-align: left; caption-side: bottom; } + th { text-align: inherit; + text-align: -webkit-match-parent; } + label { display: inline-block; margin-bottom: 0.5rem; } + button { border-radius: 0; } -button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; + +button:focus:not(:focus-visible) { + outline: 0; } -button, + input, -optgroup, +button, select, +optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } + button, input { overflow: visible; } + button, select { text-transform: none; } + [role="button"] { cursor: pointer; } + select { word-wrap: normal; } + +button, [type="button"], [type="reset"], -[type="submit"], -button { +[type="submit"] { -webkit-appearance: button; } + +button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), -[type="submit"]:not(:disabled), -button:not(:disabled) { +[type="submit"]:not(:disabled) { cursor: pointer; } + +button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner, -button::-moz-focus-inner { +[type="submit"]::-moz-focus-inner { padding: 0; border-style: none; } -input[type="checkbox"], -input[type="radio"] { + +input[type="radio"], +input[type="checkbox"] { box-sizing: border-box; padding: 0; } + textarea { overflow: auto; resize: vertical; } + fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } + legend { display: block; width: 100%; @@ -277,151 +329,183 @@ legend { color: inherit; white-space: normal; } + progress { vertical-align: baseline; } + [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } + [type="search"] { outline-offset: -2px; -webkit-appearance: none; } + [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } + ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } + output { display: inline-block; } + summary { display: list-item; cursor: pointer; } + template { display: none; } + [hidden] { display: none !important; } -.h1, -.h2, -.h3, -.h4, -.h5, -.h6, + h1, h2, h3, h4, h5, -h6 { +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; } -.h1, -h1 { + +h1, +.h1 { font-size: 3rem; } -.h2, -h2 { + +h2, +.h2 { font-size: 2.5rem; } -.h3, -h3 { + +h3, +.h3 { font-size: 2rem; } -.h4, -h4 { + +h4, +.h4 { font-size: 1.40625rem; } -.h5, -h5 { - font-size: 1.17188rem; + +h5, +.h5 { + font-size: 1.171875rem; } -.h6, -h6 { + +h6, +.h6 { font-size: 0.9375rem; } + .lead { - font-size: 1.17188rem; + font-size: 1.171875rem; font-weight: 300; } + .display-1 { font-size: 6rem; font-weight: 300; line-height: 1.2; } + .display-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.2; } + .display-3 { font-size: 4.5rem; font-weight: 300; line-height: 1.2; } + .display-4 { font-size: 3.5rem; font-weight: 300; line-height: 1.2; } + hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); } -.small, -small { - font-size: 80%; + +small, +.small { + font-size: 0.875em; font-weight: 400; } -.mark, -mark { + +mark, +.mark { padding: 0.2em; background-color: #333; } + .list-unstyled { padding-left: 0; list-style: none; } + .list-inline { padding-left: 0; list-style: none; } + .list-inline-item { display: inline-block; } .list-inline-item:not(:last-child) { margin-right: 0.5rem; } + .initialism { font-size: 90%; text-transform: uppercase; } + .blockquote { margin-bottom: 1rem; - font-size: 1.17188rem; + font-size: 1.171875rem; } + .blockquote-footer { display: block; - font-size: 80%; + font-size: 0.875em; color: #888; } .blockquote-footer::before { - content: "\2014\00A0"; + content: "— "; } + .img-fluid { max-width: 100%; height: auto; } + .img-thumbnail { padding: 0.25rem; background-color: #222; @@ -430,17 +514,21 @@ mark { max-width: 100%; height: auto; } + .figure { display: inline-block; } + .figure-img { margin-bottom: 0.5rem; line-height: 1; } + .figure-caption { font-size: 90%; color: #888; } + code { font-size: 87.5%; color: #e83e8c; @@ -449,6 +537,7 @@ code { a > code { color: inherit; } + kbd { padding: 0.2rem 0.4rem; font-size: 87.5%; @@ -461,6 +550,7 @@ kbd kbd { font-size: 100%; font-weight: 700; } + pre { display: block; font-size: 87.5%; @@ -471,75 +561,52 @@ pre code { color: inherit; word-break: normal; } + .pre-scrollable { max-height: 340px; overflow-y: scroll; } -.container { - width: 100%; - padding-right: 15px; - padding-left: 15px; - margin-right: auto; - margin-left: auto; -} -@media (min-width: 576px) { - .container { - max-width: 540px; - } -} -@media (min-width: 768px) { - .container { - max-width: 720px; - } -} -@media (min-width: 992px) { - .container { - max-width: 960px; - } -} -@media (min-width: 1200px) { - .container { - max-width: 1140px; - } -} + +.container, .container-fluid, +.container-xl, .container-lg, .container-md, -.container-sm, -.container-xl { +.container-sm { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } + @media (min-width: 576px) { - .container, - .container-sm { + .container-sm, + .container { max-width: 540px; } } @media (min-width: 768px) { - .container, .container-md, - .container-sm { + .container-sm, + .container { max-width: 720px; } } @media (min-width: 992px) { - .container, - .container-lg, - .container-md, - .container-sm { - max-width: 960px; - } -} -@media (min-width: 1200px) { - .container, .container-lg, .container-md, .container-sm, - .container-xl { + .container { + max-width: 960px; + } +} +@media (min-width: 1200px) { + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container { max-width: 1140px; } } @@ -549,6 +616,7 @@ pre code { margin-right: -15px; margin-left: -15px; } + .no-gutters { margin-right: 0; margin-left: 0; @@ -558,247 +626,293 @@ pre code { padding-right: 0; padding-left: 0; } -.col, -.col-1, -.col-10, -.col-11, -.col-12, -.col-2, -.col-3, -.col-4, -.col-5, -.col-6, -.col-7, -.col-8, -.col-9, -.col-auto, -.col-lg, -.col-lg-1, -.col-lg-10, -.col-lg-11, -.col-lg-12, -.col-lg-2, -.col-lg-3, -.col-lg-4, -.col-lg-5, -.col-lg-6, -.col-lg-7, -.col-lg-8, -.col-lg-9, -.col-lg-auto, -.col-md, -.col-md-1, -.col-md-10, -.col-md-11, -.col-md-12, -.col-md-2, -.col-md-3, -.col-md-4, -.col-md-5, -.col-md-6, -.col-md-7, -.col-md-8, -.col-md-9, -.col-md-auto, -.col-sm, -.col-sm-1, -.col-sm-10, -.col-sm-11, -.col-sm-12, -.col-sm-2, -.col-sm-3, -.col-sm-4, -.col-sm-5, -.col-sm-6, -.col-sm-7, -.col-sm-8, -.col-sm-9, -.col-sm-auto, + .col-xl, -.col-xl-1, -.col-xl-10, -.col-xl-11, +.col-xl-auto, .col-xl-12, -.col-xl-2, -.col-xl-3, -.col-xl-4, -.col-xl-5, -.col-xl-6, -.col-xl-7, -.col-xl-8, +.col-xl-11, +.col-xl-10, .col-xl-9, -.col-xl-auto { +.col-xl-8, +.col-xl-7, +.col-xl-6, +.col-xl-5, +.col-xl-4, +.col-xl-3, +.col-xl-2, +.col-xl-1, +.col-lg, +.col-lg-auto, +.col-lg-12, +.col-lg-11, +.col-lg-10, +.col-lg-9, +.col-lg-8, +.col-lg-7, +.col-lg-6, +.col-lg-5, +.col-lg-4, +.col-lg-3, +.col-lg-2, +.col-lg-1, +.col-md, +.col-md-auto, +.col-md-12, +.col-md-11, +.col-md-10, +.col-md-9, +.col-md-8, +.col-md-7, +.col-md-6, +.col-md-5, +.col-md-4, +.col-md-3, +.col-md-2, +.col-md-1, +.col-sm, +.col-sm-auto, +.col-sm-12, +.col-sm-11, +.col-sm-10, +.col-sm-9, +.col-sm-8, +.col-sm-7, +.col-sm-6, +.col-sm-5, +.col-sm-4, +.col-sm-3, +.col-sm-2, +.col-sm-1, +.col, +.col-auto, +.col-12, +.col-11, +.col-10, +.col-9, +.col-8, +.col-7, +.col-6, +.col-5, +.col-4, +.col-3, +.col-2, +.col-1 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } + .col { flex-basis: 0; flex-grow: 1; - min-width: 0; max-width: 100%; } + .row-cols-1 > * { flex: 0 0 100%; max-width: 100%; } + .row-cols-2 > * { flex: 0 0 50%; max-width: 50%; } + .row-cols-3 > * { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .row-cols-4 > * { flex: 0 0 25%; max-width: 25%; } + .row-cols-5 > * { flex: 0 0 20%; max-width: 20%; } + .row-cols-6 > * { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .col-auto { flex: 0 0 auto; width: auto; max-width: 100%; } + .col-1 { - flex: 0 0 8.33333%; - max-width: 8.33333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } + .col-2 { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } + .col-3 { flex: 0 0 25%; max-width: 25%; } + .col-4 { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } + .col-5 { - flex: 0 0 41.66667%; - max-width: 41.66667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } + .col-6 { flex: 0 0 50%; max-width: 50%; } + .col-7 { - flex: 0 0 58.33333%; - max-width: 58.33333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } + .col-8 { - flex: 0 0 66.66667%; - max-width: 66.66667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } + .col-9 { flex: 0 0 75%; max-width: 75%; } + .col-10 { - flex: 0 0 83.33333%; - max-width: 83.33333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } + .col-11 { - flex: 0 0 91.66667%; - max-width: 91.66667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } + .col-12 { flex: 0 0 100%; max-width: 100%; } + .order-first { order: -1; } + .order-last { order: 13; } + .order-0 { order: 0; } + .order-1 { order: 1; } + .order-2 { order: 2; } + .order-3 { order: 3; } + .order-4 { order: 4; } + .order-5 { order: 5; } + .order-6 { order: 6; } + .order-7 { order: 7; } + .order-8 { order: 8; } + .order-9 { order: 9; } + .order-10 { order: 10; } + .order-11 { order: 11; } + .order-12 { order: 12; } + .offset-1 { - margin-left: 8.33333%; + margin-left: 8.33333333%; } + .offset-2 { - margin-left: 16.66667%; + margin-left: 16.66666667%; } + .offset-3 { margin-left: 25%; } + .offset-4 { - margin-left: 33.33333%; + margin-left: 33.33333333%; } + .offset-5 { - margin-left: 41.66667%; + margin-left: 41.66666667%; } + .offset-6 { margin-left: 50%; } + .offset-7 { - margin-left: 58.33333%; + margin-left: 58.33333333%; } + .offset-8 { - margin-left: 66.66667%; + margin-left: 66.66666667%; } + .offset-9 { margin-left: 75%; } + .offset-10 { - margin-left: 83.33333%; + margin-left: 83.33333333%; } + .offset-11 { - margin-left: 91.66667%; + margin-left: 91.66666667%; } + @media (min-width: 576px) { .col-sm { flex-basis: 0; flex-grow: 1; - min-width: 0; max-width: 100%; } .row-cols-sm-1 > * { @@ -810,8 +924,8 @@ pre code { max-width: 50%; } .row-cols-sm-3 > * { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } .row-cols-sm-4 > * { flex: 0 0 25%; @@ -822,8 +936,8 @@ pre code { max-width: 20%; } .row-cols-sm-6 > * { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } .col-sm-auto { flex: 0 0 auto; @@ -831,48 +945,48 @@ pre code { max-width: 100%; } .col-sm-1 { - flex: 0 0 8.33333%; - max-width: 8.33333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } .col-sm-2 { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .col-sm-4 { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } .col-sm-5 { - flex: 0 0 41.66667%; - max-width: 41.66667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .col-sm-7 { - flex: 0 0 58.33333%; - max-width: 58.33333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } .col-sm-8 { - flex: 0 0 66.66667%; - max-width: 66.66667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } .col-sm-9 { flex: 0 0 75%; max-width: 75%; } .col-sm-10 { - flex: 0 0 83.33333%; - max-width: 83.33333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } .col-sm-11 { - flex: 0 0 91.66667%; - max-width: 91.66667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } .col-sm-12 { flex: 0 0 100%; @@ -927,44 +1041,43 @@ pre code { margin-left: 0; } .offset-sm-1 { - margin-left: 8.33333%; + margin-left: 8.33333333%; } .offset-sm-2 { - margin-left: 16.66667%; + margin-left: 16.66666667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { - margin-left: 33.33333%; + margin-left: 33.33333333%; } .offset-sm-5 { - margin-left: 41.66667%; + margin-left: 41.66666667%; } .offset-sm-6 { margin-left: 50%; } .offset-sm-7 { - margin-left: 58.33333%; + margin-left: 58.33333333%; } .offset-sm-8 { - margin-left: 66.66667%; + margin-left: 66.66666667%; } .offset-sm-9 { margin-left: 75%; } .offset-sm-10 { - margin-left: 83.33333%; + margin-left: 83.33333333%; } .offset-sm-11 { - margin-left: 91.66667%; + margin-left: 91.66666667%; } } @media (min-width: 768px) { .col-md { flex-basis: 0; flex-grow: 1; - min-width: 0; max-width: 100%; } .row-cols-md-1 > * { @@ -976,8 +1089,8 @@ pre code { max-width: 50%; } .row-cols-md-3 > * { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } .row-cols-md-4 > * { flex: 0 0 25%; @@ -988,8 +1101,8 @@ pre code { max-width: 20%; } .row-cols-md-6 > * { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } .col-md-auto { flex: 0 0 auto; @@ -997,48 +1110,48 @@ pre code { max-width: 100%; } .col-md-1 { - flex: 0 0 8.33333%; - max-width: 8.33333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } .col-md-2 { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } .col-md-5 { - flex: 0 0 41.66667%; - max-width: 41.66667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-7 { - flex: 0 0 58.33333%; - max-width: 58.33333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } .col-md-8 { - flex: 0 0 66.66667%; - max-width: 66.66667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-10 { - flex: 0 0 83.33333%; - max-width: 83.33333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } .col-md-11 { - flex: 0 0 91.66667%; - max-width: 91.66667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } .col-md-12 { flex: 0 0 100%; @@ -1093,44 +1206,43 @@ pre code { margin-left: 0; } .offset-md-1 { - margin-left: 8.33333%; + margin-left: 8.33333333%; } .offset-md-2 { - margin-left: 16.66667%; + margin-left: 16.66666667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { - margin-left: 33.33333%; + margin-left: 33.33333333%; } .offset-md-5 { - margin-left: 41.66667%; + margin-left: 41.66666667%; } .offset-md-6 { margin-left: 50%; } .offset-md-7 { - margin-left: 58.33333%; + margin-left: 58.33333333%; } .offset-md-8 { - margin-left: 66.66667%; + margin-left: 66.66666667%; } .offset-md-9 { margin-left: 75%; } .offset-md-10 { - margin-left: 83.33333%; + margin-left: 83.33333333%; } .offset-md-11 { - margin-left: 91.66667%; + margin-left: 91.66666667%; } } @media (min-width: 992px) { .col-lg { flex-basis: 0; flex-grow: 1; - min-width: 0; max-width: 100%; } .row-cols-lg-1 > * { @@ -1142,8 +1254,8 @@ pre code { max-width: 50%; } .row-cols-lg-3 > * { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } .row-cols-lg-4 > * { flex: 0 0 25%; @@ -1154,8 +1266,8 @@ pre code { max-width: 20%; } .row-cols-lg-6 > * { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } .col-lg-auto { flex: 0 0 auto; @@ -1163,48 +1275,48 @@ pre code { max-width: 100%; } .col-lg-1 { - flex: 0 0 8.33333%; - max-width: 8.33333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } .col-lg-2 { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .col-lg-4 { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } .col-lg-5 { - flex: 0 0 41.66667%; - max-width: 41.66667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .col-lg-7 { - flex: 0 0 58.33333%; - max-width: 58.33333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } .col-lg-8 { - flex: 0 0 66.66667%; - max-width: 66.66667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } .col-lg-9 { flex: 0 0 75%; max-width: 75%; } .col-lg-10 { - flex: 0 0 83.33333%; - max-width: 83.33333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } .col-lg-11 { - flex: 0 0 91.66667%; - max-width: 91.66667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } .col-lg-12 { flex: 0 0 100%; @@ -1259,44 +1371,43 @@ pre code { margin-left: 0; } .offset-lg-1 { - margin-left: 8.33333%; + margin-left: 8.33333333%; } .offset-lg-2 { - margin-left: 16.66667%; + margin-left: 16.66666667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { - margin-left: 33.33333%; + margin-left: 33.33333333%; } .offset-lg-5 { - margin-left: 41.66667%; + margin-left: 41.66666667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { - margin-left: 58.33333%; + margin-left: 58.33333333%; } .offset-lg-8 { - margin-left: 66.66667%; + margin-left: 66.66666667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { - margin-left: 83.33333%; + margin-left: 83.33333333%; } .offset-lg-11 { - margin-left: 91.66667%; + margin-left: 91.66666667%; } } @media (min-width: 1200px) { .col-xl { flex-basis: 0; flex-grow: 1; - min-width: 0; max-width: 100%; } .row-cols-xl-1 > * { @@ -1308,8 +1419,8 @@ pre code { max-width: 50%; } .row-cols-xl-3 > * { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } .row-cols-xl-4 > * { flex: 0 0 25%; @@ -1320,8 +1431,8 @@ pre code { max-width: 20%; } .row-cols-xl-6 > * { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } .col-xl-auto { flex: 0 0 auto; @@ -1329,48 +1440,48 @@ pre code { max-width: 100%; } .col-xl-1 { - flex: 0 0 8.33333%; - max-width: 8.33333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } .col-xl-2 { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } .col-xl-3 { flex: 0 0 25%; max-width: 25%; } .col-xl-4 { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } .col-xl-5 { - flex: 0 0 41.66667%; - max-width: 41.66667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } .col-xl-6 { flex: 0 0 50%; max-width: 50%; } .col-xl-7 { - flex: 0 0 58.33333%; - max-width: 58.33333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } .col-xl-8 { - flex: 0 0 66.66667%; - max-width: 66.66667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } .col-xl-9 { flex: 0 0 75%; max-width: 75%; } .col-xl-10 { - flex: 0 0 83.33333%; - max-width: 83.33333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } .col-xl-11 { - flex: 0 0 91.66667%; - max-width: 91.66667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } .col-xl-12 { flex: 0 0 100%; @@ -1425,37 +1536,37 @@ pre code { margin-left: 0; } .offset-xl-1 { - margin-left: 8.33333%; + margin-left: 8.33333333%; } .offset-xl-2 { - margin-left: 16.66667%; + margin-left: 16.66666667%; } .offset-xl-3 { margin-left: 25%; } .offset-xl-4 { - margin-left: 33.33333%; + margin-left: 33.33333333%; } .offset-xl-5 { - margin-left: 41.66667%; + margin-left: 41.66666667%; } .offset-xl-6 { margin-left: 50%; } .offset-xl-7 { - margin-left: 58.33333%; + margin-left: 58.33333333%; } .offset-xl-8 { - margin-left: 66.66667%; + margin-left: 66.66666667%; } .offset-xl-9 { margin-left: 75%; } .offset-xl-10 { - margin-left: 83.33333%; + margin-left: 83.33333333%; } .offset-xl-11 { - margin-left: 91.66667%; + margin-left: 91.66666667%; } } .table { @@ -1463,8 +1574,8 @@ pre code { margin-bottom: 1rem; color: #dee2e6; } -.table td, -.table th { +.table th, +.table td { padding: 0.75rem; vertical-align: top; border-top: 1px solid #444; @@ -1476,45 +1587,52 @@ pre code { .table tbody + tbody { border-top: 2px solid #444; } -.table-sm td, -.table-sm th { + +.table-sm th, +.table-sm td { padding: 0.3rem; } + .table-bordered { border: 1px solid #444; } -.table-bordered td, -.table-bordered th { +.table-bordered th, +.table-bordered td { border: 1px solid #444; } -.table-bordered thead td, -.table-bordered thead th { +.table-bordered thead th, +.table-bordered thead td { border-bottom-width: 2px; } -.table-borderless tbody + tbody, -.table-borderless td, + .table-borderless th, -.table-borderless thead th { +.table-borderless td, +.table-borderless thead th, +.table-borderless tbody + tbody { border: 0; } + .table-striped tbody tr:nth-of-type(odd) { background-color: #303030; } + .table-hover tbody tr:hover { color: #dee2e6; background-color: rgba(0, 0, 0, 0.075); } + .table-primary, -.table-primary > td, -.table-primary > th { +.table-primary > th, +.table-primary > td { background-color: #c7d1db; } -.table-primary tbody + tbody, -.table-primary td, .table-primary th, -.table-primary thead th { +.table-primary td, +.table-primary thead th, +.table-primary tbody + tbody { border-color: #97a9bc; } + .table-hover .table-primary:hover { background-color: #b7c4d1; } @@ -1522,17 +1640,19 @@ pre code { .table-hover .table-primary:hover > th { background-color: #b7c4d1; } + .table-secondary, -.table-secondary > td, -.table-secondary > th { +.table-secondary > th, +.table-secondary > td { background-color: #cbcbcb; } -.table-secondary tbody + tbody, -.table-secondary td, .table-secondary th, -.table-secondary thead th { +.table-secondary td, +.table-secondary thead th, +.table-secondary tbody + tbody { border-color: #9e9e9e; } + .table-hover .table-secondary:hover { background-color: #bebebe; } @@ -1540,17 +1660,19 @@ pre code { .table-hover .table-secondary:hover > th { background-color: #bebebe; } + .table-success, -.table-success > td, -.table-success > th { +.table-success > th, +.table-success > td { background-color: #b8ecdf; } -.table-success tbody + tbody, -.table-success td, .table-success th, -.table-success thead th { +.table-success td, +.table-success thead th, +.table-success tbody + tbody { border-color: #7adcc3; } + .table-hover .table-success:hover { background-color: #a4e7d6; } @@ -1558,17 +1680,19 @@ pre code { .table-hover .table-success:hover > th { background-color: #a4e7d6; } + .table-info, -.table-info > td, -.table-info > th { +.table-info > th, +.table-info > td { background-color: #c6e2f5; } -.table-info tbody + tbody, -.table-info td, .table-info th, -.table-info thead th { +.table-info td, +.table-info thead th, +.table-info tbody + tbody { border-color: #95c9ec; } + .table-hover .table-info:hover { background-color: #b0d7f1; } @@ -1576,17 +1700,19 @@ pre code { .table-hover .table-info:hover > th { background-color: #b0d7f1; } + .table-warning, -.table-warning > td, -.table-warning > th { +.table-warning > th, +.table-warning > td { background-color: #fce3bd; } -.table-warning tbody + tbody, -.table-warning td, .table-warning th, -.table-warning thead th { +.table-warning td, +.table-warning thead th, +.table-warning tbody + tbody { border-color: #f9cc84; } + .table-hover .table-warning:hover { background-color: #fbd9a5; } @@ -1594,17 +1720,19 @@ pre code { .table-hover .table-warning:hover > th { background-color: #fbd9a5; } + .table-danger, -.table-danger > td, -.table-danger > th { +.table-danger > th, +.table-danger > td { background-color: #f8cdc8; } -.table-danger tbody + tbody, -.table-danger td, .table-danger th, -.table-danger thead th { +.table-danger td, +.table-danger thead th, +.table-danger tbody + tbody { border-color: #f3a29a; } + .table-hover .table-danger:hover { background-color: #f5b8b1; } @@ -1612,17 +1740,19 @@ pre code { .table-hover .table-danger:hover > th { background-color: #f5b8b1; } + .table-light, -.table-light > td, -.table-light > th { +.table-light > th, +.table-light > td { background-color: #c5c5c5; } -.table-light tbody + tbody, -.table-light td, .table-light th, -.table-light thead th { +.table-light td, +.table-light thead th, +.table-light tbody + tbody { border-color: #939393; } + .table-hover .table-light:hover { background-color: #b8b8b8; } @@ -1630,17 +1760,19 @@ pre code { .table-hover .table-light:hover > th { background-color: #b8b8b8; } + .table-dark, -.table-dark > td, -.table-dark > th { +.table-dark > th, +.table-dark > td { background-color: #f6f7f8; } -.table-dark tbody + tbody, -.table-dark td, .table-dark th, -.table-dark thead th { +.table-dark td, +.table-dark thead th, +.table-dark tbody + tbody { border-color: #eef0f2; } + .table-hover .table-dark:hover { background-color: #e8eaed; } @@ -1648,11 +1780,13 @@ pre code { .table-hover .table-dark:hover > th { background-color: #e8eaed; } + .table-active, -.table-active > td, -.table-active > th { +.table-active > th, +.table-active > td { background-color: rgba(0, 0, 0, 0.075); } + .table-hover .table-active:hover { background-color: rgba(0, 0, 0, 0.075); } @@ -1660,6 +1794,7 @@ pre code { .table-hover .table-active:hover > th { background-color: rgba(0, 0, 0, 0.075); } + .table .thead-dark th { color: #fff; background-color: #303030; @@ -1670,12 +1805,13 @@ pre code { background-color: #ebebeb; border-color: #444; } + .table-dark { color: #fff; background-color: #303030; } -.table-dark td, .table-dark th, +.table-dark td, .table-dark thead th { border-color: #434343; } @@ -1689,6 +1825,7 @@ pre code { color: #fff; background-color: rgba(255, 255, 255, 0.075); } + @media (max-width: 575.98px) { .table-responsive-sm { display: block; @@ -1742,6 +1879,7 @@ pre code { .table-responsive > .table-bordered { border: 0; } + .form-control { display: block; width: 100%; @@ -1766,14 +1904,10 @@ pre code { background-color: transparent; border: 0; } -.form-control:-moz-focusring { - color: transparent; - text-shadow: 0 0 0 #fff; -} .form-control:focus { color: #fff; background-color: #444; - border-color: #c27373; + border-color: #739ac2; outline: 0; box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25); } @@ -1786,21 +1920,29 @@ pre code { background-color: #2b2b2b; opacity: 1; } + input[type="date"].form-control, +input[type="time"].form-control, input[type="datetime-local"].form-control, -input[type="month"].form-control, -input[type="time"].form-control { +input[type="month"].form-control { appearance: none; } + +select.form-control:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #fff; +} select.form-control:focus::-ms-value { color: #fff; background-color: #444; } + .form-control-file, .form-control-range { display: block; width: 100%; } + .col-form-label { padding-top: calc(0.375rem + 1px); padding-bottom: calc(0.375rem + 1px); @@ -1808,18 +1950,21 @@ select.form-control:focus::-ms-value { font-size: inherit; line-height: 1.5; } + .col-form-label-lg { padding-top: calc(0.5rem + 1px); padding-bottom: calc(0.5rem + 1px); - font-size: 1.17188rem; + font-size: 1.171875rem; line-height: 1.5; } + .col-form-label-sm { padding-top: calc(0.25rem + 1px); padding-bottom: calc(0.25rem + 1px); - font-size: 0.82031rem; + font-size: 0.8203125rem; line-height: 1.5; } + .form-control-plaintext { display: block; width: 100%; @@ -1832,39 +1977,46 @@ select.form-control:focus::-ms-value { border: solid transparent; border-width: 1px 0; } -.form-control-plaintext.form-control-lg, -.form-control-plaintext.form-control-sm { +.form-control-plaintext.form-control-sm, +.form-control-plaintext.form-control-lg { padding-right: 0; padding-left: 0; } + .form-control-sm { height: calc(1.5em + 0.5rem + 2px); padding: 0.25rem 0.5rem; - font-size: 0.82031rem; + font-size: 0.8203125rem; line-height: 1.5; border-radius: 0.2rem; } + .form-control-lg { height: calc(1.5em + 1rem + 2px); padding: 0.5rem 1rem; - font-size: 1.17188rem; + font-size: 1.171875rem; line-height: 1.5; border-radius: 0.3rem; } -select.form-control[multiple], -select.form-control[size] { + +select.form-control[size], +select.form-control[multiple] { height: auto; } + textarea.form-control { height: auto; } + .form-group { margin-bottom: 1rem; } + .form-text { display: block; margin-top: 0.25rem; } + .form-row { display: flex; flex-wrap: wrap; @@ -1876,23 +2028,27 @@ textarea.form-control { padding-right: 5px; padding-left: 5px; } + .form-check { position: relative; display: block; padding-left: 1.25rem; } + .form-check-input { position: absolute; margin-top: 0.3rem; margin-left: -1.25rem; } -.form-check-input:disabled ~ .form-check-label, -.form-check-input[disabled] ~ .form-check-label { +.form-check-input[disabled] ~ .form-check-label, +.form-check-input:disabled ~ .form-check-label { color: #888; } + .form-check-label { margin-bottom: 0; } + .form-check-inline { display: inline-flex; align-items: center; @@ -1905,224 +2061,267 @@ textarea.form-control { margin-right: 0.3125rem; margin-left: 0; } + .valid-feedback { display: none; width: 100%; margin-top: 0.25rem; - font-size: 80%; + font-size: 0.875em; color: #00bc8c; } + .valid-tooltip { position: absolute; top: 100%; + left: 0; z-index: 5; display: none; max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; - font-size: 0.82031rem; + font-size: 0.8203125rem; line-height: 1.5; color: #fff; background-color: rgba(0, 188, 140, 0.9); border-radius: 0.25rem; } -.is-valid ~ .valid-feedback, -.is-valid ~ .valid-tooltip, +.form-row > .col > .valid-tooltip, +.form-row > [class*="col-"] > .valid-tooltip { + left: 5px; +} + .was-validated :valid ~ .valid-feedback, -.was-validated :valid ~ .valid-tooltip { +.was-validated :valid ~ .valid-tooltip, +.is-valid ~ .valid-feedback, +.is-valid ~ .valid-tooltip { display: block; } -.form-control.is-valid, -.was-validated .form-control:valid { + +.was-validated .form-control:valid, +.form-control.is-valid { border-color: #00bc8c; - padding-right: calc(1.5em + 0.75rem); + padding-right: calc(1.5em + 0.75rem) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2300bc8c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } -.form-control.is-valid:focus, -.was-validated .form-control:valid:focus { +.was-validated .form-control:valid:focus, +.form-control.is-valid:focus { border-color: #00bc8c; box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25); } + +.was-validated select.form-control:valid, +select.form-control.is-valid { + padding-right: 3rem !important; + background-position: right 1.5rem center; +} + .was-validated textarea.form-control:valid, textarea.form-control.is-valid { padding-right: calc(1.5em + 0.75rem); background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); } -.custom-select.is-valid, -.was-validated .custom-select:valid { + +.was-validated .custom-select:valid, +.custom-select.is-valid { border-color: #00bc8c; - padding-right: calc(0.75em + 2.3125rem); + padding-right: calc(0.75em + 2.3125rem) !important; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") - no-repeat right 0.75rem center/8px 10px, - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2300bc8c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") - #444 no-repeat center right 1.75rem / calc(0.75em + 0.375rem) - calc(0.75em + 0.375rem); + right 0.75rem center/8px 10px no-repeat, + #444 + url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2300bc8c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") + center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) + no-repeat; } -.custom-select.is-valid:focus, -.was-validated .custom-select:valid:focus { +.was-validated .custom-select:valid:focus, +.custom-select.is-valid:focus { border-color: #00bc8c; box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25); } -.form-check-input.is-valid ~ .form-check-label, -.was-validated .form-check-input:valid ~ .form-check-label { + +.was-validated .form-check-input:valid ~ .form-check-label, +.form-check-input.is-valid ~ .form-check-label { color: #00bc8c; } -.form-check-input.is-valid ~ .valid-feedback, -.form-check-input.is-valid ~ .valid-tooltip, .was-validated .form-check-input:valid ~ .valid-feedback, -.was-validated .form-check-input:valid ~ .valid-tooltip { +.was-validated .form-check-input:valid ~ .valid-tooltip, +.form-check-input.is-valid ~ .valid-feedback, +.form-check-input.is-valid ~ .valid-tooltip { display: block; } -.custom-control-input.is-valid ~ .custom-control-label, -.was-validated .custom-control-input:valid ~ .custom-control-label { + +.was-validated .custom-control-input:valid ~ .custom-control-label, +.custom-control-input.is-valid ~ .custom-control-label { color: #00bc8c; } -.custom-control-input.is-valid ~ .custom-control-label::before, -.was-validated .custom-control-input:valid ~ .custom-control-label::before { +.was-validated .custom-control-input:valid ~ .custom-control-label::before, +.custom-control-input.is-valid ~ .custom-control-label::before { border-color: #00bc8c; } -.custom-control-input.is-valid:checked ~ .custom-control-label::before, .was-validated .custom-control-input:valid:checked - ~ .custom-control-label::before { + ~ .custom-control-label::before, +.custom-control-input.is-valid:checked ~ .custom-control-label::before { border-color: #00efb2; background-color: #00efb2; } -.custom-control-input.is-valid:focus ~ .custom-control-label::before, .was-validated .custom-control-input:valid:focus - ~ .custom-control-label::before { + ~ .custom-control-label::before, +.custom-control-input.is-valid:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25); } -.custom-control-input.is-valid:focus:not(:checked) - ~ .custom-control-label::before, .was-validated .custom-control-input:valid:focus:not(:checked) + ~ .custom-control-label::before, +.custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before { border-color: #00bc8c; } -.custom-file-input.is-valid ~ .custom-file-label, -.was-validated .custom-file-input:valid ~ .custom-file-label { + +.was-validated .custom-file-input:valid ~ .custom-file-label, +.custom-file-input.is-valid ~ .custom-file-label { border-color: #00bc8c; } -.custom-file-input.is-valid:focus ~ .custom-file-label, -.was-validated .custom-file-input:valid:focus ~ .custom-file-label { +.was-validated .custom-file-input:valid:focus ~ .custom-file-label, +.custom-file-input.is-valid:focus ~ .custom-file-label { border-color: #00bc8c; box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25); } + .invalid-feedback { display: none; width: 100%; margin-top: 0.25rem; - font-size: 80%; + font-size: 0.875em; color: #e74c3c; } + .invalid-tooltip { position: absolute; top: 100%; + left: 0; z-index: 5; display: none; max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; - font-size: 0.82031rem; + font-size: 0.8203125rem; line-height: 1.5; color: #fff; background-color: rgba(231, 76, 60, 0.9); border-radius: 0.25rem; } -.is-invalid ~ .invalid-feedback, -.is-invalid ~ .invalid-tooltip, +.form-row > .col > .invalid-tooltip, +.form-row > [class*="col-"] > .invalid-tooltip { + left: 5px; +} + .was-validated :invalid ~ .invalid-feedback, -.was-validated :invalid ~ .invalid-tooltip { +.was-validated :invalid ~ .invalid-tooltip, +.is-invalid ~ .invalid-feedback, +.is-invalid ~ .invalid-tooltip { display: block; } -.form-control.is-invalid, -.was-validated .form-control:invalid { + +.was-validated .form-control:invalid, +.form-control.is-invalid { border-color: #e74c3c; - padding-right: calc(1.5em + 0.75rem); + padding-right: calc(1.5em + 0.75rem) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e74c3c' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e74c3c' stroke='none'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } -.form-control.is-invalid:focus, -.was-validated .form-control:invalid:focus { +.was-validated .form-control:invalid:focus, +.form-control.is-invalid:focus { border-color: #e74c3c; box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25); } + +.was-validated select.form-control:invalid, +select.form-control.is-invalid { + padding-right: 3rem !important; + background-position: right 1.5rem center; +} + .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { padding-right: calc(1.5em + 0.75rem); background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); } -.custom-select.is-invalid, -.was-validated .custom-select:invalid { + +.was-validated .custom-select:invalid, +.custom-select.is-invalid { border-color: #e74c3c; - padding-right: calc(0.75em + 2.3125rem); + padding-right: calc(0.75em + 2.3125rem) !important; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") - no-repeat right 0.75rem center/8px 10px, - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e74c3c' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e74c3c' stroke='none'/%3e%3c/svg%3e") - #444 no-repeat center right 1.75rem / calc(0.75em + 0.375rem) - calc(0.75em + 0.375rem); + right 0.75rem center/8px 10px no-repeat, + #444 + url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e74c3c' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e74c3c' stroke='none'/%3e%3c/svg%3e") + center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) + no-repeat; } -.custom-select.is-invalid:focus, -.was-validated .custom-select:invalid:focus { +.was-validated .custom-select:invalid:focus, +.custom-select.is-invalid:focus { border-color: #e74c3c; box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25); } -.form-check-input.is-invalid ~ .form-check-label, -.was-validated .form-check-input:invalid ~ .form-check-label { + +.was-validated .form-check-input:invalid ~ .form-check-label, +.form-check-input.is-invalid ~ .form-check-label { color: #e74c3c; } -.form-check-input.is-invalid ~ .invalid-feedback, -.form-check-input.is-invalid ~ .invalid-tooltip, .was-validated .form-check-input:invalid ~ .invalid-feedback, -.was-validated .form-check-input:invalid ~ .invalid-tooltip { +.was-validated .form-check-input:invalid ~ .invalid-tooltip, +.form-check-input.is-invalid ~ .invalid-feedback, +.form-check-input.is-invalid ~ .invalid-tooltip { display: block; } -.custom-control-input.is-invalid ~ .custom-control-label, -.was-validated .custom-control-input:invalid ~ .custom-control-label { + +.was-validated .custom-control-input:invalid ~ .custom-control-label, +.custom-control-input.is-invalid ~ .custom-control-label { color: #e74c3c; } -.custom-control-input.is-invalid ~ .custom-control-label::before, -.was-validated .custom-control-input:invalid ~ .custom-control-label::before { +.was-validated .custom-control-input:invalid ~ .custom-control-label::before, +.custom-control-input.is-invalid ~ .custom-control-label::before { border-color: #e74c3c; } -.custom-control-input.is-invalid:checked ~ .custom-control-label::before, .was-validated .custom-control-input:invalid:checked - ~ .custom-control-label::before { + ~ .custom-control-label::before, +.custom-control-input.is-invalid:checked ~ .custom-control-label::before { border-color: #ed7669; background-color: #ed7669; } -.custom-control-input.is-invalid:focus ~ .custom-control-label::before, .was-validated .custom-control-input:invalid:focus - ~ .custom-control-label::before { + ~ .custom-control-label::before, +.custom-control-input.is-invalid:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25); } -.custom-control-input.is-invalid:focus:not(:checked) - ~ .custom-control-label::before, .was-validated .custom-control-input:invalid:focus:not(:checked) + ~ .custom-control-label::before, +.custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before { border-color: #e74c3c; } -.custom-file-input.is-invalid ~ .custom-file-label, -.was-validated .custom-file-input:invalid ~ .custom-file-label { + +.was-validated .custom-file-input:invalid ~ .custom-file-label, +.custom-file-input.is-invalid ~ .custom-file-label { border-color: #e74c3c; } -.custom-file-input.is-invalid:focus ~ .custom-file-label, -.was-validated .custom-file-input:invalid:focus ~ .custom-file-label { +.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, +.custom-file-input.is-invalid:focus ~ .custom-file-label { border-color: #e74c3c; box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25); } + .form-inline { display: flex; flex-flow: row wrap; @@ -2153,8 +2352,8 @@ textarea.form-control.is-invalid { .form-inline .form-control-plaintext { display: inline-block; } - .form-inline .custom-select, - .form-inline .input-group { + .form-inline .input-group, + .form-inline .custom-select { width: auto; } .form-inline .form-check { @@ -2179,6 +2378,7 @@ textarea.form-control.is-invalid { margin-bottom: 0; } } + .btn { display: inline-block; font-weight: 400; @@ -2204,8 +2404,8 @@ textarea.form-control.is-invalid { color: #dee2e6; text-decoration: none; } -.btn.focus, -.btn:focus { +.btn:focus, +.btn.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25); } @@ -2220,6 +2420,7 @@ a.btn.disabled, fieldset:disabled a.btn { pointer-events: none; } + .btn-primary { color: #fff; background-color: #375a7f; @@ -2230,8 +2431,8 @@ fieldset:disabled a.btn { background-color: #2b4764; border-color: #28415b; } -.btn-primary.focus, -.btn-primary:focus { +.btn-primary:focus, +.btn-primary.focus { color: #fff; background-color: #2b4764; border-color: #28415b; @@ -2243,18 +2444,19 @@ fieldset:disabled a.btn { background-color: #375a7f; border-color: #375a7f; } -.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, +.btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { color: #fff; background-color: #28415b; border-color: #243a53; } -.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, +.btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(85, 115, 146, 0.5); } + .btn-secondary { color: #fff; background-color: #444; @@ -2265,8 +2467,8 @@ fieldset:disabled a.btn { background-color: #313131; border-color: #2b2b2b; } -.btn-secondary.focus, -.btn-secondary:focus { +.btn-secondary:focus, +.btn-secondary.focus { color: #fff; background-color: #313131; border-color: #2b2b2b; @@ -2278,18 +2480,19 @@ fieldset:disabled a.btn { background-color: #444; border-color: #444; } -.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, +.btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { color: #fff; background-color: #2b2b2b; border-color: #242424; } -.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, +.btn-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(96, 96, 96, 0.5); } + .btn-success { color: #fff; background-color: #00bc8c; @@ -2300,8 +2503,8 @@ fieldset:disabled a.btn { background-color: #009670; border-color: #008966; } -.btn-success.focus, -.btn-success:focus { +.btn-success:focus, +.btn-success.focus { color: #fff; background-color: #009670; border-color: #008966; @@ -2313,18 +2516,19 @@ fieldset:disabled a.btn { background-color: #00bc8c; border-color: #00bc8c; } -.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, +.btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle { color: #fff; background-color: #008966; border-color: #007c5d; } -.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, +.btn-success:not(:disabled):not(.disabled).active:focus, .show > .btn-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(38, 198, 157, 0.5); } + .btn-info { color: #fff; background-color: #3498db; @@ -2335,8 +2539,8 @@ fieldset:disabled a.btn { background-color: #2384c6; border-color: #217dbb; } -.btn-info.focus, -.btn-info:focus { +.btn-info:focus, +.btn-info.focus { color: #fff; background-color: #2384c6; border-color: #217dbb; @@ -2348,18 +2552,19 @@ fieldset:disabled a.btn { background-color: #3498db; border-color: #3498db; } -.btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, +.btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle { color: #fff; background-color: #217dbb; border-color: #1f76b0; } -.btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus, +.btn-info:not(:disabled):not(.disabled).active:focus, .show > .btn-info.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(82, 167, 224, 0.5); } + .btn-warning { color: #fff; background-color: #f39c12; @@ -2370,8 +2575,8 @@ fieldset:disabled a.btn { background-color: #d4860b; border-color: #c87f0a; } -.btn-warning.focus, -.btn-warning:focus { +.btn-warning:focus, +.btn-warning.focus { color: #fff; background-color: #d4860b; border-color: #c87f0a; @@ -2383,18 +2588,19 @@ fieldset:disabled a.btn { background-color: #f39c12; border-color: #f39c12; } -.btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, +.btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle { color: #fff; background-color: #c87f0a; border-color: #bc770a; } -.btn-warning:not(:disabled):not(.disabled).active:focus, .btn-warning:not(:disabled):not(.disabled):active:focus, +.btn-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-warning.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(245, 171, 54, 0.5); } + .btn-danger { color: #fff; background-color: #e74c3c; @@ -2405,8 +2611,8 @@ fieldset:disabled a.btn { background-color: #e12e1c; border-color: #d62c1a; } -.btn-danger.focus, -.btn-danger:focus { +.btn-danger:focus, +.btn-danger.focus { color: #fff; background-color: #e12e1c; border-color: #d62c1a; @@ -2418,18 +2624,19 @@ fieldset:disabled a.btn { background-color: #e74c3c; border-color: #e74c3c; } -.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, +.btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle { color: #fff; background-color: #d62c1a; border-color: #ca2a19; } -.btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus, +.btn-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(235, 103, 89, 0.5); } + .btn-light { color: #fff; background-color: #303030; @@ -2440,8 +2647,8 @@ fieldset:disabled a.btn { background-color: #1d1d1d; border-color: #171717; } -.btn-light.focus, -.btn-light:focus { +.btn-light:focus, +.btn-light.focus { color: #fff; background-color: #1d1d1d; border-color: #171717; @@ -2453,18 +2660,19 @@ fieldset:disabled a.btn { background-color: #303030; border-color: #303030; } -.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, +.btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle { color: #fff; background-color: #171717; border-color: #101010; } -.btn-light:not(:disabled):not(.disabled).active:focus, .btn-light:not(:disabled):not(.disabled):active:focus, +.btn-light:not(:disabled):not(.disabled).active:focus, .show > .btn-light.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(79, 79, 79, 0.5); } + .btn-dark { color: #222; background-color: #dee2e6; @@ -2475,8 +2683,8 @@ fieldset:disabled a.btn { background-color: #c8cfd6; border-color: #c1c9d0; } -.btn-dark.focus, -.btn-dark:focus { +.btn-dark:focus, +.btn-dark.focus { color: #222; background-color: #c8cfd6; border-color: #c1c9d0; @@ -2488,18 +2696,19 @@ fieldset:disabled a.btn { background-color: #dee2e6; border-color: #dee2e6; } -.btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active, +.btn-dark:not(:disabled):not(.disabled).active, .show > .btn-dark.dropdown-toggle { color: #222; background-color: #c1c9d0; border-color: #bac2cb; } -.btn-dark:not(:disabled):not(.disabled).active:focus, .btn-dark:not(:disabled):not(.disabled):active:focus, +.btn-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(194, 197, 201, 0.5); } + .btn-outline-primary { color: #375a7f; border-color: #375a7f; @@ -2509,8 +2718,8 @@ fieldset:disabled a.btn { background-color: #375a7f; border-color: #375a7f; } -.btn-outline-primary.focus, -.btn-outline-primary:focus { +.btn-outline-primary:focus, +.btn-outline-primary.focus { box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.5); } .btn-outline-primary.disabled, @@ -2518,18 +2727,19 @@ fieldset:disabled a.btn { color: #375a7f; background-color: transparent; } -.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, +.btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle { color: #fff; background-color: #375a7f; border-color: #375a7f; } -.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, +.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.5); } + .btn-outline-secondary { color: #444; border-color: #444; @@ -2539,8 +2749,8 @@ fieldset:disabled a.btn { background-color: #444; border-color: #444; } -.btn-outline-secondary.focus, -.btn-outline-secondary:focus { +.btn-outline-secondary:focus, +.btn-outline-secondary.focus { box-shadow: 0 0 0 0.2rem rgba(68, 68, 68, 0.5); } .btn-outline-secondary.disabled, @@ -2548,18 +2758,19 @@ fieldset:disabled a.btn { color: #444; background-color: transparent; } -.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, +.btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle { color: #fff; background-color: #444; border-color: #444; } -.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, +.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(68, 68, 68, 0.5); } + .btn-outline-success { color: #00bc8c; border-color: #00bc8c; @@ -2569,8 +2780,8 @@ fieldset:disabled a.btn { background-color: #00bc8c; border-color: #00bc8c; } -.btn-outline-success.focus, -.btn-outline-success:focus { +.btn-outline-success:focus, +.btn-outline-success.focus { box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.5); } .btn-outline-success.disabled, @@ -2578,18 +2789,19 @@ fieldset:disabled a.btn { color: #00bc8c; background-color: transparent; } -.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active, +.btn-outline-success:not(:disabled):not(.disabled).active, .show > .btn-outline-success.dropdown-toggle { color: #fff; background-color: #00bc8c; border-color: #00bc8c; } -.btn-outline-success:not(:disabled):not(.disabled).active:focus, .btn-outline-success:not(:disabled):not(.disabled):active:focus, +.btn-outline-success:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.5); } + .btn-outline-info { color: #3498db; border-color: #3498db; @@ -2599,8 +2811,8 @@ fieldset:disabled a.btn { background-color: #3498db; border-color: #3498db; } -.btn-outline-info.focus, -.btn-outline-info:focus { +.btn-outline-info:focus, +.btn-outline-info.focus { box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5); } .btn-outline-info.disabled, @@ -2608,18 +2820,19 @@ fieldset:disabled a.btn { color: #3498db; background-color: transparent; } -.btn-outline-info:not(:disabled):not(.disabled).active, .btn-outline-info:not(:disabled):not(.disabled):active, +.btn-outline-info:not(:disabled):not(.disabled).active, .show > .btn-outline-info.dropdown-toggle { color: #fff; background-color: #3498db; border-color: #3498db; } -.btn-outline-info:not(:disabled):not(.disabled).active:focus, .btn-outline-info:not(:disabled):not(.disabled):active:focus, +.btn-outline-info:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-info.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5); } + .btn-outline-warning { color: #f39c12; border-color: #f39c12; @@ -2629,8 +2842,8 @@ fieldset:disabled a.btn { background-color: #f39c12; border-color: #f39c12; } -.btn-outline-warning.focus, -.btn-outline-warning:focus { +.btn-outline-warning:focus, +.btn-outline-warning.focus { box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.5); } .btn-outline-warning.disabled, @@ -2638,18 +2851,19 @@ fieldset:disabled a.btn { color: #f39c12; background-color: transparent; } -.btn-outline-warning:not(:disabled):not(.disabled).active, .btn-outline-warning:not(:disabled):not(.disabled):active, +.btn-outline-warning:not(:disabled):not(.disabled).active, .show > .btn-outline-warning.dropdown-toggle { color: #fff; background-color: #f39c12; border-color: #f39c12; } -.btn-outline-warning:not(:disabled):not(.disabled).active:focus, .btn-outline-warning:not(:disabled):not(.disabled):active:focus, +.btn-outline-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-warning.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.5); } + .btn-outline-danger { color: #e74c3c; border-color: #e74c3c; @@ -2659,8 +2873,8 @@ fieldset:disabled a.btn { background-color: #e74c3c; border-color: #e74c3c; } -.btn-outline-danger.focus, -.btn-outline-danger:focus { +.btn-outline-danger:focus, +.btn-outline-danger.focus { box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.5); } .btn-outline-danger.disabled, @@ -2668,18 +2882,19 @@ fieldset:disabled a.btn { color: #e74c3c; background-color: transparent; } -.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active, +.btn-outline-danger:not(:disabled):not(.disabled).active, .show > .btn-outline-danger.dropdown-toggle { color: #fff; background-color: #e74c3c; border-color: #e74c3c; } -.btn-outline-danger:not(:disabled):not(.disabled).active:focus, .btn-outline-danger:not(:disabled):not(.disabled):active:focus, +.btn-outline-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.5); } + .btn-outline-light { color: #303030; border-color: #303030; @@ -2689,8 +2904,8 @@ fieldset:disabled a.btn { background-color: #303030; border-color: #303030; } -.btn-outline-light.focus, -.btn-outline-light:focus { +.btn-outline-light:focus, +.btn-outline-light.focus { box-shadow: 0 0 0 0.2rem rgba(48, 48, 48, 0.5); } .btn-outline-light.disabled, @@ -2698,18 +2913,19 @@ fieldset:disabled a.btn { color: #303030; background-color: transparent; } -.btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active, +.btn-outline-light:not(:disabled):not(.disabled).active, .show > .btn-outline-light.dropdown-toggle { color: #fff; background-color: #303030; border-color: #303030; } -.btn-outline-light:not(:disabled):not(.disabled).active:focus, .btn-outline-light:not(:disabled):not(.disabled):active:focus, +.btn-outline-light:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-light.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(48, 48, 48, 0.5); } + .btn-outline-dark { color: #dee2e6; border-color: #dee2e6; @@ -2719,8 +2935,8 @@ fieldset:disabled a.btn { background-color: #dee2e6; border-color: #dee2e6; } -.btn-outline-dark.focus, -.btn-outline-dark:focus { +.btn-outline-dark:focus, +.btn-outline-dark.focus { box-shadow: 0 0 0 0.2rem rgba(222, 226, 230, 0.5); } .btn-outline-dark.disabled, @@ -2728,50 +2944,54 @@ fieldset:disabled a.btn { color: #dee2e6; background-color: transparent; } -.btn-outline-dark:not(:disabled):not(.disabled).active, .btn-outline-dark:not(:disabled):not(.disabled):active, +.btn-outline-dark:not(:disabled):not(.disabled).active, .show > .btn-outline-dark.dropdown-toggle { color: #222; background-color: #dee2e6; border-color: #dee2e6; } -.btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, +.btn-outline-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(222, 226, 230, 0.5); } + .btn-link { font-weight: 400; color: #e74c3c; text-decoration: none; } .btn-link:hover { - color: #a62f22; + color: #bf2718; text-decoration: underline; } -.btn-link.focus, -.btn-link:focus { +.btn-link:focus, +.btn-link.focus { text-decoration: underline; } -.btn-link.disabled, -.btn-link:disabled { +.btn-link:disabled, +.btn-link.disabled { color: #888; pointer-events: none; } -.btn-group-lg > .btn, -.btn-lg { + +.btn-lg, +.btn-group-lg > .btn { padding: 0.5rem 1rem; - font-size: 1.17188rem; + font-size: 1.171875rem; line-height: 1.5; border-radius: 0.3rem; } -.btn-group-sm > .btn, -.btn-sm { + +.btn-sm, +.btn-group-sm > .btn { padding: 0.25rem 0.5rem; - font-size: 0.82031rem; + font-size: 0.8203125rem; line-height: 1.5; border-radius: 0.2rem; } + .btn-block { display: block; width: 100%; @@ -2779,11 +2999,13 @@ fieldset:disabled a.btn { .btn-block + .btn-block { margin-top: 0.5rem; } -input[type="button"].btn-block, + +input[type="submit"].btn-block, input[type="reset"].btn-block, -input[type="submit"].btn-block { +input[type="button"].btn-block { width: 100%; } + .fade { transition: opacity 0.15s linear; } @@ -2795,9 +3017,11 @@ input[type="submit"].btn-block { .fade:not(.show) { opacity: 0; } + .collapse:not(.show) { display: none; } + .collapsing { position: relative; height: 0; @@ -2809,12 +3033,24 @@ input[type="submit"].btn-block { transition: none; } } -.dropdown, -.dropleft, +.collapsing.width { + width: 0; + height: auto; + transition: width 0.35s ease; +} +@media (prefers-reduced-motion: reduce) { + .collapsing.width { + transition: none; + } +} + +.dropup, .dropright, -.dropup { +.dropdown, +.dropleft { position: relative; } + .dropdown-toggle { white-space: nowrap; } @@ -2831,6 +3067,7 @@ input[type="submit"].btn-block { .dropdown-toggle:empty::after { margin-left: 0; } + .dropdown-menu { position: absolute; top: 100%; @@ -2850,14 +3087,17 @@ input[type="submit"].btn-block { border: 1px solid #444; border-radius: 0.25rem; } + .dropdown-menu-left { right: auto; left: 0; } + .dropdown-menu-right { right: 0; left: auto; } + @media (min-width: 576px) { .dropdown-menu-sm-left { right: auto; @@ -2917,6 +3157,7 @@ input[type="submit"].btn-block { .dropup .dropdown-toggle:empty::after { margin-left: 0; } + .dropright .dropdown-menu { top: 0; right: auto; @@ -2940,6 +3181,7 @@ input[type="submit"].btn-block { .dropright .dropdown-toggle::after { vertical-align: 0; } + .dropleft .dropdown-menu { top: 0; right: 100%; @@ -2971,19 +3213,22 @@ input[type="submit"].btn-block { .dropleft .dropdown-toggle::before { vertical-align: 0; } -.dropdown-menu[x-placement^="bottom"], -.dropdown-menu[x-placement^="left"], + +.dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], -.dropdown-menu[x-placement^="top"] { +.dropdown-menu[x-placement^="bottom"], +.dropdown-menu[x-placement^="left"] { right: auto; bottom: auto; } + .dropdown-divider { height: 0; margin: 0.5rem 0; overflow: hidden; border-top: 1px solid #444; } + .dropdown-item { display: block; width: 100%; @@ -2996,8 +3241,8 @@ input[type="submit"].btn-block { background-color: transparent; border: 0; } -.dropdown-item:focus, -.dropdown-item:hover { +.dropdown-item:hover, +.dropdown-item:focus { color: #fff; text-decoration: none; background-color: #375a7f; @@ -3010,49 +3255,54 @@ input[type="submit"].btn-block { } .dropdown-item.disabled, .dropdown-item:disabled { - color: #888; + color: #adb5bd; pointer-events: none; background-color: transparent; } + .dropdown-menu.show { display: block; } + .dropdown-header { display: block; padding: 0.5rem 1.5rem; margin-bottom: 0; - font-size: 0.82031rem; + font-size: 0.8203125rem; color: #888; white-space: nowrap; } + .dropdown-item-text { display: block; padding: 0.25rem 1.5rem; color: #fff; } + .btn-group, .btn-group-vertical { position: relative; display: inline-flex; vertical-align: middle; } -.btn-group-vertical > .btn, -.btn-group > .btn { +.btn-group > .btn, +.btn-group-vertical > .btn { position: relative; flex: 1 1 auto; } -.btn-group-vertical > .btn:hover, -.btn-group > .btn:hover { +.btn-group > .btn:hover, +.btn-group-vertical > .btn:hover { z-index: 1; } -.btn-group-vertical > .btn.active, -.btn-group-vertical > .btn:active, -.btn-group-vertical > .btn:focus, -.btn-group > .btn.active, +.btn-group > .btn:focus, .btn-group > .btn:active, -.btn-group > .btn:focus { +.btn-group > .btn.active, +.btn-group-vertical > .btn:focus, +.btn-group-vertical > .btn:active, +.btn-group-vertical > .btn.active { z-index: 1; } + .btn-toolbar { display: flex; flex-wrap: wrap; @@ -3061,42 +3311,47 @@ input[type="submit"].btn-block { .btn-toolbar .input-group { width: auto; } -.btn-group > .btn-group:not(:first-child), -.btn-group > .btn:not(:first-child) { + +.btn-group > .btn:not(:first-child), +.btn-group > .btn-group:not(:first-child) { margin-left: -1px; } -.btn-group > .btn-group:not(:last-child) > .btn, -.btn-group > .btn:not(:last-child):not(.dropdown-toggle) { +.btn-group > .btn:not(:last-child):not(.dropdown-toggle), +.btn-group > .btn-group:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } -.btn-group > .btn-group:not(:first-child) > .btn, -.btn-group > .btn:not(:first-child) { +.btn-group > .btn:not(:first-child), +.btn-group > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } + .dropdown-toggle-split { padding-right: 0.5625rem; padding-left: 0.5625rem; } .dropdown-toggle-split::after, -.dropright .dropdown-toggle-split::after, -.dropup .dropdown-toggle-split::after { +.dropup .dropdown-toggle-split::after, +.dropright .dropdown-toggle-split::after { margin-left: 0; } .dropleft .dropdown-toggle-split::before { margin-right: 0; } -.btn-group-sm > .btn + .dropdown-toggle-split, -.btn-sm + .dropdown-toggle-split { + +.btn-sm + .dropdown-toggle-split, +.btn-group-sm > .btn + .dropdown-toggle-split { padding-right: 0.375rem; padding-left: 0.375rem; } -.btn-group-lg > .btn + .dropdown-toggle-split, -.btn-lg + .dropdown-toggle-split { + +.btn-lg + .dropdown-toggle-split, +.btn-group-lg > .btn + .dropdown-toggle-split { padding-right: 0.75rem; padding-left: 0.75rem; } + .btn-group-vertical { flex-direction: column; align-items: flex-start; @@ -3106,32 +3361,34 @@ input[type="submit"].btn-block { .btn-group-vertical > .btn-group { width: 100%; } -.btn-group-vertical > .btn-group:not(:first-child), -.btn-group-vertical > .btn:not(:first-child) { +.btn-group-vertical > .btn:not(:first-child), +.btn-group-vertical > .btn-group:not(:first-child) { margin-top: -1px; } -.btn-group-vertical > .btn-group:not(:last-child) > .btn, -.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle) { +.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), +.btn-group-vertical > .btn-group:not(:last-child) > .btn { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } -.btn-group-vertical > .btn-group:not(:first-child) > .btn, -.btn-group-vertical > .btn:not(:first-child) { +.btn-group-vertical > .btn:not(:first-child), +.btn-group-vertical > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-top-right-radius: 0; } + .btn-group-toggle > .btn, .btn-group-toggle > .btn-group > .btn { margin-bottom: 0; } -.btn-group-toggle > .btn input[type="checkbox"], .btn-group-toggle > .btn input[type="radio"], -.btn-group-toggle > .btn-group > .btn input[type="checkbox"], -.btn-group-toggle > .btn-group > .btn input[type="radio"] { +.btn-group-toggle > .btn input[type="checkbox"], +.btn-group-toggle > .btn-group > .btn input[type="radio"], +.btn-group-toggle > .btn-group > .btn input[type="checkbox"] { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; } + .input-group { position: relative; display: flex; @@ -3139,45 +3396,40 @@ input[type="submit"].btn-block { align-items: stretch; width: 100%; } -.input-group > .custom-file, -.input-group > .custom-select, .input-group > .form-control, -.input-group > .form-control-plaintext { +.input-group > .form-control-plaintext, +.input-group > .custom-select, +.input-group > .custom-file { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; margin-bottom: 0; } -.input-group > .custom-file + .custom-file, -.input-group > .custom-file + .custom-select, -.input-group > .custom-file + .form-control, -.input-group > .custom-select + .custom-file, -.input-group > .custom-select + .custom-select, -.input-group > .custom-select + .form-control, -.input-group > .form-control + .custom-file, -.input-group > .form-control + .custom-select, .input-group > .form-control + .form-control, -.input-group > .form-control-plaintext + .custom-file, +.input-group > .form-control + .custom-select, +.input-group > .form-control + .custom-file, +.input-group > .form-control-plaintext + .form-control, .input-group > .form-control-plaintext + .custom-select, -.input-group > .form-control-plaintext + .form-control { +.input-group > .form-control-plaintext + .custom-file, +.input-group > .custom-select + .form-control, +.input-group > .custom-select + .custom-select, +.input-group > .custom-select + .custom-file, +.input-group > .custom-file + .form-control, +.input-group > .custom-file + .custom-select, +.input-group > .custom-file + .custom-file { margin-left: -1px; } -.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label, +.input-group > .form-control:focus, .input-group > .custom-select:focus, -.input-group > .form-control:focus { +.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label { z-index: 3; } .input-group > .custom-file .custom-file-input:focus { z-index: 4; } -.input-group > .custom-select:not(:last-child), -.input-group > .form-control:not(:last-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} -.input-group > .custom-select:not(:first-child), -.input-group > .form-control:not(:first-child) { +.input-group > .form-control:not(:first-child), +.input-group > .custom-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } @@ -3194,35 +3446,61 @@ input[type="submit"].btn-block { border-top-left-radius: 0; border-bottom-left-radius: 0; } -.input-group-append, -.input-group-prepend { +.input-group:not(.has-validation) > .form-control:not(:last-child), +.input-group:not(.has-validation) > .custom-select:not(:last-child), +.input-group:not(.has-validation) + > .custom-file:not(:last-child) + .custom-file-label, +.input-group:not(.has-validation) + > .custom-file:not(:last-child) + .custom-file-label::after { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.input-group.has-validation > .form-control:nth-last-child(n + 3), +.input-group.has-validation > .custom-select:nth-last-child(n + 3), +.input-group.has-validation + > .custom-file:nth-last-child(n + 3) + .custom-file-label, +.input-group.has-validation + > .custom-file:nth-last-child(n + 3) + .custom-file-label::after { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.input-group-prepend, +.input-group-append { display: flex; } -.input-group-append .btn, -.input-group-prepend .btn { +.input-group-prepend .btn, +.input-group-append .btn { position: relative; z-index: 2; } -.input-group-append .btn:focus, -.input-group-prepend .btn:focus { +.input-group-prepend .btn:focus, +.input-group-append .btn:focus { z-index: 3; } -.input-group-append .btn + .btn, -.input-group-append .btn + .input-group-text, -.input-group-append .input-group-text + .btn, -.input-group-append .input-group-text + .input-group-text, .input-group-prepend .btn + .btn, .input-group-prepend .btn + .input-group-text, +.input-group-prepend .input-group-text + .input-group-text, .input-group-prepend .input-group-text + .btn, -.input-group-prepend .input-group-text + .input-group-text { +.input-group-append .btn + .btn, +.input-group-append .btn + .input-group-text, +.input-group-append .input-group-text + .input-group-text, +.input-group-append .input-group-text + .btn { margin-left: -1px; } + .input-group-prepend { margin-right: -1px; } + .input-group-append { margin-left: -1px; } + .input-group-text { display: flex; align-items: center; @@ -3238,84 +3516,102 @@ input[type="submit"].btn-block { border: 1px solid #222; border-radius: 0.25rem; } -.input-group-text input[type="checkbox"], -.input-group-text input[type="radio"] { +.input-group-text input[type="radio"], +.input-group-text input[type="checkbox"] { margin-top: 0; } -.input-group-lg > .custom-select, -.input-group-lg > .form-control:not(textarea) { + +.input-group-lg > .form-control:not(textarea), +.input-group-lg > .custom-select { height: calc(1.5em + 1rem + 2px); } -.input-group-lg > .custom-select, + .input-group-lg > .form-control, -.input-group-lg > .input-group-append > .btn, +.input-group-lg > .custom-select, +.input-group-lg > .input-group-prepend > .input-group-text, .input-group-lg > .input-group-append > .input-group-text, .input-group-lg > .input-group-prepend > .btn, -.input-group-lg > .input-group-prepend > .input-group-text { +.input-group-lg > .input-group-append > .btn { padding: 0.5rem 1rem; - font-size: 1.17188rem; + font-size: 1.171875rem; line-height: 1.5; border-radius: 0.3rem; } -.input-group-sm > .custom-select, -.input-group-sm > .form-control:not(textarea) { + +.input-group-sm > .form-control:not(textarea), +.input-group-sm > .custom-select { height: calc(1.5em + 0.5rem + 2px); } -.input-group-sm > .custom-select, + .input-group-sm > .form-control, -.input-group-sm > .input-group-append > .btn, +.input-group-sm > .custom-select, +.input-group-sm > .input-group-prepend > .input-group-text, .input-group-sm > .input-group-append > .input-group-text, .input-group-sm > .input-group-prepend > .btn, -.input-group-sm > .input-group-prepend > .input-group-text { +.input-group-sm > .input-group-append > .btn { padding: 0.25rem 0.5rem; - font-size: 0.82031rem; + font-size: 0.8203125rem; line-height: 1.5; border-radius: 0.2rem; } + .input-group-lg > .custom-select, .input-group-sm > .custom-select { padding-right: 1.75rem; } + +.input-group > .input-group-prepend > .btn, +.input-group > .input-group-prepend > .input-group-text, +.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn, +.input-group:not(.has-validation) + > .input-group-append:not(:last-child) + > .input-group-text, +.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn, +.input-group.has-validation + > .input-group-append:nth-last-child(n + 3) + > .input-group-text, .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-append:last-child - > .input-group-text:not(:last-child), -.input-group > .input-group-append:not(:last-child) > .btn, -.input-group > .input-group-append:not(:last-child) > .input-group-text, -.input-group > .input-group-prepend > .btn, -.input-group > .input-group-prepend > .input-group-text { + > .input-group-text:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } + .input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text, +.input-group > .input-group-prepend:not(:first-child) > .btn, +.input-group > .input-group-prepend:not(:first-child) > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child), .input-group > .input-group-prepend:first-child - > .input-group-text:not(:first-child), -.input-group > .input-group-prepend:not(:first-child) > .btn, -.input-group > .input-group-prepend:not(:first-child) > .input-group-text { + > .input-group-text:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } + .custom-control { position: relative; + z-index: 1; display: block; min-height: 1.40625rem; padding-left: 1.5rem; + print-color-adjust: exact; } + .custom-control-inline { display: inline-flex; margin-right: 1rem; } + .custom-control-input { position: absolute; left: 0; z-index: -1; width: 1rem; - height: 1.20312rem; + height: 1.203125rem; opacity: 0; } .custom-control-input:checked ~ .custom-control-label::before { @@ -3334,14 +3630,15 @@ input[type="submit"].btn-block { background-color: #97b3d2; border-color: #97b3d2; } -.custom-control-input:disabled ~ .custom-control-label, -.custom-control-input[disabled] ~ .custom-control-label { +.custom-control-input[disabled] ~ .custom-control-label, +.custom-control-input:disabled ~ .custom-control-label { color: #888; } -.custom-control-input:disabled ~ .custom-control-label::before, -.custom-control-input[disabled] ~ .custom-control-label::before { +.custom-control-input[disabled] ~ .custom-control-label::before, +.custom-control-input:disabled ~ .custom-control-label::before { background-color: #2b2b2b; } + .custom-control-label { position: relative; margin-bottom: 0; @@ -3349,7 +3646,7 @@ input[type="submit"].btn-block { } .custom-control-label::before { position: absolute; - top: 0.20312rem; + top: 0.203125rem; left: -1.5rem; display: block; width: 1rem; @@ -3357,18 +3654,19 @@ input[type="submit"].btn-block { pointer-events: none; content: ""; background-color: #444; - border: #adb5bd solid 1px; + border: 1px solid #adb5bd; } .custom-control-label::after { position: absolute; - top: 0.20312rem; + top: 0.203125rem; left: -1.5rem; display: block; width: 1rem; height: 1rem; content: ""; - background: no-repeat 50%/50% 50%; + background: 50%/50% 50% no-repeat; } + .custom-checkbox .custom-control-label::before { border-radius: 0.25rem; } @@ -3396,6 +3694,7 @@ input[type="submit"].btn-block { ~ .custom-control-label::before { background-color: rgba(55, 90, 127, 0.5); } + .custom-radio .custom-control-label::before { border-radius: 50%; } @@ -3407,6 +3706,7 @@ input[type="submit"].btn-block { ~ .custom-control-label::before { background-color: rgba(55, 90, 127, 0.5); } + .custom-switch { padding-left: 2.25rem; } @@ -3417,7 +3717,7 @@ input[type="submit"].btn-block { border-radius: 0.5rem; } .custom-switch .custom-control-label::after { - top: calc(0.20312rem + 2px); + top: calc(0.203125rem + 2px); left: calc(-2.25rem + 2px); width: calc(1rem - 4px); height: calc(1rem - 4px); @@ -3440,6 +3740,7 @@ input[type="submit"].btn-block { ~ .custom-control-label::before { background-color: rgba(55, 90, 127, 0.5); } + .custom-select { display: inline-block; width: 100%; @@ -3452,7 +3753,7 @@ input[type="submit"].btn-block { vertical-align: middle; background: #444 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") - no-repeat right 0.75rem center/8px 10px; + right 0.75rem center/8px 10px no-repeat; border: 1px solid #222; border-radius: 0.25rem; appearance: none; @@ -3483,20 +3784,23 @@ input[type="submit"].btn-block { color: transparent; text-shadow: 0 0 0 #fff; } + .custom-select-sm { height: calc(1.5em + 0.5rem + 2px); padding-top: 0.25rem; padding-bottom: 0.25rem; padding-left: 0.5rem; - font-size: 0.82031rem; + font-size: 0.8203125rem; } + .custom-select-lg { height: calc(1.5em + 1rem + 2px); padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; - font-size: 1.17188rem; + font-size: 1.171875rem; } + .custom-file { position: relative; display: inline-block; @@ -3504,20 +3808,22 @@ input[type="submit"].btn-block { height: calc(1.5em + 0.75rem + 2px); margin-bottom: 0; } + .custom-file-input { position: relative; z-index: 2; width: 100%; height: calc(1.5em + 0.75rem + 2px); margin: 0; + overflow: hidden; opacity: 0; } .custom-file-input:focus ~ .custom-file-label { border-color: #739ac2; box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25); } -.custom-file-input:disabled ~ .custom-file-label, -.custom-file-input[disabled] ~ .custom-file-label { +.custom-file-input[disabled] ~ .custom-file-label, +.custom-file-input:disabled ~ .custom-file-label { background-color: #2b2b2b; } .custom-file-input:lang(en) ~ .custom-file-label::after { @@ -3526,6 +3832,7 @@ input[type="submit"].btn-block { .custom-file-input ~ .custom-file-label[data-browse]::after { content: attr(data-browse); } + .custom-file-label { position: absolute; top: 0; @@ -3534,6 +3841,7 @@ input[type="submit"].btn-block { z-index: 1; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; + overflow: hidden; font-weight: 400; line-height: 1.5; color: #adb5bd; @@ -3557,6 +3865,7 @@ input[type="submit"].btn-block { border-left: inherit; border-radius: 0 0.25rem 0.25rem 0; } + .custom-range { width: 100%; height: 1.4rem; @@ -3688,6 +3997,7 @@ input[type="submit"].btn-block { .custom-range:disabled::-ms-thumb { background-color: #adb5bd; } + .custom-control-label::before, .custom-file-label, .custom-select { @@ -3701,6 +4011,7 @@ input[type="submit"].btn-block { transition: none; } } + .nav { display: flex; flex-wrap: wrap; @@ -3708,12 +4019,13 @@ input[type="submit"].btn-block { margin-bottom: 0; list-style: none; } + .nav-link { display: block; padding: 0.5rem 2rem; } -.nav-link:focus, -.nav-link:hover { +.nav-link:hover, +.nav-link:focus { text-decoration: none; } .nav-link.disabled { @@ -3721,19 +4033,20 @@ input[type="submit"].btn-block { pointer-events: none; cursor: default; } + .nav-tabs { border-bottom: 1px solid #444; } -.nav-tabs .nav-item { - margin-bottom: -1px; -} .nav-tabs .nav-link { + margin-bottom: -1px; + background-color: transparent; border: 1px solid transparent; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } -.nav-tabs .nav-link:focus, -.nav-tabs .nav-link:hover { +.nav-tabs .nav-link:hover, +.nav-tabs .nav-link:focus { + isolation: isolate; border-color: #444 #444 transparent; } .nav-tabs .nav-link.disabled { @@ -3741,8 +4054,8 @@ input[type="submit"].btn-block { background-color: transparent; border-color: transparent; } -.nav-tabs .nav-item.show .nav-link, -.nav-tabs .nav-link.active { +.nav-tabs .nav-link.active, +.nav-tabs .nav-item.show .nav-link { color: #fff; background-color: #222; border-color: #444 #444 transparent; @@ -3752,7 +4065,10 @@ input[type="submit"].btn-block { border-top-left-radius: 0; border-top-right-radius: 0; } + .nav-pills .nav-link { + background: none; + border: 0; border-radius: 0.25rem; } .nav-pills .nav-link.active, @@ -3760,21 +4076,27 @@ input[type="submit"].btn-block { color: #fff; background-color: #375a7f; } + +.nav-fill > .nav-link, .nav-fill .nav-item { flex: 1 1 auto; text-align: center; } + +.nav-justified > .nav-link, .nav-justified .nav-item { flex-basis: 0; flex-grow: 1; text-align: center; } + .tab-content > .tab-pane { display: none; } .tab-content > .active { display: block; } + .navbar { position: relative; display: flex; @@ -3785,9 +4107,9 @@ input[type="submit"].btn-block { } .navbar .container, .navbar .container-fluid, -.navbar .container-lg, -.navbar .container-md, .navbar .container-sm, +.navbar .container-md, +.navbar .container-lg, .navbar .container-xl { display: flex; flex-wrap: wrap; @@ -3796,17 +4118,18 @@ input[type="submit"].btn-block { } .navbar-brand { display: inline-block; - padding-top: 0.32422rem; - padding-bottom: 0.32422rem; + padding-top: 0.32421875rem; + padding-bottom: 0.32421875rem; margin-right: 1rem; - font-size: 1.17188rem; + font-size: 1.171875rem; line-height: inherit; white-space: nowrap; } -.navbar-brand:focus, -.navbar-brand:hover { +.navbar-brand:hover, +.navbar-brand:focus { text-decoration: none; } + .navbar-nav { display: flex; flex-direction: column; @@ -3822,43 +4145,52 @@ input[type="submit"].btn-block { position: static; float: none; } + .navbar-text { display: inline-block; padding-top: 0.5rem; padding-bottom: 0.5rem; } + .navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; } + .navbar-toggler { padding: 0.25rem 0.75rem; - font-size: 1.17188rem; + font-size: 1.171875rem; line-height: 1; background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; } -.navbar-toggler:focus, -.navbar-toggler:hover { +.navbar-toggler:hover, +.navbar-toggler:focus { text-decoration: none; } + .navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; content: ""; - background: no-repeat center center; - background-size: 100% 100%; + background: 50%/100% 100% no-repeat; } + +.navbar-nav-scroll { + max-height: 75vh; + overflow-y: auto; +} + @media (max-width: 575.98px) { .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid, - .navbar-expand-sm > .container-lg, - .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-sm, + .navbar-expand-sm > .container-md, + .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl { padding-right: 0; padding-left: 0; @@ -3881,12 +4213,15 @@ input[type="submit"].btn-block { } .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid, - .navbar-expand-sm > .container-lg, - .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-sm, + .navbar-expand-sm > .container-md, + .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl { flex-wrap: nowrap; } + .navbar-expand-sm .navbar-nav-scroll { + overflow: visible; + } .navbar-expand-sm .navbar-collapse { display: flex !important; flex-basis: auto; @@ -3898,9 +4233,9 @@ input[type="submit"].btn-block { @media (max-width: 767.98px) { .navbar-expand-md > .container, .navbar-expand-md > .container-fluid, - .navbar-expand-md > .container-lg, - .navbar-expand-md > .container-md, .navbar-expand-md > .container-sm, + .navbar-expand-md > .container-md, + .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl { padding-right: 0; padding-left: 0; @@ -3923,12 +4258,15 @@ input[type="submit"].btn-block { } .navbar-expand-md > .container, .navbar-expand-md > .container-fluid, - .navbar-expand-md > .container-lg, - .navbar-expand-md > .container-md, .navbar-expand-md > .container-sm, + .navbar-expand-md > .container-md, + .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl { flex-wrap: nowrap; } + .navbar-expand-md .navbar-nav-scroll { + overflow: visible; + } .navbar-expand-md .navbar-collapse { display: flex !important; flex-basis: auto; @@ -3940,9 +4278,9 @@ input[type="submit"].btn-block { @media (max-width: 991.98px) { .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid, - .navbar-expand-lg > .container-lg, - .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-sm, + .navbar-expand-lg > .container-md, + .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl { padding-right: 0; padding-left: 0; @@ -3965,12 +4303,15 @@ input[type="submit"].btn-block { } .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid, - .navbar-expand-lg > .container-lg, - .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-sm, + .navbar-expand-lg > .container-md, + .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl { flex-wrap: nowrap; } + .navbar-expand-lg .navbar-nav-scroll { + overflow: visible; + } .navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto; @@ -3982,9 +4323,9 @@ input[type="submit"].btn-block { @media (max-width: 1199.98px) { .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid, - .navbar-expand-xl > .container-lg, - .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-sm, + .navbar-expand-xl > .container-md, + .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl { padding-right: 0; padding-left: 0; @@ -4007,12 +4348,15 @@ input[type="submit"].btn-block { } .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid, - .navbar-expand-xl > .container-lg, - .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-sm, + .navbar-expand-xl > .container-md, + .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl { flex-wrap: nowrap; } + .navbar-expand-xl .navbar-nav-scroll { + overflow: visible; + } .navbar-expand-xl .navbar-collapse { display: flex !important; flex-basis: auto; @@ -4027,9 +4371,9 @@ input[type="submit"].btn-block { } .navbar-expand > .container, .navbar-expand > .container-fluid, -.navbar-expand > .container-lg, -.navbar-expand > .container-md, .navbar-expand > .container-sm, +.navbar-expand > .container-md, +.navbar-expand > .container-lg, .navbar-expand > .container-xl { padding-right: 0; padding-left: 0; @@ -4046,12 +4390,15 @@ input[type="submit"].btn-block { } .navbar-expand > .container, .navbar-expand > .container-fluid, -.navbar-expand > .container-lg, -.navbar-expand > .container-md, .navbar-expand > .container-sm, +.navbar-expand > .container-md, +.navbar-expand > .container-lg, .navbar-expand > .container-xl { flex-wrap: nowrap; } +.navbar-expand .navbar-nav-scroll { + overflow: visible; +} .navbar-expand .navbar-collapse { display: flex !important; flex-basis: auto; @@ -4059,27 +4406,28 @@ input[type="submit"].btn-block { .navbar-expand .navbar-toggler { display: none; } + .navbar-light .navbar-brand { color: #fff; } -.navbar-light .navbar-brand:focus, -.navbar-light .navbar-brand:hover { +.navbar-light .navbar-brand:hover, +.navbar-light .navbar-brand:focus { color: #fff; } .navbar-light .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.6); } -.navbar-light .navbar-nav .nav-link:focus, -.navbar-light .navbar-nav .nav-link:hover { +.navbar-light .navbar-nav .nav-link:hover, +.navbar-light .navbar-nav .nav-link:focus { color: #fff; } .navbar-light .navbar-nav .nav-link.disabled { color: rgba(0, 0, 0, 0.3); } +.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, -.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, -.navbar-light .navbar-nav .show > .nav-link { +.navbar-light .navbar-nav .nav-link.active { color: #fff; } .navbar-light .navbar-toggler { @@ -4095,31 +4443,32 @@ input[type="submit"].btn-block { .navbar-light .navbar-text a { color: #fff; } -.navbar-light .navbar-text a:focus, -.navbar-light .navbar-text a:hover { +.navbar-light .navbar-text a:hover, +.navbar-light .navbar-text a:focus { color: #fff; } + .navbar-dark .navbar-brand { color: #fff; } -.navbar-dark .navbar-brand:focus, -.navbar-dark .navbar-brand:hover { +.navbar-dark .navbar-brand:hover, +.navbar-dark .navbar-brand:focus { color: #fff; } .navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.6); } -.navbar-dark .navbar-nav .nav-link:focus, -.navbar-dark .navbar-nav .nav-link:hover { +.navbar-dark .navbar-nav .nav-link:hover, +.navbar-dark .navbar-nav .nav-link:focus { color: #fff; } .navbar-dark .navbar-nav .nav-link.disabled { color: rgba(255, 255, 255, 0.25); } +.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, -.navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, -.navbar-dark .navbar-nav .show > .nav-link { +.navbar-dark .navbar-nav .nav-link.active { color: #fff; } .navbar-dark .navbar-toggler { @@ -4135,10 +4484,11 @@ input[type="submit"].btn-block { .navbar-dark .navbar-text a { color: #fff; } -.navbar-dark .navbar-text a:focus, -.navbar-dark .navbar-text a:hover { +.navbar-dark .navbar-text a:hover, +.navbar-dark .navbar-text a:focus { color: #fff; } + .card { position: relative; display: flex; @@ -4168,27 +4518,37 @@ input[type="submit"].btn-block { border-bottom-right-radius: calc(0.25rem - 1px); border-bottom-left-radius: calc(0.25rem - 1px); } +.card > .card-header + .list-group, +.card > .list-group + .card-footer { + border-top: 0; +} + .card-body { flex: 1 1 auto; min-height: 1px; padding: 1.25rem; } + .card-title { margin-bottom: 0.75rem; } + .card-subtitle { margin-top: -0.375rem; margin-bottom: 0; } + .card-text:last-child { margin-bottom: 0; } + .card-link:hover { text-decoration: none; } .card-link + .card-link { margin-left: 1.25rem; } + .card-header { padding: 0.75rem 1.25rem; margin-bottom: 0; @@ -4198,9 +4558,7 @@ input[type="submit"].btn-block { .card-header:first-child { border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; } -.card-header + .list-group .list-group-item:first-child { - border-top: 0; -} + .card-footer { padding: 0.75rem 1.25rem; background-color: #444; @@ -4209,16 +4567,19 @@ input[type="submit"].btn-block { .card-footer:last-child { border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); } + .card-header-tabs { margin-right: -0.625rem; margin-bottom: -0.75rem; margin-left: -0.625rem; border-bottom: 0; } + .card-header-pills { margin-right: -0.625rem; margin-left: -0.625rem; } + .card-img-overlay { position: absolute; top: 0; @@ -4226,23 +4587,28 @@ input[type="submit"].btn-block { bottom: 0; left: 0; padding: 1.25rem; + border-radius: calc(0.25rem - 1px); } + .card-img, -.card-img-bottom, -.card-img-top { +.card-img-top, +.card-img-bottom { flex-shrink: 0; width: 100%; } + .card-img, .card-img-top { border-top-left-radius: calc(0.25rem - 1px); border-top-right-radius: calc(0.25rem - 1px); } + .card-img, .card-img-bottom { border-bottom-right-radius: calc(0.25rem - 1px); border-bottom-left-radius: calc(0.25rem - 1px); } + .card-deck .card { margin-bottom: 15px; } @@ -4260,6 +4626,7 @@ input[type="submit"].btn-block { margin-left: 15px; } } + .card-group > .card { margin-bottom: 15px; } @@ -4280,27 +4647,28 @@ input[type="submit"].btn-block { border-top-right-radius: 0; border-bottom-right-radius: 0; } - .card-group > .card:not(:last-child) .card-header, - .card-group > .card:not(:last-child) .card-img-top { + .card-group > .card:not(:last-child) .card-img-top, + .card-group > .card:not(:last-child) .card-header { border-top-right-radius: 0; } - .card-group > .card:not(:last-child) .card-footer, - .card-group > .card:not(:last-child) .card-img-bottom { + .card-group > .card:not(:last-child) .card-img-bottom, + .card-group > .card:not(:last-child) .card-footer { border-bottom-right-radius: 0; } .card-group > .card:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } - .card-group > .card:not(:first-child) .card-header, - .card-group > .card:not(:first-child) .card-img-top { + .card-group > .card:not(:first-child) .card-img-top, + .card-group > .card:not(:first-child) .card-header { border-top-left-radius: 0; } - .card-group > .card:not(:first-child) .card-footer, - .card-group > .card:not(:first-child) .card-img-bottom { + .card-group > .card:not(:first-child) .card-img-bottom, + .card-group > .card:not(:first-child) .card-footer { border-bottom-left-radius: 0; } } + .card-columns .card { margin-bottom: 0.75rem; } @@ -4316,6 +4684,10 @@ input[type="submit"].btn-block { width: 100%; } } + +.accordion { + overflow-anchor: none; +} .accordion > .card { overflow: hidden; } @@ -4332,6 +4704,7 @@ input[type="submit"].btn-block { border-radius: 0; margin-bottom: -1px; } + .breadcrumb { display: flex; flex-wrap: wrap; @@ -4341,14 +4714,12 @@ input[type="submit"].btn-block { background-color: #444; border-radius: 0.25rem; } -.breadcrumb-item { - display: flex; -} + .breadcrumb-item + .breadcrumb-item { padding-left: 0.5rem; } .breadcrumb-item + .breadcrumb-item::before { - display: inline-block; + float: left; padding-right: 0.5rem; color: #888; content: "/"; @@ -4362,12 +4733,14 @@ input[type="submit"].btn-block { .breadcrumb-item.active { color: #888; } + .pagination { display: flex; padding-left: 0; list-style: none; border-radius: 0.25rem; } + .page-link { position: relative; display: block; @@ -4375,14 +4748,14 @@ input[type="submit"].btn-block { margin-left: 0; line-height: 1.25; color: #fff; - background-color: #e74c3c; + background-color: #00bc8c; border: 0 solid transparent; } .page-link:hover { z-index: 2; color: #fff; text-decoration: none; - background-color: #a62f22; + background-color: #00efb2; border-color: transparent; } .page-link:focus { @@ -4390,6 +4763,7 @@ input[type="submit"].btn-block { outline: 0; box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25); } + .page-item:first-child .page-link { margin-left: 0; border-top-left-radius: 0.25rem; @@ -4412,9 +4786,10 @@ input[type="submit"].btn-block { background-color: #007053; border-color: transparent; } + .pagination-lg .page-link { padding: 0.75rem 1.5rem; - font-size: 1.17188rem; + font-size: 1.171875rem; line-height: 1.5; } .pagination-lg .page-item:first-child .page-link { @@ -4425,9 +4800,10 @@ input[type="submit"].btn-block { border-top-right-radius: 0.3rem; border-bottom-right-radius: 0.3rem; } + .pagination-sm .page-link { padding: 0.25rem 0.5rem; - font-size: 0.82031rem; + font-size: 0.8203125rem; line-height: 1.5; } .pagination-sm .page-item:first-child .page-link { @@ -4438,6 +4814,7 @@ input[type="submit"].btn-block { border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem; } + .badge { display: inline-block; padding: 0.25em 0.4em; @@ -4456,134 +4833,146 @@ input[type="submit"].btn-block { transition: none; } } -a.badge:focus, -a.badge:hover { +a.badge:hover, +a.badge:focus { text-decoration: none; } + .badge:empty { display: none; } + .btn .badge { position: relative; top: -1px; } + .badge-pill { padding-right: 0.6em; padding-left: 0.6em; border-radius: 10rem; } + .badge-primary { color: #fff; background-color: #375a7f; } -a.badge-primary:focus, -a.badge-primary:hover { +a.badge-primary:hover, +a.badge-primary:focus { color: #fff; background-color: #28415b; } -a.badge-primary.focus, -a.badge-primary:focus { +a.badge-primary:focus, +a.badge-primary.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.5); } + .badge-secondary { color: #fff; background-color: #444; } -a.badge-secondary:focus, -a.badge-secondary:hover { +a.badge-secondary:hover, +a.badge-secondary:focus { color: #fff; background-color: #2b2b2b; } -a.badge-secondary.focus, -a.badge-secondary:focus { +a.badge-secondary:focus, +a.badge-secondary.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(68, 68, 68, 0.5); } + .badge-success { color: #fff; background-color: #00bc8c; } -a.badge-success:focus, -a.badge-success:hover { +a.badge-success:hover, +a.badge-success:focus { color: #fff; background-color: #008966; } -a.badge-success.focus, -a.badge-success:focus { +a.badge-success:focus, +a.badge-success.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.5); } + .badge-info { color: #fff; background-color: #3498db; } -a.badge-info:focus, -a.badge-info:hover { +a.badge-info:hover, +a.badge-info:focus { color: #fff; background-color: #217dbb; } -a.badge-info.focus, -a.badge-info:focus { +a.badge-info:focus, +a.badge-info.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5); } + .badge-warning { color: #fff; background-color: #f39c12; } -a.badge-warning:focus, -a.badge-warning:hover { +a.badge-warning:hover, +a.badge-warning:focus { color: #fff; background-color: #c87f0a; } -a.badge-warning.focus, -a.badge-warning:focus { +a.badge-warning:focus, +a.badge-warning.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.5); } + .badge-danger { color: #fff; background-color: #e74c3c; } -a.badge-danger:focus, -a.badge-danger:hover { +a.badge-danger:hover, +a.badge-danger:focus { color: #fff; background-color: #d62c1a; } -a.badge-danger.focus, -a.badge-danger:focus { +a.badge-danger:focus, +a.badge-danger.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.5); } + .badge-light { color: #fff; background-color: #303030; } -a.badge-light:focus, -a.badge-light:hover { +a.badge-light:hover, +a.badge-light:focus { color: #fff; background-color: #171717; } -a.badge-light.focus, -a.badge-light:focus { +a.badge-light:focus, +a.badge-light.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(48, 48, 48, 0.5); } + .badge-dark { color: #222; background-color: #dee2e6; } -a.badge-dark:focus, -a.badge-dark:hover { +a.badge-dark:hover, +a.badge-dark:focus { color: #222; background-color: #c1c9d0; } -a.badge-dark.focus, -a.badge-dark:focus { +a.badge-dark:focus, +a.badge-dark.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(222, 226, 230, 0.5); } + .jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; @@ -4595,11 +4984,13 @@ a.badge-dark:focus { padding: 4rem 2rem; } } + .jumbotron-fluid { padding-right: 0; padding-left: 0; border-radius: 0; } + .alert { position: relative; padding: 0.75rem 1.25rem; @@ -4607,12 +4998,15 @@ a.badge-dark:focus { border: 1px solid transparent; border-radius: 0.25rem; } + .alert-heading { color: inherit; } + .alert-link { font-weight: 700; } + .alert-dismissible { padding-right: 3.90625rem; } @@ -4620,9 +5014,11 @@ a.badge-dark:focus { position: absolute; top: 0; right: 0; + z-index: 2; padding: 0.75rem 1.25rem; color: inherit; } + .alert-primary { color: #1d2f42; background-color: #d7dee5; @@ -4634,6 +5030,7 @@ a.badge-dark:focus { .alert-primary .alert-link { color: #0d161f; } + .alert-secondary { color: #232323; background-color: #dadada; @@ -4645,6 +5042,7 @@ a.badge-dark:focus { .alert-secondary .alert-link { color: #0a0a0a; } + .alert-success { color: #006249; background-color: #ccf2e8; @@ -4656,6 +5054,7 @@ a.badge-dark:focus { .alert-success .alert-link { color: #002f23; } + .alert-info { color: #1b4f72; background-color: #d6eaf8; @@ -4667,6 +5066,7 @@ a.badge-dark:focus { .alert-info .alert-link { color: #113249; } + .alert-warning { color: #7e5109; background-color: #fdebd0; @@ -4678,6 +5078,7 @@ a.badge-dark:focus { .alert-warning .alert-link { color: #4e3206; } + .alert-danger { color: #78281f; background-color: #fadbd8; @@ -4689,6 +5090,7 @@ a.badge-dark:focus { .alert-danger .alert-link { color: #4f1a15; } + .alert-light { color: #191919; background-color: #d6d6d6; @@ -4698,8 +5100,9 @@ a.badge-dark:focus { border-top-color: #b8b8b8; } .alert-light .alert-link { - color: #000; + color: black; } + .alert-dark { color: #737678; background-color: #f8f9fa; @@ -4711,6 +5114,7 @@ a.badge-dark:focus { .alert-dark .alert-link { color: #5a5c5e; } + @keyframes progress-bar-stripes { from { background-position: 1rem 0; @@ -4724,10 +5128,11 @@ a.badge-dark:focus { height: 1rem; overflow: hidden; line-height: 0; - font-size: 0.70312rem; + font-size: 0.703125rem; background-color: #444; border-radius: 0.25rem; } + .progress-bar { display: flex; flex-direction: column; @@ -4744,6 +5149,7 @@ a.badge-dark:focus { transition: none; } } + .progress-bar-striped { background-image: linear-gradient( 45deg, @@ -4757,21 +5163,25 @@ a.badge-dark:focus { ); background-size: 1rem 1rem; } + .progress-bar-animated { - animation: progress-bar-stripes 1s linear infinite; + animation: 1s linear infinite progress-bar-stripes; } @media (prefers-reduced-motion: reduce) { .progress-bar-animated { animation: none; } } + .media { display: flex; align-items: flex-start; } + .media-body { flex: 1; } + .list-group { display: flex; flex-direction: column; @@ -4779,13 +5189,14 @@ a.badge-dark:focus { margin-bottom: 0; border-radius: 0.25rem; } + .list-group-item-action { width: 100%; color: #444; text-align: inherit; } -.list-group-item-action:focus, -.list-group-item-action:hover { +.list-group-item-action:hover, +.list-group-item-action:focus { z-index: 1; color: #444; text-decoration: none; @@ -4795,6 +5206,7 @@ a.badge-dark:focus { color: #dee2e6; background-color: #ebebeb; } + .list-group-item { position: relative; display: block; @@ -4829,6 +5241,7 @@ a.badge-dark:focus { margin-top: -1px; border-top-width: 1px; } + .list-group-horizontal { flex-direction: row; } @@ -4851,6 +5264,7 @@ a.badge-dark:focus { margin-left: -1px; border-left-width: 1px; } + @media (min-width: 576px) { .list-group-horizontal-sm { flex-direction: row; @@ -4956,12 +5370,13 @@ a.badge-dark:focus { .list-group-flush > .list-group-item:last-child { border-bottom-width: 0; } + .list-group-item-primary { color: #1d2f42; background-color: #c7d1db; } -.list-group-item-primary.list-group-item-action:focus, -.list-group-item-primary.list-group-item-action:hover { +.list-group-item-primary.list-group-item-action:hover, +.list-group-item-primary.list-group-item-action:focus { color: #1d2f42; background-color: #b7c4d1; } @@ -4970,12 +5385,13 @@ a.badge-dark:focus { background-color: #1d2f42; border-color: #1d2f42; } + .list-group-item-secondary { color: #232323; background-color: #cbcbcb; } -.list-group-item-secondary.list-group-item-action:focus, -.list-group-item-secondary.list-group-item-action:hover { +.list-group-item-secondary.list-group-item-action:hover, +.list-group-item-secondary.list-group-item-action:focus { color: #232323; background-color: #bebebe; } @@ -4984,12 +5400,13 @@ a.badge-dark:focus { background-color: #232323; border-color: #232323; } + .list-group-item-success { color: #006249; background-color: #b8ecdf; } -.list-group-item-success.list-group-item-action:focus, -.list-group-item-success.list-group-item-action:hover { +.list-group-item-success.list-group-item-action:hover, +.list-group-item-success.list-group-item-action:focus { color: #006249; background-color: #a4e7d6; } @@ -4998,12 +5415,13 @@ a.badge-dark:focus { background-color: #006249; border-color: #006249; } + .list-group-item-info { color: #1b4f72; background-color: #c6e2f5; } -.list-group-item-info.list-group-item-action:focus, -.list-group-item-info.list-group-item-action:hover { +.list-group-item-info.list-group-item-action:hover, +.list-group-item-info.list-group-item-action:focus { color: #1b4f72; background-color: #b0d7f1; } @@ -5012,12 +5430,13 @@ a.badge-dark:focus { background-color: #1b4f72; border-color: #1b4f72; } + .list-group-item-warning { color: #7e5109; background-color: #fce3bd; } -.list-group-item-warning.list-group-item-action:focus, -.list-group-item-warning.list-group-item-action:hover { +.list-group-item-warning.list-group-item-action:hover, +.list-group-item-warning.list-group-item-action:focus { color: #7e5109; background-color: #fbd9a5; } @@ -5026,12 +5445,13 @@ a.badge-dark:focus { background-color: #7e5109; border-color: #7e5109; } + .list-group-item-danger { color: #78281f; background-color: #f8cdc8; } -.list-group-item-danger.list-group-item-action:focus, -.list-group-item-danger.list-group-item-action:hover { +.list-group-item-danger.list-group-item-action:hover, +.list-group-item-danger.list-group-item-action:focus { color: #78281f; background-color: #f5b8b1; } @@ -5040,12 +5460,13 @@ a.badge-dark:focus { background-color: #78281f; border-color: #78281f; } + .list-group-item-light { color: #191919; background-color: #c5c5c5; } -.list-group-item-light.list-group-item-action:focus, -.list-group-item-light.list-group-item-action:hover { +.list-group-item-light.list-group-item-action:hover, +.list-group-item-light.list-group-item-action:focus { color: #191919; background-color: #b8b8b8; } @@ -5054,12 +5475,13 @@ a.badge-dark:focus { background-color: #191919; border-color: #191919; } + .list-group-item-dark { color: #737678; background-color: #f6f7f8; } -.list-group-item-dark.list-group-item-action:focus, -.list-group-item-dark.list-group-item-action:hover { +.list-group-item-dark.list-group-item-action:hover, +.list-group-item-dark.list-group-item-action:focus { color: #737678; background-color: #e8eaed; } @@ -5068,6 +5490,7 @@ a.badge-dark:focus { background-color: #737678; border-color: #737678; } + .close { float: right; font-size: 1.40625rem; @@ -5081,27 +5504,29 @@ a.badge-dark:focus { color: #fff; text-decoration: none; } -.close:not(:disabled):not(.disabled):focus, -.close:not(:disabled):not(.disabled):hover { +.close:not(:disabled):not(.disabled):hover, +.close:not(:disabled):not(.disabled):focus { opacity: 0.75; } + button.close { padding: 0; background-color: transparent; border: 0; } + a.close.disabled { pointer-events: none; } + .toast { + flex-basis: 350px; max-width: 350px; - overflow: hidden; font-size: 0.875rem; background-color: #444; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1); - backdrop-filter: blur(10px); opacity: 0; border-radius: 0.25rem; } @@ -5118,6 +5543,7 @@ a.close.disabled { .toast.hide { display: none; } + .toast-header { display: flex; align-items: center; @@ -5126,10 +5552,14 @@ a.close.disabled { background-color: #303030; background-clip: padding-box; border-bottom: 1px solid rgba(0, 0, 0, 0.05); + border-top-left-radius: calc(0.25rem - 1px); + border-top-right-radius: calc(0.25rem - 1px); } + .toast-body { padding: 0.75rem; } + .modal-open { overflow: hidden; } @@ -5137,6 +5567,7 @@ a.close.disabled { overflow-x: hidden; overflow-y: auto; } + .modal { position: fixed; top: 0; @@ -5148,6 +5579,7 @@ a.close.disabled { overflow: hidden; outline: 0; } + .modal-dialog { position: relative; width: auto; @@ -5169,6 +5601,7 @@ a.close.disabled { .modal.modal-static .modal-dialog { transform: scale(1.02); } + .modal-dialog-scrollable { display: flex; max-height: calc(100% - 1rem); @@ -5177,13 +5610,14 @@ a.close.disabled { max-height: calc(100vh - 1rem); overflow: hidden; } -.modal-dialog-scrollable .modal-footer, -.modal-dialog-scrollable .modal-header { +.modal-dialog-scrollable .modal-header, +.modal-dialog-scrollable .modal-footer { flex-shrink: 0; } .modal-dialog-scrollable .modal-body { overflow-y: auto; } + .modal-dialog-centered { display: flex; align-items: center; @@ -5206,6 +5640,7 @@ a.close.disabled { .modal-dialog-centered.modal-dialog-scrollable::before { content: none; } + .modal-content { position: relative; display: flex; @@ -5218,6 +5653,7 @@ a.close.disabled { border-radius: 0.3rem; outline: 0; } + .modal-backdrop { position: fixed; top: 0; @@ -5233,6 +5669,7 @@ a.close.disabled { .modal-backdrop.show { opacity: 0.5; } + .modal-header { display: flex; align-items: flex-start; @@ -5246,15 +5683,18 @@ a.close.disabled { padding: 1rem 1rem; margin: -1rem -1rem -1rem auto; } + .modal-title { margin-bottom: 0; line-height: 1.5; } + .modal-body { position: relative; flex: 1 1 auto; padding: 1rem; } + .modal-footer { display: flex; flex-wrap: wrap; @@ -5268,6 +5708,7 @@ a.close.disabled { .modal-footer > * { margin: 0.25rem; } + .modal-scrollbar-measure { position: absolute; top: -9999px; @@ -5275,6 +5716,7 @@ a.close.disabled { height: 50px; overflow: scroll; } + @media (min-width: 576px) { .modal-dialog { max-width: 500px; @@ -5313,7 +5755,7 @@ a.close.disabled { z-index: 1070; display: block; margin: 0; - font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-style: normal; @@ -5326,10 +5768,10 @@ a.close.disabled { text-transform: none; letter-spacing: normal; word-break: normal; - word-spacing: normal; white-space: normal; + word-spacing: normal; line-break: auto; - font-size: 0.82031rem; + font-size: 0.8203125rem; word-wrap: break-word; opacity: 0; } @@ -5348,66 +5790,71 @@ a.close.disabled { border-color: transparent; border-style: solid; } -.bs-tooltip-auto[x-placement^="top"], -.bs-tooltip-top { + +.bs-tooltip-top, +.bs-tooltip-auto[x-placement^="top"] { padding: 0.4rem 0; } -.bs-tooltip-auto[x-placement^="top"] .arrow, -.bs-tooltip-top .arrow { +.bs-tooltip-top .arrow, +.bs-tooltip-auto[x-placement^="top"] .arrow { bottom: 0; } -.bs-tooltip-auto[x-placement^="top"] .arrow::before, -.bs-tooltip-top .arrow::before { +.bs-tooltip-top .arrow::before, +.bs-tooltip-auto[x-placement^="top"] .arrow::before { top: 0; border-width: 0.4rem 0.4rem 0; border-top-color: #000; } -.bs-tooltip-auto[x-placement^="right"], -.bs-tooltip-right { + +.bs-tooltip-right, +.bs-tooltip-auto[x-placement^="right"] { padding: 0 0.4rem; } -.bs-tooltip-auto[x-placement^="right"] .arrow, -.bs-tooltip-right .arrow { +.bs-tooltip-right .arrow, +.bs-tooltip-auto[x-placement^="right"] .arrow { left: 0; width: 0.4rem; height: 0.8rem; } -.bs-tooltip-auto[x-placement^="right"] .arrow::before, -.bs-tooltip-right .arrow::before { +.bs-tooltip-right .arrow::before, +.bs-tooltip-auto[x-placement^="right"] .arrow::before { right: 0; border-width: 0.4rem 0.4rem 0.4rem 0; border-right-color: #000; } -.bs-tooltip-auto[x-placement^="bottom"], -.bs-tooltip-bottom { + +.bs-tooltip-bottom, +.bs-tooltip-auto[x-placement^="bottom"] { padding: 0.4rem 0; } -.bs-tooltip-auto[x-placement^="bottom"] .arrow, -.bs-tooltip-bottom .arrow { +.bs-tooltip-bottom .arrow, +.bs-tooltip-auto[x-placement^="bottom"] .arrow { top: 0; } -.bs-tooltip-auto[x-placement^="bottom"] .arrow::before, -.bs-tooltip-bottom .arrow::before { +.bs-tooltip-bottom .arrow::before, +.bs-tooltip-auto[x-placement^="bottom"] .arrow::before { bottom: 0; border-width: 0 0.4rem 0.4rem; border-bottom-color: #000; } -.bs-tooltip-auto[x-placement^="left"], -.bs-tooltip-left { + +.bs-tooltip-left, +.bs-tooltip-auto[x-placement^="left"] { padding: 0 0.4rem; } -.bs-tooltip-auto[x-placement^="left"] .arrow, -.bs-tooltip-left .arrow { +.bs-tooltip-left .arrow, +.bs-tooltip-auto[x-placement^="left"] .arrow { right: 0; width: 0.4rem; height: 0.8rem; } -.bs-tooltip-auto[x-placement^="left"] .arrow::before, -.bs-tooltip-left .arrow::before { +.bs-tooltip-left .arrow::before, +.bs-tooltip-auto[x-placement^="left"] .arrow::before { left: 0; border-width: 0.4rem 0 0.4rem 0.4rem; border-left-color: #000; } + .tooltip-inner { max-width: 200px; padding: 0.25rem 0.5rem; @@ -5416,6 +5863,7 @@ a.close.disabled { background-color: #000; border-radius: 0.25rem; } + .popover { position: absolute; top: 0; @@ -5423,7 +5871,7 @@ a.close.disabled { z-index: 1060; display: block; max-width: 276px; - font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-style: normal; @@ -5436,10 +5884,10 @@ a.close.disabled { text-transform: none; letter-spacing: normal; word-break: normal; - word-spacing: normal; white-space: normal; + word-spacing: normal; line-break: auto; - font-size: 0.82031rem; + font-size: 0.8203125rem; word-wrap: break-word; background-color: #303030; background-clip: padding-box; @@ -5453,79 +5901,82 @@ a.close.disabled { height: 0.5rem; margin: 0 0.3rem; } -.popover .arrow::after, -.popover .arrow::before { +.popover .arrow::before, +.popover .arrow::after { position: absolute; display: block; content: ""; border-color: transparent; border-style: solid; } -.bs-popover-auto[x-placement^="top"], -.bs-popover-top { + +.bs-popover-top, +.bs-popover-auto[x-placement^="top"] { margin-bottom: 0.5rem; } -.bs-popover-auto[x-placement^="top"] > .arrow, -.bs-popover-top > .arrow { +.bs-popover-top > .arrow, +.bs-popover-auto[x-placement^="top"] > .arrow { bottom: calc(-0.5rem - 1px); } -.bs-popover-auto[x-placement^="top"] > .arrow::before, -.bs-popover-top > .arrow::before { +.bs-popover-top > .arrow::before, +.bs-popover-auto[x-placement^="top"] > .arrow::before { bottom: 0; border-width: 0.5rem 0.5rem 0; border-top-color: rgba(0, 0, 0, 0.25); } -.bs-popover-auto[x-placement^="top"] > .arrow::after, -.bs-popover-top > .arrow::after { +.bs-popover-top > .arrow::after, +.bs-popover-auto[x-placement^="top"] > .arrow::after { bottom: 1px; border-width: 0.5rem 0.5rem 0; border-top-color: #303030; } -.bs-popover-auto[x-placement^="right"], -.bs-popover-right { + +.bs-popover-right, +.bs-popover-auto[x-placement^="right"] { margin-left: 0.5rem; } -.bs-popover-auto[x-placement^="right"] > .arrow, -.bs-popover-right > .arrow { +.bs-popover-right > .arrow, +.bs-popover-auto[x-placement^="right"] > .arrow { left: calc(-0.5rem - 1px); width: 0.5rem; height: 1rem; margin: 0.3rem 0; } -.bs-popover-auto[x-placement^="right"] > .arrow::before, -.bs-popover-right > .arrow::before { +.bs-popover-right > .arrow::before, +.bs-popover-auto[x-placement^="right"] > .arrow::before { left: 0; border-width: 0.5rem 0.5rem 0.5rem 0; border-right-color: rgba(0, 0, 0, 0.25); } -.bs-popover-auto[x-placement^="right"] > .arrow::after, -.bs-popover-right > .arrow::after { +.bs-popover-right > .arrow::after, +.bs-popover-auto[x-placement^="right"] > .arrow::after { left: 1px; border-width: 0.5rem 0.5rem 0.5rem 0; border-right-color: #303030; } -.bs-popover-auto[x-placement^="bottom"], -.bs-popover-bottom { + +.bs-popover-bottom, +.bs-popover-auto[x-placement^="bottom"] { margin-top: 0.5rem; } -.bs-popover-auto[x-placement^="bottom"] > .arrow, -.bs-popover-bottom > .arrow { +.bs-popover-bottom > .arrow, +.bs-popover-auto[x-placement^="bottom"] > .arrow { top: calc(-0.5rem - 1px); } -.bs-popover-auto[x-placement^="bottom"] > .arrow::before, -.bs-popover-bottom > .arrow::before { +.bs-popover-bottom > .arrow::before, +.bs-popover-auto[x-placement^="bottom"] > .arrow::before { top: 0; border-width: 0 0.5rem 0.5rem 0.5rem; border-bottom-color: rgba(0, 0, 0, 0.25); } -.bs-popover-auto[x-placement^="bottom"] > .arrow::after, -.bs-popover-bottom > .arrow::after { +.bs-popover-bottom > .arrow::after, +.bs-popover-auto[x-placement^="bottom"] > .arrow::after { top: 1px; border-width: 0 0.5rem 0.5rem 0.5rem; border-bottom-color: #303030; } -.bs-popover-auto[x-placement^="bottom"] .popover-header::before, -.bs-popover-bottom .popover-header::before { +.bs-popover-bottom .popover-header::before, +.bs-popover-auto[x-placement^="bottom"] .popover-header::before { position: absolute; top: 0; left: 50%; @@ -5535,29 +5986,31 @@ a.close.disabled { content: ""; border-bottom: 1px solid #444; } -.bs-popover-auto[x-placement^="left"], -.bs-popover-left { + +.bs-popover-left, +.bs-popover-auto[x-placement^="left"] { margin-right: 0.5rem; } -.bs-popover-auto[x-placement^="left"] > .arrow, -.bs-popover-left > .arrow { +.bs-popover-left > .arrow, +.bs-popover-auto[x-placement^="left"] > .arrow { right: calc(-0.5rem - 1px); width: 0.5rem; height: 1rem; margin: 0.3rem 0; } -.bs-popover-auto[x-placement^="left"] > .arrow::before, -.bs-popover-left > .arrow::before { +.bs-popover-left > .arrow::before, +.bs-popover-auto[x-placement^="left"] > .arrow::before { right: 0; border-width: 0.5rem 0 0.5rem 0.5rem; border-left-color: rgba(0, 0, 0, 0.25); } -.bs-popover-auto[x-placement^="left"] > .arrow::after, -.bs-popover-left > .arrow::after { +.bs-popover-left > .arrow::after, +.bs-popover-auto[x-placement^="left"] > .arrow::after { right: 1px; border-width: 0.5rem 0 0.5rem 0.5rem; border-left-color: #303030; } + .popover-header { padding: 0.5rem 0.75rem; margin-bottom: 0; @@ -5570,16 +6023,20 @@ a.close.disabled { .popover-header:empty { display: none; } + .popover-body { padding: 0.5rem 0.75rem; color: #dee2e6; } + .carousel { position: relative; } + .carousel.pointer-event { touch-action: pan-y; } + .carousel-inner { position: relative; width: 100%; @@ -5590,6 +6047,7 @@ a.close.disabled { clear: both; content: ""; } + .carousel-item { position: relative; display: none; @@ -5604,27 +6062,31 @@ a.close.disabled { transition: none; } } + +.carousel-item.active, .carousel-item-next, -.carousel-item-prev, -.carousel-item.active { +.carousel-item-prev { display: block; } -.active.carousel-item-right, -.carousel-item-next:not(.carousel-item-left) { + +.carousel-item-next:not(.carousel-item-left), +.active.carousel-item-right { transform: translateX(100%); } -.active.carousel-item-left, -.carousel-item-prev:not(.carousel-item-right) { + +.carousel-item-prev:not(.carousel-item-right), +.active.carousel-item-left { transform: translateX(-100%); } + .carousel-fade .carousel-item { opacity: 0; transition-property: opacity; transform: none; } +.carousel-fade .carousel-item.active, .carousel-fade .carousel-item-next.carousel-item-left, -.carousel-fade .carousel-item-prev.carousel-item-right, -.carousel-fade .carousel-item.active { +.carousel-fade .carousel-item-prev.carousel-item-right { z-index: 1; opacity: 1; } @@ -5640,8 +6102,9 @@ a.close.disabled { transition: none; } } -.carousel-control-next, -.carousel-control-prev { + +.carousel-control-prev, +.carousel-control-next { position: absolute; top: 0; bottom: 0; @@ -5650,45 +6113,54 @@ a.close.disabled { align-items: center; justify-content: center; width: 15%; + padding: 0; color: #fff; text-align: center; + background: none; + border: 0; opacity: 0.5; transition: opacity 0.15s ease; } @media (prefers-reduced-motion: reduce) { - .carousel-control-next, - .carousel-control-prev { + .carousel-control-prev, + .carousel-control-next { transition: none; } } -.carousel-control-next:focus, -.carousel-control-next:hover, +.carousel-control-prev:hover, .carousel-control-prev:focus, -.carousel-control-prev:hover { +.carousel-control-next:hover, +.carousel-control-next:focus { color: #fff; text-decoration: none; outline: 0; opacity: 0.9; } + .carousel-control-prev { left: 0; } + .carousel-control-next { right: 0; } -.carousel-control-next-icon, -.carousel-control-prev-icon { + +.carousel-control-prev-icon, +.carousel-control-next-icon { display: inline-block; width: 20px; height: 20px; - background: no-repeat 50%/100% 100%; + background: 50%/100% 100% no-repeat; } + .carousel-control-prev-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e"); } + .carousel-control-next-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e"); } + .carousel-indicators { position: absolute; right: 0; @@ -5726,6 +6198,7 @@ a.close.disabled { .carousel-indicators .active { opacity: 1; } + .carousel-caption { position: absolute; right: 15%; @@ -5737,6 +6210,7 @@ a.close.disabled { color: #fff; text-align: center; } + @keyframes spinner-border { to { transform: rotate(360deg); @@ -5746,17 +6220,19 @@ a.close.disabled { display: inline-block; width: 2rem; height: 2rem; - vertical-align: text-bottom; - border: 0.25em solid currentColor; + vertical-align: -0.125em; + border: 0.25em solid currentcolor; border-right-color: transparent; border-radius: 50%; - animation: spinner-border 0.75s linear infinite; + animation: 0.75s linear infinite spinner-border; } + .spinner-border-sm { width: 1rem; height: 1rem; border-width: 0.2em; } + @keyframes spinner-grow { 0% { transform: scale(0); @@ -5770,235 +6246,306 @@ a.close.disabled { display: inline-block; width: 2rem; height: 2rem; - vertical-align: text-bottom; - background-color: currentColor; + vertical-align: -0.125em; + background-color: currentcolor; border-radius: 50%; opacity: 0; - animation: spinner-grow 0.75s linear infinite; + animation: 0.75s linear infinite spinner-grow; } + .spinner-grow-sm { width: 1rem; height: 1rem; } + +@media (prefers-reduced-motion: reduce) { + .spinner-border, + .spinner-grow { + animation-duration: 1.5s; + } +} .align-baseline { vertical-align: baseline !important; } + .align-top { vertical-align: top !important; } + .align-middle { vertical-align: middle !important; } + .align-bottom { vertical-align: bottom !important; } + .align-text-bottom { vertical-align: text-bottom !important; } + .align-text-top { vertical-align: text-top !important; } + .bg-primary { background-color: #375a7f !important; } -a.bg-primary:focus, + a.bg-primary:hover, -button.bg-primary:focus, -button.bg-primary:hover { +a.bg-primary:focus, +button.bg-primary:hover, +button.bg-primary:focus { background-color: #28415b !important; } + .bg-secondary { background-color: #444 !important; } -a.bg-secondary:focus, + a.bg-secondary:hover, -button.bg-secondary:focus, -button.bg-secondary:hover { +a.bg-secondary:focus, +button.bg-secondary:hover, +button.bg-secondary:focus { background-color: #2b2b2b !important; } + .bg-success { background-color: #00bc8c !important; } -a.bg-success:focus, + a.bg-success:hover, -button.bg-success:focus, -button.bg-success:hover { +a.bg-success:focus, +button.bg-success:hover, +button.bg-success:focus { background-color: #008966 !important; } + .bg-info { background-color: #3498db !important; } -a.bg-info:focus, + a.bg-info:hover, -button.bg-info:focus, -button.bg-info:hover { +a.bg-info:focus, +button.bg-info:hover, +button.bg-info:focus { background-color: #217dbb !important; } + .bg-warning { background-color: #f39c12 !important; } -a.bg-warning:focus, + a.bg-warning:hover, -button.bg-warning:focus, -button.bg-warning:hover { +a.bg-warning:focus, +button.bg-warning:hover, +button.bg-warning:focus { background-color: #c87f0a !important; } + .bg-danger { background-color: #e74c3c !important; } -a.bg-danger:focus, + a.bg-danger:hover, -button.bg-danger:focus, -button.bg-danger:hover { +a.bg-danger:focus, +button.bg-danger:hover, +button.bg-danger:focus { background-color: #d62c1a !important; } + .bg-light { background-color: #303030 !important; } -a.bg-light:focus, + a.bg-light:hover, -button.bg-light:focus, -button.bg-light:hover { +a.bg-light:focus, +button.bg-light:hover, +button.bg-light:focus { background-color: #171717 !important; } + .bg-dark { background-color: #dee2e6 !important; } -a.bg-dark:focus, + a.bg-dark:hover, -button.bg-dark:focus, -button.bg-dark:hover { +a.bg-dark:focus, +button.bg-dark:hover, +button.bg-dark:focus { background-color: #c1c9d0 !important; } + .bg-white { background-color: #fff !important; } + .bg-transparent { background-color: transparent !important; } + .border { border: 1px solid #dee2e6 !important; } + .border-top { border-top: 1px solid #dee2e6 !important; } + .border-right { border-right: 1px solid #dee2e6 !important; } + .border-bottom { border-bottom: 1px solid #dee2e6 !important; } + .border-left { border-left: 1px solid #dee2e6 !important; } + .border-0 { border: 0 !important; } + .border-top-0 { border-top: 0 !important; } + .border-right-0 { border-right: 0 !important; } + .border-bottom-0 { border-bottom: 0 !important; } + .border-left-0 { border-left: 0 !important; } + .border-primary { border-color: #375a7f !important; } + .border-secondary { border-color: #444 !important; } + .border-success { border-color: #00bc8c !important; } + .border-info { border-color: #3498db !important; } + .border-warning { border-color: #f39c12 !important; } + .border-danger { border-color: #e74c3c !important; } + .border-light { border-color: #303030 !important; } + .border-dark { border-color: #dee2e6 !important; } + .border-white { border-color: #fff !important; } + .rounded-sm { border-radius: 0.2rem !important; } + .rounded { border-radius: 0.25rem !important; } + .rounded-top { border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; } + .rounded-right { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; } + .rounded-bottom { border-bottom-right-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; } + .rounded-left { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; } + .rounded-lg { border-radius: 0.3rem !important; } + .rounded-circle { border-radius: 50% !important; } + .rounded-pill { border-radius: 50rem !important; } + .rounded-0 { border-radius: 0 !important; } + .clearfix::after { display: block; clear: both; content: ""; } + .d-none { display: none !important; } + .d-inline { display: inline !important; } + .d-inline-block { display: inline-block !important; } + .d-block { display: block !important; } + .d-table { display: table !important; } + .d-table-row { display: table-row !important; } + .d-table-cell { display: table-cell !important; } + .d-flex { display: flex !important; } + .d-inline-flex { display: inline-flex !important; } + @media (min-width: 576px) { .d-sm-none { display: none !important; @@ -6156,8 +6703,8 @@ button.bg-dark:hover { content: ""; } .embed-responsive .embed-responsive-item, -.embed-responsive embed, .embed-responsive iframe, +.embed-responsive embed, .embed-responsive object, .embed-responsive video { position: absolute; @@ -6168,120 +6715,159 @@ button.bg-dark:hover { height: 100%; border: 0; } + .embed-responsive-21by9::before { - padding-top: 42.85714%; + padding-top: 42.85714286%; } + .embed-responsive-16by9::before { padding-top: 56.25%; } + .embed-responsive-4by3::before { padding-top: 75%; } + .embed-responsive-1by1::before { padding-top: 100%; } + .flex-row { flex-direction: row !important; } + .flex-column { flex-direction: column !important; } + .flex-row-reverse { flex-direction: row-reverse !important; } + .flex-column-reverse { flex-direction: column-reverse !important; } + .flex-wrap { flex-wrap: wrap !important; } + .flex-nowrap { flex-wrap: nowrap !important; } + .flex-wrap-reverse { flex-wrap: wrap-reverse !important; } + .flex-fill { flex: 1 1 auto !important; } + .flex-grow-0 { flex-grow: 0 !important; } + .flex-grow-1 { flex-grow: 1 !important; } + .flex-shrink-0 { flex-shrink: 0 !important; } + .flex-shrink-1 { flex-shrink: 1 !important; } + .justify-content-start { justify-content: flex-start !important; } + .justify-content-end { justify-content: flex-end !important; } + .justify-content-center { justify-content: center !important; } + .justify-content-between { justify-content: space-between !important; } + .justify-content-around { justify-content: space-around !important; } + .align-items-start { align-items: flex-start !important; } + .align-items-end { align-items: flex-end !important; } + .align-items-center { align-items: center !important; } + .align-items-baseline { align-items: baseline !important; } + .align-items-stretch { align-items: stretch !important; } + .align-content-start { align-content: flex-start !important; } + .align-content-end { align-content: flex-end !important; } + .align-content-center { align-content: center !important; } + .align-content-between { align-content: space-between !important; } + .align-content-around { align-content: space-around !important; } + .align-content-stretch { align-content: stretch !important; } + .align-self-auto { align-self: auto !important; } + .align-self-start { align-self: flex-start !important; } + .align-self-end { align-self: flex-end !important; } + .align-self-center { align-self: center !important; } + .align-self-baseline { align-self: baseline !important; } + .align-self-stretch { align-self: stretch !important; } + @media (min-width: 576px) { .flex-sm-row { flex-direction: row !important; @@ -6701,12 +7287,15 @@ button.bg-dark:hover { .float-left { float: left !important; } + .float-right { float: right !important; } + .float-none { float: none !important; } + @media (min-width: 576px) { .float-sm-left { float: left !important; @@ -6754,33 +7343,43 @@ button.bg-dark:hover { .user-select-all { user-select: all !important; } + .user-select-auto { user-select: auto !important; } + .user-select-none { user-select: none !important; } + .overflow-auto { overflow: auto !important; } + .overflow-hidden { overflow: hidden !important; } + .position-static { position: static !important; } + .position-relative { position: relative !important; } + .position-absolute { position: absolute !important; } + .position-fixed { position: fixed !important; } + .position-sticky { position: sticky !important; } + .fixed-top { position: fixed; top: 0; @@ -6788,6 +7387,7 @@ button.bg-dark:hover { left: 0; z-index: 1030; } + .fixed-bottom { position: fixed; right: 0; @@ -6795,6 +7395,7 @@ button.bg-dark:hover { left: 0; z-index: 1030; } + @supports (position: sticky) { .sticky-top { position: sticky; @@ -6802,6 +7403,7 @@ button.bg-dark:hover { z-index: 1020; } } + .sr-only { position: absolute; width: 1px; @@ -6813,6 +7415,7 @@ button.bg-dark:hover { white-space: nowrap; border: 0; } + .sr-only-focusable:active, .sr-only-focusable:focus { position: static; @@ -6822,408 +7425,519 @@ button.bg-dark:hover { clip: auto; white-space: normal; } + .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; } + .shadow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; } + .shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; } + .shadow-none { box-shadow: none !important; } + .w-25 { width: 25% !important; } + .w-50 { width: 50% !important; } + .w-75 { width: 75% !important; } + .w-100 { width: 100% !important; } + .w-auto { width: auto !important; } + .h-25 { height: 25% !important; } + .h-50 { height: 50% !important; } + .h-75 { height: 75% !important; } + .h-100 { height: 100% !important; } + .h-auto { height: auto !important; } + .mw-100 { max-width: 100% !important; } + .mh-100 { max-height: 100% !important; } + .min-vw-100 { min-width: 100vw !important; } + .min-vh-100 { min-height: 100vh !important; } + .vw-100 { width: 100vw !important; } + .vh-100 { height: 100vh !important; } + .m-0 { margin: 0 !important; } + .mt-0, .my-0 { margin-top: 0 !important; } + .mr-0, .mx-0 { margin-right: 0 !important; } + .mb-0, .my-0 { margin-bottom: 0 !important; } + .ml-0, .mx-0 { margin-left: 0 !important; } + .m-1 { margin: 0.25rem !important; } + .mt-1, .my-1 { margin-top: 0.25rem !important; } + .mr-1, .mx-1 { margin-right: 0.25rem !important; } + .mb-1, .my-1 { margin-bottom: 0.25rem !important; } + .ml-1, .mx-1 { margin-left: 0.25rem !important; } + .m-2 { margin: 0.5rem !important; } + .mt-2, .my-2 { margin-top: 0.5rem !important; } + .mr-2, .mx-2 { margin-right: 0.5rem !important; } + .mb-2, .my-2 { margin-bottom: 0.5rem !important; } + .ml-2, .mx-2 { margin-left: 0.5rem !important; } + .m-3 { margin: 1rem !important; } + .mt-3, .my-3 { margin-top: 1rem !important; } + .mr-3, .mx-3 { margin-right: 1rem !important; } + .mb-3, .my-3 { margin-bottom: 1rem !important; } + .ml-3, .mx-3 { margin-left: 1rem !important; } + .m-4 { margin: 1.5rem !important; } + .mt-4, .my-4 { margin-top: 1.5rem !important; } + .mr-4, .mx-4 { margin-right: 1.5rem !important; } + .mb-4, .my-4 { margin-bottom: 1.5rem !important; } + .ml-4, .mx-4 { margin-left: 1.5rem !important; } + .m-5 { margin: 3rem !important; } + .mt-5, .my-5 { margin-top: 3rem !important; } + .mr-5, .mx-5 { margin-right: 3rem !important; } + .mb-5, .my-5 { margin-bottom: 3rem !important; } + .ml-5, .mx-5 { margin-left: 3rem !important; } + .p-0 { padding: 0 !important; } + .pt-0, .py-0 { padding-top: 0 !important; } + .pr-0, .px-0 { padding-right: 0 !important; } + .pb-0, .py-0 { padding-bottom: 0 !important; } + .pl-0, .px-0 { padding-left: 0 !important; } + .p-1 { padding: 0.25rem !important; } + .pt-1, .py-1 { padding-top: 0.25rem !important; } + .pr-1, .px-1 { padding-right: 0.25rem !important; } + .pb-1, .py-1 { padding-bottom: 0.25rem !important; } + .pl-1, .px-1 { padding-left: 0.25rem !important; } + .p-2 { padding: 0.5rem !important; } + .pt-2, .py-2 { padding-top: 0.5rem !important; } + .pr-2, .px-2 { padding-right: 0.5rem !important; } + .pb-2, .py-2 { padding-bottom: 0.5rem !important; } + .pl-2, .px-2 { padding-left: 0.5rem !important; } + .p-3 { padding: 1rem !important; } + .pt-3, .py-3 { padding-top: 1rem !important; } + .pr-3, .px-3 { padding-right: 1rem !important; } + .pb-3, .py-3 { padding-bottom: 1rem !important; } + .pl-3, .px-3 { padding-left: 1rem !important; } + .p-4 { padding: 1.5rem !important; } + .pt-4, .py-4 { padding-top: 1.5rem !important; } + .pr-4, .px-4 { padding-right: 1.5rem !important; } + .pb-4, .py-4 { padding-bottom: 1.5rem !important; } + .pl-4, .px-4 { padding-left: 1.5rem !important; } + .p-5 { padding: 3rem !important; } + .pt-5, .py-5 { padding-top: 3rem !important; } + .pr-5, .px-5 { padding-right: 3rem !important; } + .pb-5, .py-5 { padding-bottom: 3rem !important; } + .pl-5, .px-5 { padding-left: 3rem !important; } + .m-n1 { margin: -0.25rem !important; } + .mt-n1, .my-n1 { margin-top: -0.25rem !important; } + .mr-n1, .mx-n1 { margin-right: -0.25rem !important; } + .mb-n1, .my-n1 { margin-bottom: -0.25rem !important; } + .ml-n1, .mx-n1 { margin-left: -0.25rem !important; } + .m-n2 { margin: -0.5rem !important; } + .mt-n2, .my-n2 { margin-top: -0.5rem !important; } + .mr-n2, .mx-n2 { margin-right: -0.5rem !important; } + .mb-n2, .my-n2 { margin-bottom: -0.5rem !important; } + .ml-n2, .mx-n2 { margin-left: -0.5rem !important; } + .m-n3 { margin: -1rem !important; } + .mt-n3, .my-n3 { margin-top: -1rem !important; } + .mr-n3, .mx-n3 { margin-right: -1rem !important; } + .mb-n3, .my-n3 { margin-bottom: -1rem !important; } + .ml-n3, .mx-n3 { margin-left: -1rem !important; } + .m-n4 { margin: -1.5rem !important; } + .mt-n4, .my-n4 { margin-top: -1.5rem !important; } + .mr-n4, .mx-n4 { margin-right: -1.5rem !important; } + .mb-n4, .my-n4 { margin-bottom: -1.5rem !important; } + .ml-n4, .mx-n4 { margin-left: -1.5rem !important; } + .m-n5 { margin: -3rem !important; } + .mt-n5, .my-n5 { margin-top: -3rem !important; } + .mr-n5, .mx-n5 { margin-right: -3rem !important; } + .mb-n5, .my-n5 { margin-bottom: -3rem !important; } + .ml-n5, .mx-n5 { margin-left: -3rem !important; } + .m-auto { margin: auto !important; } + .mt-auto, .my-auto { margin-top: auto !important; } + .mr-auto, .mx-auto { margin-right: auto !important; } + .mb-auto, .my-auto { margin-bottom: auto !important; } + .ml-auto, .mx-auto { margin-left: auto !important; } + @media (min-width: 576px) { .m-sm-0 { margin: 0 !important; @@ -8611,33 +9325,42 @@ button.bg-dark:hover { content: ""; background-color: rgba(0, 0, 0, 0); } + .text-monospace { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; } + .text-justify { text-align: justify !important; } + .text-wrap { white-space: normal !important; } + .text-nowrap { white-space: nowrap !important; } + .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .text-left { text-align: left !important; } + .text-right { text-align: right !important; } + .text-center { text-align: center !important; } + @media (min-width: 576px) { .text-sm-left { text-align: left !important; @@ -8685,101 +9408,131 @@ button.bg-dark:hover { .text-lowercase { text-transform: lowercase !important; } + .text-uppercase { text-transform: uppercase !important; } + .text-capitalize { text-transform: capitalize !important; } + .font-weight-light { font-weight: 300 !important; } + .font-weight-lighter { font-weight: lighter !important; } + .font-weight-normal { font-weight: 400 !important; } + .font-weight-bold { font-weight: 700 !important; } + .font-weight-bolder { font-weight: bolder !important; } + .font-italic { font-style: italic !important; } + .text-white { color: #fff !important; } + .text-primary { color: #375a7f !important; } -a.text-primary:focus, -a.text-primary:hover { + +a.text-primary:hover, +a.text-primary:focus { color: #20344a !important; } + .text-secondary { color: #444 !important; } -a.text-secondary:focus, -a.text-secondary:hover { + +a.text-secondary:hover, +a.text-secondary:focus { color: #1e1e1e !important; } + .text-success { color: #00bc8c !important; } -a.text-success:focus, -a.text-success:hover { + +a.text-success:hover, +a.text-success:focus { color: #007053 !important; } + .text-info { color: #3498db !important; } -a.text-info:focus, -a.text-info:hover { + +a.text-info:hover, +a.text-info:focus { color: #1d6fa5 !important; } + .text-warning { color: #f39c12 !important; } -a.text-warning:focus, -a.text-warning:hover { + +a.text-warning:hover, +a.text-warning:focus { color: #b06f09 !important; } + .text-danger { color: #e74c3c !important; } -a.text-danger:focus, -a.text-danger:hover { + +a.text-danger:hover, +a.text-danger:focus { color: #bf2718 !important; } + .text-light { color: #303030 !important; } -a.text-light:focus, -a.text-light:hover { + +a.text-light:hover, +a.text-light:focus { color: #0a0a0a !important; } + .text-dark { color: #dee2e6 !important; } -a.text-dark:focus, -a.text-dark:hover { + +a.text-dark:hover, +a.text-dark:focus { color: #b2bcc5 !important; } + .text-body { color: #dee2e6 !important; } + .text-muted { color: #888 !important; } + .text-black-50 { color: rgba(0, 0, 0, 0.5) !important; } + .text-white-50 { color: rgba(255, 255, 255, 0.5) !important; } + .text-hide { font: 0/0 a; color: transparent; @@ -8787,25 +9540,32 @@ a.text-dark:hover { background-color: transparent; border: 0; } + .text-decoration-none { text-decoration: none !important; } + .text-break { + word-break: break-word !important; word-wrap: break-word !important; } + .text-reset { color: inherit !important; } + .visible { visibility: visible !important; } + .invisible { visibility: hidden !important; } + @media print { *, - ::after, - ::before { + *::before, + *::after { text-shadow: none !important; box-shadow: none !important; } @@ -8818,21 +9578,18 @@ a.text-dark:hover { pre { white-space: pre-wrap !important; } - blockquote, - pre { + pre, + blockquote { border: 1px solid #adb5bd; page-break-inside: avoid; } - thead { - display: table-header-group; - } - img, - tr { + tr, + img { page-break-inside: avoid; } + p, h2, - h3, - p { + h3 { orphans: 3; widows: 3; } @@ -8862,17 +9619,17 @@ a.text-dark:hover { .table th { background-color: #fff !important; } - .table-bordered td, - .table-bordered th { + .table-bordered th, + .table-bordered td { border: 1px solid #dee2e6 !important; } .table-dark { color: inherit; } - .table-dark tbody + tbody, - .table-dark td, .table-dark th, - .table-dark thead th { + .table-dark td, + .table-dark thead th, + .table-dark tbody + tbody { border-color: #444; } .table .thead-dark th { @@ -8880,3 +9637,5 @@ a.text-dark:hover { border-color: #444; } } + +/*# sourceMappingURL=darkly-red.css.map */ diff --git a/src/assets/css/themes/darkly.css b/src/assets/css/themes/darkly.css index a2b09177..ec4ca0c8 100644 --- a/src/assets/css/themes/darkly.css +++ b/src/assets/css/themes/darkly.css @@ -1,3 +1,10 @@ +@charset "UTF-8"; +/*! + * Bootstrap v4.6.2 (https://getbootstrap.com/) + * Copyright 2011-2022 The Bootstrap Authors + * Copyright 2011-2022 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + */ :root { --blue: #375a7f; --indigo: #6610f2; @@ -26,22 +33,25 @@ --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --font-family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, - "Segoe UI", Roboto, "Helvetica Neue", Cantarell, Arial, sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol"; --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } + *, -::after, -::before { +*::before, +*::after { box-sizing: border-box; } + html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; - -webkit-tap-highlight-color: transparent; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } + article, aside, figcaption, @@ -54,9 +64,10 @@ nav, section { display: block; } + body { margin: 0; - font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 0.9375rem; @@ -66,14 +77,17 @@ body { text-align: left; background-color: #222; } + [tabindex="-1"]:focus:not(:focus-visible) { outline: 0 !important; } + hr { box-sizing: content-box; height: 0; overflow: visible; } + h1, h2, h3, @@ -83,52 +97,63 @@ h6 { margin-top: 0; margin-bottom: 0.5rem; } + p { margin-top: 0; margin-bottom: 1rem; } -abbr[data-original-title], -abbr[title] { + +abbr[title], +abbr[data-original-title] { text-decoration: underline; text-decoration: underline dotted; cursor: help; border-bottom: 0; text-decoration-skip-ink: none; } + address { margin-bottom: 1rem; font-style: normal; line-height: inherit; } -dl, + ol, -ul { +ul, +dl { margin-top: 0; margin-bottom: 1rem; } + ol ol, +ul ul, ol ul, -ul ol, -ul ul { +ul ol { margin-bottom: 0; } + dt { font-weight: 700; } + dd { margin-bottom: 0.5rem; margin-left: 0; } + blockquote { margin: 0 0 1rem; } + b, strong { font-weight: bolder; } + small { font-size: 80%; } + sub, sup { position: relative; @@ -136,12 +161,15 @@ sup { line-height: 0; vertical-align: baseline; } + sub { bottom: -0.25em; } + sup { top: -0.5em; } + a { color: #00bc8c; text-decoration: none; @@ -151,42 +179,50 @@ a:hover { color: #007053; text-decoration: underline; } -a:not([href]) { + +a:not([href]):not([class]) { color: inherit; text-decoration: none; } -a:not([href]):hover { +a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } + +pre, code, kbd, -pre, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; } + pre { margin-top: 0; margin-bottom: 1rem; overflow: auto; -ms-overflow-style: scrollbar; } + figure { margin: 0 0 1rem; } + img { vertical-align: middle; border-style: none; } + svg { overflow: hidden; vertical-align: middle; } + table { border-collapse: collapse; } + caption { padding-top: 0.75rem; padding-bottom: 0.75rem; @@ -194,78 +230,94 @@ caption { text-align: left; caption-side: bottom; } + th { text-align: inherit; + text-align: -webkit-match-parent; } + label { display: inline-block; margin-bottom: 0.5rem; } + button { border-radius: 0; } -button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; + +button:focus:not(:focus-visible) { + outline: 0; } -button, + input, -optgroup, +button, select, +optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } + button, input { overflow: visible; } + button, select { text-transform: none; } + [role="button"] { cursor: pointer; } + select { word-wrap: normal; } + +button, [type="button"], [type="reset"], -[type="submit"], -button { +[type="submit"] { -webkit-appearance: button; } + +button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), -[type="submit"]:not(:disabled), -button:not(:disabled) { +[type="submit"]:not(:disabled) { cursor: pointer; } + +button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner, -button::-moz-focus-inner { +[type="submit"]::-moz-focus-inner { padding: 0; border-style: none; } -input[type="checkbox"], -input[type="radio"] { + +input[type="radio"], +input[type="checkbox"] { box-sizing: border-box; padding: 0; } + textarea { overflow: auto; resize: vertical; } + fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } + legend { display: block; width: 100%; @@ -277,151 +329,183 @@ legend { color: inherit; white-space: normal; } + progress { vertical-align: baseline; } + [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } + [type="search"] { outline-offset: -2px; -webkit-appearance: none; } + [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } + ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } + output { display: inline-block; } + summary { display: list-item; cursor: pointer; } + template { display: none; } + [hidden] { display: none !important; } -.h1, -.h2, -.h3, -.h4, -.h5, -.h6, + h1, h2, h3, h4, h5, -h6 { +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; } -.h1, -h1 { + +h1, +.h1 { font-size: 3rem; } -.h2, -h2 { + +h2, +.h2 { font-size: 2.5rem; } -.h3, -h3 { + +h3, +.h3 { font-size: 2rem; } -.h4, -h4 { + +h4, +.h4 { font-size: 1.40625rem; } -.h5, -h5 { - font-size: 1.17188rem; + +h5, +.h5 { + font-size: 1.171875rem; } -.h6, -h6 { + +h6, +.h6 { font-size: 0.9375rem; } + .lead { - font-size: 1.17188rem; + font-size: 1.171875rem; font-weight: 300; } + .display-1 { font-size: 6rem; font-weight: 300; line-height: 1.2; } + .display-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.2; } + .display-3 { font-size: 4.5rem; font-weight: 300; line-height: 1.2; } + .display-4 { font-size: 3.5rem; font-weight: 300; line-height: 1.2; } + hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); } -.small, -small { - font-size: 80%; + +small, +.small { + font-size: 0.875em; font-weight: 400; } -.mark, -mark { + +mark, +.mark { padding: 0.2em; background-color: #333; } + .list-unstyled { padding-left: 0; list-style: none; } + .list-inline { padding-left: 0; list-style: none; } + .list-inline-item { display: inline-block; } .list-inline-item:not(:last-child) { margin-right: 0.5rem; } + .initialism { font-size: 90%; text-transform: uppercase; } + .blockquote { margin-bottom: 1rem; - font-size: 1.17188rem; + font-size: 1.171875rem; } + .blockquote-footer { display: block; - font-size: 80%; + font-size: 0.875em; color: #888; } .blockquote-footer::before { - content: "\2014\00A0"; + content: "— "; } + .img-fluid { max-width: 100%; height: auto; } + .img-thumbnail { padding: 0.25rem; background-color: #222; @@ -430,17 +514,21 @@ mark { max-width: 100%; height: auto; } + .figure { display: inline-block; } + .figure-img { margin-bottom: 0.5rem; line-height: 1; } + .figure-caption { font-size: 90%; color: #888; } + code { font-size: 87.5%; color: #e83e8c; @@ -449,6 +537,7 @@ code { a > code { color: inherit; } + kbd { padding: 0.2rem 0.4rem; font-size: 87.5%; @@ -461,6 +550,7 @@ kbd kbd { font-size: 100%; font-weight: 700; } + pre { display: block; font-size: 87.5%; @@ -471,75 +561,52 @@ pre code { color: inherit; word-break: normal; } + .pre-scrollable { max-height: 340px; overflow-y: scroll; } -.container { - width: 100%; - padding-right: 15px; - padding-left: 15px; - margin-right: auto; - margin-left: auto; -} -@media (min-width: 576px) { - .container { - max-width: 540px; - } -} -@media (min-width: 768px) { - .container { - max-width: 720px; - } -} -@media (min-width: 992px) { - .container { - max-width: 960px; - } -} -@media (min-width: 1200px) { - .container { - max-width: 1140px; - } -} + +.container, .container-fluid, +.container-xl, .container-lg, .container-md, -.container-sm, -.container-xl { +.container-sm { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } + @media (min-width: 576px) { - .container, - .container-sm { + .container-sm, + .container { max-width: 540px; } } @media (min-width: 768px) { - .container, .container-md, - .container-sm { + .container-sm, + .container { max-width: 720px; } } @media (min-width: 992px) { - .container, - .container-lg, - .container-md, - .container-sm { - max-width: 960px; - } -} -@media (min-width: 1200px) { - .container, .container-lg, .container-md, .container-sm, - .container-xl { + .container { + max-width: 960px; + } +} +@media (min-width: 1200px) { + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container { max-width: 1140px; } } @@ -549,6 +616,7 @@ pre code { margin-right: -15px; margin-left: -15px; } + .no-gutters { margin-right: 0; margin-left: 0; @@ -558,247 +626,293 @@ pre code { padding-right: 0; padding-left: 0; } -.col, -.col-1, -.col-10, -.col-11, -.col-12, -.col-2, -.col-3, -.col-4, -.col-5, -.col-6, -.col-7, -.col-8, -.col-9, -.col-auto, -.col-lg, -.col-lg-1, -.col-lg-10, -.col-lg-11, -.col-lg-12, -.col-lg-2, -.col-lg-3, -.col-lg-4, -.col-lg-5, -.col-lg-6, -.col-lg-7, -.col-lg-8, -.col-lg-9, -.col-lg-auto, -.col-md, -.col-md-1, -.col-md-10, -.col-md-11, -.col-md-12, -.col-md-2, -.col-md-3, -.col-md-4, -.col-md-5, -.col-md-6, -.col-md-7, -.col-md-8, -.col-md-9, -.col-md-auto, -.col-sm, -.col-sm-1, -.col-sm-10, -.col-sm-11, -.col-sm-12, -.col-sm-2, -.col-sm-3, -.col-sm-4, -.col-sm-5, -.col-sm-6, -.col-sm-7, -.col-sm-8, -.col-sm-9, -.col-sm-auto, + .col-xl, -.col-xl-1, -.col-xl-10, -.col-xl-11, +.col-xl-auto, .col-xl-12, -.col-xl-2, -.col-xl-3, -.col-xl-4, -.col-xl-5, -.col-xl-6, -.col-xl-7, -.col-xl-8, +.col-xl-11, +.col-xl-10, .col-xl-9, -.col-xl-auto { +.col-xl-8, +.col-xl-7, +.col-xl-6, +.col-xl-5, +.col-xl-4, +.col-xl-3, +.col-xl-2, +.col-xl-1, +.col-lg, +.col-lg-auto, +.col-lg-12, +.col-lg-11, +.col-lg-10, +.col-lg-9, +.col-lg-8, +.col-lg-7, +.col-lg-6, +.col-lg-5, +.col-lg-4, +.col-lg-3, +.col-lg-2, +.col-lg-1, +.col-md, +.col-md-auto, +.col-md-12, +.col-md-11, +.col-md-10, +.col-md-9, +.col-md-8, +.col-md-7, +.col-md-6, +.col-md-5, +.col-md-4, +.col-md-3, +.col-md-2, +.col-md-1, +.col-sm, +.col-sm-auto, +.col-sm-12, +.col-sm-11, +.col-sm-10, +.col-sm-9, +.col-sm-8, +.col-sm-7, +.col-sm-6, +.col-sm-5, +.col-sm-4, +.col-sm-3, +.col-sm-2, +.col-sm-1, +.col, +.col-auto, +.col-12, +.col-11, +.col-10, +.col-9, +.col-8, +.col-7, +.col-6, +.col-5, +.col-4, +.col-3, +.col-2, +.col-1 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } + .col { flex-basis: 0; flex-grow: 1; - min-width: 0; max-width: 100%; } + .row-cols-1 > * { flex: 0 0 100%; max-width: 100%; } + .row-cols-2 > * { flex: 0 0 50%; max-width: 50%; } + .row-cols-3 > * { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .row-cols-4 > * { flex: 0 0 25%; max-width: 25%; } + .row-cols-5 > * { flex: 0 0 20%; max-width: 20%; } + .row-cols-6 > * { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .col-auto { flex: 0 0 auto; width: auto; max-width: 100%; } + .col-1 { - flex: 0 0 8.33333%; - max-width: 8.33333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } + .col-2 { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } + .col-3 { flex: 0 0 25%; max-width: 25%; } + .col-4 { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } + .col-5 { - flex: 0 0 41.66667%; - max-width: 41.66667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } + .col-6 { flex: 0 0 50%; max-width: 50%; } + .col-7 { - flex: 0 0 58.33333%; - max-width: 58.33333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } + .col-8 { - flex: 0 0 66.66667%; - max-width: 66.66667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } + .col-9 { flex: 0 0 75%; max-width: 75%; } + .col-10 { - flex: 0 0 83.33333%; - max-width: 83.33333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } + .col-11 { - flex: 0 0 91.66667%; - max-width: 91.66667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } + .col-12 { flex: 0 0 100%; max-width: 100%; } + .order-first { order: -1; } + .order-last { order: 13; } + .order-0 { order: 0; } + .order-1 { order: 1; } + .order-2 { order: 2; } + .order-3 { order: 3; } + .order-4 { order: 4; } + .order-5 { order: 5; } + .order-6 { order: 6; } + .order-7 { order: 7; } + .order-8 { order: 8; } + .order-9 { order: 9; } + .order-10 { order: 10; } + .order-11 { order: 11; } + .order-12 { order: 12; } + .offset-1 { - margin-left: 8.33333%; + margin-left: 8.33333333%; } + .offset-2 { - margin-left: 16.66667%; + margin-left: 16.66666667%; } + .offset-3 { margin-left: 25%; } + .offset-4 { - margin-left: 33.33333%; + margin-left: 33.33333333%; } + .offset-5 { - margin-left: 41.66667%; + margin-left: 41.66666667%; } + .offset-6 { margin-left: 50%; } + .offset-7 { - margin-left: 58.33333%; + margin-left: 58.33333333%; } + .offset-8 { - margin-left: 66.66667%; + margin-left: 66.66666667%; } + .offset-9 { margin-left: 75%; } + .offset-10 { - margin-left: 83.33333%; + margin-left: 83.33333333%; } + .offset-11 { - margin-left: 91.66667%; + margin-left: 91.66666667%; } + @media (min-width: 576px) { .col-sm { flex-basis: 0; flex-grow: 1; - min-width: 0; max-width: 100%; } .row-cols-sm-1 > * { @@ -810,8 +924,8 @@ pre code { max-width: 50%; } .row-cols-sm-3 > * { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } .row-cols-sm-4 > * { flex: 0 0 25%; @@ -822,8 +936,8 @@ pre code { max-width: 20%; } .row-cols-sm-6 > * { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } .col-sm-auto { flex: 0 0 auto; @@ -831,48 +945,48 @@ pre code { max-width: 100%; } .col-sm-1 { - flex: 0 0 8.33333%; - max-width: 8.33333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } .col-sm-2 { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .col-sm-4 { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } .col-sm-5 { - flex: 0 0 41.66667%; - max-width: 41.66667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .col-sm-7 { - flex: 0 0 58.33333%; - max-width: 58.33333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } .col-sm-8 { - flex: 0 0 66.66667%; - max-width: 66.66667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } .col-sm-9 { flex: 0 0 75%; max-width: 75%; } .col-sm-10 { - flex: 0 0 83.33333%; - max-width: 83.33333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } .col-sm-11 { - flex: 0 0 91.66667%; - max-width: 91.66667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } .col-sm-12 { flex: 0 0 100%; @@ -927,44 +1041,43 @@ pre code { margin-left: 0; } .offset-sm-1 { - margin-left: 8.33333%; + margin-left: 8.33333333%; } .offset-sm-2 { - margin-left: 16.66667%; + margin-left: 16.66666667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { - margin-left: 33.33333%; + margin-left: 33.33333333%; } .offset-sm-5 { - margin-left: 41.66667%; + margin-left: 41.66666667%; } .offset-sm-6 { margin-left: 50%; } .offset-sm-7 { - margin-left: 58.33333%; + margin-left: 58.33333333%; } .offset-sm-8 { - margin-left: 66.66667%; + margin-left: 66.66666667%; } .offset-sm-9 { margin-left: 75%; } .offset-sm-10 { - margin-left: 83.33333%; + margin-left: 83.33333333%; } .offset-sm-11 { - margin-left: 91.66667%; + margin-left: 91.66666667%; } } @media (min-width: 768px) { .col-md { flex-basis: 0; flex-grow: 1; - min-width: 0; max-width: 100%; } .row-cols-md-1 > * { @@ -976,8 +1089,8 @@ pre code { max-width: 50%; } .row-cols-md-3 > * { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } .row-cols-md-4 > * { flex: 0 0 25%; @@ -988,8 +1101,8 @@ pre code { max-width: 20%; } .row-cols-md-6 > * { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } .col-md-auto { flex: 0 0 auto; @@ -997,48 +1110,48 @@ pre code { max-width: 100%; } .col-md-1 { - flex: 0 0 8.33333%; - max-width: 8.33333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } .col-md-2 { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } .col-md-5 { - flex: 0 0 41.66667%; - max-width: 41.66667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-7 { - flex: 0 0 58.33333%; - max-width: 58.33333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } .col-md-8 { - flex: 0 0 66.66667%; - max-width: 66.66667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-10 { - flex: 0 0 83.33333%; - max-width: 83.33333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } .col-md-11 { - flex: 0 0 91.66667%; - max-width: 91.66667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } .col-md-12 { flex: 0 0 100%; @@ -1093,44 +1206,43 @@ pre code { margin-left: 0; } .offset-md-1 { - margin-left: 8.33333%; + margin-left: 8.33333333%; } .offset-md-2 { - margin-left: 16.66667%; + margin-left: 16.66666667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { - margin-left: 33.33333%; + margin-left: 33.33333333%; } .offset-md-5 { - margin-left: 41.66667%; + margin-left: 41.66666667%; } .offset-md-6 { margin-left: 50%; } .offset-md-7 { - margin-left: 58.33333%; + margin-left: 58.33333333%; } .offset-md-8 { - margin-left: 66.66667%; + margin-left: 66.66666667%; } .offset-md-9 { margin-left: 75%; } .offset-md-10 { - margin-left: 83.33333%; + margin-left: 83.33333333%; } .offset-md-11 { - margin-left: 91.66667%; + margin-left: 91.66666667%; } } @media (min-width: 992px) { .col-lg { flex-basis: 0; flex-grow: 1; - min-width: 0; max-width: 100%; } .row-cols-lg-1 > * { @@ -1142,8 +1254,8 @@ pre code { max-width: 50%; } .row-cols-lg-3 > * { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } .row-cols-lg-4 > * { flex: 0 0 25%; @@ -1154,8 +1266,8 @@ pre code { max-width: 20%; } .row-cols-lg-6 > * { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } .col-lg-auto { flex: 0 0 auto; @@ -1163,48 +1275,48 @@ pre code { max-width: 100%; } .col-lg-1 { - flex: 0 0 8.33333%; - max-width: 8.33333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } .col-lg-2 { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .col-lg-4 { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } .col-lg-5 { - flex: 0 0 41.66667%; - max-width: 41.66667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .col-lg-7 { - flex: 0 0 58.33333%; - max-width: 58.33333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } .col-lg-8 { - flex: 0 0 66.66667%; - max-width: 66.66667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } .col-lg-9 { flex: 0 0 75%; max-width: 75%; } .col-lg-10 { - flex: 0 0 83.33333%; - max-width: 83.33333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } .col-lg-11 { - flex: 0 0 91.66667%; - max-width: 91.66667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } .col-lg-12 { flex: 0 0 100%; @@ -1259,44 +1371,43 @@ pre code { margin-left: 0; } .offset-lg-1 { - margin-left: 8.33333%; + margin-left: 8.33333333%; } .offset-lg-2 { - margin-left: 16.66667%; + margin-left: 16.66666667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { - margin-left: 33.33333%; + margin-left: 33.33333333%; } .offset-lg-5 { - margin-left: 41.66667%; + margin-left: 41.66666667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { - margin-left: 58.33333%; + margin-left: 58.33333333%; } .offset-lg-8 { - margin-left: 66.66667%; + margin-left: 66.66666667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { - margin-left: 83.33333%; + margin-left: 83.33333333%; } .offset-lg-11 { - margin-left: 91.66667%; + margin-left: 91.66666667%; } } @media (min-width: 1200px) { .col-xl { flex-basis: 0; flex-grow: 1; - min-width: 0; max-width: 100%; } .row-cols-xl-1 > * { @@ -1308,8 +1419,8 @@ pre code { max-width: 50%; } .row-cols-xl-3 > * { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } .row-cols-xl-4 > * { flex: 0 0 25%; @@ -1320,8 +1431,8 @@ pre code { max-width: 20%; } .row-cols-xl-6 > * { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } .col-xl-auto { flex: 0 0 auto; @@ -1329,48 +1440,48 @@ pre code { max-width: 100%; } .col-xl-1 { - flex: 0 0 8.33333%; - max-width: 8.33333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } .col-xl-2 { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } .col-xl-3 { flex: 0 0 25%; max-width: 25%; } .col-xl-4 { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } .col-xl-5 { - flex: 0 0 41.66667%; - max-width: 41.66667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } .col-xl-6 { flex: 0 0 50%; max-width: 50%; } .col-xl-7 { - flex: 0 0 58.33333%; - max-width: 58.33333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } .col-xl-8 { - flex: 0 0 66.66667%; - max-width: 66.66667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } .col-xl-9 { flex: 0 0 75%; max-width: 75%; } .col-xl-10 { - flex: 0 0 83.33333%; - max-width: 83.33333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } .col-xl-11 { - flex: 0 0 91.66667%; - max-width: 91.66667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } .col-xl-12 { flex: 0 0 100%; @@ -1425,37 +1536,37 @@ pre code { margin-left: 0; } .offset-xl-1 { - margin-left: 8.33333%; + margin-left: 8.33333333%; } .offset-xl-2 { - margin-left: 16.66667%; + margin-left: 16.66666667%; } .offset-xl-3 { margin-left: 25%; } .offset-xl-4 { - margin-left: 33.33333%; + margin-left: 33.33333333%; } .offset-xl-5 { - margin-left: 41.66667%; + margin-left: 41.66666667%; } .offset-xl-6 { margin-left: 50%; } .offset-xl-7 { - margin-left: 58.33333%; + margin-left: 58.33333333%; } .offset-xl-8 { - margin-left: 66.66667%; + margin-left: 66.66666667%; } .offset-xl-9 { margin-left: 75%; } .offset-xl-10 { - margin-left: 83.33333%; + margin-left: 83.33333333%; } .offset-xl-11 { - margin-left: 91.66667%; + margin-left: 91.66666667%; } } .table { @@ -1463,8 +1574,8 @@ pre code { margin-bottom: 1rem; color: #dee2e6; } -.table td, -.table th { +.table th, +.table td { padding: 0.75rem; vertical-align: top; border-top: 1px solid #444; @@ -1476,45 +1587,52 @@ pre code { .table tbody + tbody { border-top: 2px solid #444; } -.table-sm td, -.table-sm th { + +.table-sm th, +.table-sm td { padding: 0.3rem; } + .table-bordered { border: 1px solid #444; } -.table-bordered td, -.table-bordered th { +.table-bordered th, +.table-bordered td { border: 1px solid #444; } -.table-bordered thead td, -.table-bordered thead th { +.table-bordered thead th, +.table-bordered thead td { border-bottom-width: 2px; } -.table-borderless tbody + tbody, -.table-borderless td, + .table-borderless th, -.table-borderless thead th { +.table-borderless td, +.table-borderless thead th, +.table-borderless tbody + tbody { border: 0; } + .table-striped tbody tr:nth-of-type(odd) { background-color: #303030; } + .table-hover tbody tr:hover { color: #dee2e6; background-color: rgba(0, 0, 0, 0.075); } + .table-primary, -.table-primary > td, -.table-primary > th { +.table-primary > th, +.table-primary > td { background-color: #c7d1db; } -.table-primary tbody + tbody, -.table-primary td, .table-primary th, -.table-primary thead th { +.table-primary td, +.table-primary thead th, +.table-primary tbody + tbody { border-color: #97a9bc; } + .table-hover .table-primary:hover { background-color: #b7c4d1; } @@ -1522,17 +1640,19 @@ pre code { .table-hover .table-primary:hover > th { background-color: #b7c4d1; } + .table-secondary, -.table-secondary > td, -.table-secondary > th { +.table-secondary > th, +.table-secondary > td { background-color: #cbcbcb; } -.table-secondary tbody + tbody, -.table-secondary td, .table-secondary th, -.table-secondary thead th { +.table-secondary td, +.table-secondary thead th, +.table-secondary tbody + tbody { border-color: #9e9e9e; } + .table-hover .table-secondary:hover { background-color: #bebebe; } @@ -1540,17 +1660,19 @@ pre code { .table-hover .table-secondary:hover > th { background-color: #bebebe; } + .table-success, -.table-success > td, -.table-success > th { +.table-success > th, +.table-success > td { background-color: #b8ecdf; } -.table-success tbody + tbody, -.table-success td, .table-success th, -.table-success thead th { +.table-success td, +.table-success thead th, +.table-success tbody + tbody { border-color: #7adcc3; } + .table-hover .table-success:hover { background-color: #a4e7d6; } @@ -1558,17 +1680,19 @@ pre code { .table-hover .table-success:hover > th { background-color: #a4e7d6; } + .table-info, -.table-info > td, -.table-info > th { +.table-info > th, +.table-info > td { background-color: #c6e2f5; } -.table-info tbody + tbody, -.table-info td, .table-info th, -.table-info thead th { +.table-info td, +.table-info thead th, +.table-info tbody + tbody { border-color: #95c9ec; } + .table-hover .table-info:hover { background-color: #b0d7f1; } @@ -1576,17 +1700,19 @@ pre code { .table-hover .table-info:hover > th { background-color: #b0d7f1; } + .table-warning, -.table-warning > td, -.table-warning > th { +.table-warning > th, +.table-warning > td { background-color: #fce3bd; } -.table-warning tbody + tbody, -.table-warning td, .table-warning th, -.table-warning thead th { +.table-warning td, +.table-warning thead th, +.table-warning tbody + tbody { border-color: #f9cc84; } + .table-hover .table-warning:hover { background-color: #fbd9a5; } @@ -1594,17 +1720,19 @@ pre code { .table-hover .table-warning:hover > th { background-color: #fbd9a5; } + .table-danger, -.table-danger > td, -.table-danger > th { +.table-danger > th, +.table-danger > td { background-color: #f8cdc8; } -.table-danger tbody + tbody, -.table-danger td, .table-danger th, -.table-danger thead th { +.table-danger td, +.table-danger thead th, +.table-danger tbody + tbody { border-color: #f3a29a; } + .table-hover .table-danger:hover { background-color: #f5b8b1; } @@ -1612,17 +1740,19 @@ pre code { .table-hover .table-danger:hover > th { background-color: #f5b8b1; } + .table-light, -.table-light > td, -.table-light > th { +.table-light > th, +.table-light > td { background-color: #c5c5c5; } -.table-light tbody + tbody, -.table-light td, .table-light th, -.table-light thead th { +.table-light td, +.table-light thead th, +.table-light tbody + tbody { border-color: #939393; } + .table-hover .table-light:hover { background-color: #b8b8b8; } @@ -1630,17 +1760,19 @@ pre code { .table-hover .table-light:hover > th { background-color: #b8b8b8; } + .table-dark, -.table-dark > td, -.table-dark > th { +.table-dark > th, +.table-dark > td { background-color: #f6f7f8; } -.table-dark tbody + tbody, -.table-dark td, .table-dark th, -.table-dark thead th { +.table-dark td, +.table-dark thead th, +.table-dark tbody + tbody { border-color: #eef0f2; } + .table-hover .table-dark:hover { background-color: #e8eaed; } @@ -1648,11 +1780,13 @@ pre code { .table-hover .table-dark:hover > th { background-color: #e8eaed; } + .table-active, -.table-active > td, -.table-active > th { +.table-active > th, +.table-active > td { background-color: rgba(0, 0, 0, 0.075); } + .table-hover .table-active:hover { background-color: rgba(0, 0, 0, 0.075); } @@ -1660,6 +1794,7 @@ pre code { .table-hover .table-active:hover > th { background-color: rgba(0, 0, 0, 0.075); } + .table .thead-dark th { color: #fff; background-color: #303030; @@ -1670,12 +1805,13 @@ pre code { background-color: #ebebeb; border-color: #444; } + .table-dark { color: #fff; background-color: #303030; } -.table-dark td, .table-dark th, +.table-dark td, .table-dark thead th { border-color: #434343; } @@ -1689,6 +1825,7 @@ pre code { color: #fff; background-color: rgba(255, 255, 255, 0.075); } + @media (max-width: 575.98px) { .table-responsive-sm { display: block; @@ -1742,6 +1879,7 @@ pre code { .table-responsive > .table-bordered { border: 0; } + .form-control { display: block; width: 100%; @@ -1766,10 +1904,6 @@ pre code { background-color: transparent; border: 0; } -.form-control:-moz-focusring { - color: transparent; - text-shadow: 0 0 0 #fff; -} .form-control:focus { color: #fff; background-color: #444; @@ -1786,21 +1920,29 @@ pre code { background-color: #2b2b2b; opacity: 1; } + input[type="date"].form-control, +input[type="time"].form-control, input[type="datetime-local"].form-control, -input[type="month"].form-control, -input[type="time"].form-control { +input[type="month"].form-control { appearance: none; } + +select.form-control:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #fff; +} select.form-control:focus::-ms-value { color: #fff; background-color: #444; } + .form-control-file, .form-control-range { display: block; width: 100%; } + .col-form-label { padding-top: calc(0.375rem + 1px); padding-bottom: calc(0.375rem + 1px); @@ -1808,18 +1950,21 @@ select.form-control:focus::-ms-value { font-size: inherit; line-height: 1.5; } + .col-form-label-lg { padding-top: calc(0.5rem + 1px); padding-bottom: calc(0.5rem + 1px); - font-size: 1.17188rem; + font-size: 1.171875rem; line-height: 1.5; } + .col-form-label-sm { padding-top: calc(0.25rem + 1px); padding-bottom: calc(0.25rem + 1px); - font-size: 0.82031rem; + font-size: 0.8203125rem; line-height: 1.5; } + .form-control-plaintext { display: block; width: 100%; @@ -1832,39 +1977,46 @@ select.form-control:focus::-ms-value { border: solid transparent; border-width: 1px 0; } -.form-control-plaintext.form-control-lg, -.form-control-plaintext.form-control-sm { +.form-control-plaintext.form-control-sm, +.form-control-plaintext.form-control-lg { padding-right: 0; padding-left: 0; } + .form-control-sm { height: calc(1.5em + 0.5rem + 2px); padding: 0.25rem 0.5rem; - font-size: 0.82031rem; + font-size: 0.8203125rem; line-height: 1.5; border-radius: 0.2rem; } + .form-control-lg { height: calc(1.5em + 1rem + 2px); padding: 0.5rem 1rem; - font-size: 1.17188rem; + font-size: 1.171875rem; line-height: 1.5; border-radius: 0.3rem; } -select.form-control[multiple], -select.form-control[size] { + +select.form-control[size], +select.form-control[multiple] { height: auto; } + textarea.form-control { height: auto; } + .form-group { margin-bottom: 1rem; } + .form-text { display: block; margin-top: 0.25rem; } + .form-row { display: flex; flex-wrap: wrap; @@ -1876,23 +2028,27 @@ textarea.form-control { padding-right: 5px; padding-left: 5px; } + .form-check { position: relative; display: block; padding-left: 1.25rem; } + .form-check-input { position: absolute; margin-top: 0.3rem; margin-left: -1.25rem; } -.form-check-input:disabled ~ .form-check-label, -.form-check-input[disabled] ~ .form-check-label { +.form-check-input[disabled] ~ .form-check-label, +.form-check-input:disabled ~ .form-check-label { color: #888; } + .form-check-label { margin-bottom: 0; } + .form-check-inline { display: inline-flex; align-items: center; @@ -1905,224 +2061,267 @@ textarea.form-control { margin-right: 0.3125rem; margin-left: 0; } + .valid-feedback { display: none; width: 100%; margin-top: 0.25rem; - font-size: 80%; + font-size: 0.875em; color: #00bc8c; } + .valid-tooltip { position: absolute; top: 100%; + left: 0; z-index: 5; display: none; max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; - font-size: 0.82031rem; + font-size: 0.8203125rem; line-height: 1.5; color: #fff; background-color: rgba(0, 188, 140, 0.9); border-radius: 0.25rem; } -.is-valid ~ .valid-feedback, -.is-valid ~ .valid-tooltip, +.form-row > .col > .valid-tooltip, +.form-row > [class*="col-"] > .valid-tooltip { + left: 5px; +} + .was-validated :valid ~ .valid-feedback, -.was-validated :valid ~ .valid-tooltip { +.was-validated :valid ~ .valid-tooltip, +.is-valid ~ .valid-feedback, +.is-valid ~ .valid-tooltip { display: block; } -.form-control.is-valid, -.was-validated .form-control:valid { + +.was-validated .form-control:valid, +.form-control.is-valid { border-color: #00bc8c; - padding-right: calc(1.5em + 0.75rem); + padding-right: calc(1.5em + 0.75rem) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2300bc8c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } -.form-control.is-valid:focus, -.was-validated .form-control:valid:focus { +.was-validated .form-control:valid:focus, +.form-control.is-valid:focus { border-color: #00bc8c; box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25); } + +.was-validated select.form-control:valid, +select.form-control.is-valid { + padding-right: 3rem !important; + background-position: right 1.5rem center; +} + .was-validated textarea.form-control:valid, textarea.form-control.is-valid { padding-right: calc(1.5em + 0.75rem); background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); } -.custom-select.is-valid, -.was-validated .custom-select:valid { + +.was-validated .custom-select:valid, +.custom-select.is-valid { border-color: #00bc8c; - padding-right: calc(0.75em + 2.3125rem); + padding-right: calc(0.75em + 2.3125rem) !important; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") - no-repeat right 0.75rem center/8px 10px, - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2300bc8c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") - #444 no-repeat center right 1.75rem / calc(0.75em + 0.375rem) - calc(0.75em + 0.375rem); + right 0.75rem center/8px 10px no-repeat, + #444 + url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2300bc8c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") + center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) + no-repeat; } -.custom-select.is-valid:focus, -.was-validated .custom-select:valid:focus { +.was-validated .custom-select:valid:focus, +.custom-select.is-valid:focus { border-color: #00bc8c; box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25); } -.form-check-input.is-valid ~ .form-check-label, -.was-validated .form-check-input:valid ~ .form-check-label { + +.was-validated .form-check-input:valid ~ .form-check-label, +.form-check-input.is-valid ~ .form-check-label { color: #00bc8c; } -.form-check-input.is-valid ~ .valid-feedback, -.form-check-input.is-valid ~ .valid-tooltip, .was-validated .form-check-input:valid ~ .valid-feedback, -.was-validated .form-check-input:valid ~ .valid-tooltip { +.was-validated .form-check-input:valid ~ .valid-tooltip, +.form-check-input.is-valid ~ .valid-feedback, +.form-check-input.is-valid ~ .valid-tooltip { display: block; } -.custom-control-input.is-valid ~ .custom-control-label, -.was-validated .custom-control-input:valid ~ .custom-control-label { + +.was-validated .custom-control-input:valid ~ .custom-control-label, +.custom-control-input.is-valid ~ .custom-control-label { color: #00bc8c; } -.custom-control-input.is-valid ~ .custom-control-label::before, -.was-validated .custom-control-input:valid ~ .custom-control-label::before { +.was-validated .custom-control-input:valid ~ .custom-control-label::before, +.custom-control-input.is-valid ~ .custom-control-label::before { border-color: #00bc8c; } -.custom-control-input.is-valid:checked ~ .custom-control-label::before, .was-validated .custom-control-input:valid:checked - ~ .custom-control-label::before { + ~ .custom-control-label::before, +.custom-control-input.is-valid:checked ~ .custom-control-label::before { border-color: #00efb2; background-color: #00efb2; } -.custom-control-input.is-valid:focus ~ .custom-control-label::before, .was-validated .custom-control-input:valid:focus - ~ .custom-control-label::before { + ~ .custom-control-label::before, +.custom-control-input.is-valid:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25); } -.custom-control-input.is-valid:focus:not(:checked) - ~ .custom-control-label::before, .was-validated .custom-control-input:valid:focus:not(:checked) + ~ .custom-control-label::before, +.custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before { border-color: #00bc8c; } -.custom-file-input.is-valid ~ .custom-file-label, -.was-validated .custom-file-input:valid ~ .custom-file-label { + +.was-validated .custom-file-input:valid ~ .custom-file-label, +.custom-file-input.is-valid ~ .custom-file-label { border-color: #00bc8c; } -.custom-file-input.is-valid:focus ~ .custom-file-label, -.was-validated .custom-file-input:valid:focus ~ .custom-file-label { +.was-validated .custom-file-input:valid:focus ~ .custom-file-label, +.custom-file-input.is-valid:focus ~ .custom-file-label { border-color: #00bc8c; box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.25); } + .invalid-feedback { display: none; width: 100%; margin-top: 0.25rem; - font-size: 80%; + font-size: 0.875em; color: #e74c3c; } + .invalid-tooltip { position: absolute; top: 100%; + left: 0; z-index: 5; display: none; max-width: 100%; padding: 0.25rem 0.5rem; margin-top: 0.1rem; - font-size: 0.82031rem; + font-size: 0.8203125rem; line-height: 1.5; color: #fff; background-color: rgba(231, 76, 60, 0.9); border-radius: 0.25rem; } -.is-invalid ~ .invalid-feedback, -.is-invalid ~ .invalid-tooltip, +.form-row > .col > .invalid-tooltip, +.form-row > [class*="col-"] > .invalid-tooltip { + left: 5px; +} + .was-validated :invalid ~ .invalid-feedback, -.was-validated :invalid ~ .invalid-tooltip { +.was-validated :invalid ~ .invalid-tooltip, +.is-invalid ~ .invalid-feedback, +.is-invalid ~ .invalid-tooltip { display: block; } -.form-control.is-invalid, -.was-validated .form-control:invalid { + +.was-validated .form-control:invalid, +.form-control.is-invalid { border-color: #e74c3c; - padding-right: calc(1.5em + 0.75rem); + padding-right: calc(1.5em + 0.75rem) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e74c3c' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e74c3c' stroke='none'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } -.form-control.is-invalid:focus, -.was-validated .form-control:invalid:focus { +.was-validated .form-control:invalid:focus, +.form-control.is-invalid:focus { border-color: #e74c3c; box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25); } + +.was-validated select.form-control:invalid, +select.form-control.is-invalid { + padding-right: 3rem !important; + background-position: right 1.5rem center; +} + .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { padding-right: calc(1.5em + 0.75rem); background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); } -.custom-select.is-invalid, -.was-validated .custom-select:invalid { + +.was-validated .custom-select:invalid, +.custom-select.is-invalid { border-color: #e74c3c; - padding-right: calc(0.75em + 2.3125rem); + padding-right: calc(0.75em + 2.3125rem) !important; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") - no-repeat right 0.75rem center/8px 10px, - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e74c3c' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e74c3c' stroke='none'/%3e%3c/svg%3e") - #444 no-repeat center right 1.75rem / calc(0.75em + 0.375rem) - calc(0.75em + 0.375rem); + right 0.75rem center/8px 10px no-repeat, + #444 + url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e74c3c' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e74c3c' stroke='none'/%3e%3c/svg%3e") + center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) + no-repeat; } -.custom-select.is-invalid:focus, -.was-validated .custom-select:invalid:focus { +.was-validated .custom-select:invalid:focus, +.custom-select.is-invalid:focus { border-color: #e74c3c; box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25); } -.form-check-input.is-invalid ~ .form-check-label, -.was-validated .form-check-input:invalid ~ .form-check-label { + +.was-validated .form-check-input:invalid ~ .form-check-label, +.form-check-input.is-invalid ~ .form-check-label { color: #e74c3c; } -.form-check-input.is-invalid ~ .invalid-feedback, -.form-check-input.is-invalid ~ .invalid-tooltip, .was-validated .form-check-input:invalid ~ .invalid-feedback, -.was-validated .form-check-input:invalid ~ .invalid-tooltip { +.was-validated .form-check-input:invalid ~ .invalid-tooltip, +.form-check-input.is-invalid ~ .invalid-feedback, +.form-check-input.is-invalid ~ .invalid-tooltip { display: block; } -.custom-control-input.is-invalid ~ .custom-control-label, -.was-validated .custom-control-input:invalid ~ .custom-control-label { + +.was-validated .custom-control-input:invalid ~ .custom-control-label, +.custom-control-input.is-invalid ~ .custom-control-label { color: #e74c3c; } -.custom-control-input.is-invalid ~ .custom-control-label::before, -.was-validated .custom-control-input:invalid ~ .custom-control-label::before { +.was-validated .custom-control-input:invalid ~ .custom-control-label::before, +.custom-control-input.is-invalid ~ .custom-control-label::before { border-color: #e74c3c; } -.custom-control-input.is-invalid:checked ~ .custom-control-label::before, .was-validated .custom-control-input:invalid:checked - ~ .custom-control-label::before { + ~ .custom-control-label::before, +.custom-control-input.is-invalid:checked ~ .custom-control-label::before { border-color: #ed7669; background-color: #ed7669; } -.custom-control-input.is-invalid:focus ~ .custom-control-label::before, .was-validated .custom-control-input:invalid:focus - ~ .custom-control-label::before { + ~ .custom-control-label::before, +.custom-control-input.is-invalid:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25); } -.custom-control-input.is-invalid:focus:not(:checked) - ~ .custom-control-label::before, .was-validated .custom-control-input:invalid:focus:not(:checked) + ~ .custom-control-label::before, +.custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before { border-color: #e74c3c; } -.custom-file-input.is-invalid ~ .custom-file-label, -.was-validated .custom-file-input:invalid ~ .custom-file-label { + +.was-validated .custom-file-input:invalid ~ .custom-file-label, +.custom-file-input.is-invalid ~ .custom-file-label { border-color: #e74c3c; } -.custom-file-input.is-invalid:focus ~ .custom-file-label, -.was-validated .custom-file-input:invalid:focus ~ .custom-file-label { +.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, +.custom-file-input.is-invalid:focus ~ .custom-file-label { border-color: #e74c3c; box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25); } + .form-inline { display: flex; flex-flow: row wrap; @@ -2153,8 +2352,8 @@ textarea.form-control.is-invalid { .form-inline .form-control-plaintext { display: inline-block; } - .form-inline .custom-select, - .form-inline .input-group { + .form-inline .input-group, + .form-inline .custom-select { width: auto; } .form-inline .form-check { @@ -2179,6 +2378,7 @@ textarea.form-control.is-invalid { margin-bottom: 0; } } + .btn { display: inline-block; font-weight: 400; @@ -2204,8 +2404,8 @@ textarea.form-control.is-invalid { color: #dee2e6; text-decoration: none; } -.btn.focus, -.btn:focus { +.btn:focus, +.btn.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25); } @@ -2220,6 +2420,7 @@ a.btn.disabled, fieldset:disabled a.btn { pointer-events: none; } + .btn-primary { color: #fff; background-color: #375a7f; @@ -2230,8 +2431,8 @@ fieldset:disabled a.btn { background-color: #2b4764; border-color: #28415b; } -.btn-primary.focus, -.btn-primary:focus { +.btn-primary:focus, +.btn-primary.focus { color: #fff; background-color: #2b4764; border-color: #28415b; @@ -2243,18 +2444,19 @@ fieldset:disabled a.btn { background-color: #375a7f; border-color: #375a7f; } -.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, +.btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { color: #fff; background-color: #28415b; border-color: #243a53; } -.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, +.btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(85, 115, 146, 0.5); } + .btn-secondary { color: #fff; background-color: #444; @@ -2265,8 +2467,8 @@ fieldset:disabled a.btn { background-color: #313131; border-color: #2b2b2b; } -.btn-secondary.focus, -.btn-secondary:focus { +.btn-secondary:focus, +.btn-secondary.focus { color: #fff; background-color: #313131; border-color: #2b2b2b; @@ -2278,18 +2480,19 @@ fieldset:disabled a.btn { background-color: #444; border-color: #444; } -.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, +.btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { color: #fff; background-color: #2b2b2b; border-color: #242424; } -.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, +.btn-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(96, 96, 96, 0.5); } + .btn-success { color: #fff; background-color: #00bc8c; @@ -2300,8 +2503,8 @@ fieldset:disabled a.btn { background-color: #009670; border-color: #008966; } -.btn-success.focus, -.btn-success:focus { +.btn-success:focus, +.btn-success.focus { color: #fff; background-color: #009670; border-color: #008966; @@ -2313,18 +2516,19 @@ fieldset:disabled a.btn { background-color: #00bc8c; border-color: #00bc8c; } -.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, +.btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle { color: #fff; background-color: #008966; border-color: #007c5d; } -.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, +.btn-success:not(:disabled):not(.disabled).active:focus, .show > .btn-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(38, 198, 157, 0.5); } + .btn-info { color: #fff; background-color: #3498db; @@ -2335,8 +2539,8 @@ fieldset:disabled a.btn { background-color: #2384c6; border-color: #217dbb; } -.btn-info.focus, -.btn-info:focus { +.btn-info:focus, +.btn-info.focus { color: #fff; background-color: #2384c6; border-color: #217dbb; @@ -2348,18 +2552,19 @@ fieldset:disabled a.btn { background-color: #3498db; border-color: #3498db; } -.btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, +.btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle { color: #fff; background-color: #217dbb; border-color: #1f76b0; } -.btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus, +.btn-info:not(:disabled):not(.disabled).active:focus, .show > .btn-info.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(82, 167, 224, 0.5); } + .btn-warning { color: #fff; background-color: #f39c12; @@ -2370,8 +2575,8 @@ fieldset:disabled a.btn { background-color: #d4860b; border-color: #c87f0a; } -.btn-warning.focus, -.btn-warning:focus { +.btn-warning:focus, +.btn-warning.focus { color: #fff; background-color: #d4860b; border-color: #c87f0a; @@ -2383,18 +2588,19 @@ fieldset:disabled a.btn { background-color: #f39c12; border-color: #f39c12; } -.btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, +.btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle { color: #fff; background-color: #c87f0a; border-color: #bc770a; } -.btn-warning:not(:disabled):not(.disabled).active:focus, .btn-warning:not(:disabled):not(.disabled):active:focus, +.btn-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-warning.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(245, 171, 54, 0.5); } + .btn-danger { color: #fff; background-color: #e74c3c; @@ -2405,8 +2611,8 @@ fieldset:disabled a.btn { background-color: #e12e1c; border-color: #d62c1a; } -.btn-danger.focus, -.btn-danger:focus { +.btn-danger:focus, +.btn-danger.focus { color: #fff; background-color: #e12e1c; border-color: #d62c1a; @@ -2418,18 +2624,19 @@ fieldset:disabled a.btn { background-color: #e74c3c; border-color: #e74c3c; } -.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, +.btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle { color: #fff; background-color: #d62c1a; border-color: #ca2a19; } -.btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus, +.btn-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(235, 103, 89, 0.5); } + .btn-light { color: #fff; background-color: #303030; @@ -2440,8 +2647,8 @@ fieldset:disabled a.btn { background-color: #1d1d1d; border-color: #171717; } -.btn-light.focus, -.btn-light:focus { +.btn-light:focus, +.btn-light.focus { color: #fff; background-color: #1d1d1d; border-color: #171717; @@ -2453,18 +2660,19 @@ fieldset:disabled a.btn { background-color: #303030; border-color: #303030; } -.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, +.btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle { color: #fff; background-color: #171717; border-color: #101010; } -.btn-light:not(:disabled):not(.disabled).active:focus, .btn-light:not(:disabled):not(.disabled):active:focus, +.btn-light:not(:disabled):not(.disabled).active:focus, .show > .btn-light.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(79, 79, 79, 0.5); } + .btn-dark { color: #222; background-color: #dee2e6; @@ -2475,8 +2683,8 @@ fieldset:disabled a.btn { background-color: #c8cfd6; border-color: #c1c9d0; } -.btn-dark.focus, -.btn-dark:focus { +.btn-dark:focus, +.btn-dark.focus { color: #222; background-color: #c8cfd6; border-color: #c1c9d0; @@ -2488,18 +2696,19 @@ fieldset:disabled a.btn { background-color: #dee2e6; border-color: #dee2e6; } -.btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active, +.btn-dark:not(:disabled):not(.disabled).active, .show > .btn-dark.dropdown-toggle { color: #222; background-color: #c1c9d0; border-color: #bac2cb; } -.btn-dark:not(:disabled):not(.disabled).active:focus, .btn-dark:not(:disabled):not(.disabled):active:focus, +.btn-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(194, 197, 201, 0.5); } + .btn-outline-primary { color: #375a7f; border-color: #375a7f; @@ -2509,8 +2718,8 @@ fieldset:disabled a.btn { background-color: #375a7f; border-color: #375a7f; } -.btn-outline-primary.focus, -.btn-outline-primary:focus { +.btn-outline-primary:focus, +.btn-outline-primary.focus { box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.5); } .btn-outline-primary.disabled, @@ -2518,18 +2727,19 @@ fieldset:disabled a.btn { color: #375a7f; background-color: transparent; } -.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, +.btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle { color: #fff; background-color: #375a7f; border-color: #375a7f; } -.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, +.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.5); } + .btn-outline-secondary { color: #444; border-color: #444; @@ -2539,8 +2749,8 @@ fieldset:disabled a.btn { background-color: #444; border-color: #444; } -.btn-outline-secondary.focus, -.btn-outline-secondary:focus { +.btn-outline-secondary:focus, +.btn-outline-secondary.focus { box-shadow: 0 0 0 0.2rem rgba(68, 68, 68, 0.5); } .btn-outline-secondary.disabled, @@ -2548,18 +2758,19 @@ fieldset:disabled a.btn { color: #444; background-color: transparent; } -.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, +.btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle { color: #fff; background-color: #444; border-color: #444; } -.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, +.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(68, 68, 68, 0.5); } + .btn-outline-success { color: #00bc8c; border-color: #00bc8c; @@ -2569,8 +2780,8 @@ fieldset:disabled a.btn { background-color: #00bc8c; border-color: #00bc8c; } -.btn-outline-success.focus, -.btn-outline-success:focus { +.btn-outline-success:focus, +.btn-outline-success.focus { box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.5); } .btn-outline-success.disabled, @@ -2578,18 +2789,19 @@ fieldset:disabled a.btn { color: #00bc8c; background-color: transparent; } -.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active, +.btn-outline-success:not(:disabled):not(.disabled).active, .show > .btn-outline-success.dropdown-toggle { color: #fff; background-color: #00bc8c; border-color: #00bc8c; } -.btn-outline-success:not(:disabled):not(.disabled).active:focus, .btn-outline-success:not(:disabled):not(.disabled):active:focus, +.btn-outline-success:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.5); } + .btn-outline-info { color: #3498db; border-color: #3498db; @@ -2599,8 +2811,8 @@ fieldset:disabled a.btn { background-color: #3498db; border-color: #3498db; } -.btn-outline-info.focus, -.btn-outline-info:focus { +.btn-outline-info:focus, +.btn-outline-info.focus { box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5); } .btn-outline-info.disabled, @@ -2608,18 +2820,19 @@ fieldset:disabled a.btn { color: #3498db; background-color: transparent; } -.btn-outline-info:not(:disabled):not(.disabled).active, .btn-outline-info:not(:disabled):not(.disabled):active, +.btn-outline-info:not(:disabled):not(.disabled).active, .show > .btn-outline-info.dropdown-toggle { color: #fff; background-color: #3498db; border-color: #3498db; } -.btn-outline-info:not(:disabled):not(.disabled).active:focus, .btn-outline-info:not(:disabled):not(.disabled):active:focus, +.btn-outline-info:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-info.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5); } + .btn-outline-warning { color: #f39c12; border-color: #f39c12; @@ -2629,8 +2842,8 @@ fieldset:disabled a.btn { background-color: #f39c12; border-color: #f39c12; } -.btn-outline-warning.focus, -.btn-outline-warning:focus { +.btn-outline-warning:focus, +.btn-outline-warning.focus { box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.5); } .btn-outline-warning.disabled, @@ -2638,18 +2851,19 @@ fieldset:disabled a.btn { color: #f39c12; background-color: transparent; } -.btn-outline-warning:not(:disabled):not(.disabled).active, .btn-outline-warning:not(:disabled):not(.disabled):active, +.btn-outline-warning:not(:disabled):not(.disabled).active, .show > .btn-outline-warning.dropdown-toggle { color: #fff; background-color: #f39c12; border-color: #f39c12; } -.btn-outline-warning:not(:disabled):not(.disabled).active:focus, .btn-outline-warning:not(:disabled):not(.disabled):active:focus, +.btn-outline-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-warning.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.5); } + .btn-outline-danger { color: #e74c3c; border-color: #e74c3c; @@ -2659,8 +2873,8 @@ fieldset:disabled a.btn { background-color: #e74c3c; border-color: #e74c3c; } -.btn-outline-danger.focus, -.btn-outline-danger:focus { +.btn-outline-danger:focus, +.btn-outline-danger.focus { box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.5); } .btn-outline-danger.disabled, @@ -2668,18 +2882,19 @@ fieldset:disabled a.btn { color: #e74c3c; background-color: transparent; } -.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active, +.btn-outline-danger:not(:disabled):not(.disabled).active, .show > .btn-outline-danger.dropdown-toggle { color: #fff; background-color: #e74c3c; border-color: #e74c3c; } -.btn-outline-danger:not(:disabled):not(.disabled).active:focus, .btn-outline-danger:not(:disabled):not(.disabled):active:focus, +.btn-outline-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.5); } + .btn-outline-light { color: #303030; border-color: #303030; @@ -2689,8 +2904,8 @@ fieldset:disabled a.btn { background-color: #303030; border-color: #303030; } -.btn-outline-light.focus, -.btn-outline-light:focus { +.btn-outline-light:focus, +.btn-outline-light.focus { box-shadow: 0 0 0 0.2rem rgba(48, 48, 48, 0.5); } .btn-outline-light.disabled, @@ -2698,18 +2913,19 @@ fieldset:disabled a.btn { color: #303030; background-color: transparent; } -.btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active, +.btn-outline-light:not(:disabled):not(.disabled).active, .show > .btn-outline-light.dropdown-toggle { color: #fff; background-color: #303030; border-color: #303030; } -.btn-outline-light:not(:disabled):not(.disabled).active:focus, .btn-outline-light:not(:disabled):not(.disabled):active:focus, +.btn-outline-light:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-light.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(48, 48, 48, 0.5); } + .btn-outline-dark { color: #dee2e6; border-color: #dee2e6; @@ -2719,8 +2935,8 @@ fieldset:disabled a.btn { background-color: #dee2e6; border-color: #dee2e6; } -.btn-outline-dark.focus, -.btn-outline-dark:focus { +.btn-outline-dark:focus, +.btn-outline-dark.focus { box-shadow: 0 0 0 0.2rem rgba(222, 226, 230, 0.5); } .btn-outline-dark.disabled, @@ -2728,18 +2944,19 @@ fieldset:disabled a.btn { color: #dee2e6; background-color: transparent; } -.btn-outline-dark:not(:disabled):not(.disabled).active, .btn-outline-dark:not(:disabled):not(.disabled):active, +.btn-outline-dark:not(:disabled):not(.disabled).active, .show > .btn-outline-dark.dropdown-toggle { color: #222; background-color: #dee2e6; border-color: #dee2e6; } -.btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, +.btn-outline-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(222, 226, 230, 0.5); } + .btn-link { font-weight: 400; color: #00bc8c; @@ -2749,29 +2966,32 @@ fieldset:disabled a.btn { color: #007053; text-decoration: underline; } -.btn-link.focus, -.btn-link:focus { +.btn-link:focus, +.btn-link.focus { text-decoration: underline; } -.btn-link.disabled, -.btn-link:disabled { +.btn-link:disabled, +.btn-link.disabled { color: #888; pointer-events: none; } -.btn-group-lg > .btn, -.btn-lg { + +.btn-lg, +.btn-group-lg > .btn { padding: 0.5rem 1rem; - font-size: 1.17188rem; + font-size: 1.171875rem; line-height: 1.5; border-radius: 0.3rem; } -.btn-group-sm > .btn, -.btn-sm { + +.btn-sm, +.btn-group-sm > .btn { padding: 0.25rem 0.5rem; - font-size: 0.82031rem; + font-size: 0.8203125rem; line-height: 1.5; border-radius: 0.2rem; } + .btn-block { display: block; width: 100%; @@ -2779,11 +2999,13 @@ fieldset:disabled a.btn { .btn-block + .btn-block { margin-top: 0.5rem; } -input[type="button"].btn-block, + +input[type="submit"].btn-block, input[type="reset"].btn-block, -input[type="submit"].btn-block { +input[type="button"].btn-block { width: 100%; } + .fade { transition: opacity 0.15s linear; } @@ -2795,9 +3017,11 @@ input[type="submit"].btn-block { .fade:not(.show) { opacity: 0; } + .collapse:not(.show) { display: none; } + .collapsing { position: relative; height: 0; @@ -2809,12 +3033,24 @@ input[type="submit"].btn-block { transition: none; } } -.dropdown, -.dropleft, +.collapsing.width { + width: 0; + height: auto; + transition: width 0.35s ease; +} +@media (prefers-reduced-motion: reduce) { + .collapsing.width { + transition: none; + } +} + +.dropup, .dropright, -.dropup { +.dropdown, +.dropleft { position: relative; } + .dropdown-toggle { white-space: nowrap; } @@ -2831,6 +3067,7 @@ input[type="submit"].btn-block { .dropdown-toggle:empty::after { margin-left: 0; } + .dropdown-menu { position: absolute; top: 100%; @@ -2850,14 +3087,17 @@ input[type="submit"].btn-block { border: 1px solid #444; border-radius: 0.25rem; } + .dropdown-menu-left { right: auto; left: 0; } + .dropdown-menu-right { right: 0; left: auto; } + @media (min-width: 576px) { .dropdown-menu-sm-left { right: auto; @@ -2917,6 +3157,7 @@ input[type="submit"].btn-block { .dropup .dropdown-toggle:empty::after { margin-left: 0; } + .dropright .dropdown-menu { top: 0; right: auto; @@ -2940,6 +3181,7 @@ input[type="submit"].btn-block { .dropright .dropdown-toggle::after { vertical-align: 0; } + .dropleft .dropdown-menu { top: 0; right: 100%; @@ -2971,19 +3213,22 @@ input[type="submit"].btn-block { .dropleft .dropdown-toggle::before { vertical-align: 0; } -.dropdown-menu[x-placement^="bottom"], -.dropdown-menu[x-placement^="left"], + +.dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], -.dropdown-menu[x-placement^="top"] { +.dropdown-menu[x-placement^="bottom"], +.dropdown-menu[x-placement^="left"] { right: auto; bottom: auto; } + .dropdown-divider { height: 0; margin: 0.5rem 0; overflow: hidden; border-top: 1px solid #444; } + .dropdown-item { display: block; width: 100%; @@ -2996,8 +3241,8 @@ input[type="submit"].btn-block { background-color: transparent; border: 0; } -.dropdown-item:focus, -.dropdown-item:hover { +.dropdown-item:hover, +.dropdown-item:focus { color: #fff; text-decoration: none; background-color: #375a7f; @@ -3010,49 +3255,54 @@ input[type="submit"].btn-block { } .dropdown-item.disabled, .dropdown-item:disabled { - color: #888; + color: #adb5bd; pointer-events: none; background-color: transparent; } + .dropdown-menu.show { display: block; } + .dropdown-header { display: block; padding: 0.5rem 1.5rem; margin-bottom: 0; - font-size: 0.82031rem; + font-size: 0.8203125rem; color: #888; white-space: nowrap; } + .dropdown-item-text { display: block; padding: 0.25rem 1.5rem; color: #fff; } + .btn-group, .btn-group-vertical { position: relative; display: inline-flex; vertical-align: middle; } -.btn-group-vertical > .btn, -.btn-group > .btn { +.btn-group > .btn, +.btn-group-vertical > .btn { position: relative; flex: 1 1 auto; } -.btn-group-vertical > .btn:hover, -.btn-group > .btn:hover { +.btn-group > .btn:hover, +.btn-group-vertical > .btn:hover { z-index: 1; } -.btn-group-vertical > .btn.active, -.btn-group-vertical > .btn:active, -.btn-group-vertical > .btn:focus, -.btn-group > .btn.active, +.btn-group > .btn:focus, .btn-group > .btn:active, -.btn-group > .btn:focus { +.btn-group > .btn.active, +.btn-group-vertical > .btn:focus, +.btn-group-vertical > .btn:active, +.btn-group-vertical > .btn.active { z-index: 1; } + .btn-toolbar { display: flex; flex-wrap: wrap; @@ -3061,42 +3311,47 @@ input[type="submit"].btn-block { .btn-toolbar .input-group { width: auto; } -.btn-group > .btn-group:not(:first-child), -.btn-group > .btn:not(:first-child) { + +.btn-group > .btn:not(:first-child), +.btn-group > .btn-group:not(:first-child) { margin-left: -1px; } -.btn-group > .btn-group:not(:last-child) > .btn, -.btn-group > .btn:not(:last-child):not(.dropdown-toggle) { +.btn-group > .btn:not(:last-child):not(.dropdown-toggle), +.btn-group > .btn-group:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } -.btn-group > .btn-group:not(:first-child) > .btn, -.btn-group > .btn:not(:first-child) { +.btn-group > .btn:not(:first-child), +.btn-group > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } + .dropdown-toggle-split { padding-right: 0.5625rem; padding-left: 0.5625rem; } .dropdown-toggle-split::after, -.dropright .dropdown-toggle-split::after, -.dropup .dropdown-toggle-split::after { +.dropup .dropdown-toggle-split::after, +.dropright .dropdown-toggle-split::after { margin-left: 0; } .dropleft .dropdown-toggle-split::before { margin-right: 0; } -.btn-group-sm > .btn + .dropdown-toggle-split, -.btn-sm + .dropdown-toggle-split { + +.btn-sm + .dropdown-toggle-split, +.btn-group-sm > .btn + .dropdown-toggle-split { padding-right: 0.375rem; padding-left: 0.375rem; } -.btn-group-lg > .btn + .dropdown-toggle-split, -.btn-lg + .dropdown-toggle-split { + +.btn-lg + .dropdown-toggle-split, +.btn-group-lg > .btn + .dropdown-toggle-split { padding-right: 0.75rem; padding-left: 0.75rem; } + .btn-group-vertical { flex-direction: column; align-items: flex-start; @@ -3106,32 +3361,34 @@ input[type="submit"].btn-block { .btn-group-vertical > .btn-group { width: 100%; } -.btn-group-vertical > .btn-group:not(:first-child), -.btn-group-vertical > .btn:not(:first-child) { +.btn-group-vertical > .btn:not(:first-child), +.btn-group-vertical > .btn-group:not(:first-child) { margin-top: -1px; } -.btn-group-vertical > .btn-group:not(:last-child) > .btn, -.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle) { +.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), +.btn-group-vertical > .btn-group:not(:last-child) > .btn { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } -.btn-group-vertical > .btn-group:not(:first-child) > .btn, -.btn-group-vertical > .btn:not(:first-child) { +.btn-group-vertical > .btn:not(:first-child), +.btn-group-vertical > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-top-right-radius: 0; } + .btn-group-toggle > .btn, .btn-group-toggle > .btn-group > .btn { margin-bottom: 0; } -.btn-group-toggle > .btn input[type="checkbox"], .btn-group-toggle > .btn input[type="radio"], -.btn-group-toggle > .btn-group > .btn input[type="checkbox"], -.btn-group-toggle > .btn-group > .btn input[type="radio"] { +.btn-group-toggle > .btn input[type="checkbox"], +.btn-group-toggle > .btn-group > .btn input[type="radio"], +.btn-group-toggle > .btn-group > .btn input[type="checkbox"] { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; } + .input-group { position: relative; display: flex; @@ -3139,45 +3396,40 @@ input[type="submit"].btn-block { align-items: stretch; width: 100%; } -.input-group > .custom-file, -.input-group > .custom-select, .input-group > .form-control, -.input-group > .form-control-plaintext { +.input-group > .form-control-plaintext, +.input-group > .custom-select, +.input-group > .custom-file { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; margin-bottom: 0; } -.input-group > .custom-file + .custom-file, -.input-group > .custom-file + .custom-select, -.input-group > .custom-file + .form-control, -.input-group > .custom-select + .custom-file, -.input-group > .custom-select + .custom-select, -.input-group > .custom-select + .form-control, -.input-group > .form-control + .custom-file, -.input-group > .form-control + .custom-select, .input-group > .form-control + .form-control, -.input-group > .form-control-plaintext + .custom-file, +.input-group > .form-control + .custom-select, +.input-group > .form-control + .custom-file, +.input-group > .form-control-plaintext + .form-control, .input-group > .form-control-plaintext + .custom-select, -.input-group > .form-control-plaintext + .form-control { +.input-group > .form-control-plaintext + .custom-file, +.input-group > .custom-select + .form-control, +.input-group > .custom-select + .custom-select, +.input-group > .custom-select + .custom-file, +.input-group > .custom-file + .form-control, +.input-group > .custom-file + .custom-select, +.input-group > .custom-file + .custom-file { margin-left: -1px; } -.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label, +.input-group > .form-control:focus, .input-group > .custom-select:focus, -.input-group > .form-control:focus { +.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label { z-index: 3; } .input-group > .custom-file .custom-file-input:focus { z-index: 4; } -.input-group > .custom-select:not(:last-child), -.input-group > .form-control:not(:last-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} -.input-group > .custom-select:not(:first-child), -.input-group > .form-control:not(:first-child) { +.input-group > .form-control:not(:first-child), +.input-group > .custom-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } @@ -3194,35 +3446,61 @@ input[type="submit"].btn-block { border-top-left-radius: 0; border-bottom-left-radius: 0; } -.input-group-append, -.input-group-prepend { +.input-group:not(.has-validation) > .form-control:not(:last-child), +.input-group:not(.has-validation) > .custom-select:not(:last-child), +.input-group:not(.has-validation) + > .custom-file:not(:last-child) + .custom-file-label, +.input-group:not(.has-validation) + > .custom-file:not(:last-child) + .custom-file-label::after { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.input-group.has-validation > .form-control:nth-last-child(n + 3), +.input-group.has-validation > .custom-select:nth-last-child(n + 3), +.input-group.has-validation + > .custom-file:nth-last-child(n + 3) + .custom-file-label, +.input-group.has-validation + > .custom-file:nth-last-child(n + 3) + .custom-file-label::after { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.input-group-prepend, +.input-group-append { display: flex; } -.input-group-append .btn, -.input-group-prepend .btn { +.input-group-prepend .btn, +.input-group-append .btn { position: relative; z-index: 2; } -.input-group-append .btn:focus, -.input-group-prepend .btn:focus { +.input-group-prepend .btn:focus, +.input-group-append .btn:focus { z-index: 3; } -.input-group-append .btn + .btn, -.input-group-append .btn + .input-group-text, -.input-group-append .input-group-text + .btn, -.input-group-append .input-group-text + .input-group-text, .input-group-prepend .btn + .btn, .input-group-prepend .btn + .input-group-text, +.input-group-prepend .input-group-text + .input-group-text, .input-group-prepend .input-group-text + .btn, -.input-group-prepend .input-group-text + .input-group-text { +.input-group-append .btn + .btn, +.input-group-append .btn + .input-group-text, +.input-group-append .input-group-text + .input-group-text, +.input-group-append .input-group-text + .btn { margin-left: -1px; } + .input-group-prepend { margin-right: -1px; } + .input-group-append { margin-left: -1px; } + .input-group-text { display: flex; align-items: center; @@ -3238,84 +3516,102 @@ input[type="submit"].btn-block { border: 1px solid #222; border-radius: 0.25rem; } -.input-group-text input[type="checkbox"], -.input-group-text input[type="radio"] { +.input-group-text input[type="radio"], +.input-group-text input[type="checkbox"] { margin-top: 0; } -.input-group-lg > .custom-select, -.input-group-lg > .form-control:not(textarea) { + +.input-group-lg > .form-control:not(textarea), +.input-group-lg > .custom-select { height: calc(1.5em + 1rem + 2px); } -.input-group-lg > .custom-select, + .input-group-lg > .form-control, -.input-group-lg > .input-group-append > .btn, +.input-group-lg > .custom-select, +.input-group-lg > .input-group-prepend > .input-group-text, .input-group-lg > .input-group-append > .input-group-text, .input-group-lg > .input-group-prepend > .btn, -.input-group-lg > .input-group-prepend > .input-group-text { +.input-group-lg > .input-group-append > .btn { padding: 0.5rem 1rem; - font-size: 1.17188rem; + font-size: 1.171875rem; line-height: 1.5; border-radius: 0.3rem; } -.input-group-sm > .custom-select, -.input-group-sm > .form-control:not(textarea) { + +.input-group-sm > .form-control:not(textarea), +.input-group-sm > .custom-select { height: calc(1.5em + 0.5rem + 2px); } -.input-group-sm > .custom-select, + .input-group-sm > .form-control, -.input-group-sm > .input-group-append > .btn, +.input-group-sm > .custom-select, +.input-group-sm > .input-group-prepend > .input-group-text, .input-group-sm > .input-group-append > .input-group-text, .input-group-sm > .input-group-prepend > .btn, -.input-group-sm > .input-group-prepend > .input-group-text { +.input-group-sm > .input-group-append > .btn { padding: 0.25rem 0.5rem; - font-size: 0.82031rem; + font-size: 0.8203125rem; line-height: 1.5; border-radius: 0.2rem; } + .input-group-lg > .custom-select, .input-group-sm > .custom-select { padding-right: 1.75rem; } + +.input-group > .input-group-prepend > .btn, +.input-group > .input-group-prepend > .input-group-text, +.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn, +.input-group:not(.has-validation) + > .input-group-append:not(:last-child) + > .input-group-text, +.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn, +.input-group.has-validation + > .input-group-append:nth-last-child(n + 3) + > .input-group-text, .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-append:last-child - > .input-group-text:not(:last-child), -.input-group > .input-group-append:not(:last-child) > .btn, -.input-group > .input-group-append:not(:last-child) > .input-group-text, -.input-group > .input-group-prepend > .btn, -.input-group > .input-group-prepend > .input-group-text { + > .input-group-text:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } + .input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text, +.input-group > .input-group-prepend:not(:first-child) > .btn, +.input-group > .input-group-prepend:not(:first-child) > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child), .input-group > .input-group-prepend:first-child - > .input-group-text:not(:first-child), -.input-group > .input-group-prepend:not(:first-child) > .btn, -.input-group > .input-group-prepend:not(:first-child) > .input-group-text { + > .input-group-text:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } + .custom-control { position: relative; + z-index: 1; display: block; min-height: 1.40625rem; padding-left: 1.5rem; + print-color-adjust: exact; } + .custom-control-inline { display: inline-flex; margin-right: 1rem; } + .custom-control-input { position: absolute; left: 0; z-index: -1; width: 1rem; - height: 1.20312rem; + height: 1.203125rem; opacity: 0; } .custom-control-input:checked ~ .custom-control-label::before { @@ -3334,14 +3630,15 @@ input[type="submit"].btn-block { background-color: #97b3d2; border-color: #97b3d2; } -.custom-control-input:disabled ~ .custom-control-label, -.custom-control-input[disabled] ~ .custom-control-label { +.custom-control-input[disabled] ~ .custom-control-label, +.custom-control-input:disabled ~ .custom-control-label { color: #888; } -.custom-control-input:disabled ~ .custom-control-label::before, -.custom-control-input[disabled] ~ .custom-control-label::before { +.custom-control-input[disabled] ~ .custom-control-label::before, +.custom-control-input:disabled ~ .custom-control-label::before { background-color: #2b2b2b; } + .custom-control-label { position: relative; margin-bottom: 0; @@ -3349,7 +3646,7 @@ input[type="submit"].btn-block { } .custom-control-label::before { position: absolute; - top: 0.20312rem; + top: 0.203125rem; left: -1.5rem; display: block; width: 1rem; @@ -3357,18 +3654,19 @@ input[type="submit"].btn-block { pointer-events: none; content: ""; background-color: #444; - border: #adb5bd solid 1px; + border: 1px solid #adb5bd; } .custom-control-label::after { position: absolute; - top: 0.20312rem; + top: 0.203125rem; left: -1.5rem; display: block; width: 1rem; height: 1rem; content: ""; - background: no-repeat 50%/50% 50%; + background: 50%/50% 50% no-repeat; } + .custom-checkbox .custom-control-label::before { border-radius: 0.25rem; } @@ -3396,6 +3694,7 @@ input[type="submit"].btn-block { ~ .custom-control-label::before { background-color: rgba(55, 90, 127, 0.5); } + .custom-radio .custom-control-label::before { border-radius: 50%; } @@ -3407,6 +3706,7 @@ input[type="submit"].btn-block { ~ .custom-control-label::before { background-color: rgba(55, 90, 127, 0.5); } + .custom-switch { padding-left: 2.25rem; } @@ -3417,7 +3717,7 @@ input[type="submit"].btn-block { border-radius: 0.5rem; } .custom-switch .custom-control-label::after { - top: calc(0.20312rem + 2px); + top: calc(0.203125rem + 2px); left: calc(-2.25rem + 2px); width: calc(1rem - 4px); height: calc(1rem - 4px); @@ -3440,6 +3740,7 @@ input[type="submit"].btn-block { ~ .custom-control-label::before { background-color: rgba(55, 90, 127, 0.5); } + .custom-select { display: inline-block; width: 100%; @@ -3452,7 +3753,7 @@ input[type="submit"].btn-block { vertical-align: middle; background: #444 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") - no-repeat right 0.75rem center/8px 10px; + right 0.75rem center/8px 10px no-repeat; border: 1px solid #222; border-radius: 0.25rem; appearance: none; @@ -3483,20 +3784,23 @@ input[type="submit"].btn-block { color: transparent; text-shadow: 0 0 0 #fff; } + .custom-select-sm { height: calc(1.5em + 0.5rem + 2px); padding-top: 0.25rem; padding-bottom: 0.25rem; padding-left: 0.5rem; - font-size: 0.82031rem; + font-size: 0.8203125rem; } + .custom-select-lg { height: calc(1.5em + 1rem + 2px); padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; - font-size: 1.17188rem; + font-size: 1.171875rem; } + .custom-file { position: relative; display: inline-block; @@ -3504,20 +3808,22 @@ input[type="submit"].btn-block { height: calc(1.5em + 0.75rem + 2px); margin-bottom: 0; } + .custom-file-input { position: relative; z-index: 2; width: 100%; height: calc(1.5em + 0.75rem + 2px); margin: 0; + overflow: hidden; opacity: 0; } .custom-file-input:focus ~ .custom-file-label { border-color: #739ac2; box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25); } -.custom-file-input:disabled ~ .custom-file-label, -.custom-file-input[disabled] ~ .custom-file-label { +.custom-file-input[disabled] ~ .custom-file-label, +.custom-file-input:disabled ~ .custom-file-label { background-color: #2b2b2b; } .custom-file-input:lang(en) ~ .custom-file-label::after { @@ -3526,6 +3832,7 @@ input[type="submit"].btn-block { .custom-file-input ~ .custom-file-label[data-browse]::after { content: attr(data-browse); } + .custom-file-label { position: absolute; top: 0; @@ -3534,6 +3841,7 @@ input[type="submit"].btn-block { z-index: 1; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; + overflow: hidden; font-weight: 400; line-height: 1.5; color: #adb5bd; @@ -3557,6 +3865,7 @@ input[type="submit"].btn-block { border-left: inherit; border-radius: 0 0.25rem 0.25rem 0; } + .custom-range { width: 100%; height: 1.4rem; @@ -3688,6 +3997,7 @@ input[type="submit"].btn-block { .custom-range:disabled::-ms-thumb { background-color: #adb5bd; } + .custom-control-label::before, .custom-file-label, .custom-select { @@ -3701,6 +4011,7 @@ input[type="submit"].btn-block { transition: none; } } + .nav { display: flex; flex-wrap: wrap; @@ -3708,12 +4019,13 @@ input[type="submit"].btn-block { margin-bottom: 0; list-style: none; } + .nav-link { display: block; padding: 0.5rem 2rem; } -.nav-link:focus, -.nav-link:hover { +.nav-link:hover, +.nav-link:focus { text-decoration: none; } .nav-link.disabled { @@ -3721,19 +4033,20 @@ input[type="submit"].btn-block { pointer-events: none; cursor: default; } + .nav-tabs { border-bottom: 1px solid #444; } -.nav-tabs .nav-item { - margin-bottom: -1px; -} .nav-tabs .nav-link { + margin-bottom: -1px; + background-color: transparent; border: 1px solid transparent; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } -.nav-tabs .nav-link:focus, -.nav-tabs .nav-link:hover { +.nav-tabs .nav-link:hover, +.nav-tabs .nav-link:focus { + isolation: isolate; border-color: #444 #444 transparent; } .nav-tabs .nav-link.disabled { @@ -3741,8 +4054,8 @@ input[type="submit"].btn-block { background-color: transparent; border-color: transparent; } -.nav-tabs .nav-item.show .nav-link, -.nav-tabs .nav-link.active { +.nav-tabs .nav-link.active, +.nav-tabs .nav-item.show .nav-link { color: #fff; background-color: #222; border-color: #444 #444 transparent; @@ -3752,7 +4065,10 @@ input[type="submit"].btn-block { border-top-left-radius: 0; border-top-right-radius: 0; } + .nav-pills .nav-link { + background: none; + border: 0; border-radius: 0.25rem; } .nav-pills .nav-link.active, @@ -3760,21 +4076,27 @@ input[type="submit"].btn-block { color: #fff; background-color: #375a7f; } + +.nav-fill > .nav-link, .nav-fill .nav-item { flex: 1 1 auto; text-align: center; } + +.nav-justified > .nav-link, .nav-justified .nav-item { flex-basis: 0; flex-grow: 1; text-align: center; } + .tab-content > .tab-pane { display: none; } .tab-content > .active { display: block; } + .navbar { position: relative; display: flex; @@ -3785,9 +4107,9 @@ input[type="submit"].btn-block { } .navbar .container, .navbar .container-fluid, -.navbar .container-lg, -.navbar .container-md, .navbar .container-sm, +.navbar .container-md, +.navbar .container-lg, .navbar .container-xl { display: flex; flex-wrap: wrap; @@ -3796,17 +4118,18 @@ input[type="submit"].btn-block { } .navbar-brand { display: inline-block; - padding-top: 0.32422rem; - padding-bottom: 0.32422rem; + padding-top: 0.32421875rem; + padding-bottom: 0.32421875rem; margin-right: 1rem; - font-size: 1.17188rem; + font-size: 1.171875rem; line-height: inherit; white-space: nowrap; } -.navbar-brand:focus, -.navbar-brand:hover { +.navbar-brand:hover, +.navbar-brand:focus { text-decoration: none; } + .navbar-nav { display: flex; flex-direction: column; @@ -3822,43 +4145,52 @@ input[type="submit"].btn-block { position: static; float: none; } + .navbar-text { display: inline-block; padding-top: 0.5rem; padding-bottom: 0.5rem; } + .navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; } + .navbar-toggler { padding: 0.25rem 0.75rem; - font-size: 1.17188rem; + font-size: 1.171875rem; line-height: 1; background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; } -.navbar-toggler:focus, -.navbar-toggler:hover { +.navbar-toggler:hover, +.navbar-toggler:focus { text-decoration: none; } + .navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; content: ""; - background: no-repeat center center; - background-size: 100% 100%; + background: 50%/100% 100% no-repeat; } + +.navbar-nav-scroll { + max-height: 75vh; + overflow-y: auto; +} + @media (max-width: 575.98px) { .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid, - .navbar-expand-sm > .container-lg, - .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-sm, + .navbar-expand-sm > .container-md, + .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl { padding-right: 0; padding-left: 0; @@ -3881,12 +4213,15 @@ input[type="submit"].btn-block { } .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid, - .navbar-expand-sm > .container-lg, - .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-sm, + .navbar-expand-sm > .container-md, + .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl { flex-wrap: nowrap; } + .navbar-expand-sm .navbar-nav-scroll { + overflow: visible; + } .navbar-expand-sm .navbar-collapse { display: flex !important; flex-basis: auto; @@ -3898,9 +4233,9 @@ input[type="submit"].btn-block { @media (max-width: 767.98px) { .navbar-expand-md > .container, .navbar-expand-md > .container-fluid, - .navbar-expand-md > .container-lg, - .navbar-expand-md > .container-md, .navbar-expand-md > .container-sm, + .navbar-expand-md > .container-md, + .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl { padding-right: 0; padding-left: 0; @@ -3923,12 +4258,15 @@ input[type="submit"].btn-block { } .navbar-expand-md > .container, .navbar-expand-md > .container-fluid, - .navbar-expand-md > .container-lg, - .navbar-expand-md > .container-md, .navbar-expand-md > .container-sm, + .navbar-expand-md > .container-md, + .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl { flex-wrap: nowrap; } + .navbar-expand-md .navbar-nav-scroll { + overflow: visible; + } .navbar-expand-md .navbar-collapse { display: flex !important; flex-basis: auto; @@ -3940,9 +4278,9 @@ input[type="submit"].btn-block { @media (max-width: 991.98px) { .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid, - .navbar-expand-lg > .container-lg, - .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-sm, + .navbar-expand-lg > .container-md, + .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl { padding-right: 0; padding-left: 0; @@ -3965,12 +4303,15 @@ input[type="submit"].btn-block { } .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid, - .navbar-expand-lg > .container-lg, - .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-sm, + .navbar-expand-lg > .container-md, + .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl { flex-wrap: nowrap; } + .navbar-expand-lg .navbar-nav-scroll { + overflow: visible; + } .navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto; @@ -3982,9 +4323,9 @@ input[type="submit"].btn-block { @media (max-width: 1199.98px) { .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid, - .navbar-expand-xl > .container-lg, - .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-sm, + .navbar-expand-xl > .container-md, + .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl { padding-right: 0; padding-left: 0; @@ -4007,12 +4348,15 @@ input[type="submit"].btn-block { } .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid, - .navbar-expand-xl > .container-lg, - .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-sm, + .navbar-expand-xl > .container-md, + .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl { flex-wrap: nowrap; } + .navbar-expand-xl .navbar-nav-scroll { + overflow: visible; + } .navbar-expand-xl .navbar-collapse { display: flex !important; flex-basis: auto; @@ -4027,9 +4371,9 @@ input[type="submit"].btn-block { } .navbar-expand > .container, .navbar-expand > .container-fluid, -.navbar-expand > .container-lg, -.navbar-expand > .container-md, .navbar-expand > .container-sm, +.navbar-expand > .container-md, +.navbar-expand > .container-lg, .navbar-expand > .container-xl { padding-right: 0; padding-left: 0; @@ -4046,12 +4390,15 @@ input[type="submit"].btn-block { } .navbar-expand > .container, .navbar-expand > .container-fluid, -.navbar-expand > .container-lg, -.navbar-expand > .container-md, .navbar-expand > .container-sm, +.navbar-expand > .container-md, +.navbar-expand > .container-lg, .navbar-expand > .container-xl { flex-wrap: nowrap; } +.navbar-expand .navbar-nav-scroll { + overflow: visible; +} .navbar-expand .navbar-collapse { display: flex !important; flex-basis: auto; @@ -4059,27 +4406,28 @@ input[type="submit"].btn-block { .navbar-expand .navbar-toggler { display: none; } + .navbar-light .navbar-brand { color: #fff; } -.navbar-light .navbar-brand:focus, -.navbar-light .navbar-brand:hover { +.navbar-light .navbar-brand:hover, +.navbar-light .navbar-brand:focus { color: #fff; } .navbar-light .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.6); } -.navbar-light .navbar-nav .nav-link:focus, -.navbar-light .navbar-nav .nav-link:hover { +.navbar-light .navbar-nav .nav-link:hover, +.navbar-light .navbar-nav .nav-link:focus { color: #fff; } .navbar-light .navbar-nav .nav-link.disabled { color: rgba(0, 0, 0, 0.3); } +.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, -.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, -.navbar-light .navbar-nav .show > .nav-link { +.navbar-light .navbar-nav .nav-link.active { color: #fff; } .navbar-light .navbar-toggler { @@ -4095,31 +4443,32 @@ input[type="submit"].btn-block { .navbar-light .navbar-text a { color: #fff; } -.navbar-light .navbar-text a:focus, -.navbar-light .navbar-text a:hover { +.navbar-light .navbar-text a:hover, +.navbar-light .navbar-text a:focus { color: #fff; } + .navbar-dark .navbar-brand { color: #fff; } -.navbar-dark .navbar-brand:focus, -.navbar-dark .navbar-brand:hover { +.navbar-dark .navbar-brand:hover, +.navbar-dark .navbar-brand:focus { color: #fff; } .navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.6); } -.navbar-dark .navbar-nav .nav-link:focus, -.navbar-dark .navbar-nav .nav-link:hover { +.navbar-dark .navbar-nav .nav-link:hover, +.navbar-dark .navbar-nav .nav-link:focus { color: #fff; } .navbar-dark .navbar-nav .nav-link.disabled { color: rgba(255, 255, 255, 0.25); } +.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, -.navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, -.navbar-dark .navbar-nav .show > .nav-link { +.navbar-dark .navbar-nav .nav-link.active { color: #fff; } .navbar-dark .navbar-toggler { @@ -4135,10 +4484,11 @@ input[type="submit"].btn-block { .navbar-dark .navbar-text a { color: #fff; } -.navbar-dark .navbar-text a:focus, -.navbar-dark .navbar-text a:hover { +.navbar-dark .navbar-text a:hover, +.navbar-dark .navbar-text a:focus { color: #fff; } + .card { position: relative; display: flex; @@ -4168,27 +4518,37 @@ input[type="submit"].btn-block { border-bottom-right-radius: calc(0.25rem - 1px); border-bottom-left-radius: calc(0.25rem - 1px); } +.card > .card-header + .list-group, +.card > .list-group + .card-footer { + border-top: 0; +} + .card-body { flex: 1 1 auto; min-height: 1px; padding: 1.25rem; } + .card-title { margin-bottom: 0.75rem; } + .card-subtitle { margin-top: -0.375rem; margin-bottom: 0; } + .card-text:last-child { margin-bottom: 0; } + .card-link:hover { text-decoration: none; } .card-link + .card-link { margin-left: 1.25rem; } + .card-header { padding: 0.75rem 1.25rem; margin-bottom: 0; @@ -4198,9 +4558,7 @@ input[type="submit"].btn-block { .card-header:first-child { border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; } -.card-header + .list-group .list-group-item:first-child { - border-top: 0; -} + .card-footer { padding: 0.75rem 1.25rem; background-color: #444; @@ -4209,16 +4567,19 @@ input[type="submit"].btn-block { .card-footer:last-child { border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); } + .card-header-tabs { margin-right: -0.625rem; margin-bottom: -0.75rem; margin-left: -0.625rem; border-bottom: 0; } + .card-header-pills { margin-right: -0.625rem; margin-left: -0.625rem; } + .card-img-overlay { position: absolute; top: 0; @@ -4226,23 +4587,28 @@ input[type="submit"].btn-block { bottom: 0; left: 0; padding: 1.25rem; + border-radius: calc(0.25rem - 1px); } + .card-img, -.card-img-bottom, -.card-img-top { +.card-img-top, +.card-img-bottom { flex-shrink: 0; width: 100%; } + .card-img, .card-img-top { border-top-left-radius: calc(0.25rem - 1px); border-top-right-radius: calc(0.25rem - 1px); } + .card-img, .card-img-bottom { border-bottom-right-radius: calc(0.25rem - 1px); border-bottom-left-radius: calc(0.25rem - 1px); } + .card-deck .card { margin-bottom: 15px; } @@ -4260,6 +4626,7 @@ input[type="submit"].btn-block { margin-left: 15px; } } + .card-group > .card { margin-bottom: 15px; } @@ -4280,27 +4647,28 @@ input[type="submit"].btn-block { border-top-right-radius: 0; border-bottom-right-radius: 0; } - .card-group > .card:not(:last-child) .card-header, - .card-group > .card:not(:last-child) .card-img-top { + .card-group > .card:not(:last-child) .card-img-top, + .card-group > .card:not(:last-child) .card-header { border-top-right-radius: 0; } - .card-group > .card:not(:last-child) .card-footer, - .card-group > .card:not(:last-child) .card-img-bottom { + .card-group > .card:not(:last-child) .card-img-bottom, + .card-group > .card:not(:last-child) .card-footer { border-bottom-right-radius: 0; } .card-group > .card:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } - .card-group > .card:not(:first-child) .card-header, - .card-group > .card:not(:first-child) .card-img-top { + .card-group > .card:not(:first-child) .card-img-top, + .card-group > .card:not(:first-child) .card-header { border-top-left-radius: 0; } - .card-group > .card:not(:first-child) .card-footer, - .card-group > .card:not(:first-child) .card-img-bottom { + .card-group > .card:not(:first-child) .card-img-bottom, + .card-group > .card:not(:first-child) .card-footer { border-bottom-left-radius: 0; } } + .card-columns .card { margin-bottom: 0.75rem; } @@ -4316,6 +4684,10 @@ input[type="submit"].btn-block { width: 100%; } } + +.accordion { + overflow-anchor: none; +} .accordion > .card { overflow: hidden; } @@ -4332,6 +4704,7 @@ input[type="submit"].btn-block { border-radius: 0; margin-bottom: -1px; } + .breadcrumb { display: flex; flex-wrap: wrap; @@ -4341,14 +4714,12 @@ input[type="submit"].btn-block { background-color: #444; border-radius: 0.25rem; } -.breadcrumb-item { - display: flex; -} + .breadcrumb-item + .breadcrumb-item { padding-left: 0.5rem; } .breadcrumb-item + .breadcrumb-item::before { - display: inline-block; + float: left; padding-right: 0.5rem; color: #888; content: "/"; @@ -4362,12 +4733,14 @@ input[type="submit"].btn-block { .breadcrumb-item.active { color: #888; } + .pagination { display: flex; padding-left: 0; list-style: none; border-radius: 0.25rem; } + .page-link { position: relative; display: block; @@ -4390,6 +4763,7 @@ input[type="submit"].btn-block { outline: 0; box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25); } + .page-item:first-child .page-link { margin-left: 0; border-top-left-radius: 0.25rem; @@ -4412,9 +4786,10 @@ input[type="submit"].btn-block { background-color: #007053; border-color: transparent; } + .pagination-lg .page-link { padding: 0.75rem 1.5rem; - font-size: 1.17188rem; + font-size: 1.171875rem; line-height: 1.5; } .pagination-lg .page-item:first-child .page-link { @@ -4425,9 +4800,10 @@ input[type="submit"].btn-block { border-top-right-radius: 0.3rem; border-bottom-right-radius: 0.3rem; } + .pagination-sm .page-link { padding: 0.25rem 0.5rem; - font-size: 0.82031rem; + font-size: 0.8203125rem; line-height: 1.5; } .pagination-sm .page-item:first-child .page-link { @@ -4438,6 +4814,7 @@ input[type="submit"].btn-block { border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem; } + .badge { display: inline-block; padding: 0.25em 0.4em; @@ -4456,134 +4833,146 @@ input[type="submit"].btn-block { transition: none; } } -a.badge:focus, -a.badge:hover { +a.badge:hover, +a.badge:focus { text-decoration: none; } + .badge:empty { display: none; } + .btn .badge { position: relative; top: -1px; } + .badge-pill { padding-right: 0.6em; padding-left: 0.6em; border-radius: 10rem; } + .badge-primary { color: #fff; background-color: #375a7f; } -a.badge-primary:focus, -a.badge-primary:hover { +a.badge-primary:hover, +a.badge-primary:focus { color: #fff; background-color: #28415b; } -a.badge-primary.focus, -a.badge-primary:focus { +a.badge-primary:focus, +a.badge-primary.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.5); } + .badge-secondary { color: #fff; background-color: #444; } -a.badge-secondary:focus, -a.badge-secondary:hover { +a.badge-secondary:hover, +a.badge-secondary:focus { color: #fff; background-color: #2b2b2b; } -a.badge-secondary.focus, -a.badge-secondary:focus { +a.badge-secondary:focus, +a.badge-secondary.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(68, 68, 68, 0.5); } + .badge-success { color: #fff; background-color: #00bc8c; } -a.badge-success:focus, -a.badge-success:hover { +a.badge-success:hover, +a.badge-success:focus { color: #fff; background-color: #008966; } -a.badge-success.focus, -a.badge-success:focus { +a.badge-success:focus, +a.badge-success.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 188, 140, 0.5); } + .badge-info { color: #fff; background-color: #3498db; } -a.badge-info:focus, -a.badge-info:hover { +a.badge-info:hover, +a.badge-info:focus { color: #fff; background-color: #217dbb; } -a.badge-info.focus, -a.badge-info:focus { +a.badge-info:focus, +a.badge-info.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.5); } + .badge-warning { color: #fff; background-color: #f39c12; } -a.badge-warning:focus, -a.badge-warning:hover { +a.badge-warning:hover, +a.badge-warning:focus { color: #fff; background-color: #c87f0a; } -a.badge-warning.focus, -a.badge-warning:focus { +a.badge-warning:focus, +a.badge-warning.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.5); } + .badge-danger { color: #fff; background-color: #e74c3c; } -a.badge-danger:focus, -a.badge-danger:hover { +a.badge-danger:hover, +a.badge-danger:focus { color: #fff; background-color: #d62c1a; } -a.badge-danger.focus, -a.badge-danger:focus { +a.badge-danger:focus, +a.badge-danger.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.5); } + .badge-light { color: #fff; background-color: #303030; } -a.badge-light:focus, -a.badge-light:hover { +a.badge-light:hover, +a.badge-light:focus { color: #fff; background-color: #171717; } -a.badge-light.focus, -a.badge-light:focus { +a.badge-light:focus, +a.badge-light.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(48, 48, 48, 0.5); } + .badge-dark { color: #222; background-color: #dee2e6; } -a.badge-dark:focus, -a.badge-dark:hover { +a.badge-dark:hover, +a.badge-dark:focus { color: #222; background-color: #c1c9d0; } -a.badge-dark.focus, -a.badge-dark:focus { +a.badge-dark:focus, +a.badge-dark.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(222, 226, 230, 0.5); } + .jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; @@ -4595,11 +4984,13 @@ a.badge-dark:focus { padding: 4rem 2rem; } } + .jumbotron-fluid { padding-right: 0; padding-left: 0; border-radius: 0; } + .alert { position: relative; padding: 0.75rem 1.25rem; @@ -4607,12 +4998,15 @@ a.badge-dark:focus { border: 1px solid transparent; border-radius: 0.25rem; } + .alert-heading { color: inherit; } + .alert-link { font-weight: 700; } + .alert-dismissible { padding-right: 3.90625rem; } @@ -4620,9 +5014,11 @@ a.badge-dark:focus { position: absolute; top: 0; right: 0; + z-index: 2; padding: 0.75rem 1.25rem; color: inherit; } + .alert-primary { color: #1d2f42; background-color: #d7dee5; @@ -4634,6 +5030,7 @@ a.badge-dark:focus { .alert-primary .alert-link { color: #0d161f; } + .alert-secondary { color: #232323; background-color: #dadada; @@ -4645,6 +5042,7 @@ a.badge-dark:focus { .alert-secondary .alert-link { color: #0a0a0a; } + .alert-success { color: #006249; background-color: #ccf2e8; @@ -4656,6 +5054,7 @@ a.badge-dark:focus { .alert-success .alert-link { color: #002f23; } + .alert-info { color: #1b4f72; background-color: #d6eaf8; @@ -4667,6 +5066,7 @@ a.badge-dark:focus { .alert-info .alert-link { color: #113249; } + .alert-warning { color: #7e5109; background-color: #fdebd0; @@ -4678,6 +5078,7 @@ a.badge-dark:focus { .alert-warning .alert-link { color: #4e3206; } + .alert-danger { color: #78281f; background-color: #fadbd8; @@ -4689,6 +5090,7 @@ a.badge-dark:focus { .alert-danger .alert-link { color: #4f1a15; } + .alert-light { color: #191919; background-color: #d6d6d6; @@ -4698,8 +5100,9 @@ a.badge-dark:focus { border-top-color: #b8b8b8; } .alert-light .alert-link { - color: #000; + color: black; } + .alert-dark { color: #737678; background-color: #f8f9fa; @@ -4711,6 +5114,7 @@ a.badge-dark:focus { .alert-dark .alert-link { color: #5a5c5e; } + @keyframes progress-bar-stripes { from { background-position: 1rem 0; @@ -4724,10 +5128,11 @@ a.badge-dark:focus { height: 1rem; overflow: hidden; line-height: 0; - font-size: 0.70312rem; + font-size: 0.703125rem; background-color: #444; border-radius: 0.25rem; } + .progress-bar { display: flex; flex-direction: column; @@ -4744,6 +5149,7 @@ a.badge-dark:focus { transition: none; } } + .progress-bar-striped { background-image: linear-gradient( 45deg, @@ -4757,21 +5163,25 @@ a.badge-dark:focus { ); background-size: 1rem 1rem; } + .progress-bar-animated { - animation: progress-bar-stripes 1s linear infinite; + animation: 1s linear infinite progress-bar-stripes; } @media (prefers-reduced-motion: reduce) { .progress-bar-animated { animation: none; } } + .media { display: flex; align-items: flex-start; } + .media-body { flex: 1; } + .list-group { display: flex; flex-direction: column; @@ -4779,13 +5189,14 @@ a.badge-dark:focus { margin-bottom: 0; border-radius: 0.25rem; } + .list-group-item-action { width: 100%; color: #444; text-align: inherit; } -.list-group-item-action:focus, -.list-group-item-action:hover { +.list-group-item-action:hover, +.list-group-item-action:focus { z-index: 1; color: #444; text-decoration: none; @@ -4795,6 +5206,7 @@ a.badge-dark:focus { color: #dee2e6; background-color: #ebebeb; } + .list-group-item { position: relative; display: block; @@ -4829,6 +5241,7 @@ a.badge-dark:focus { margin-top: -1px; border-top-width: 1px; } + .list-group-horizontal { flex-direction: row; } @@ -4851,6 +5264,7 @@ a.badge-dark:focus { margin-left: -1px; border-left-width: 1px; } + @media (min-width: 576px) { .list-group-horizontal-sm { flex-direction: row; @@ -4956,12 +5370,13 @@ a.badge-dark:focus { .list-group-flush > .list-group-item:last-child { border-bottom-width: 0; } + .list-group-item-primary { color: #1d2f42; background-color: #c7d1db; } -.list-group-item-primary.list-group-item-action:focus, -.list-group-item-primary.list-group-item-action:hover { +.list-group-item-primary.list-group-item-action:hover, +.list-group-item-primary.list-group-item-action:focus { color: #1d2f42; background-color: #b7c4d1; } @@ -4970,12 +5385,13 @@ a.badge-dark:focus { background-color: #1d2f42; border-color: #1d2f42; } + .list-group-item-secondary { color: #232323; background-color: #cbcbcb; } -.list-group-item-secondary.list-group-item-action:focus, -.list-group-item-secondary.list-group-item-action:hover { +.list-group-item-secondary.list-group-item-action:hover, +.list-group-item-secondary.list-group-item-action:focus { color: #232323; background-color: #bebebe; } @@ -4984,12 +5400,13 @@ a.badge-dark:focus { background-color: #232323; border-color: #232323; } + .list-group-item-success { color: #006249; background-color: #b8ecdf; } -.list-group-item-success.list-group-item-action:focus, -.list-group-item-success.list-group-item-action:hover { +.list-group-item-success.list-group-item-action:hover, +.list-group-item-success.list-group-item-action:focus { color: #006249; background-color: #a4e7d6; } @@ -4998,12 +5415,13 @@ a.badge-dark:focus { background-color: #006249; border-color: #006249; } + .list-group-item-info { color: #1b4f72; background-color: #c6e2f5; } -.list-group-item-info.list-group-item-action:focus, -.list-group-item-info.list-group-item-action:hover { +.list-group-item-info.list-group-item-action:hover, +.list-group-item-info.list-group-item-action:focus { color: #1b4f72; background-color: #b0d7f1; } @@ -5012,12 +5430,13 @@ a.badge-dark:focus { background-color: #1b4f72; border-color: #1b4f72; } + .list-group-item-warning { color: #7e5109; background-color: #fce3bd; } -.list-group-item-warning.list-group-item-action:focus, -.list-group-item-warning.list-group-item-action:hover { +.list-group-item-warning.list-group-item-action:hover, +.list-group-item-warning.list-group-item-action:focus { color: #7e5109; background-color: #fbd9a5; } @@ -5026,12 +5445,13 @@ a.badge-dark:focus { background-color: #7e5109; border-color: #7e5109; } + .list-group-item-danger { color: #78281f; background-color: #f8cdc8; } -.list-group-item-danger.list-group-item-action:focus, -.list-group-item-danger.list-group-item-action:hover { +.list-group-item-danger.list-group-item-action:hover, +.list-group-item-danger.list-group-item-action:focus { color: #78281f; background-color: #f5b8b1; } @@ -5040,12 +5460,13 @@ a.badge-dark:focus { background-color: #78281f; border-color: #78281f; } + .list-group-item-light { color: #191919; background-color: #c5c5c5; } -.list-group-item-light.list-group-item-action:focus, -.list-group-item-light.list-group-item-action:hover { +.list-group-item-light.list-group-item-action:hover, +.list-group-item-light.list-group-item-action:focus { color: #191919; background-color: #b8b8b8; } @@ -5054,12 +5475,13 @@ a.badge-dark:focus { background-color: #191919; border-color: #191919; } + .list-group-item-dark { color: #737678; background-color: #f6f7f8; } -.list-group-item-dark.list-group-item-action:focus, -.list-group-item-dark.list-group-item-action:hover { +.list-group-item-dark.list-group-item-action:hover, +.list-group-item-dark.list-group-item-action:focus { color: #737678; background-color: #e8eaed; } @@ -5068,6 +5490,7 @@ a.badge-dark:focus { background-color: #737678; border-color: #737678; } + .close { float: right; font-size: 1.40625rem; @@ -5081,27 +5504,29 @@ a.badge-dark:focus { color: #fff; text-decoration: none; } -.close:not(:disabled):not(.disabled):focus, -.close:not(:disabled):not(.disabled):hover { +.close:not(:disabled):not(.disabled):hover, +.close:not(:disabled):not(.disabled):focus { opacity: 0.75; } + button.close { padding: 0; background-color: transparent; border: 0; } + a.close.disabled { pointer-events: none; } + .toast { + flex-basis: 350px; max-width: 350px; - overflow: hidden; font-size: 0.875rem; background-color: #444; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1); - backdrop-filter: blur(10px); opacity: 0; border-radius: 0.25rem; } @@ -5118,6 +5543,7 @@ a.close.disabled { .toast.hide { display: none; } + .toast-header { display: flex; align-items: center; @@ -5126,10 +5552,14 @@ a.close.disabled { background-color: #303030; background-clip: padding-box; border-bottom: 1px solid rgba(0, 0, 0, 0.05); + border-top-left-radius: calc(0.25rem - 1px); + border-top-right-radius: calc(0.25rem - 1px); } + .toast-body { padding: 0.75rem; } + .modal-open { overflow: hidden; } @@ -5137,6 +5567,7 @@ a.close.disabled { overflow-x: hidden; overflow-y: auto; } + .modal { position: fixed; top: 0; @@ -5148,6 +5579,7 @@ a.close.disabled { overflow: hidden; outline: 0; } + .modal-dialog { position: relative; width: auto; @@ -5169,6 +5601,7 @@ a.close.disabled { .modal.modal-static .modal-dialog { transform: scale(1.02); } + .modal-dialog-scrollable { display: flex; max-height: calc(100% - 1rem); @@ -5177,13 +5610,14 @@ a.close.disabled { max-height: calc(100vh - 1rem); overflow: hidden; } -.modal-dialog-scrollable .modal-footer, -.modal-dialog-scrollable .modal-header { +.modal-dialog-scrollable .modal-header, +.modal-dialog-scrollable .modal-footer { flex-shrink: 0; } .modal-dialog-scrollable .modal-body { overflow-y: auto; } + .modal-dialog-centered { display: flex; align-items: center; @@ -5206,6 +5640,7 @@ a.close.disabled { .modal-dialog-centered.modal-dialog-scrollable::before { content: none; } + .modal-content { position: relative; display: flex; @@ -5218,6 +5653,7 @@ a.close.disabled { border-radius: 0.3rem; outline: 0; } + .modal-backdrop { position: fixed; top: 0; @@ -5233,6 +5669,7 @@ a.close.disabled { .modal-backdrop.show { opacity: 0.5; } + .modal-header { display: flex; align-items: flex-start; @@ -5246,15 +5683,18 @@ a.close.disabled { padding: 1rem 1rem; margin: -1rem -1rem -1rem auto; } + .modal-title { margin-bottom: 0; line-height: 1.5; } + .modal-body { position: relative; flex: 1 1 auto; padding: 1rem; } + .modal-footer { display: flex; flex-wrap: wrap; @@ -5268,6 +5708,7 @@ a.close.disabled { .modal-footer > * { margin: 0.25rem; } + .modal-scrollbar-measure { position: absolute; top: -9999px; @@ -5275,6 +5716,7 @@ a.close.disabled { height: 50px; overflow: scroll; } + @media (min-width: 576px) { .modal-dialog { max-width: 500px; @@ -5313,7 +5755,7 @@ a.close.disabled { z-index: 1070; display: block; margin: 0; - font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-style: normal; @@ -5326,10 +5768,10 @@ a.close.disabled { text-transform: none; letter-spacing: normal; word-break: normal; - word-spacing: normal; white-space: normal; + word-spacing: normal; line-break: auto; - font-size: 0.82031rem; + font-size: 0.8203125rem; word-wrap: break-word; opacity: 0; } @@ -5348,66 +5790,71 @@ a.close.disabled { border-color: transparent; border-style: solid; } -.bs-tooltip-auto[x-placement^="top"], -.bs-tooltip-top { + +.bs-tooltip-top, +.bs-tooltip-auto[x-placement^="top"] { padding: 0.4rem 0; } -.bs-tooltip-auto[x-placement^="top"] .arrow, -.bs-tooltip-top .arrow { +.bs-tooltip-top .arrow, +.bs-tooltip-auto[x-placement^="top"] .arrow { bottom: 0; } -.bs-tooltip-auto[x-placement^="top"] .arrow::before, -.bs-tooltip-top .arrow::before { +.bs-tooltip-top .arrow::before, +.bs-tooltip-auto[x-placement^="top"] .arrow::before { top: 0; border-width: 0.4rem 0.4rem 0; border-top-color: #000; } -.bs-tooltip-auto[x-placement^="right"], -.bs-tooltip-right { + +.bs-tooltip-right, +.bs-tooltip-auto[x-placement^="right"] { padding: 0 0.4rem; } -.bs-tooltip-auto[x-placement^="right"] .arrow, -.bs-tooltip-right .arrow { +.bs-tooltip-right .arrow, +.bs-tooltip-auto[x-placement^="right"] .arrow { left: 0; width: 0.4rem; height: 0.8rem; } -.bs-tooltip-auto[x-placement^="right"] .arrow::before, -.bs-tooltip-right .arrow::before { +.bs-tooltip-right .arrow::before, +.bs-tooltip-auto[x-placement^="right"] .arrow::before { right: 0; border-width: 0.4rem 0.4rem 0.4rem 0; border-right-color: #000; } -.bs-tooltip-auto[x-placement^="bottom"], -.bs-tooltip-bottom { + +.bs-tooltip-bottom, +.bs-tooltip-auto[x-placement^="bottom"] { padding: 0.4rem 0; } -.bs-tooltip-auto[x-placement^="bottom"] .arrow, -.bs-tooltip-bottom .arrow { +.bs-tooltip-bottom .arrow, +.bs-tooltip-auto[x-placement^="bottom"] .arrow { top: 0; } -.bs-tooltip-auto[x-placement^="bottom"] .arrow::before, -.bs-tooltip-bottom .arrow::before { +.bs-tooltip-bottom .arrow::before, +.bs-tooltip-auto[x-placement^="bottom"] .arrow::before { bottom: 0; border-width: 0 0.4rem 0.4rem; border-bottom-color: #000; } -.bs-tooltip-auto[x-placement^="left"], -.bs-tooltip-left { + +.bs-tooltip-left, +.bs-tooltip-auto[x-placement^="left"] { padding: 0 0.4rem; } -.bs-tooltip-auto[x-placement^="left"] .arrow, -.bs-tooltip-left .arrow { +.bs-tooltip-left .arrow, +.bs-tooltip-auto[x-placement^="left"] .arrow { right: 0; width: 0.4rem; height: 0.8rem; } -.bs-tooltip-auto[x-placement^="left"] .arrow::before, -.bs-tooltip-left .arrow::before { +.bs-tooltip-left .arrow::before, +.bs-tooltip-auto[x-placement^="left"] .arrow::before { left: 0; border-width: 0.4rem 0 0.4rem 0.4rem; border-left-color: #000; } + .tooltip-inner { max-width: 200px; padding: 0.25rem 0.5rem; @@ -5416,6 +5863,7 @@ a.close.disabled { background-color: #000; border-radius: 0.25rem; } + .popover { position: absolute; top: 0; @@ -5423,7 +5871,7 @@ a.close.disabled { z-index: 1060; display: block; max-width: 276px; - font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-style: normal; @@ -5436,10 +5884,10 @@ a.close.disabled { text-transform: none; letter-spacing: normal; word-break: normal; - word-spacing: normal; white-space: normal; + word-spacing: normal; line-break: auto; - font-size: 0.82031rem; + font-size: 0.8203125rem; word-wrap: break-word; background-color: #303030; background-clip: padding-box; @@ -5453,79 +5901,82 @@ a.close.disabled { height: 0.5rem; margin: 0 0.3rem; } -.popover .arrow::after, -.popover .arrow::before { +.popover .arrow::before, +.popover .arrow::after { position: absolute; display: block; content: ""; border-color: transparent; border-style: solid; } -.bs-popover-auto[x-placement^="top"], -.bs-popover-top { + +.bs-popover-top, +.bs-popover-auto[x-placement^="top"] { margin-bottom: 0.5rem; } -.bs-popover-auto[x-placement^="top"] > .arrow, -.bs-popover-top > .arrow { +.bs-popover-top > .arrow, +.bs-popover-auto[x-placement^="top"] > .arrow { bottom: calc(-0.5rem - 1px); } -.bs-popover-auto[x-placement^="top"] > .arrow::before, -.bs-popover-top > .arrow::before { +.bs-popover-top > .arrow::before, +.bs-popover-auto[x-placement^="top"] > .arrow::before { bottom: 0; border-width: 0.5rem 0.5rem 0; border-top-color: rgba(0, 0, 0, 0.25); } -.bs-popover-auto[x-placement^="top"] > .arrow::after, -.bs-popover-top > .arrow::after { +.bs-popover-top > .arrow::after, +.bs-popover-auto[x-placement^="top"] > .arrow::after { bottom: 1px; border-width: 0.5rem 0.5rem 0; border-top-color: #303030; } -.bs-popover-auto[x-placement^="right"], -.bs-popover-right { + +.bs-popover-right, +.bs-popover-auto[x-placement^="right"] { margin-left: 0.5rem; } -.bs-popover-auto[x-placement^="right"] > .arrow, -.bs-popover-right > .arrow { +.bs-popover-right > .arrow, +.bs-popover-auto[x-placement^="right"] > .arrow { left: calc(-0.5rem - 1px); width: 0.5rem; height: 1rem; margin: 0.3rem 0; } -.bs-popover-auto[x-placement^="right"] > .arrow::before, -.bs-popover-right > .arrow::before { +.bs-popover-right > .arrow::before, +.bs-popover-auto[x-placement^="right"] > .arrow::before { left: 0; border-width: 0.5rem 0.5rem 0.5rem 0; border-right-color: rgba(0, 0, 0, 0.25); } -.bs-popover-auto[x-placement^="right"] > .arrow::after, -.bs-popover-right > .arrow::after { +.bs-popover-right > .arrow::after, +.bs-popover-auto[x-placement^="right"] > .arrow::after { left: 1px; border-width: 0.5rem 0.5rem 0.5rem 0; border-right-color: #303030; } -.bs-popover-auto[x-placement^="bottom"], -.bs-popover-bottom { + +.bs-popover-bottom, +.bs-popover-auto[x-placement^="bottom"] { margin-top: 0.5rem; } -.bs-popover-auto[x-placement^="bottom"] > .arrow, -.bs-popover-bottom > .arrow { +.bs-popover-bottom > .arrow, +.bs-popover-auto[x-placement^="bottom"] > .arrow { top: calc(-0.5rem - 1px); } -.bs-popover-auto[x-placement^="bottom"] > .arrow::before, -.bs-popover-bottom > .arrow::before { +.bs-popover-bottom > .arrow::before, +.bs-popover-auto[x-placement^="bottom"] > .arrow::before { top: 0; border-width: 0 0.5rem 0.5rem 0.5rem; border-bottom-color: rgba(0, 0, 0, 0.25); } -.bs-popover-auto[x-placement^="bottom"] > .arrow::after, -.bs-popover-bottom > .arrow::after { +.bs-popover-bottom > .arrow::after, +.bs-popover-auto[x-placement^="bottom"] > .arrow::after { top: 1px; border-width: 0 0.5rem 0.5rem 0.5rem; border-bottom-color: #303030; } -.bs-popover-auto[x-placement^="bottom"] .popover-header::before, -.bs-popover-bottom .popover-header::before { +.bs-popover-bottom .popover-header::before, +.bs-popover-auto[x-placement^="bottom"] .popover-header::before { position: absolute; top: 0; left: 50%; @@ -5535,29 +5986,31 @@ a.close.disabled { content: ""; border-bottom: 1px solid #444; } -.bs-popover-auto[x-placement^="left"], -.bs-popover-left { + +.bs-popover-left, +.bs-popover-auto[x-placement^="left"] { margin-right: 0.5rem; } -.bs-popover-auto[x-placement^="left"] > .arrow, -.bs-popover-left > .arrow { +.bs-popover-left > .arrow, +.bs-popover-auto[x-placement^="left"] > .arrow { right: calc(-0.5rem - 1px); width: 0.5rem; height: 1rem; margin: 0.3rem 0; } -.bs-popover-auto[x-placement^="left"] > .arrow::before, -.bs-popover-left > .arrow::before { +.bs-popover-left > .arrow::before, +.bs-popover-auto[x-placement^="left"] > .arrow::before { right: 0; border-width: 0.5rem 0 0.5rem 0.5rem; border-left-color: rgba(0, 0, 0, 0.25); } -.bs-popover-auto[x-placement^="left"] > .arrow::after, -.bs-popover-left > .arrow::after { +.bs-popover-left > .arrow::after, +.bs-popover-auto[x-placement^="left"] > .arrow::after { right: 1px; border-width: 0.5rem 0 0.5rem 0.5rem; border-left-color: #303030; } + .popover-header { padding: 0.5rem 0.75rem; margin-bottom: 0; @@ -5570,16 +6023,20 @@ a.close.disabled { .popover-header:empty { display: none; } + .popover-body { padding: 0.5rem 0.75rem; color: #dee2e6; } + .carousel { position: relative; } + .carousel.pointer-event { touch-action: pan-y; } + .carousel-inner { position: relative; width: 100%; @@ -5590,6 +6047,7 @@ a.close.disabled { clear: both; content: ""; } + .carousel-item { position: relative; display: none; @@ -5604,27 +6062,31 @@ a.close.disabled { transition: none; } } + +.carousel-item.active, .carousel-item-next, -.carousel-item-prev, -.carousel-item.active { +.carousel-item-prev { display: block; } -.active.carousel-item-right, -.carousel-item-next:not(.carousel-item-left) { + +.carousel-item-next:not(.carousel-item-left), +.active.carousel-item-right { transform: translateX(100%); } -.active.carousel-item-left, -.carousel-item-prev:not(.carousel-item-right) { + +.carousel-item-prev:not(.carousel-item-right), +.active.carousel-item-left { transform: translateX(-100%); } + .carousel-fade .carousel-item { opacity: 0; transition-property: opacity; transform: none; } +.carousel-fade .carousel-item.active, .carousel-fade .carousel-item-next.carousel-item-left, -.carousel-fade .carousel-item-prev.carousel-item-right, -.carousel-fade .carousel-item.active { +.carousel-fade .carousel-item-prev.carousel-item-right { z-index: 1; opacity: 1; } @@ -5640,8 +6102,9 @@ a.close.disabled { transition: none; } } -.carousel-control-next, -.carousel-control-prev { + +.carousel-control-prev, +.carousel-control-next { position: absolute; top: 0; bottom: 0; @@ -5650,45 +6113,54 @@ a.close.disabled { align-items: center; justify-content: center; width: 15%; + padding: 0; color: #fff; text-align: center; + background: none; + border: 0; opacity: 0.5; transition: opacity 0.15s ease; } @media (prefers-reduced-motion: reduce) { - .carousel-control-next, - .carousel-control-prev { + .carousel-control-prev, + .carousel-control-next { transition: none; } } -.carousel-control-next:focus, -.carousel-control-next:hover, +.carousel-control-prev:hover, .carousel-control-prev:focus, -.carousel-control-prev:hover { +.carousel-control-next:hover, +.carousel-control-next:focus { color: #fff; text-decoration: none; outline: 0; opacity: 0.9; } + .carousel-control-prev { left: 0; } + .carousel-control-next { right: 0; } -.carousel-control-next-icon, -.carousel-control-prev-icon { + +.carousel-control-prev-icon, +.carousel-control-next-icon { display: inline-block; width: 20px; height: 20px; - background: no-repeat 50%/100% 100%; + background: 50%/100% 100% no-repeat; } + .carousel-control-prev-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e"); } + .carousel-control-next-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e"); } + .carousel-indicators { position: absolute; right: 0; @@ -5726,6 +6198,7 @@ a.close.disabled { .carousel-indicators .active { opacity: 1; } + .carousel-caption { position: absolute; right: 15%; @@ -5737,6 +6210,7 @@ a.close.disabled { color: #fff; text-align: center; } + @keyframes spinner-border { to { transform: rotate(360deg); @@ -5746,17 +6220,19 @@ a.close.disabled { display: inline-block; width: 2rem; height: 2rem; - vertical-align: text-bottom; - border: 0.25em solid currentColor; + vertical-align: -0.125em; + border: 0.25em solid currentcolor; border-right-color: transparent; border-radius: 50%; - animation: spinner-border 0.75s linear infinite; + animation: 0.75s linear infinite spinner-border; } + .spinner-border-sm { width: 1rem; height: 1rem; border-width: 0.2em; } + @keyframes spinner-grow { 0% { transform: scale(0); @@ -5770,235 +6246,306 @@ a.close.disabled { display: inline-block; width: 2rem; height: 2rem; - vertical-align: text-bottom; - background-color: currentColor; + vertical-align: -0.125em; + background-color: currentcolor; border-radius: 50%; opacity: 0; - animation: spinner-grow 0.75s linear infinite; + animation: 0.75s linear infinite spinner-grow; } + .spinner-grow-sm { width: 1rem; height: 1rem; } + +@media (prefers-reduced-motion: reduce) { + .spinner-border, + .spinner-grow { + animation-duration: 1.5s; + } +} .align-baseline { vertical-align: baseline !important; } + .align-top { vertical-align: top !important; } + .align-middle { vertical-align: middle !important; } + .align-bottom { vertical-align: bottom !important; } + .align-text-bottom { vertical-align: text-bottom !important; } + .align-text-top { vertical-align: text-top !important; } + .bg-primary { background-color: #375a7f !important; } -a.bg-primary:focus, + a.bg-primary:hover, -button.bg-primary:focus, -button.bg-primary:hover { +a.bg-primary:focus, +button.bg-primary:hover, +button.bg-primary:focus { background-color: #28415b !important; } + .bg-secondary { background-color: #444 !important; } -a.bg-secondary:focus, + a.bg-secondary:hover, -button.bg-secondary:focus, -button.bg-secondary:hover { +a.bg-secondary:focus, +button.bg-secondary:hover, +button.bg-secondary:focus { background-color: #2b2b2b !important; } + .bg-success { background-color: #00bc8c !important; } -a.bg-success:focus, + a.bg-success:hover, -button.bg-success:focus, -button.bg-success:hover { +a.bg-success:focus, +button.bg-success:hover, +button.bg-success:focus { background-color: #008966 !important; } + .bg-info { background-color: #3498db !important; } -a.bg-info:focus, + a.bg-info:hover, -button.bg-info:focus, -button.bg-info:hover { +a.bg-info:focus, +button.bg-info:hover, +button.bg-info:focus { background-color: #217dbb !important; } + .bg-warning { background-color: #f39c12 !important; } -a.bg-warning:focus, + a.bg-warning:hover, -button.bg-warning:focus, -button.bg-warning:hover { +a.bg-warning:focus, +button.bg-warning:hover, +button.bg-warning:focus { background-color: #c87f0a !important; } + .bg-danger { background-color: #e74c3c !important; } -a.bg-danger:focus, + a.bg-danger:hover, -button.bg-danger:focus, -button.bg-danger:hover { +a.bg-danger:focus, +button.bg-danger:hover, +button.bg-danger:focus { background-color: #d62c1a !important; } + .bg-light { background-color: #303030 !important; } -a.bg-light:focus, + a.bg-light:hover, -button.bg-light:focus, -button.bg-light:hover { +a.bg-light:focus, +button.bg-light:hover, +button.bg-light:focus { background-color: #171717 !important; } + .bg-dark { background-color: #dee2e6 !important; } -a.bg-dark:focus, + a.bg-dark:hover, -button.bg-dark:focus, -button.bg-dark:hover { +a.bg-dark:focus, +button.bg-dark:hover, +button.bg-dark:focus { background-color: #c1c9d0 !important; } + .bg-white { background-color: #fff !important; } + .bg-transparent { background-color: transparent !important; } + .border { border: 1px solid #dee2e6 !important; } + .border-top { border-top: 1px solid #dee2e6 !important; } + .border-right { border-right: 1px solid #dee2e6 !important; } + .border-bottom { border-bottom: 1px solid #dee2e6 !important; } + .border-left { border-left: 1px solid #dee2e6 !important; } + .border-0 { border: 0 !important; } + .border-top-0 { border-top: 0 !important; } + .border-right-0 { border-right: 0 !important; } + .border-bottom-0 { border-bottom: 0 !important; } + .border-left-0 { border-left: 0 !important; } + .border-primary { border-color: #375a7f !important; } + .border-secondary { border-color: #444 !important; } + .border-success { border-color: #00bc8c !important; } + .border-info { border-color: #3498db !important; } + .border-warning { border-color: #f39c12 !important; } + .border-danger { border-color: #e74c3c !important; } + .border-light { border-color: #303030 !important; } + .border-dark { border-color: #dee2e6 !important; } + .border-white { border-color: #fff !important; } + .rounded-sm { border-radius: 0.2rem !important; } + .rounded { border-radius: 0.25rem !important; } + .rounded-top { border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; } + .rounded-right { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; } + .rounded-bottom { border-bottom-right-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; } + .rounded-left { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; } + .rounded-lg { border-radius: 0.3rem !important; } + .rounded-circle { border-radius: 50% !important; } + .rounded-pill { border-radius: 50rem !important; } + .rounded-0 { border-radius: 0 !important; } + .clearfix::after { display: block; clear: both; content: ""; } + .d-none { display: none !important; } + .d-inline { display: inline !important; } + .d-inline-block { display: inline-block !important; } + .d-block { display: block !important; } + .d-table { display: table !important; } + .d-table-row { display: table-row !important; } + .d-table-cell { display: table-cell !important; } + .d-flex { display: flex !important; } + .d-inline-flex { display: inline-flex !important; } + @media (min-width: 576px) { .d-sm-none { display: none !important; @@ -6156,8 +6703,8 @@ button.bg-dark:hover { content: ""; } .embed-responsive .embed-responsive-item, -.embed-responsive embed, .embed-responsive iframe, +.embed-responsive embed, .embed-responsive object, .embed-responsive video { position: absolute; @@ -6168,120 +6715,159 @@ button.bg-dark:hover { height: 100%; border: 0; } + .embed-responsive-21by9::before { - padding-top: 42.85714%; + padding-top: 42.85714286%; } + .embed-responsive-16by9::before { padding-top: 56.25%; } + .embed-responsive-4by3::before { padding-top: 75%; } + .embed-responsive-1by1::before { padding-top: 100%; } + .flex-row { flex-direction: row !important; } + .flex-column { flex-direction: column !important; } + .flex-row-reverse { flex-direction: row-reverse !important; } + .flex-column-reverse { flex-direction: column-reverse !important; } + .flex-wrap { flex-wrap: wrap !important; } + .flex-nowrap { flex-wrap: nowrap !important; } + .flex-wrap-reverse { flex-wrap: wrap-reverse !important; } + .flex-fill { flex: 1 1 auto !important; } + .flex-grow-0 { flex-grow: 0 !important; } + .flex-grow-1 { flex-grow: 1 !important; } + .flex-shrink-0 { flex-shrink: 0 !important; } + .flex-shrink-1 { flex-shrink: 1 !important; } + .justify-content-start { justify-content: flex-start !important; } + .justify-content-end { justify-content: flex-end !important; } + .justify-content-center { justify-content: center !important; } + .justify-content-between { justify-content: space-between !important; } + .justify-content-around { justify-content: space-around !important; } + .align-items-start { align-items: flex-start !important; } + .align-items-end { align-items: flex-end !important; } + .align-items-center { align-items: center !important; } + .align-items-baseline { align-items: baseline !important; } + .align-items-stretch { align-items: stretch !important; } + .align-content-start { align-content: flex-start !important; } + .align-content-end { align-content: flex-end !important; } + .align-content-center { align-content: center !important; } + .align-content-between { align-content: space-between !important; } + .align-content-around { align-content: space-around !important; } + .align-content-stretch { align-content: stretch !important; } + .align-self-auto { align-self: auto !important; } + .align-self-start { align-self: flex-start !important; } + .align-self-end { align-self: flex-end !important; } + .align-self-center { align-self: center !important; } + .align-self-baseline { align-self: baseline !important; } + .align-self-stretch { align-self: stretch !important; } + @media (min-width: 576px) { .flex-sm-row { flex-direction: row !important; @@ -6701,12 +7287,15 @@ button.bg-dark:hover { .float-left { float: left !important; } + .float-right { float: right !important; } + .float-none { float: none !important; } + @media (min-width: 576px) { .float-sm-left { float: left !important; @@ -6754,33 +7343,43 @@ button.bg-dark:hover { .user-select-all { user-select: all !important; } + .user-select-auto { user-select: auto !important; } + .user-select-none { user-select: none !important; } + .overflow-auto { overflow: auto !important; } + .overflow-hidden { overflow: hidden !important; } + .position-static { position: static !important; } + .position-relative { position: relative !important; } + .position-absolute { position: absolute !important; } + .position-fixed { position: fixed !important; } + .position-sticky { position: sticky !important; } + .fixed-top { position: fixed; top: 0; @@ -6788,6 +7387,7 @@ button.bg-dark:hover { left: 0; z-index: 1030; } + .fixed-bottom { position: fixed; right: 0; @@ -6795,6 +7395,7 @@ button.bg-dark:hover { left: 0; z-index: 1030; } + @supports (position: sticky) { .sticky-top { position: sticky; @@ -6802,6 +7403,7 @@ button.bg-dark:hover { z-index: 1020; } } + .sr-only { position: absolute; width: 1px; @@ -6813,6 +7415,7 @@ button.bg-dark:hover { white-space: nowrap; border: 0; } + .sr-only-focusable:active, .sr-only-focusable:focus { position: static; @@ -6822,408 +7425,519 @@ button.bg-dark:hover { clip: auto; white-space: normal; } + .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; } + .shadow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; } + .shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; } + .shadow-none { box-shadow: none !important; } + .w-25 { width: 25% !important; } + .w-50 { width: 50% !important; } + .w-75 { width: 75% !important; } + .w-100 { width: 100% !important; } + .w-auto { width: auto !important; } + .h-25 { height: 25% !important; } + .h-50 { height: 50% !important; } + .h-75 { height: 75% !important; } + .h-100 { height: 100% !important; } + .h-auto { height: auto !important; } + .mw-100 { max-width: 100% !important; } + .mh-100 { max-height: 100% !important; } + .min-vw-100 { min-width: 100vw !important; } + .min-vh-100 { min-height: 100vh !important; } + .vw-100 { width: 100vw !important; } + .vh-100 { height: 100vh !important; } + .m-0 { margin: 0 !important; } + .mt-0, .my-0 { margin-top: 0 !important; } + .mr-0, .mx-0 { margin-right: 0 !important; } + .mb-0, .my-0 { margin-bottom: 0 !important; } + .ml-0, .mx-0 { margin-left: 0 !important; } + .m-1 { margin: 0.25rem !important; } + .mt-1, .my-1 { margin-top: 0.25rem !important; } + .mr-1, .mx-1 { margin-right: 0.25rem !important; } + .mb-1, .my-1 { margin-bottom: 0.25rem !important; } + .ml-1, .mx-1 { margin-left: 0.25rem !important; } + .m-2 { margin: 0.5rem !important; } + .mt-2, .my-2 { margin-top: 0.5rem !important; } + .mr-2, .mx-2 { margin-right: 0.5rem !important; } + .mb-2, .my-2 { margin-bottom: 0.5rem !important; } + .ml-2, .mx-2 { margin-left: 0.5rem !important; } + .m-3 { margin: 1rem !important; } + .mt-3, .my-3 { margin-top: 1rem !important; } + .mr-3, .mx-3 { margin-right: 1rem !important; } + .mb-3, .my-3 { margin-bottom: 1rem !important; } + .ml-3, .mx-3 { margin-left: 1rem !important; } + .m-4 { margin: 1.5rem !important; } + .mt-4, .my-4 { margin-top: 1.5rem !important; } + .mr-4, .mx-4 { margin-right: 1.5rem !important; } + .mb-4, .my-4 { margin-bottom: 1.5rem !important; } + .ml-4, .mx-4 { margin-left: 1.5rem !important; } + .m-5 { margin: 3rem !important; } + .mt-5, .my-5 { margin-top: 3rem !important; } + .mr-5, .mx-5 { margin-right: 3rem !important; } + .mb-5, .my-5 { margin-bottom: 3rem !important; } + .ml-5, .mx-5 { margin-left: 3rem !important; } + .p-0 { padding: 0 !important; } + .pt-0, .py-0 { padding-top: 0 !important; } + .pr-0, .px-0 { padding-right: 0 !important; } + .pb-0, .py-0 { padding-bottom: 0 !important; } + .pl-0, .px-0 { padding-left: 0 !important; } + .p-1 { padding: 0.25rem !important; } + .pt-1, .py-1 { padding-top: 0.25rem !important; } + .pr-1, .px-1 { padding-right: 0.25rem !important; } + .pb-1, .py-1 { padding-bottom: 0.25rem !important; } + .pl-1, .px-1 { padding-left: 0.25rem !important; } + .p-2 { padding: 0.5rem !important; } + .pt-2, .py-2 { padding-top: 0.5rem !important; } + .pr-2, .px-2 { padding-right: 0.5rem !important; } + .pb-2, .py-2 { padding-bottom: 0.5rem !important; } + .pl-2, .px-2 { padding-left: 0.5rem !important; } + .p-3 { padding: 1rem !important; } + .pt-3, .py-3 { padding-top: 1rem !important; } + .pr-3, .px-3 { padding-right: 1rem !important; } + .pb-3, .py-3 { padding-bottom: 1rem !important; } + .pl-3, .px-3 { padding-left: 1rem !important; } + .p-4 { padding: 1.5rem !important; } + .pt-4, .py-4 { padding-top: 1.5rem !important; } + .pr-4, .px-4 { padding-right: 1.5rem !important; } + .pb-4, .py-4 { padding-bottom: 1.5rem !important; } + .pl-4, .px-4 { padding-left: 1.5rem !important; } + .p-5 { padding: 3rem !important; } + .pt-5, .py-5 { padding-top: 3rem !important; } + .pr-5, .px-5 { padding-right: 3rem !important; } + .pb-5, .py-5 { padding-bottom: 3rem !important; } + .pl-5, .px-5 { padding-left: 3rem !important; } + .m-n1 { margin: -0.25rem !important; } + .mt-n1, .my-n1 { margin-top: -0.25rem !important; } + .mr-n1, .mx-n1 { margin-right: -0.25rem !important; } + .mb-n1, .my-n1 { margin-bottom: -0.25rem !important; } + .ml-n1, .mx-n1 { margin-left: -0.25rem !important; } + .m-n2 { margin: -0.5rem !important; } + .mt-n2, .my-n2 { margin-top: -0.5rem !important; } + .mr-n2, .mx-n2 { margin-right: -0.5rem !important; } + .mb-n2, .my-n2 { margin-bottom: -0.5rem !important; } + .ml-n2, .mx-n2 { margin-left: -0.5rem !important; } + .m-n3 { margin: -1rem !important; } + .mt-n3, .my-n3 { margin-top: -1rem !important; } + .mr-n3, .mx-n3 { margin-right: -1rem !important; } + .mb-n3, .my-n3 { margin-bottom: -1rem !important; } + .ml-n3, .mx-n3 { margin-left: -1rem !important; } + .m-n4 { margin: -1.5rem !important; } + .mt-n4, .my-n4 { margin-top: -1.5rem !important; } + .mr-n4, .mx-n4 { margin-right: -1.5rem !important; } + .mb-n4, .my-n4 { margin-bottom: -1.5rem !important; } + .ml-n4, .mx-n4 { margin-left: -1.5rem !important; } + .m-n5 { margin: -3rem !important; } + .mt-n5, .my-n5 { margin-top: -3rem !important; } + .mr-n5, .mx-n5 { margin-right: -3rem !important; } + .mb-n5, .my-n5 { margin-bottom: -3rem !important; } + .ml-n5, .mx-n5 { margin-left: -3rem !important; } + .m-auto { margin: auto !important; } + .mt-auto, .my-auto { margin-top: auto !important; } + .mr-auto, .mx-auto { margin-right: auto !important; } + .mb-auto, .my-auto { margin-bottom: auto !important; } + .ml-auto, .mx-auto { margin-left: auto !important; } + @media (min-width: 576px) { .m-sm-0 { margin: 0 !important; @@ -8611,33 +9325,42 @@ button.bg-dark:hover { content: ""; background-color: rgba(0, 0, 0, 0); } + .text-monospace { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; } + .text-justify { text-align: justify !important; } + .text-wrap { white-space: normal !important; } + .text-nowrap { white-space: nowrap !important; } + .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .text-left { text-align: left !important; } + .text-right { text-align: right !important; } + .text-center { text-align: center !important; } + @media (min-width: 576px) { .text-sm-left { text-align: left !important; @@ -8685,101 +9408,131 @@ button.bg-dark:hover { .text-lowercase { text-transform: lowercase !important; } + .text-uppercase { text-transform: uppercase !important; } + .text-capitalize { text-transform: capitalize !important; } + .font-weight-light { font-weight: 300 !important; } + .font-weight-lighter { font-weight: lighter !important; } + .font-weight-normal { font-weight: 400 !important; } + .font-weight-bold { font-weight: 700 !important; } + .font-weight-bolder { font-weight: bolder !important; } + .font-italic { font-style: italic !important; } + .text-white { color: #fff !important; } + .text-primary { color: #375a7f !important; } -a.text-primary:focus, -a.text-primary:hover { + +a.text-primary:hover, +a.text-primary:focus { color: #20344a !important; } + .text-secondary { color: #444 !important; } -a.text-secondary:focus, -a.text-secondary:hover { + +a.text-secondary:hover, +a.text-secondary:focus { color: #1e1e1e !important; } + .text-success { color: #00bc8c !important; } -a.text-success:focus, -a.text-success:hover { + +a.text-success:hover, +a.text-success:focus { color: #007053 !important; } + .text-info { color: #3498db !important; } -a.text-info:focus, -a.text-info:hover { + +a.text-info:hover, +a.text-info:focus { color: #1d6fa5 !important; } + .text-warning { color: #f39c12 !important; } -a.text-warning:focus, -a.text-warning:hover { + +a.text-warning:hover, +a.text-warning:focus { color: #b06f09 !important; } + .text-danger { color: #e74c3c !important; } -a.text-danger:focus, -a.text-danger:hover { + +a.text-danger:hover, +a.text-danger:focus { color: #bf2718 !important; } + .text-light { color: #303030 !important; } -a.text-light:focus, -a.text-light:hover { + +a.text-light:hover, +a.text-light:focus { color: #0a0a0a !important; } + .text-dark { color: #dee2e6 !important; } -a.text-dark:focus, -a.text-dark:hover { + +a.text-dark:hover, +a.text-dark:focus { color: #b2bcc5 !important; } + .text-body { color: #dee2e6 !important; } + .text-muted { color: #888 !important; } + .text-black-50 { color: rgba(0, 0, 0, 0.5) !important; } + .text-white-50 { color: rgba(255, 255, 255, 0.5) !important; } + .text-hide { font: 0/0 a; color: transparent; @@ -8787,25 +9540,32 @@ a.text-dark:hover { background-color: transparent; border: 0; } + .text-decoration-none { text-decoration: none !important; } + .text-break { + word-break: break-word !important; word-wrap: break-word !important; } + .text-reset { color: inherit !important; } + .visible { visibility: visible !important; } + .invisible { visibility: hidden !important; } + @media print { *, - ::after, - ::before { + *::before, + *::after { text-shadow: none !important; box-shadow: none !important; } @@ -8818,21 +9578,18 @@ a.text-dark:hover { pre { white-space: pre-wrap !important; } - blockquote, - pre { + pre, + blockquote { border: 1px solid #adb5bd; page-break-inside: avoid; } - thead { - display: table-header-group; - } - img, - tr { + tr, + img { page-break-inside: avoid; } + p, h2, - h3, - p { + h3 { orphans: 3; widows: 3; } @@ -8862,17 +9619,17 @@ a.text-dark:hover { .table th { background-color: #fff !important; } - .table-bordered td, - .table-bordered th { + .table-bordered th, + .table-bordered td { border: 1px solid #dee2e6 !important; } .table-dark { color: inherit; } - .table-dark tbody + tbody, - .table-dark td, .table-dark th, - .table-dark thead th { + .table-dark td, + .table-dark thead th, + .table-dark tbody + tbody { border-color: #444; } .table .thead-dark th { @@ -8880,3 +9637,5 @@ a.text-dark:hover { border-color: #444; } } + +/*# sourceMappingURL=darkly.css.map */ diff --git a/src/assets/css/themes/litely-red.css b/src/assets/css/themes/litely-red.css index 8d74415c..5592526f 100644 --- a/src/assets/css/themes/litely-red.css +++ b/src/assets/css/themes/litely-red.css @@ -1,3 +1,10 @@ +@charset "UTF-8"; +/*! + * Bootstrap v4.6.2 (https://getbootstrap.com/) + * Copyright 2011-2022 The Bootstrap Authors + * Copyright 2011-2022 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + */ :root { --blue: #007bff; --indigo: #6610f2; @@ -17,7 +24,7 @@ --success: #6610f2; --info: #007bff; --warning: #ffc107; - --danger: #873208; + --danger: #891d1d; --light: #f8f9fa; --dark: #343a40; --breakpoint-xs: 0; @@ -30,17 +37,20 @@ --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } + *, -::after, -::before { +*::before, +*::after { box-sizing: border-box; } + html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(34, 34, 34, 0); } + article, aside, figcaption, @@ -53,10 +63,11 @@ nav, section { display: block; } + body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Droid Sans", "Segoe UI", - Helvetica, Arial, sans-serif; + "Helvetica", Arial, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; @@ -64,14 +75,17 @@ body { text-align: left; background-color: #fff; } + [tabindex="-1"]:focus:not(:focus-visible) { outline: 0 !important; } + hr { box-sizing: content-box; height: 0; overflow: visible; } + h1, h2, h3, @@ -81,52 +95,63 @@ h6 { margin-top: 0; margin-bottom: 0.5rem; } + p { margin-top: 0; margin-bottom: 1rem; } -abbr[data-original-title], -abbr[title] { + +abbr[title], +abbr[data-original-title] { text-decoration: underline; text-decoration: underline dotted; cursor: help; border-bottom: 0; text-decoration-skip-ink: none; } + address { margin-bottom: 1rem; font-style: normal; line-height: inherit; } -dl, + ol, -ul { +ul, +dl { margin-top: 0; margin-bottom: 1rem; } + ol ol, +ul ul, ol ul, -ul ol, -ul ul { +ul ol { margin-bottom: 0; } + dt { font-weight: 600; } + dd { margin-bottom: 0.5rem; margin-left: 0; } + blockquote { margin: 0 0 1rem; } + b, strong { font-weight: bolder; } + small { font-size: 80%; } + sub, sup { position: relative; @@ -134,57 +159,68 @@ sup { line-height: 0; vertical-align: baseline; } + sub { bottom: -0.25em; } + sup { top: -0.5em; } + a { color: #d84848; text-decoration: none; background-color: transparent; } a:hover { - color: #b70b0b; + color: #ae2525; text-decoration: underline; } -a:not([href]) { + +a:not([href]):not([class]) { color: inherit; text-decoration: none; } -a:not([href]):hover { +a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } + +pre, code, kbd, -pre, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; } + pre { margin-top: 0; margin-bottom: 1rem; overflow: auto; -ms-overflow-style: scrollbar; } + figure { margin: 0 0 1rem; } + img { vertical-align: middle; border-style: none; } + svg { overflow: hidden; vertical-align: middle; } + table { border-collapse: collapse; } + caption { padding-top: 0.75rem; padding-bottom: 0.75rem; @@ -192,78 +228,94 @@ caption { text-align: left; caption-side: bottom; } + th { text-align: inherit; + text-align: -webkit-match-parent; } + label { display: inline-block; margin-bottom: 0.5rem; } + button { border-radius: 0; } -button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; + +button:focus:not(:focus-visible) { + outline: 0; } -button, + input, -optgroup, +button, select, +optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } + button, input { overflow: visible; } + button, select { text-transform: none; } + [role="button"] { cursor: pointer; } + select { word-wrap: normal; } + +button, [type="button"], [type="reset"], -[type="submit"], -button { +[type="submit"] { -webkit-appearance: button; } + +button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), -[type="submit"]:not(:disabled), -button:not(:disabled) { +[type="submit"]:not(:disabled) { cursor: pointer; } + +button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner, -button::-moz-focus-inner { +[type="submit"]::-moz-focus-inner { padding: 0; border-style: none; } -input[type="checkbox"], -input[type="radio"] { + +input[type="radio"], +input[type="checkbox"] { box-sizing: border-box; padding: 0; } + textarea { overflow: auto; resize: vertical; } + fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } + legend { display: block; width: 100%; @@ -275,152 +327,184 @@ legend { color: inherit; white-space: normal; } + progress { vertical-align: baseline; } + [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } + [type="search"] { outline-offset: -2px; -webkit-appearance: none; } + [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } + ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } + output { display: inline-block; } + summary { display: list-item; cursor: pointer; } + template { display: none; } + [hidden] { display: none !important; } -.h1, -.h2, -.h3, -.h4, -.h5, -.h6, + h1, h2, h3, h4, h5, -h6 { +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; color: #495057; } -.h1, -h1 { + +h1, +.h1 { font-size: 2.5rem; } -.h2, -h2 { + +h2, +.h2 { font-size: 2rem; } -.h3, -h3 { + +h3, +.h3 { font-size: 1.75rem; } -.h4, -h4 { + +h4, +.h4 { font-size: 1.5rem; } -.h5, -h5 { + +h5, +.h5 { font-size: 1.25rem; } -.h6, -h6 { + +h6, +.h6 { font-size: 1rem; } + .lead { font-size: 1.25rem; font-weight: 300; } + .display-1 { font-size: 6rem; font-weight: 300; line-height: 1.2; } + .display-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.2; } + .display-3 { font-size: 4.5rem; font-weight: 300; line-height: 1.2; } + .display-4 { font-size: 3.5rem; font-weight: 300; line-height: 1.2; } + hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(34, 34, 34, 0.1); } -.small, -small { - font-size: 80%; + +small, +.small { + font-size: 0.875em; font-weight: 400; } -.mark, -mark { + +mark, +.mark { padding: 0.2em; - background-color: #fffcef; + background-color: rgb(255, 252, 239); } + .list-unstyled { padding-left: 0; list-style: none; } + .list-inline { padding-left: 0; list-style: none; } + .list-inline-item { display: inline-block; } .list-inline-item:not(:last-child) { margin-right: 0.5rem; } + .initialism { font-size: 90%; text-transform: uppercase; } + .blockquote { margin-bottom: 1rem; font-size: 1.25rem; } + .blockquote-footer { display: block; - font-size: 80%; + font-size: 0.875em; color: #6c757d; } .blockquote-footer::before { - content: "\2014\00A0"; + content: "— "; } + .img-fluid { max-width: 100%; height: auto; } + .img-thumbnail { padding: 0.25rem; background-color: #fff; @@ -429,17 +513,21 @@ mark { max-width: 100%; height: auto; } + .figure { display: inline-block; } + .figure-img { margin-bottom: 0.5rem; line-height: 1; } + .figure-caption { font-size: 90%; color: #6c757d; } + code { font-size: 87.5%; color: #e83e8c; @@ -448,10 +536,11 @@ code { a > code { color: inherit; } + kbd { padding: 0.2rem 0.4rem; font-size: 87.5%; - color: #fff; + color: #ffffff; background-color: #212529; border-radius: 1rem; } @@ -460,6 +549,7 @@ kbd kbd { font-size: 100%; font-weight: 600; } + pre { display: block; font-size: 87.5%; @@ -470,75 +560,52 @@ pre code { color: inherit; word-break: normal; } + .pre-scrollable { max-height: 340px; overflow-y: scroll; } -.container { - width: 100%; - padding-right: 15px; - padding-left: 15px; - margin-right: auto; - margin-left: auto; -} -@media (min-width: 576px) { - .container { - max-width: 540px; - } -} -@media (min-width: 768px) { - .container { - max-width: 720px; - } -} -@media (min-width: 992px) { - .container { - max-width: 960px; - } -} -@media (min-width: 1200px) { - .container { - max-width: 1140px; - } -} + +.container, .container-fluid, +.container-xl, .container-lg, .container-md, -.container-sm, -.container-xl { +.container-sm { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } + @media (min-width: 576px) { - .container, - .container-sm { + .container-sm, + .container { max-width: 540px; } } @media (min-width: 768px) { - .container, .container-md, - .container-sm { + .container-sm, + .container { max-width: 720px; } } @media (min-width: 992px) { - .container, - .container-lg, - .container-md, - .container-sm { - max-width: 960px; - } -} -@media (min-width: 1200px) { - .container, .container-lg, .container-md, .container-sm, - .container-xl { + .container { + max-width: 960px; + } +} +@media (min-width: 1200px) { + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container { max-width: 1140px; } } @@ -548,6 +615,7 @@ pre code { margin-right: -15px; margin-left: -15px; } + .no-gutters { margin-right: 0; margin-left: 0; @@ -557,247 +625,293 @@ pre code { padding-right: 0; padding-left: 0; } -.col, -.col-1, -.col-10, -.col-11, -.col-12, -.col-2, -.col-3, -.col-4, -.col-5, -.col-6, -.col-7, -.col-8, -.col-9, -.col-auto, -.col-lg, -.col-lg-1, -.col-lg-10, -.col-lg-11, -.col-lg-12, -.col-lg-2, -.col-lg-3, -.col-lg-4, -.col-lg-5, -.col-lg-6, -.col-lg-7, -.col-lg-8, -.col-lg-9, -.col-lg-auto, -.col-md, -.col-md-1, -.col-md-10, -.col-md-11, -.col-md-12, -.col-md-2, -.col-md-3, -.col-md-4, -.col-md-5, -.col-md-6, -.col-md-7, -.col-md-8, -.col-md-9, -.col-md-auto, -.col-sm, -.col-sm-1, -.col-sm-10, -.col-sm-11, -.col-sm-12, -.col-sm-2, -.col-sm-3, -.col-sm-4, -.col-sm-5, -.col-sm-6, -.col-sm-7, -.col-sm-8, -.col-sm-9, -.col-sm-auto, + .col-xl, -.col-xl-1, -.col-xl-10, -.col-xl-11, +.col-xl-auto, .col-xl-12, -.col-xl-2, -.col-xl-3, -.col-xl-4, -.col-xl-5, -.col-xl-6, -.col-xl-7, -.col-xl-8, +.col-xl-11, +.col-xl-10, .col-xl-9, -.col-xl-auto { +.col-xl-8, +.col-xl-7, +.col-xl-6, +.col-xl-5, +.col-xl-4, +.col-xl-3, +.col-xl-2, +.col-xl-1, +.col-lg, +.col-lg-auto, +.col-lg-12, +.col-lg-11, +.col-lg-10, +.col-lg-9, +.col-lg-8, +.col-lg-7, +.col-lg-6, +.col-lg-5, +.col-lg-4, +.col-lg-3, +.col-lg-2, +.col-lg-1, +.col-md, +.col-md-auto, +.col-md-12, +.col-md-11, +.col-md-10, +.col-md-9, +.col-md-8, +.col-md-7, +.col-md-6, +.col-md-5, +.col-md-4, +.col-md-3, +.col-md-2, +.col-md-1, +.col-sm, +.col-sm-auto, +.col-sm-12, +.col-sm-11, +.col-sm-10, +.col-sm-9, +.col-sm-8, +.col-sm-7, +.col-sm-6, +.col-sm-5, +.col-sm-4, +.col-sm-3, +.col-sm-2, +.col-sm-1, +.col, +.col-auto, +.col-12, +.col-11, +.col-10, +.col-9, +.col-8, +.col-7, +.col-6, +.col-5, +.col-4, +.col-3, +.col-2, +.col-1 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } + .col { flex-basis: 0; flex-grow: 1; - min-width: 0; max-width: 100%; } + .row-cols-1 > * { flex: 0 0 100%; max-width: 100%; } + .row-cols-2 > * { flex: 0 0 50%; max-width: 50%; } + .row-cols-3 > * { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .row-cols-4 > * { flex: 0 0 25%; max-width: 25%; } + .row-cols-5 > * { flex: 0 0 20%; max-width: 20%; } + .row-cols-6 > * { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .col-auto { flex: 0 0 auto; width: auto; max-width: 100%; } + .col-1 { - flex: 0 0 8.33333%; - max-width: 8.33333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } + .col-2 { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } + .col-3 { flex: 0 0 25%; max-width: 25%; } + .col-4 { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } + .col-5 { - flex: 0 0 41.66667%; - max-width: 41.66667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } + .col-6 { flex: 0 0 50%; max-width: 50%; } + .col-7 { - flex: 0 0 58.33333%; - max-width: 58.33333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } + .col-8 { - flex: 0 0 66.66667%; - max-width: 66.66667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } + .col-9 { flex: 0 0 75%; max-width: 75%; } + .col-10 { - flex: 0 0 83.33333%; - max-width: 83.33333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } + .col-11 { - flex: 0 0 91.66667%; - max-width: 91.66667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } + .col-12 { flex: 0 0 100%; max-width: 100%; } + .order-first { order: -1; } + .order-last { order: 13; } + .order-0 { order: 0; } + .order-1 { order: 1; } + .order-2 { order: 2; } + .order-3 { order: 3; } + .order-4 { order: 4; } + .order-5 { order: 5; } + .order-6 { order: 6; } + .order-7 { order: 7; } + .order-8 { order: 8; } + .order-9 { order: 9; } + .order-10 { order: 10; } + .order-11 { order: 11; } + .order-12 { order: 12; } + .offset-1 { - margin-left: 8.33333%; + margin-left: 8.33333333%; } + .offset-2 { - margin-left: 16.66667%; + margin-left: 16.66666667%; } + .offset-3 { margin-left: 25%; } + .offset-4 { - margin-left: 33.33333%; + margin-left: 33.33333333%; } + .offset-5 { - margin-left: 41.66667%; + margin-left: 41.66666667%; } + .offset-6 { margin-left: 50%; } + .offset-7 { - margin-left: 58.33333%; + margin-left: 58.33333333%; } + .offset-8 { - margin-left: 66.66667%; + margin-left: 66.66666667%; } + .offset-9 { margin-left: 75%; } + .offset-10 { - margin-left: 83.33333%; + margin-left: 83.33333333%; } + .offset-11 { - margin-left: 91.66667%; + margin-left: 91.66666667%; } + @media (min-width: 576px) { .col-sm { flex-basis: 0; flex-grow: 1; - min-width: 0; max-width: 100%; } .row-cols-sm-1 > * { @@ -809,8 +923,8 @@ pre code { max-width: 50%; } .row-cols-sm-3 > * { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } .row-cols-sm-4 > * { flex: 0 0 25%; @@ -821,8 +935,8 @@ pre code { max-width: 20%; } .row-cols-sm-6 > * { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } .col-sm-auto { flex: 0 0 auto; @@ -830,48 +944,48 @@ pre code { max-width: 100%; } .col-sm-1 { - flex: 0 0 8.33333%; - max-width: 8.33333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } .col-sm-2 { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .col-sm-4 { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } .col-sm-5 { - flex: 0 0 41.66667%; - max-width: 41.66667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .col-sm-7 { - flex: 0 0 58.33333%; - max-width: 58.33333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } .col-sm-8 { - flex: 0 0 66.66667%; - max-width: 66.66667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } .col-sm-9 { flex: 0 0 75%; max-width: 75%; } .col-sm-10 { - flex: 0 0 83.33333%; - max-width: 83.33333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } .col-sm-11 { - flex: 0 0 91.66667%; - max-width: 91.66667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } .col-sm-12 { flex: 0 0 100%; @@ -926,44 +1040,43 @@ pre code { margin-left: 0; } .offset-sm-1 { - margin-left: 8.33333%; + margin-left: 8.33333333%; } .offset-sm-2 { - margin-left: 16.66667%; + margin-left: 16.66666667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { - margin-left: 33.33333%; + margin-left: 33.33333333%; } .offset-sm-5 { - margin-left: 41.66667%; + margin-left: 41.66666667%; } .offset-sm-6 { margin-left: 50%; } .offset-sm-7 { - margin-left: 58.33333%; + margin-left: 58.33333333%; } .offset-sm-8 { - margin-left: 66.66667%; + margin-left: 66.66666667%; } .offset-sm-9 { margin-left: 75%; } .offset-sm-10 { - margin-left: 83.33333%; + margin-left: 83.33333333%; } .offset-sm-11 { - margin-left: 91.66667%; + margin-left: 91.66666667%; } } @media (min-width: 768px) { .col-md { flex-basis: 0; flex-grow: 1; - min-width: 0; max-width: 100%; } .row-cols-md-1 > * { @@ -975,8 +1088,8 @@ pre code { max-width: 50%; } .row-cols-md-3 > * { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } .row-cols-md-4 > * { flex: 0 0 25%; @@ -987,8 +1100,8 @@ pre code { max-width: 20%; } .row-cols-md-6 > * { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } .col-md-auto { flex: 0 0 auto; @@ -996,48 +1109,48 @@ pre code { max-width: 100%; } .col-md-1 { - flex: 0 0 8.33333%; - max-width: 8.33333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } .col-md-2 { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } .col-md-5 { - flex: 0 0 41.66667%; - max-width: 41.66667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-7 { - flex: 0 0 58.33333%; - max-width: 58.33333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } .col-md-8 { - flex: 0 0 66.66667%; - max-width: 66.66667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-10 { - flex: 0 0 83.33333%; - max-width: 83.33333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } .col-md-11 { - flex: 0 0 91.66667%; - max-width: 91.66667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } .col-md-12 { flex: 0 0 100%; @@ -1092,44 +1205,43 @@ pre code { margin-left: 0; } .offset-md-1 { - margin-left: 8.33333%; + margin-left: 8.33333333%; } .offset-md-2 { - margin-left: 16.66667%; + margin-left: 16.66666667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { - margin-left: 33.33333%; + margin-left: 33.33333333%; } .offset-md-5 { - margin-left: 41.66667%; + margin-left: 41.66666667%; } .offset-md-6 { margin-left: 50%; } .offset-md-7 { - margin-left: 58.33333%; + margin-left: 58.33333333%; } .offset-md-8 { - margin-left: 66.66667%; + margin-left: 66.66666667%; } .offset-md-9 { margin-left: 75%; } .offset-md-10 { - margin-left: 83.33333%; + margin-left: 83.33333333%; } .offset-md-11 { - margin-left: 91.66667%; + margin-left: 91.66666667%; } } @media (min-width: 992px) { .col-lg { flex-basis: 0; flex-grow: 1; - min-width: 0; max-width: 100%; } .row-cols-lg-1 > * { @@ -1141,8 +1253,8 @@ pre code { max-width: 50%; } .row-cols-lg-3 > * { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } .row-cols-lg-4 > * { flex: 0 0 25%; @@ -1153,8 +1265,8 @@ pre code { max-width: 20%; } .row-cols-lg-6 > * { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } .col-lg-auto { flex: 0 0 auto; @@ -1162,48 +1274,48 @@ pre code { max-width: 100%; } .col-lg-1 { - flex: 0 0 8.33333%; - max-width: 8.33333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } .col-lg-2 { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .col-lg-4 { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } .col-lg-5 { - flex: 0 0 41.66667%; - max-width: 41.66667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .col-lg-7 { - flex: 0 0 58.33333%; - max-width: 58.33333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } .col-lg-8 { - flex: 0 0 66.66667%; - max-width: 66.66667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } .col-lg-9 { flex: 0 0 75%; max-width: 75%; } .col-lg-10 { - flex: 0 0 83.33333%; - max-width: 83.33333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } .col-lg-11 { - flex: 0 0 91.66667%; - max-width: 91.66667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } .col-lg-12 { flex: 0 0 100%; @@ -1258,44 +1370,43 @@ pre code { margin-left: 0; } .offset-lg-1 { - margin-left: 8.33333%; + margin-left: 8.33333333%; } .offset-lg-2 { - margin-left: 16.66667%; + margin-left: 16.66666667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { - margin-left: 33.33333%; + margin-left: 33.33333333%; } .offset-lg-5 { - margin-left: 41.66667%; + margin-left: 41.66666667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { - margin-left: 58.33333%; + margin-left: 58.33333333%; } .offset-lg-8 { - margin-left: 66.66667%; + margin-left: 66.66666667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { - margin-left: 83.33333%; + margin-left: 83.33333333%; } .offset-lg-11 { - margin-left: 91.66667%; + margin-left: 91.66666667%; } } @media (min-width: 1200px) { .col-xl { flex-basis: 0; flex-grow: 1; - min-width: 0; max-width: 100%; } .row-cols-xl-1 > * { @@ -1307,8 +1418,8 @@ pre code { max-width: 50%; } .row-cols-xl-3 > * { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } .row-cols-xl-4 > * { flex: 0 0 25%; @@ -1319,8 +1430,8 @@ pre code { max-width: 20%; } .row-cols-xl-6 > * { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } .col-xl-auto { flex: 0 0 auto; @@ -1328,48 +1439,48 @@ pre code { max-width: 100%; } .col-xl-1 { - flex: 0 0 8.33333%; - max-width: 8.33333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } .col-xl-2 { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } .col-xl-3 { flex: 0 0 25%; max-width: 25%; } .col-xl-4 { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } .col-xl-5 { - flex: 0 0 41.66667%; - max-width: 41.66667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } .col-xl-6 { flex: 0 0 50%; max-width: 50%; } .col-xl-7 { - flex: 0 0 58.33333%; - max-width: 58.33333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } .col-xl-8 { - flex: 0 0 66.66667%; - max-width: 66.66667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } .col-xl-9 { flex: 0 0 75%; max-width: 75%; } .col-xl-10 { - flex: 0 0 83.33333%; - max-width: 83.33333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } .col-xl-11 { - flex: 0 0 91.66667%; - max-width: 91.66667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } .col-xl-12 { flex: 0 0 100%; @@ -1424,37 +1535,37 @@ pre code { margin-left: 0; } .offset-xl-1 { - margin-left: 8.33333%; + margin-left: 8.33333333%; } .offset-xl-2 { - margin-left: 16.66667%; + margin-left: 16.66666667%; } .offset-xl-3 { margin-left: 25%; } .offset-xl-4 { - margin-left: 33.33333%; + margin-left: 33.33333333%; } .offset-xl-5 { - margin-left: 41.66667%; + margin-left: 41.66666667%; } .offset-xl-6 { margin-left: 50%; } .offset-xl-7 { - margin-left: 58.33333%; + margin-left: 58.33333333%; } .offset-xl-8 { - margin-left: 66.66667%; + margin-left: 66.66666667%; } .offset-xl-9 { margin-left: 75%; } .offset-xl-10 { - margin-left: 83.33333%; + margin-left: 83.33333333%; } .offset-xl-11 { - margin-left: 91.66667%; + margin-left: 91.66666667%; } } .table { @@ -1462,8 +1573,8 @@ pre code { margin-bottom: 1rem; color: #495057; } -.table td, -.table th { +.table th, +.table td { padding: 0.75rem; vertical-align: top; border-top: 1px solid #495057; @@ -1475,63 +1586,72 @@ pre code { .table tbody + tbody { border-top: 2px solid #495057; } -.table-sm td, -.table-sm th { + +.table-sm th, +.table-sm td { padding: 0.3rem; } + .table-bordered { border: 1px solid #495057; } -.table-bordered td, -.table-bordered th { +.table-bordered th, +.table-bordered td { border: 1px solid #495057; } -.table-bordered thead td, -.table-bordered thead th { +.table-bordered thead th, +.table-bordered thead td { border-bottom-width: 2px; } -.table-borderless tbody + tbody, -.table-borderless td, + .table-borderless th, -.table-borderless thead th { +.table-borderless td, +.table-borderless thead th, +.table-borderless tbody + tbody { border: 0; } + .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(34, 34, 34, 0.05); } + .table-hover tbody tr:hover { color: #495057; background-color: rgba(34, 34, 34, 0.075); } + .table-primary, -.table-primary > td, -.table-primary > th { - background-color: #fbd4c0; +.table-primary > th, +.table-primary > td { + background-color: #f4cccc; } -.table-primary tbody + tbody, -.table-primary td, .table-primary th, -.table-primary thead th { - border-color: #f8ae8a; +.table-primary td, +.table-primary thead th, +.table-primary tbody + tbody { + border-color: #eba0a0; } + .table-hover .table-primary:hover { - background-color: #f9c4a8; + background-color: #efb7b7; } .table-hover .table-primary:hover > td, .table-hover .table-primary:hover > th { - background-color: #f9c4a8; + background-color: #efb7b7; } + .table-secondary, -.table-secondary > td, -.table-secondary > th { +.table-secondary > th, +.table-secondary > td { background-color: #b8f0cf; } -.table-secondary tbody + tbody, -.table-secondary td, .table-secondary th, -.table-secondary thead th { +.table-secondary td, +.table-secondary thead th, +.table-secondary tbody + tbody { border-color: #7ae2a6; } + .table-hover .table-secondary:hover { background-color: #a3ecc1; } @@ -1539,17 +1659,19 @@ pre code { .table-hover .table-secondary:hover > th { background-color: #a3ecc1; } + .table-success, -.table-success > td, -.table-success > th { +.table-success > th, +.table-success > td { background-color: #d4bcfb; } -.table-success tbody + tbody, -.table-success td, .table-success th, -.table-success thead th { +.table-success td, +.table-success thead th, +.table-success tbody + tbody { border-color: #af83f8; } + .table-hover .table-success:hover { background-color: #c5a4fa; } @@ -1557,17 +1679,19 @@ pre code { .table-hover .table-success:hover > th { background-color: #c5a4fa; } + .table-info, -.table-info > td, -.table-info > th { +.table-info > th, +.table-info > td { background-color: #b8daff; } -.table-info tbody + tbody, -.table-info td, .table-info th, -.table-info thead th { +.table-info td, +.table-info thead th, +.table-info tbody + tbody { border-color: #7abaff; } + .table-hover .table-info:hover { background-color: #9fcdff; } @@ -1575,17 +1699,19 @@ pre code { .table-hover .table-info:hover > th { background-color: #9fcdff; } + .table-warning, -.table-warning > td, -.table-warning > th { +.table-warning > th, +.table-warning > td { background-color: #ffeeba; } -.table-warning tbody + tbody, -.table-warning td, .table-warning th, -.table-warning thead th { +.table-warning td, +.table-warning thead th, +.table-warning tbody + tbody { border-color: #ffdf7e; } + .table-hover .table-warning:hover { background-color: #ffe8a1; } @@ -1593,35 +1719,39 @@ pre code { .table-hover .table-warning:hover > th { background-color: #ffe8a1; } + .table-danger, -.table-danger > td, -.table-danger > th { - background-color: #ddc6ba; +.table-danger > th, +.table-danger > td { + background-color: #dec0c0; } -.table-danger tbody + tbody, -.table-danger td, .table-danger th, -.table-danger thead th { - border-color: #c1957f; +.table-danger td, +.table-danger thead th, +.table-danger tbody + tbody { + border-color: #c28989; } + .table-hover .table-danger:hover { - background-color: #d5b8a9; + background-color: #d5afaf; } .table-hover .table-danger:hover > td, .table-hover .table-danger:hover > th { - background-color: #d5b8a9; + background-color: #d5afaf; } + .table-light, -.table-light > td, -.table-light > th { +.table-light > th, +.table-light > td { background-color: #fdfdfe; } -.table-light tbody + tbody, -.table-light td, .table-light th, -.table-light thead th { +.table-light td, +.table-light thead th, +.table-light tbody + tbody { border-color: #fbfcfc; } + .table-hover .table-light:hover { background-color: #ececf6; } @@ -1629,17 +1759,19 @@ pre code { .table-hover .table-light:hover > th { background-color: #ececf6; } + .table-dark, -.table-dark > td, -.table-dark > th { +.table-dark > th, +.table-dark > td { background-color: #c6c8ca; } -.table-dark tbody + tbody, -.table-dark td, .table-dark th, -.table-dark thead th { +.table-dark td, +.table-dark thead th, +.table-dark tbody + tbody { border-color: #95999c; } + .table-hover .table-dark:hover { background-color: #b9bbbe; } @@ -1647,11 +1779,13 @@ pre code { .table-hover .table-dark:hover > th { background-color: #b9bbbe; } + .table-active, -.table-active > td, -.table-active > th { +.table-active > th, +.table-active > td { background-color: rgba(34, 34, 34, 0.075); } + .table-hover .table-active:hover { background-color: rgba(21, 21, 21, 0.075); } @@ -1659,8 +1793,9 @@ pre code { .table-hover .table-active:hover > th { background-color: rgba(21, 21, 21, 0.075); } + .table .thead-dark th { - color: #fff; + color: #ffffff; background-color: #343a40; border-color: #454d55; } @@ -1669,12 +1804,13 @@ pre code { background-color: #e9ecef; border-color: #495057; } + .table-dark { - color: #fff; + color: #ffffff; background-color: #343a40; } -.table-dark td, .table-dark th, +.table-dark td, .table-dark thead th { border-color: #454d55; } @@ -1685,9 +1821,10 @@ pre code { background-color: rgba(255, 255, 255, 0.05); } .table-dark.table-hover tbody tr:hover { - color: #fff; + color: #ffffff; background-color: rgba(255, 255, 255, 0.075); } + @media (max-width: 575.98px) { .table-responsive-sm { display: block; @@ -1741,6 +1878,7 @@ pre code { .table-responsive > .table-bordered { border: 0; } + .form-control { display: block; width: 100%; @@ -1750,7 +1888,7 @@ pre code { font-weight: 400; line-height: 1.5; color: #495057; - background-color: #fff; + background-color: #ffffff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.5rem; @@ -1765,16 +1903,12 @@ pre code { background-color: transparent; border: 0; } -.form-control:-moz-focusring { - color: transparent; - text-shadow: 0 0 0 #495057; -} .form-control:focus { color: #495057; - background-color: #fff; - border-color: #f89696; + background-color: #ffffff; + border-color: #eeb1b1; outline: 0; - box-shadow: 0 0 0 0.2rem rgba(241, 30, 30, 0.75); + box-shadow: 0 0 0 0.2rem rgba(216, 72, 72, 0.75); } .form-control::placeholder { color: #6c757d; @@ -1785,21 +1919,29 @@ pre code { background-color: #e9ecef; opacity: 1; } + input[type="date"].form-control, +input[type="time"].form-control, input[type="datetime-local"].form-control, -input[type="month"].form-control, -input[type="time"].form-control { +input[type="month"].form-control { appearance: none; } + +select.form-control:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #495057; +} select.form-control:focus::-ms-value { color: #495057; - background-color: #fff; + background-color: #ffffff; } + .form-control-file, .form-control-range { display: block; width: 100%; } + .col-form-label { padding-top: calc(0.375rem + 1px); padding-bottom: calc(0.375rem + 1px); @@ -1807,18 +1949,21 @@ select.form-control:focus::-ms-value { font-size: inherit; line-height: 1.5; } + .col-form-label-lg { padding-top: calc(0.5rem + 1px); padding-bottom: calc(0.5rem + 1px); font-size: 1.25rem; line-height: 1.5; } + .col-form-label-sm { padding-top: calc(0.25rem + 1px); padding-bottom: calc(0.25rem + 1px); font-size: 0.875rem; line-height: 1.5; } + .form-control-plaintext { display: block; width: 100%; @@ -1831,11 +1976,12 @@ select.form-control:focus::-ms-value { border: solid transparent; border-width: 1px 0; } -.form-control-plaintext.form-control-lg, -.form-control-plaintext.form-control-sm { +.form-control-plaintext.form-control-sm, +.form-control-plaintext.form-control-lg { padding-right: 0; padding-left: 0; } + .form-control-sm { height: calc(1.5em + 0.5rem + 2px); padding: 0.25rem 0.5rem; @@ -1843,6 +1989,7 @@ select.form-control:focus::-ms-value { line-height: 1.5; border-radius: 1rem; } + .form-control-lg { height: calc(1.5em + 1rem + 2px); padding: 0.5rem 1rem; @@ -1850,20 +1997,25 @@ select.form-control:focus::-ms-value { line-height: 1.5; border-radius: 0.5rem; } -select.form-control[multiple], -select.form-control[size] { + +select.form-control[size], +select.form-control[multiple] { height: auto; } + textarea.form-control { height: auto; } + .form-group { margin-bottom: 1rem; } + .form-text { display: block; margin-top: 0.25rem; } + .form-row { display: flex; flex-wrap: wrap; @@ -1875,23 +2027,27 @@ textarea.form-control { padding-right: 5px; padding-left: 5px; } + .form-check { position: relative; display: block; padding-left: 1.25rem; } + .form-check-input { position: absolute; margin-top: 0.3rem; margin-left: -1.25rem; } -.form-check-input:disabled ~ .form-check-label, -.form-check-input[disabled] ~ .form-check-label { +.form-check-input[disabled] ~ .form-check-label, +.form-check-input:disabled ~ .form-check-label { color: #6c757d; } + .form-check-label { margin-bottom: 0; } + .form-check-inline { display: inline-flex; align-items: center; @@ -1904,16 +2060,19 @@ textarea.form-control { margin-right: 0.3125rem; margin-left: 0; } + .valid-feedback { display: none; width: 100%; margin-top: 0.25rem; - font-size: 80%; - color: #007bff; + font-size: 0.875em; + color: #02bdc2; } + .valid-tooltip { position: absolute; top: 100%; + left: 0; z-index: 5; display: none; max-width: 100%; @@ -1921,108 +2080,129 @@ textarea.form-control { margin-top: 0.1rem; font-size: 0.875rem; line-height: 1.5; - color: #fff; - background-color: rgba(0, 123, 255, 0.9); + color: #ffffff; + background-color: rgba(2, 189, 194, 0.9); border-radius: 0.5rem; } -.is-valid ~ .valid-feedback, -.is-valid ~ .valid-tooltip, +.form-row > .col > .valid-tooltip, +.form-row > [class*="col-"] > .valid-tooltip { + left: 5px; +} + .was-validated :valid ~ .valid-feedback, -.was-validated :valid ~ .valid-tooltip { +.was-validated :valid ~ .valid-tooltip, +.is-valid ~ .valid-feedback, +.is-valid ~ .valid-tooltip { display: block; } -.form-control.is-valid, -.was-validated .form-control:valid { - border-color: #007bff; - padding-right: calc(1.5em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23007bff' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); + +.was-validated .form-control:valid, +.form-control.is-valid { + border-color: #02bdc2; + padding-right: calc(1.5em + 0.75rem) !important; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2302bdc2' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } -.form-control.is-valid:focus, -.was-validated .form-control:valid:focus { - border-color: #007bff; - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +.was-validated .form-control:valid:focus, +.form-control.is-valid:focus { + border-color: #02bdc2; + box-shadow: 0 0 0 0.2rem rgba(2, 189, 194, 0.25); } + +.was-validated select.form-control:valid, +select.form-control.is-valid { + padding-right: 3rem !important; + background-position: right 1.5rem center; +} + .was-validated textarea.form-control:valid, textarea.form-control.is-valid { padding-right: calc(1.5em + 0.75rem); background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); } -.custom-select.is-valid, -.was-validated .custom-select:valid { - border-color: #007bff; - padding-right: calc(0.75em + 2.3125rem); + +.was-validated .custom-select:valid, +.custom-select.is-valid { + border-color: #02bdc2; + padding-right: calc(0.75em + 2.3125rem) !important; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") - no-repeat right 0.75rem center/8px 10px, - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23007bff' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") - #fff no-repeat center right 1.75rem / calc(0.75em + 0.375rem) - calc(0.75em + 0.375rem); + right 0.75rem center/8px 10px no-repeat, + #ffffff + url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2302bdc2' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") + center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) + no-repeat; } -.custom-select.is-valid:focus, -.was-validated .custom-select:valid:focus { - border-color: #007bff; - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +.was-validated .custom-select:valid:focus, +.custom-select.is-valid:focus { + border-color: #02bdc2; + box-shadow: 0 0 0 0.2rem rgba(2, 189, 194, 0.25); } -.form-check-input.is-valid ~ .form-check-label, -.was-validated .form-check-input:valid ~ .form-check-label { - color: #007bff; + +.was-validated .form-check-input:valid ~ .form-check-label, +.form-check-input.is-valid ~ .form-check-label { + color: #02bdc2; } -.form-check-input.is-valid ~ .valid-feedback, -.form-check-input.is-valid ~ .valid-tooltip, .was-validated .form-check-input:valid ~ .valid-feedback, -.was-validated .form-check-input:valid ~ .valid-tooltip { +.was-validated .form-check-input:valid ~ .valid-tooltip, +.form-check-input.is-valid ~ .valid-feedback, +.form-check-input.is-valid ~ .valid-tooltip { display: block; } -.custom-control-input.is-valid ~ .custom-control-label, -.was-validated .custom-control-input:valid ~ .custom-control-label { - color: #007bff; + +.was-validated .custom-control-input:valid ~ .custom-control-label, +.custom-control-input.is-valid ~ .custom-control-label { + color: #02bdc2; } -.custom-control-input.is-valid ~ .custom-control-label::before, -.was-validated .custom-control-input:valid ~ .custom-control-label::before { - border-color: #007bff; +.was-validated .custom-control-input:valid ~ .custom-control-label::before, +.custom-control-input.is-valid ~ .custom-control-label::before { + border-color: #02bdc2; } -.custom-control-input.is-valid:checked ~ .custom-control-label::before, .was-validated .custom-control-input:valid:checked - ~ .custom-control-label::before { - border-color: #3395ff; - background-color: #3395ff; + ~ .custom-control-label::before, +.custom-control-input.is-valid:checked ~ .custom-control-label::before { + border-color: #03eef4; + background-color: #03eef4; } -.custom-control-input.is-valid:focus ~ .custom-control-label::before, .was-validated .custom-control-input:valid:focus - ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); -} -.custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before, +.custom-control-input.is-valid:focus ~ .custom-control-label::before { + box-shadow: 0 0 0 0.2rem rgba(2, 189, 194, 0.25); +} .was-validated .custom-control-input:valid:focus:not(:checked) + ~ .custom-control-label::before, +.custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before { - border-color: #007bff; + border-color: #02bdc2; } -.custom-file-input.is-valid ~ .custom-file-label, -.was-validated .custom-file-input:valid ~ .custom-file-label { - border-color: #007bff; + +.was-validated .custom-file-input:valid ~ .custom-file-label, +.custom-file-input.is-valid ~ .custom-file-label { + border-color: #02bdc2; } -.custom-file-input.is-valid:focus ~ .custom-file-label, -.was-validated .custom-file-input:valid:focus ~ .custom-file-label { - border-color: #007bff; - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +.was-validated .custom-file-input:valid:focus ~ .custom-file-label, +.custom-file-input.is-valid:focus ~ .custom-file-label { + border-color: #02bdc2; + box-shadow: 0 0 0 0.2rem rgba(2, 189, 194, 0.25); } + .invalid-feedback { display: none; width: 100%; margin-top: 0.25rem; - font-size: 80%; - color: #873208; + font-size: 0.875em; + color: #891d1d; } + .invalid-tooltip { position: absolute; top: 100%; + left: 0; z-index: 5; display: none; max-width: 100%; @@ -2030,98 +2210,117 @@ textarea.form-control.is-valid { margin-top: 0.1rem; font-size: 0.875rem; line-height: 1.5; - color: #fff; - background-color: rgba(135, 50, 8, 0.9); + color: #ffffff; + background-color: rgba(137, 29, 29, 0.9); border-radius: 0.5rem; } -.is-invalid ~ .invalid-feedback, -.is-invalid ~ .invalid-tooltip, +.form-row > .col > .invalid-tooltip, +.form-row > [class*="col-"] > .invalid-tooltip { + left: 5px; +} + .was-validated :invalid ~ .invalid-feedback, -.was-validated :invalid ~ .invalid-tooltip { +.was-validated :invalid ~ .invalid-tooltip, +.is-invalid ~ .invalid-feedback, +.is-invalid ~ .invalid-tooltip { display: block; } -.form-control.is-invalid, -.was-validated .form-control:invalid { - border-color: #873208; - padding-right: calc(1.5em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23873208' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23873208' stroke='none'/%3e%3c/svg%3e"); + +.was-validated .form-control:invalid, +.form-control.is-invalid { + border-color: #891d1d; + padding-right: calc(1.5em + 0.75rem) !important; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23891d1d' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23891d1d' stroke='none'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } -.form-control.is-invalid:focus, -.was-validated .form-control:invalid:focus { - border-color: #873208; - box-shadow: 0 0 0 0.2rem rgba(135, 50, 8, 0.25); +.was-validated .form-control:invalid:focus, +.form-control.is-invalid:focus { + border-color: #891d1d; + box-shadow: 0 0 0 0.2rem rgba(137, 29, 29, 0.25); } + +.was-validated select.form-control:invalid, +select.form-control.is-invalid { + padding-right: 3rem !important; + background-position: right 1.5rem center; +} + .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { padding-right: calc(1.5em + 0.75rem); background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); } -.custom-select.is-invalid, -.was-validated .custom-select:invalid { - border-color: #873208; - padding-right: calc(0.75em + 2.3125rem); + +.was-validated .custom-select:invalid, +.custom-select.is-invalid { + border-color: #891d1d; + padding-right: calc(0.75em + 2.3125rem) !important; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") - no-repeat right 0.75rem center/8px 10px, - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23873208' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23873208' stroke='none'/%3e%3c/svg%3e") - #fff no-repeat center right 1.75rem / calc(0.75em + 0.375rem) - calc(0.75em + 0.375rem); + right 0.75rem center/8px 10px no-repeat, + #ffffff + url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23891d1d' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23891d1d' stroke='none'/%3e%3c/svg%3e") + center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) + no-repeat; } -.custom-select.is-invalid:focus, -.was-validated .custom-select:invalid:focus { - border-color: #873208; - box-shadow: 0 0 0 0.2rem rgba(135, 50, 8, 0.25); +.was-validated .custom-select:invalid:focus, +.custom-select.is-invalid:focus { + border-color: #891d1d; + box-shadow: 0 0 0 0.2rem rgba(137, 29, 29, 0.25); } -.form-check-input.is-invalid ~ .form-check-label, -.was-validated .form-check-input:invalid ~ .form-check-label { - color: #873208; + +.was-validated .form-check-input:invalid ~ .form-check-label, +.form-check-input.is-invalid ~ .form-check-label { + color: #891d1d; } -.form-check-input.is-invalid ~ .invalid-feedback, -.form-check-input.is-invalid ~ .invalid-tooltip, .was-validated .form-check-input:invalid ~ .invalid-feedback, -.was-validated .form-check-input:invalid ~ .invalid-tooltip { +.was-validated .form-check-input:invalid ~ .invalid-tooltip, +.form-check-input.is-invalid ~ .invalid-feedback, +.form-check-input.is-invalid ~ .invalid-tooltip { display: block; } -.custom-control-input.is-invalid ~ .custom-control-label, -.was-validated .custom-control-input:invalid ~ .custom-control-label { - color: #873208; + +.was-validated .custom-control-input:invalid ~ .custom-control-label, +.custom-control-input.is-invalid ~ .custom-control-label { + color: #891d1d; } -.custom-control-input.is-invalid ~ .custom-control-label::before, -.was-validated .custom-control-input:invalid ~ .custom-control-label::before { - border-color: #873208; +.was-validated .custom-control-input:invalid ~ .custom-control-label::before, +.custom-control-input.is-invalid ~ .custom-control-label::before { + border-color: #891d1d; } -.custom-control-input.is-invalid:checked ~ .custom-control-label::before, .was-validated .custom-control-input:invalid:checked - ~ .custom-control-label::before { - border-color: #b7440b; - background-color: #b7440b; + ~ .custom-control-label::before, +.custom-control-input.is-invalid:checked ~ .custom-control-label::before { + border-color: #b32626; + background-color: #b32626; } -.custom-control-input.is-invalid:focus ~ .custom-control-label::before, .was-validated .custom-control-input:invalid:focus - ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(135, 50, 8, 0.25); -} -.custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before, +.custom-control-input.is-invalid:focus ~ .custom-control-label::before { + box-shadow: 0 0 0 0.2rem rgba(137, 29, 29, 0.25); +} .was-validated .custom-control-input:invalid:focus:not(:checked) + ~ .custom-control-label::before, +.custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before { - border-color: #873208; + border-color: #891d1d; } -.custom-file-input.is-invalid ~ .custom-file-label, -.was-validated .custom-file-input:invalid ~ .custom-file-label { - border-color: #873208; + +.was-validated .custom-file-input:invalid ~ .custom-file-label, +.custom-file-input.is-invalid ~ .custom-file-label { + border-color: #891d1d; } -.custom-file-input.is-invalid:focus ~ .custom-file-label, -.was-validated .custom-file-input:invalid:focus ~ .custom-file-label { - border-color: #873208; - box-shadow: 0 0 0 0.2rem rgba(135, 50, 8, 0.25); +.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, +.custom-file-input.is-invalid:focus ~ .custom-file-label { + border-color: #891d1d; + box-shadow: 0 0 0 0.2rem rgba(137, 29, 29, 0.25); } + .form-inline { display: flex; flex-flow: row wrap; @@ -2152,8 +2351,8 @@ textarea.form-control.is-invalid { .form-inline .form-control-plaintext { display: inline-block; } - .form-inline .custom-select, - .form-inline .input-group { + .form-inline .input-group, + .form-inline .custom-select { width: auto; } .form-inline .form-check { @@ -2178,6 +2377,7 @@ textarea.form-control.is-invalid { margin-bottom: 0; } } + .btn { display: inline-block; font-weight: 400; @@ -2203,10 +2403,10 @@ textarea.form-control.is-invalid { color: #495057; text-decoration: none; } -.btn.focus, -.btn:focus { +.btn:focus, +.btn.focus { outline: 0; - box-shadow: 0 0 0 0.2rem rgba(241, 30, 30, 0.75); + box-shadow: 0 0 0 0.2rem rgba(216, 72, 72, 0.75); } .btn.disabled, .btn:disabled { @@ -2219,146 +2419,151 @@ a.btn.disabled, fieldset:disabled a.btn { pointer-events: none; } + .btn-primary { - color: #fff; - background-color: #f1641e; - border-color: #f1641e; + color: #ffffff; + background-color: #d84848; + border-color: #d84848; } .btn-primary:hover { - color: #fff; - background-color: #db520e; - border-color: #cf4d0d; + color: #ffffff; + background-color: #ce2c2c; + border-color: #c32a2a; } -.btn-primary.focus, -.btn-primary:focus { - color: #fff; - background-color: #db520e; - border-color: #cf4d0d; - box-shadow: 0 0 0 0.2rem rgba(243, 123, 64, 0.5); +.btn-primary:focus, +.btn-primary.focus { + color: #ffffff; + background-color: #ce2c2c; + border-color: #c32a2a; + box-shadow: 0 0 0 0.2rem rgba(222, 99, 99, 0.5); } .btn-primary.disabled, .btn-primary:disabled { - color: #fff; - background-color: #f1641e; - border-color: #f1641e; + color: #ffffff; + background-color: #d84848; + border-color: #d84848; } -.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, +.btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { - color: #fff; - background-color: #cf4d0d; - border-color: #c3490c; + color: #ffffff; + background-color: #c32a2a; + border-color: #b92727; } -.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, +.btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(243, 123, 64, 0.5); + box-shadow: 0 0 0 0.2rem rgba(222, 99, 99, 0.5); } + .btn-secondary { - color: #fff; - background-color: #c80000; - border-color: #c80000; + color: #ffffff; + background-color: #00c853; + border-color: #00c853; } .btn-secondary:hover { - color: #fff; - background-color: #a20000; - border-color: #950000; + color: #ffffff; + background-color: #00a243; + border-color: #00953e; } -.btn-secondary.focus, -.btn-secondary:focus { - color: #fff; +.btn-secondary:focus, +.btn-secondary.focus { + color: #ffffff; background-color: #00a243; border-color: #00953e; box-shadow: 0 0 0 0.2rem rgba(38, 208, 109, 0.5); } .btn-secondary.disabled, .btn-secondary:disabled { - color: #fff; - background-color: #c80000; - border-color: #c80000; + color: #ffffff; + background-color: #00c853; + border-color: #00c853; } -.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, +.btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { - color: #fff; + color: #ffffff; background-color: #00953e; border-color: #008839; } -.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, +.btn-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(38, 208, 109, 0.5); } + .btn-success { - color: #fff; + color: #ffffff; background-color: #6610f2; border-color: #6610f2; } .btn-success:hover { - color: #fff; + color: #ffffff; background-color: #560bd0; border-color: #510bc4; } -.btn-success.focus, -.btn-success:focus { - color: #fff; +.btn-success:focus, +.btn-success.focus { + color: #ffffff; background-color: #560bd0; border-color: #510bc4; box-shadow: 0 0 0 0.2rem rgba(125, 52, 244, 0.5); } .btn-success.disabled, .btn-success:disabled { - color: #fff; + color: #ffffff; background-color: #6610f2; border-color: #6610f2; } -.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, +.btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle { - color: #fff; + color: #ffffff; background-color: #510bc4; border-color: #4c0ab8; } -.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, +.btn-success:not(:disabled):not(.disabled).active:focus, .show > .btn-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(125, 52, 244, 0.5); } + .btn-info { - color: #fff; + color: #ffffff; background-color: #007bff; border-color: #007bff; } .btn-info:hover { - color: #fff; + color: #ffffff; background-color: #0069d9; border-color: #0062cc; } -.btn-info.focus, -.btn-info:focus { - color: #fff; +.btn-info:focus, +.btn-info.focus { + color: #ffffff; background-color: #0069d9; border-color: #0062cc; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } .btn-info.disabled, .btn-info:disabled { - color: #fff; + color: #ffffff; background-color: #007bff; border-color: #007bff; } -.btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, +.btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle { - color: #fff; + color: #ffffff; background-color: #0062cc; border-color: #005cbf; } -.btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus, +.btn-info:not(:disabled):not(.disabled).active:focus, .show > .btn-info.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .btn-warning { color: #212529; background-color: #ffc107; @@ -2369,8 +2574,8 @@ fieldset:disabled a.btn { background-color: #e0a800; border-color: #d39e00; } -.btn-warning.focus, -.btn-warning:focus { +.btn-warning:focus, +.btn-warning.focus { color: #212529; background-color: #e0a800; border-color: #d39e00; @@ -2382,53 +2587,55 @@ fieldset:disabled a.btn { background-color: #ffc107; border-color: #ffc107; } -.btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, +.btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle { color: #212529; background-color: #d39e00; border-color: #c69500; } -.btn-warning:not(:disabled):not(.disabled).active:focus, .btn-warning:not(:disabled):not(.disabled):active:focus, +.btn-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-warning.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); } + .btn-danger { - color: #fff; - background-color: #873208; - border-color: #873208; + color: #ffffff; + background-color: #891d1d; + border-color: #891d1d; } .btn-danger:hover { - color: #fff; - background-color: #632506; - border-color: #572105; + color: #ffffff; + background-color: #691616; + border-color: #5e1414; } -.btn-danger.focus, -.btn-danger:focus { - color: #fff; - background-color: #632506; - border-color: #572105; - box-shadow: 0 0 0 0.2rem rgba(153, 81, 45, 0.5); +.btn-danger:focus, +.btn-danger.focus { + color: #ffffff; + background-color: #691616; + border-color: #5e1414; + box-shadow: 0 0 0 0.2rem rgba(155, 63, 63, 0.5); } .btn-danger.disabled, .btn-danger:disabled { - color: #fff; - background-color: #873208; - border-color: #873208; + color: #ffffff; + background-color: #891d1d; + border-color: #891d1d; } -.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, +.btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle { - color: #fff; - background-color: #572105; - border-color: #4b1c05; + color: #ffffff; + background-color: #5e1414; + border-color: #541212; } -.btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus, +.btn-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-danger.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(153, 81, 45, 0.5); + box-shadow: 0 0 0 0.2rem rgba(155, 63, 63, 0.5); } + .btn-light { color: #212529; background-color: #f8f9fa; @@ -2439,8 +2646,8 @@ fieldset:disabled a.btn { background-color: #e2e6ea; border-color: #dae0e5; } -.btn-light.focus, -.btn-light:focus { +.btn-light:focus, +.btn-light.focus { color: #212529; background-color: #e2e6ea; border-color: #dae0e5; @@ -2452,124 +2659,128 @@ fieldset:disabled a.btn { background-color: #f8f9fa; border-color: #f8f9fa; } -.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, +.btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle { color: #212529; background-color: #dae0e5; border-color: #d3d9df; } -.btn-light:not(:disabled):not(.disabled).active:focus, .btn-light:not(:disabled):not(.disabled):active:focus, +.btn-light:not(:disabled):not(.disabled).active:focus, .show > .btn-light.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5); } + .btn-dark { - color: #fff; + color: #ffffff; background-color: #343a40; border-color: #343a40; } .btn-dark:hover { - color: #fff; + color: #ffffff; background-color: #23272b; border-color: #1d2124; } -.btn-dark.focus, -.btn-dark:focus { - color: #fff; +.btn-dark:focus, +.btn-dark.focus { + color: #ffffff; background-color: #23272b; border-color: #1d2124; box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5); } .btn-dark.disabled, .btn-dark:disabled { - color: #fff; + color: #ffffff; background-color: #343a40; border-color: #343a40; } -.btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active, +.btn-dark:not(:disabled):not(.disabled).active, .show > .btn-dark.dropdown-toggle { - color: #fff; + color: #ffffff; background-color: #1d2124; border-color: #171a1d; } -.btn-dark:not(:disabled):not(.disabled).active:focus, .btn-dark:not(:disabled):not(.disabled):active:focus, +.btn-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5); } + .btn-outline-primary { - color: #f1641e; - border-color: #f1641e; + color: #d84848; + border-color: #d84848; } .btn-outline-primary:hover { - color: #fff; - background-color: #f1641e; - border-color: #f1641e; + color: #ffffff; + background-color: #d84848; + border-color: #d84848; } -.btn-outline-primary.focus, -.btn-outline-primary:focus { - box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.5); +.btn-outline-primary:focus, +.btn-outline-primary.focus { + box-shadow: 0 0 0 0.2rem rgba(216, 72, 72, 0.5); } .btn-outline-primary.disabled, .btn-outline-primary:disabled { - color: #f1641e; + color: #d84848; background-color: transparent; } -.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, +.btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle { - color: #fff; - background-color: #f1641e; - border-color: #f1641e; + color: #ffffff; + background-color: #d84848; + border-color: #d84848; } -.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, +.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.5); + box-shadow: 0 0 0 0.2rem rgba(216, 72, 72, 0.5); } + .btn-outline-secondary { - color: #c80000; - border-color: #c80000; + color: #00c853; + border-color: #00c853; } .btn-outline-secondary:hover { - color: #fff; - background-color: #c80000; - border-color: #c80000; + color: #ffffff; + background-color: #00c853; + border-color: #00c853; } -.btn-outline-secondary.focus, -.btn-outline-secondary:focus { +.btn-outline-secondary:focus, +.btn-outline-secondary.focus { box-shadow: 0 0 0 0.2rem rgba(0, 200, 83, 0.5); } .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { - color: #c80000; + color: #00c853; background-color: transparent; } -.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, +.btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle { - color: #fff; - background-color: #c80000; - border-color: #c80000; + color: #ffffff; + background-color: #00c853; + border-color: #00c853; } -.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, +.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(0, 200, 83, 0.5); } + .btn-outline-success { color: #6610f2; border-color: #6610f2; } .btn-outline-success:hover { - color: #fff; + color: #ffffff; background-color: #6610f2; border-color: #6610f2; } -.btn-outline-success.focus, -.btn-outline-success:focus { +.btn-outline-success:focus, +.btn-outline-success.focus { box-shadow: 0 0 0 0.2rem rgba(102, 16, 242, 0.5); } .btn-outline-success.disabled, @@ -2577,29 +2788,30 @@ fieldset:disabled a.btn { color: #6610f2; background-color: transparent; } -.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active, +.btn-outline-success:not(:disabled):not(.disabled).active, .show > .btn-outline-success.dropdown-toggle { - color: #fff; + color: #ffffff; background-color: #6610f2; border-color: #6610f2; } -.btn-outline-success:not(:disabled):not(.disabled).active:focus, .btn-outline-success:not(:disabled):not(.disabled):active:focus, +.btn-outline-success:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(102, 16, 242, 0.5); } + .btn-outline-info { color: #007bff; border-color: #007bff; } .btn-outline-info:hover { - color: #fff; + color: #ffffff; background-color: #007bff; border-color: #007bff; } -.btn-outline-info.focus, -.btn-outline-info:focus { +.btn-outline-info:focus, +.btn-outline-info.focus { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); } .btn-outline-info.disabled, @@ -2607,18 +2819,19 @@ fieldset:disabled a.btn { color: #007bff; background-color: transparent; } -.btn-outline-info:not(:disabled):not(.disabled).active, .btn-outline-info:not(:disabled):not(.disabled):active, +.btn-outline-info:not(:disabled):not(.disabled).active, .show > .btn-outline-info.dropdown-toggle { - color: #fff; + color: #ffffff; background-color: #007bff; border-color: #007bff; } -.btn-outline-info:not(:disabled):not(.disabled).active:focus, .btn-outline-info:not(:disabled):not(.disabled):active:focus, +.btn-outline-info:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-info.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); } + .btn-outline-warning { color: #ffc107; border-color: #ffc107; @@ -2628,8 +2841,8 @@ fieldset:disabled a.btn { background-color: #ffc107; border-color: #ffc107; } -.btn-outline-warning.focus, -.btn-outline-warning:focus { +.btn-outline-warning:focus, +.btn-outline-warning.focus { box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); } .btn-outline-warning.disabled, @@ -2637,48 +2850,50 @@ fieldset:disabled a.btn { color: #ffc107; background-color: transparent; } -.btn-outline-warning:not(:disabled):not(.disabled).active, .btn-outline-warning:not(:disabled):not(.disabled):active, +.btn-outline-warning:not(:disabled):not(.disabled).active, .show > .btn-outline-warning.dropdown-toggle { color: #212529; background-color: #ffc107; border-color: #ffc107; } -.btn-outline-warning:not(:disabled):not(.disabled).active:focus, .btn-outline-warning:not(:disabled):not(.disabled):active:focus, +.btn-outline-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-warning.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); } + .btn-outline-danger { - color: #873208; - border-color: #873208; + color: #891d1d; + border-color: #891d1d; } .btn-outline-danger:hover { - color: #fff; - background-color: #873208; - border-color: #873208; + color: #ffffff; + background-color: #891d1d; + border-color: #891d1d; } -.btn-outline-danger.focus, -.btn-outline-danger:focus { - box-shadow: 0 0 0 0.2rem rgba(135, 50, 8, 0.5); +.btn-outline-danger:focus, +.btn-outline-danger.focus { + box-shadow: 0 0 0 0.2rem rgba(137, 29, 29, 0.5); } .btn-outline-danger.disabled, .btn-outline-danger:disabled { - color: #873208; + color: #891d1d; background-color: transparent; } -.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active, +.btn-outline-danger:not(:disabled):not(.disabled).active, .show > .btn-outline-danger.dropdown-toggle { - color: #fff; - background-color: #873208; - border-color: #873208; + color: #ffffff; + background-color: #891d1d; + border-color: #891d1d; } -.btn-outline-danger:not(:disabled):not(.disabled).active:focus, .btn-outline-danger:not(:disabled):not(.disabled):active:focus, +.btn-outline-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-danger.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(135, 50, 8, 0.5); + box-shadow: 0 0 0 0.2rem rgba(137, 29, 29, 0.5); } + .btn-outline-light { color: #f8f9fa; border-color: #f8f9fa; @@ -2688,8 +2903,8 @@ fieldset:disabled a.btn { background-color: #f8f9fa; border-color: #f8f9fa; } -.btn-outline-light.focus, -.btn-outline-light:focus { +.btn-outline-light:focus, +.btn-outline-light.focus { box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); } .btn-outline-light.disabled, @@ -2697,29 +2912,30 @@ fieldset:disabled a.btn { color: #f8f9fa; background-color: transparent; } -.btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active, +.btn-outline-light:not(:disabled):not(.disabled).active, .show > .btn-outline-light.dropdown-toggle { color: #212529; background-color: #f8f9fa; border-color: #f8f9fa; } -.btn-outline-light:not(:disabled):not(.disabled).active:focus, .btn-outline-light:not(:disabled):not(.disabled):active:focus, +.btn-outline-light:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-light.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); } + .btn-outline-dark { color: #343a40; border-color: #343a40; } .btn-outline-dark:hover { - color: #fff; + color: #ffffff; background-color: #343a40; border-color: #343a40; } -.btn-outline-dark.focus, -.btn-outline-dark:focus { +.btn-outline-dark:focus, +.btn-outline-dark.focus { box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); } .btn-outline-dark.disabled, @@ -2727,50 +2943,54 @@ fieldset:disabled a.btn { color: #343a40; background-color: transparent; } -.btn-outline-dark:not(:disabled):not(.disabled).active, .btn-outline-dark:not(:disabled):not(.disabled):active, +.btn-outline-dark:not(:disabled):not(.disabled).active, .show > .btn-outline-dark.dropdown-toggle { - color: #fff; + color: #ffffff; background-color: #343a40; border-color: #343a40; } -.btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, +.btn-outline-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); } + .btn-link { font-weight: 400; - color: #f1641e; + color: #d84848; text-decoration: none; } .btn-link:hover { - color: #b7440b; + color: #ae2525; text-decoration: underline; } -.btn-link.focus, -.btn-link:focus { +.btn-link:focus, +.btn-link.focus { text-decoration: underline; } -.btn-link.disabled, -.btn-link:disabled { +.btn-link:disabled, +.btn-link.disabled { color: #6c757d; pointer-events: none; } -.btn-group-lg > .btn, -.btn-lg { + +.btn-lg, +.btn-group-lg > .btn { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.5rem; } -.btn-group-sm > .btn, -.btn-sm { + +.btn-sm, +.btn-group-sm > .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 1rem; } + .btn-block { display: block; width: 100%; @@ -2778,11 +2998,13 @@ fieldset:disabled a.btn { .btn-block + .btn-block { margin-top: 0.5rem; } -input[type="button"].btn-block, + +input[type="submit"].btn-block, input[type="reset"].btn-block, -input[type="submit"].btn-block { +input[type="button"].btn-block { width: 100%; } + .fade { transition: opacity 0.15s linear; } @@ -2794,9 +3016,11 @@ input[type="submit"].btn-block { .fade:not(.show) { opacity: 0; } + .collapse:not(.show) { display: none; } + .collapsing { position: relative; height: 0; @@ -2808,12 +3032,24 @@ input[type="submit"].btn-block { transition: none; } } -.dropdown, -.dropleft, +.collapsing.width { + width: 0; + height: auto; + transition: width 0.35s ease; +} +@media (prefers-reduced-motion: reduce) { + .collapsing.width { + transition: none; + } +} + +.dropup, .dropright, -.dropup { +.dropdown, +.dropleft { position: relative; } + .dropdown-toggle { white-space: nowrap; } @@ -2830,6 +3066,7 @@ input[type="submit"].btn-block { .dropdown-toggle:empty::after { margin-left: 0; } + .dropdown-menu { position: absolute; top: 100%; @@ -2844,19 +3081,22 @@ input[type="submit"].btn-block { color: #495057; text-align: left; list-style: none; - background-color: #fff; + background-color: #ffffff; background-clip: padding-box; border: 1px solid rgba(34, 34, 34, 0.15); border-radius: 0.5rem; } + .dropdown-menu-left { right: auto; left: 0; } + .dropdown-menu-right { right: 0; left: auto; } + @media (min-width: 576px) { .dropdown-menu-sm-left { right: auto; @@ -2916,6 +3156,7 @@ input[type="submit"].btn-block { .dropup .dropdown-toggle:empty::after { margin-left: 0; } + .dropright .dropdown-menu { top: 0; right: auto; @@ -2939,6 +3180,7 @@ input[type="submit"].btn-block { .dropright .dropdown-toggle::after { vertical-align: 0; } + .dropleft .dropdown-menu { top: 0; right: 100%; @@ -2970,19 +3212,22 @@ input[type="submit"].btn-block { .dropleft .dropdown-toggle::before { vertical-align: 0; } -.dropdown-menu[x-placement^="bottom"], -.dropdown-menu[x-placement^="left"], + +.dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], -.dropdown-menu[x-placement^="top"] { +.dropdown-menu[x-placement^="bottom"], +.dropdown-menu[x-placement^="left"] { right: auto; bottom: auto; } + .dropdown-divider { height: 0; margin: 0.5rem 0; overflow: hidden; border-top: 1px solid #e9ecef; } + .dropdown-item { display: block; width: 100%; @@ -2995,27 +3240,29 @@ input[type="submit"].btn-block { background-color: transparent; border: 0; } -.dropdown-item:focus, -.dropdown-item:hover { +.dropdown-item:hover, +.dropdown-item:focus { color: #16181b; text-decoration: none; - background-color: #f8f9fa; + background-color: #e9ecef; } .dropdown-item.active, .dropdown-item:active { - color: #fff; + color: #ffffff; text-decoration: none; - background-color: #f1641e; + background-color: #d84848; } .dropdown-item.disabled, .dropdown-item:disabled { - color: #6c757d; + color: #adb5bd; pointer-events: none; background-color: transparent; } + .dropdown-menu.show { display: block; } + .dropdown-header { display: block; padding: 0.5rem 1.5rem; @@ -3024,34 +3271,37 @@ input[type="submit"].btn-block { color: #6c757d; white-space: nowrap; } + .dropdown-item-text { display: block; padding: 0.25rem 1.5rem; color: #212529; } + .btn-group, .btn-group-vertical { position: relative; display: inline-flex; vertical-align: middle; } -.btn-group-vertical > .btn, -.btn-group > .btn { +.btn-group > .btn, +.btn-group-vertical > .btn { position: relative; flex: 1 1 auto; } -.btn-group-vertical > .btn:hover, -.btn-group > .btn:hover { +.btn-group > .btn:hover, +.btn-group-vertical > .btn:hover { z-index: 1; } -.btn-group-vertical > .btn.active, -.btn-group-vertical > .btn:active, -.btn-group-vertical > .btn:focus, -.btn-group > .btn.active, +.btn-group > .btn:focus, .btn-group > .btn:active, -.btn-group > .btn:focus { +.btn-group > .btn.active, +.btn-group-vertical > .btn:focus, +.btn-group-vertical > .btn:active, +.btn-group-vertical > .btn.active { z-index: 1; } + .btn-toolbar { display: flex; flex-wrap: wrap; @@ -3060,42 +3310,47 @@ input[type="submit"].btn-block { .btn-toolbar .input-group { width: auto; } -.btn-group > .btn-group:not(:first-child), -.btn-group > .btn:not(:first-child) { + +.btn-group > .btn:not(:first-child), +.btn-group > .btn-group:not(:first-child) { margin-left: -1px; } -.btn-group > .btn-group:not(:last-child) > .btn, -.btn-group > .btn:not(:last-child):not(.dropdown-toggle) { +.btn-group > .btn:not(:last-child):not(.dropdown-toggle), +.btn-group > .btn-group:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } -.btn-group > .btn-group:not(:first-child) > .btn, -.btn-group > .btn:not(:first-child) { +.btn-group > .btn:not(:first-child), +.btn-group > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } + .dropdown-toggle-split { padding-right: 0.5625rem; padding-left: 0.5625rem; } .dropdown-toggle-split::after, -.dropright .dropdown-toggle-split::after, -.dropup .dropdown-toggle-split::after { +.dropup .dropdown-toggle-split::after, +.dropright .dropdown-toggle-split::after { margin-left: 0; } .dropleft .dropdown-toggle-split::before { margin-right: 0; } -.btn-group-sm > .btn + .dropdown-toggle-split, -.btn-sm + .dropdown-toggle-split { + +.btn-sm + .dropdown-toggle-split, +.btn-group-sm > .btn + .dropdown-toggle-split { padding-right: 0.375rem; padding-left: 0.375rem; } -.btn-group-lg > .btn + .dropdown-toggle-split, -.btn-lg + .dropdown-toggle-split { + +.btn-lg + .dropdown-toggle-split, +.btn-group-lg > .btn + .dropdown-toggle-split { padding-right: 0.75rem; padding-left: 0.75rem; } + .btn-group-vertical { flex-direction: column; align-items: flex-start; @@ -3105,32 +3360,34 @@ input[type="submit"].btn-block { .btn-group-vertical > .btn-group { width: 100%; } -.btn-group-vertical > .btn-group:not(:first-child), -.btn-group-vertical > .btn:not(:first-child) { +.btn-group-vertical > .btn:not(:first-child), +.btn-group-vertical > .btn-group:not(:first-child) { margin-top: -1px; } -.btn-group-vertical > .btn-group:not(:last-child) > .btn, -.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle) { +.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), +.btn-group-vertical > .btn-group:not(:last-child) > .btn { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } -.btn-group-vertical > .btn-group:not(:first-child) > .btn, -.btn-group-vertical > .btn:not(:first-child) { +.btn-group-vertical > .btn:not(:first-child), +.btn-group-vertical > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-top-right-radius: 0; } + .btn-group-toggle > .btn, .btn-group-toggle > .btn-group > .btn { margin-bottom: 0; } -.btn-group-toggle > .btn input[type="checkbox"], .btn-group-toggle > .btn input[type="radio"], -.btn-group-toggle > .btn-group > .btn input[type="checkbox"], -.btn-group-toggle > .btn-group > .btn input[type="radio"] { +.btn-group-toggle > .btn input[type="checkbox"], +.btn-group-toggle > .btn-group > .btn input[type="radio"], +.btn-group-toggle > .btn-group > .btn input[type="checkbox"] { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; } + .input-group { position: relative; display: flex; @@ -3138,45 +3395,40 @@ input[type="submit"].btn-block { align-items: stretch; width: 100%; } -.input-group > .custom-file, -.input-group > .custom-select, .input-group > .form-control, -.input-group > .form-control-plaintext { +.input-group > .form-control-plaintext, +.input-group > .custom-select, +.input-group > .custom-file { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; margin-bottom: 0; } -.input-group > .custom-file + .custom-file, -.input-group > .custom-file + .custom-select, -.input-group > .custom-file + .form-control, -.input-group > .custom-select + .custom-file, -.input-group > .custom-select + .custom-select, -.input-group > .custom-select + .form-control, -.input-group > .form-control + .custom-file, -.input-group > .form-control + .custom-select, .input-group > .form-control + .form-control, -.input-group > .form-control-plaintext + .custom-file, +.input-group > .form-control + .custom-select, +.input-group > .form-control + .custom-file, +.input-group > .form-control-plaintext + .form-control, .input-group > .form-control-plaintext + .custom-select, -.input-group > .form-control-plaintext + .form-control { +.input-group > .form-control-plaintext + .custom-file, +.input-group > .custom-select + .form-control, +.input-group > .custom-select + .custom-select, +.input-group > .custom-select + .custom-file, +.input-group > .custom-file + .form-control, +.input-group > .custom-file + .custom-select, +.input-group > .custom-file + .custom-file { margin-left: -1px; } -.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label, +.input-group > .form-control:focus, .input-group > .custom-select:focus, -.input-group > .form-control:focus { +.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label { z-index: 3; } .input-group > .custom-file .custom-file-input:focus { z-index: 4; } -.input-group > .custom-select:not(:last-child), -.input-group > .form-control:not(:last-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} -.input-group > .custom-select:not(:first-child), -.input-group > .form-control:not(:first-child) { +.input-group > .form-control:not(:first-child), +.input-group > .custom-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } @@ -3193,35 +3445,61 @@ input[type="submit"].btn-block { border-top-left-radius: 0; border-bottom-left-radius: 0; } -.input-group-append, -.input-group-prepend { +.input-group:not(.has-validation) > .form-control:not(:last-child), +.input-group:not(.has-validation) > .custom-select:not(:last-child), +.input-group:not(.has-validation) + > .custom-file:not(:last-child) + .custom-file-label, +.input-group:not(.has-validation) + > .custom-file:not(:last-child) + .custom-file-label::after { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.input-group.has-validation > .form-control:nth-last-child(n + 3), +.input-group.has-validation > .custom-select:nth-last-child(n + 3), +.input-group.has-validation + > .custom-file:nth-last-child(n + 3) + .custom-file-label, +.input-group.has-validation + > .custom-file:nth-last-child(n + 3) + .custom-file-label::after { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.input-group-prepend, +.input-group-append { display: flex; } -.input-group-append .btn, -.input-group-prepend .btn { +.input-group-prepend .btn, +.input-group-append .btn { position: relative; z-index: 2; } -.input-group-append .btn:focus, -.input-group-prepend .btn:focus { +.input-group-prepend .btn:focus, +.input-group-append .btn:focus { z-index: 3; } -.input-group-append .btn + .btn, -.input-group-append .btn + .input-group-text, -.input-group-append .input-group-text + .btn, -.input-group-append .input-group-text + .input-group-text, .input-group-prepend .btn + .btn, .input-group-prepend .btn + .input-group-text, +.input-group-prepend .input-group-text + .input-group-text, .input-group-prepend .input-group-text + .btn, -.input-group-prepend .input-group-text + .input-group-text { +.input-group-append .btn + .btn, +.input-group-append .btn + .input-group-text, +.input-group-append .input-group-text + .input-group-text, +.input-group-append .input-group-text + .btn { margin-left: -1px; } + .input-group-prepend { margin-right: -1px; } + .input-group-append { margin-left: -1px; } + .input-group-text { display: flex; align-items: center; @@ -3237,78 +3515,96 @@ input[type="submit"].btn-block { border: 1px solid #ced4da; border-radius: 0.5rem; } -.input-group-text input[type="checkbox"], -.input-group-text input[type="radio"] { +.input-group-text input[type="radio"], +.input-group-text input[type="checkbox"] { margin-top: 0; } -.input-group-lg > .custom-select, -.input-group-lg > .form-control:not(textarea) { + +.input-group-lg > .form-control:not(textarea), +.input-group-lg > .custom-select { height: calc(1.5em + 1rem + 2px); } -.input-group-lg > .custom-select, + .input-group-lg > .form-control, -.input-group-lg > .input-group-append > .btn, +.input-group-lg > .custom-select, +.input-group-lg > .input-group-prepend > .input-group-text, .input-group-lg > .input-group-append > .input-group-text, .input-group-lg > .input-group-prepend > .btn, -.input-group-lg > .input-group-prepend > .input-group-text { +.input-group-lg > .input-group-append > .btn { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.5rem; } -.input-group-sm > .custom-select, -.input-group-sm > .form-control:not(textarea) { + +.input-group-sm > .form-control:not(textarea), +.input-group-sm > .custom-select { height: calc(1.5em + 0.5rem + 2px); } -.input-group-sm > .custom-select, + .input-group-sm > .form-control, -.input-group-sm > .input-group-append > .btn, +.input-group-sm > .custom-select, +.input-group-sm > .input-group-prepend > .input-group-text, .input-group-sm > .input-group-append > .input-group-text, .input-group-sm > .input-group-prepend > .btn, -.input-group-sm > .input-group-prepend > .input-group-text { +.input-group-sm > .input-group-append > .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 1rem; } + .input-group-lg > .custom-select, .input-group-sm > .custom-select { padding-right: 1.75rem; } + +.input-group > .input-group-prepend > .btn, +.input-group > .input-group-prepend > .input-group-text, +.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn, +.input-group:not(.has-validation) + > .input-group-append:not(:last-child) + > .input-group-text, +.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn, +.input-group.has-validation + > .input-group-append:nth-last-child(n + 3) + > .input-group-text, .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-append:last-child - > .input-group-text:not(:last-child), -.input-group > .input-group-append:not(:last-child) > .btn, -.input-group > .input-group-append:not(:last-child) > .input-group-text, -.input-group > .input-group-prepend > .btn, -.input-group > .input-group-prepend > .input-group-text { + > .input-group-text:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } + .input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text, +.input-group > .input-group-prepend:not(:first-child) > .btn, +.input-group > .input-group-prepend:not(:first-child) > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child), .input-group > .input-group-prepend:first-child - > .input-group-text:not(:first-child), -.input-group > .input-group-prepend:not(:first-child) > .btn, -.input-group > .input-group-prepend:not(:first-child) > .input-group-text { + > .input-group-text:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } + .custom-control { position: relative; + z-index: 1; display: block; min-height: 1.5rem; padding-left: 1.5rem; + print-color-adjust: exact; } + .custom-control-inline { display: inline-flex; margin-right: 1rem; } + .custom-control-input { position: absolute; left: 0; @@ -3318,29 +3614,30 @@ input[type="submit"].btn-block { opacity: 0; } .custom-control-input:checked ~ .custom-control-label::before { - color: #fff; - border-color: #f1641e; - background-color: #f1641e; + color: #ffffff; + border-color: #d84848; + background-color: #d84848; } .custom-control-input:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(241, 30, 30, 0.75); + box-shadow: 0 0 0 0.2rem rgba(216, 72, 72, 0.75); } .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { - border-color: #f89696; + border-color: #eeb1b1; } .custom-control-input:not(:disabled):active ~ .custom-control-label::before { - color: #fff; - background-color: #fbd8c6; - border-color: #fbd8c6; + color: #ffffff; + background-color: #f7dbdb; + border-color: #f7dbdb; } -.custom-control-input:disabled ~ .custom-control-label, -.custom-control-input[disabled] ~ .custom-control-label { +.custom-control-input[disabled] ~ .custom-control-label, +.custom-control-input:disabled ~ .custom-control-label { color: #6c757d; } -.custom-control-input:disabled ~ .custom-control-label::before, -.custom-control-input[disabled] ~ .custom-control-label::before { +.custom-control-input[disabled] ~ .custom-control-label::before, +.custom-control-input:disabled ~ .custom-control-label::before { background-color: #e9ecef; } + .custom-control-label { position: relative; margin-bottom: 0; @@ -3355,8 +3652,8 @@ input[type="submit"].btn-block { height: 1rem; pointer-events: none; content: ""; - background-color: #fff; - border: #adb5bd solid 1px; + background-color: #ffffff; + border: 1px solid #adb5bd; } .custom-control-label::after { position: absolute; @@ -3366,8 +3663,9 @@ input[type="submit"].btn-block { width: 1rem; height: 1rem; content: ""; - background: no-repeat 50%/50% 50%; + background: 50%/50% 50% no-repeat; } + .custom-checkbox .custom-control-label::before { border-radius: 0.5rem; } @@ -3377,8 +3675,8 @@ input[type="submit"].btn-block { .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { - border-color: #f1641e; - background-color: #f1641e; + border-color: #d84848; + background-color: #d84848; } .custom-checkbox .custom-control-input:indeterminate @@ -3388,13 +3686,14 @@ input[type="submit"].btn-block { .custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before { - background-color: rgba(241, 100, 30, 0.5); + background-color: rgba(216, 72, 72, 0.5); } .custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before { - background-color: rgba(241, 100, 30, 0.5); + background-color: rgba(216, 72, 72, 0.5); } + .custom-radio .custom-control-label::before { border-radius: 50%; } @@ -3404,8 +3703,9 @@ input[type="submit"].btn-block { .custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before { - background-color: rgba(241, 100, 30, 0.5); + background-color: rgba(216, 72, 72, 0.5); } + .custom-switch { padding-left: 2.25rem; } @@ -3431,14 +3731,15 @@ input[type="submit"].btn-block { } } .custom-switch .custom-control-input:checked ~ .custom-control-label::after { - background-color: #fff; + background-color: #ffffff; transform: translateX(0.75rem); } .custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before { - background-color: rgba(241, 100, 30, 0.5); + background-color: rgba(216, 72, 72, 0.5); } + .custom-select { display: inline-block; width: 100%; @@ -3449,21 +3750,21 @@ input[type="submit"].btn-block { line-height: 1.5; color: #495057; vertical-align: middle; - background: #fff + background: #ffffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") - no-repeat right 0.75rem center/8px 10px; + right 0.75rem center/8px 10px no-repeat; border: 1px solid #ced4da; border-radius: 0.5rem; appearance: none; } .custom-select:focus { - border-color: #f89696; + border-color: #eeb1b1; outline: 0; - box-shadow: 0 0 0 0.2rem rgba(241, 30, 30, 0.75); + box-shadow: 0 0 0 0.2rem rgba(216, 72, 72, 0.75); } .custom-select:focus::-ms-value { color: #495057; - background-color: #fff; + background-color: #ffffff; } .custom-select[multiple], .custom-select[size]:not([size="1"]) { @@ -3482,6 +3783,7 @@ input[type="submit"].btn-block { color: transparent; text-shadow: 0 0 0 #495057; } + .custom-select-sm { height: calc(1.5em + 0.5rem + 2px); padding-top: 0.25rem; @@ -3489,6 +3791,7 @@ input[type="submit"].btn-block { padding-left: 0.5rem; font-size: 0.875rem; } + .custom-select-lg { height: calc(1.5em + 1rem + 2px); padding-top: 0.5rem; @@ -3496,6 +3799,7 @@ input[type="submit"].btn-block { padding-left: 1rem; font-size: 1.25rem; } + .custom-file { position: relative; display: inline-block; @@ -3503,20 +3807,22 @@ input[type="submit"].btn-block { height: calc(1.5em + 0.75rem + 2px); margin-bottom: 0; } + .custom-file-input { position: relative; z-index: 2; width: 100%; height: calc(1.5em + 0.75rem + 2px); margin: 0; + overflow: hidden; opacity: 0; } .custom-file-input:focus ~ .custom-file-label { - border-color: #f89696; - box-shadow: 0 0 0 0.2rem rgba(241, 30, 30, 0.75); + border-color: #eeb1b1; + box-shadow: 0 0 0 0.2rem rgba(216, 72, 72, 0.75); } -.custom-file-input:disabled ~ .custom-file-label, -.custom-file-input[disabled] ~ .custom-file-label { +.custom-file-input[disabled] ~ .custom-file-label, +.custom-file-input:disabled ~ .custom-file-label { background-color: #e9ecef; } .custom-file-input:lang(en) ~ .custom-file-label::after { @@ -3525,6 +3831,7 @@ input[type="submit"].btn-block { .custom-file-input ~ .custom-file-label[data-browse]::after { content: attr(data-browse); } + .custom-file-label { position: absolute; top: 0; @@ -3533,10 +3840,11 @@ input[type="submit"].btn-block { z-index: 1; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; + overflow: hidden; font-weight: 400; line-height: 1.5; color: #495057; - background-color: #fff; + background-color: #ffffff; border: 1px solid #ced4da; border-radius: 0.5rem; } @@ -3556,6 +3864,7 @@ input[type="submit"].btn-block { border-left: inherit; border-radius: 0 0.5rem 0.5rem 0; } + .custom-range { width: 100%; height: 1.4rem; @@ -3567,13 +3876,13 @@ input[type="submit"].btn-block { outline: 0; } .custom-range:focus::-webkit-slider-thumb { - box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(241, 30, 30, 0.75); + box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(216, 72, 72, 0.75); } .custom-range:focus::-moz-range-thumb { - box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(241, 30, 30, 0.75); + box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(216, 72, 72, 0.75); } .custom-range:focus::-ms-thumb { - box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(241, 30, 30, 0.75); + box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(216, 72, 72, 0.75); } .custom-range::-moz-focus-outer { border: 0; @@ -3582,7 +3891,7 @@ input[type="submit"].btn-block { width: 1rem; height: 1rem; margin-top: -0.25rem; - background-color: #f1641e; + background-color: #d84848; border: 0; border-radius: 1rem; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, @@ -3595,7 +3904,7 @@ input[type="submit"].btn-block { } } .custom-range::-webkit-slider-thumb:active { - background-color: #fbd8c6; + background-color: #f7dbdb; } .custom-range::-webkit-slider-runnable-track { width: 100%; @@ -3609,7 +3918,7 @@ input[type="submit"].btn-block { .custom-range::-moz-range-thumb { width: 1rem; height: 1rem; - background-color: #f1641e; + background-color: #d84848; border: 0; border-radius: 1rem; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, @@ -3622,7 +3931,7 @@ input[type="submit"].btn-block { } } .custom-range::-moz-range-thumb:active { - background-color: #fbd8c6; + background-color: #f7dbdb; } .custom-range::-moz-range-track { width: 100%; @@ -3639,7 +3948,7 @@ input[type="submit"].btn-block { margin-top: 0; margin-right: 0.2rem; margin-left: 0.2rem; - background-color: #f1641e; + background-color: #d84848; border: 0; border-radius: 1rem; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, @@ -3652,7 +3961,7 @@ input[type="submit"].btn-block { } } .custom-range::-ms-thumb:active { - background-color: #fbd8c6; + background-color: #f7dbdb; } .custom-range::-ms-track { width: 100%; @@ -3687,6 +3996,7 @@ input[type="submit"].btn-block { .custom-range:disabled::-ms-thumb { background-color: #adb5bd; } + .custom-control-label::before, .custom-file-label, .custom-select { @@ -3700,6 +4010,7 @@ input[type="submit"].btn-block { transition: none; } } + .nav { display: flex; flex-wrap: wrap; @@ -3707,12 +4018,13 @@ input[type="submit"].btn-block { margin-bottom: 0; list-style: none; } + .nav-link { display: block; padding: 0.5rem 1rem; } -.nav-link:focus, -.nav-link:hover { +.nav-link:hover, +.nav-link:focus { text-decoration: none; } .nav-link.disabled { @@ -3720,19 +4032,20 @@ input[type="submit"].btn-block { pointer-events: none; cursor: default; } + .nav-tabs { border-bottom: 1px solid #dee2e6; } -.nav-tabs .nav-item { - margin-bottom: -1px; -} .nav-tabs .nav-link { + margin-bottom: -1px; + background-color: transparent; border: 1px solid transparent; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } -.nav-tabs .nav-link:focus, -.nav-tabs .nav-link:hover { +.nav-tabs .nav-link:hover, +.nav-tabs .nav-link:focus { + isolation: isolate; border-color: #e9ecef #e9ecef #dee2e6; } .nav-tabs .nav-link.disabled { @@ -3740,8 +4053,8 @@ input[type="submit"].btn-block { background-color: transparent; border-color: transparent; } -.nav-tabs .nav-item.show .nav-link, -.nav-tabs .nav-link.active { +.nav-tabs .nav-link.active, +.nav-tabs .nav-item.show .nav-link { color: #495057; background-color: #fff; border-color: #dee2e6 #dee2e6 #fff; @@ -3751,29 +4064,38 @@ input[type="submit"].btn-block { border-top-left-radius: 0; border-top-right-radius: 0; } + .nav-pills .nav-link { + background: none; + border: 0; border-radius: 0.5rem; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { - color: #fff; - background-color: #f1641e; + color: #ffffff; + background-color: #d84848; } + +.nav-fill > .nav-link, .nav-fill .nav-item { flex: 1 1 auto; text-align: center; } + +.nav-justified > .nav-link, .nav-justified .nav-item { flex-basis: 0; flex-grow: 1; text-align: center; } + .tab-content > .tab-pane { display: none; } .tab-content > .active { display: block; } + .navbar { position: relative; display: flex; @@ -3784,9 +4106,9 @@ input[type="submit"].btn-block { } .navbar .container, .navbar .container-fluid, -.navbar .container-lg, -.navbar .container-md, .navbar .container-sm, +.navbar .container-md, +.navbar .container-lg, .navbar .container-xl { display: flex; flex-wrap: wrap; @@ -3802,10 +4124,11 @@ input[type="submit"].btn-block { line-height: inherit; white-space: nowrap; } -.navbar-brand:focus, -.navbar-brand:hover { +.navbar-brand:hover, +.navbar-brand:focus { text-decoration: none; } + .navbar-nav { display: flex; flex-direction: column; @@ -3821,16 +4144,19 @@ input[type="submit"].btn-block { position: static; float: none; } + .navbar-text { display: inline-block; padding-top: 0.5rem; padding-bottom: 0.5rem; } + .navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; } + .navbar-toggler { padding: 0.25rem 0.75rem; font-size: 1.25rem; @@ -3839,25 +4165,31 @@ input[type="submit"].btn-block { border: 1px solid transparent; border-radius: 0.5rem; } -.navbar-toggler:focus, -.navbar-toggler:hover { +.navbar-toggler:hover, +.navbar-toggler:focus { text-decoration: none; } + .navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; content: ""; - background: no-repeat center center; - background-size: 100% 100%; + background: 50%/100% 100% no-repeat; } + +.navbar-nav-scroll { + max-height: 75vh; + overflow-y: auto; +} + @media (max-width: 575.98px) { .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid, - .navbar-expand-sm > .container-lg, - .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-sm, + .navbar-expand-sm > .container-md, + .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl { padding-right: 0; padding-left: 0; @@ -3880,12 +4212,15 @@ input[type="submit"].btn-block { } .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid, - .navbar-expand-sm > .container-lg, - .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-sm, + .navbar-expand-sm > .container-md, + .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl { flex-wrap: nowrap; } + .navbar-expand-sm .navbar-nav-scroll { + overflow: visible; + } .navbar-expand-sm .navbar-collapse { display: flex !important; flex-basis: auto; @@ -3897,9 +4232,9 @@ input[type="submit"].btn-block { @media (max-width: 767.98px) { .navbar-expand-md > .container, .navbar-expand-md > .container-fluid, - .navbar-expand-md > .container-lg, - .navbar-expand-md > .container-md, .navbar-expand-md > .container-sm, + .navbar-expand-md > .container-md, + .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl { padding-right: 0; padding-left: 0; @@ -3922,12 +4257,15 @@ input[type="submit"].btn-block { } .navbar-expand-md > .container, .navbar-expand-md > .container-fluid, - .navbar-expand-md > .container-lg, - .navbar-expand-md > .container-md, .navbar-expand-md > .container-sm, + .navbar-expand-md > .container-md, + .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl { flex-wrap: nowrap; } + .navbar-expand-md .navbar-nav-scroll { + overflow: visible; + } .navbar-expand-md .navbar-collapse { display: flex !important; flex-basis: auto; @@ -3939,9 +4277,9 @@ input[type="submit"].btn-block { @media (max-width: 991.98px) { .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid, - .navbar-expand-lg > .container-lg, - .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-sm, + .navbar-expand-lg > .container-md, + .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl { padding-right: 0; padding-left: 0; @@ -3964,12 +4302,15 @@ input[type="submit"].btn-block { } .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid, - .navbar-expand-lg > .container-lg, - .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-sm, + .navbar-expand-lg > .container-md, + .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl { flex-wrap: nowrap; } + .navbar-expand-lg .navbar-nav-scroll { + overflow: visible; + } .navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto; @@ -3981,9 +4322,9 @@ input[type="submit"].btn-block { @media (max-width: 1199.98px) { .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid, - .navbar-expand-xl > .container-lg, - .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-sm, + .navbar-expand-xl > .container-md, + .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl { padding-right: 0; padding-left: 0; @@ -4006,12 +4347,15 @@ input[type="submit"].btn-block { } .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid, - .navbar-expand-xl > .container-lg, - .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-sm, + .navbar-expand-xl > .container-md, + .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl { flex-wrap: nowrap; } + .navbar-expand-xl .navbar-nav-scroll { + overflow: visible; + } .navbar-expand-xl .navbar-collapse { display: flex !important; flex-basis: auto; @@ -4026,9 +4370,9 @@ input[type="submit"].btn-block { } .navbar-expand > .container, .navbar-expand > .container-fluid, -.navbar-expand > .container-lg, -.navbar-expand > .container-md, .navbar-expand > .container-sm, +.navbar-expand > .container-md, +.navbar-expand > .container-lg, .navbar-expand > .container-xl { padding-right: 0; padding-left: 0; @@ -4045,12 +4389,15 @@ input[type="submit"].btn-block { } .navbar-expand > .container, .navbar-expand > .container-fluid, -.navbar-expand > .container-lg, -.navbar-expand > .container-md, .navbar-expand > .container-sm, +.navbar-expand > .container-md, +.navbar-expand > .container-lg, .navbar-expand > .container-xl { flex-wrap: nowrap; } +.navbar-expand .navbar-nav-scroll { + overflow: visible; +} .navbar-expand .navbar-collapse { display: flex !important; flex-basis: auto; @@ -4058,27 +4405,28 @@ input[type="submit"].btn-block { .navbar-expand .navbar-toggler { display: none; } + .navbar-light .navbar-brand { color: #212529; } -.navbar-light .navbar-brand:focus, -.navbar-light .navbar-brand:hover { +.navbar-light .navbar-brand:hover, +.navbar-light .navbar-brand:focus { color: #212529; } .navbar-light .navbar-nav .nav-link { color: #6c757d; } -.navbar-light .navbar-nav .nav-link:focus, -.navbar-light .navbar-nav .nav-link:hover { +.navbar-light .navbar-nav .nav-link:hover, +.navbar-light .navbar-nav .nav-link:focus { color: #212529; } .navbar-light .navbar-nav .nav-link.disabled { color: rgba(34, 34, 34, 0.3); } +.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, -.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, -.navbar-light .navbar-nav .show > .nav-link { +.navbar-light .navbar-nav .nav-link.active { color: #212529; } .navbar-light .navbar-toggler { @@ -4094,32 +4442,33 @@ input[type="submit"].btn-block { .navbar-light .navbar-text a { color: #212529; } -.navbar-light .navbar-text a:focus, -.navbar-light .navbar-text a:hover { +.navbar-light .navbar-text a:hover, +.navbar-light .navbar-text a:focus { color: #212529; } + .navbar-dark .navbar-brand { - color: #fff; + color: #ffffff; } -.navbar-dark .navbar-brand:focus, -.navbar-dark .navbar-brand:hover { - color: #fff; +.navbar-dark .navbar-brand:hover, +.navbar-dark .navbar-brand:focus { + color: #ffffff; } .navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.5); } -.navbar-dark .navbar-nav .nav-link:focus, -.navbar-dark .navbar-nav .nav-link:hover { +.navbar-dark .navbar-nav .nav-link:hover, +.navbar-dark .navbar-nav .nav-link:focus { color: rgba(255, 255, 255, 0.75); } .navbar-dark .navbar-nav .nav-link.disabled { color: rgba(255, 255, 255, 0.25); } +.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, -.navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, -.navbar-dark .navbar-nav .show > .nav-link { - color: #fff; +.navbar-dark .navbar-nav .nav-link.active { + color: #ffffff; } .navbar-dark .navbar-toggler { color: rgba(255, 255, 255, 0.5); @@ -4132,12 +4481,13 @@ input[type="submit"].btn-block { color: rgba(255, 255, 255, 0.5); } .navbar-dark .navbar-text a { - color: #fff; + color: #ffffff; } -.navbar-dark .navbar-text a:focus, -.navbar-dark .navbar-text a:hover { - color: #fff; +.navbar-dark .navbar-text a:hover, +.navbar-dark .navbar-text a:focus { + color: #ffffff; } + .card { position: relative; display: flex; @@ -4167,28 +4517,38 @@ input[type="submit"].btn-block { border-bottom-right-radius: calc(0.5rem - 1px); border-bottom-left-radius: calc(0.5rem - 1px); } +.card > .card-header + .list-group, +.card > .list-group + .card-footer { + border-top: 0; +} + .card-body { flex: 1 1 auto; min-height: 1px; padding: 1.25rem; color: #495057; } + .card-title { margin-bottom: 0.75rem; } + .card-subtitle { margin-top: -0.375rem; margin-bottom: 0; } + .card-text:last-child { margin-bottom: 0; } + .card-link:hover { text-decoration: none; } .card-link + .card-link { margin-left: 1.25rem; } + .card-header { padding: 0.75rem 1.25rem; margin-bottom: 0; @@ -4199,9 +4559,7 @@ input[type="submit"].btn-block { .card-header:first-child { border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0; } -.card-header + .list-group .list-group-item:first-child { - border-top: 0; -} + .card-footer { padding: 0.75rem 1.25rem; color: #495057; @@ -4211,16 +4569,19 @@ input[type="submit"].btn-block { .card-footer:last-child { border-radius: 0 0 calc(0.5rem - 1px) calc(0.5rem - 1px); } + .card-header-tabs { margin-right: -0.625rem; margin-bottom: -0.75rem; margin-left: -0.625rem; border-bottom: 0; } + .card-header-pills { margin-right: -0.625rem; margin-left: -0.625rem; } + .card-img-overlay { position: absolute; top: 0; @@ -4228,23 +4589,28 @@ input[type="submit"].btn-block { bottom: 0; left: 0; padding: 1.25rem; + border-radius: calc(0.5rem - 1px); } + .card-img, -.card-img-bottom, -.card-img-top { +.card-img-top, +.card-img-bottom { flex-shrink: 0; width: 100%; } + .card-img, .card-img-top { border-top-left-radius: calc(0.5rem - 1px); border-top-right-radius: calc(0.5rem - 1px); } + .card-img, .card-img-bottom { border-bottom-right-radius: calc(0.5rem - 1px); border-bottom-left-radius: calc(0.5rem - 1px); } + .card-deck .card { margin-bottom: 15px; } @@ -4262,6 +4628,7 @@ input[type="submit"].btn-block { margin-left: 15px; } } + .card-group > .card { margin-bottom: 15px; } @@ -4282,27 +4649,28 @@ input[type="submit"].btn-block { border-top-right-radius: 0; border-bottom-right-radius: 0; } - .card-group > .card:not(:last-child) .card-header, - .card-group > .card:not(:last-child) .card-img-top { + .card-group > .card:not(:last-child) .card-img-top, + .card-group > .card:not(:last-child) .card-header { border-top-right-radius: 0; } - .card-group > .card:not(:last-child) .card-footer, - .card-group > .card:not(:last-child) .card-img-bottom { + .card-group > .card:not(:last-child) .card-img-bottom, + .card-group > .card:not(:last-child) .card-footer { border-bottom-right-radius: 0; } .card-group > .card:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } - .card-group > .card:not(:first-child) .card-header, - .card-group > .card:not(:first-child) .card-img-top { + .card-group > .card:not(:first-child) .card-img-top, + .card-group > .card:not(:first-child) .card-header { border-top-left-radius: 0; } - .card-group > .card:not(:first-child) .card-footer, - .card-group > .card:not(:first-child) .card-img-bottom { + .card-group > .card:not(:first-child) .card-img-bottom, + .card-group > .card:not(:first-child) .card-footer { border-bottom-left-radius: 0; } } + .card-columns .card { margin-bottom: 0.75rem; } @@ -4318,6 +4686,10 @@ input[type="submit"].btn-block { width: 100%; } } + +.accordion { + overflow-anchor: none; +} .accordion > .card { overflow: hidden; } @@ -4334,6 +4706,7 @@ input[type="submit"].btn-block { border-radius: 0; margin-bottom: -1px; } + .breadcrumb { display: flex; flex-wrap: wrap; @@ -4343,14 +4716,12 @@ input[type="submit"].btn-block { background-color: #e9ecef; border-radius: 0.5rem; } -.breadcrumb-item { - display: flex; -} + .breadcrumb-item + .breadcrumb-item { padding-left: 0.5rem; } .breadcrumb-item + .breadcrumb-item::before { - display: inline-block; + float: left; padding-right: 0.5rem; color: #6c757d; content: "/"; @@ -4364,25 +4735,27 @@ input[type="submit"].btn-block { .breadcrumb-item.active { color: #6c757d; } + .pagination { display: flex; padding-left: 0; list-style: none; border-radius: 0.5rem; } + .page-link { position: relative; display: block; padding: 0.5rem 0.75rem; margin-left: -1px; line-height: 1.25; - color: #f1641e; - background-color: #fff; + color: #d84848; + background-color: #ffffff; border: 1px solid #dee2e6; } .page-link:hover { z-index: 2; - color: #b7440b; + color: #ae2525; text-decoration: none; background-color: #e9ecef; border-color: #dee2e6; @@ -4390,8 +4763,9 @@ input[type="submit"].btn-block { .page-link:focus { z-index: 3; outline: 0; - box-shadow: 0 0 0 0.2rem rgba(241, 30, 30, 0.75); + box-shadow: 0 0 0 0.2rem rgba(216, 72, 72, 0.75); } + .page-item:first-child .page-link { margin-left: 0; border-top-left-radius: 0.5rem; @@ -4403,17 +4777,18 @@ input[type="submit"].btn-block { } .page-item.active .page-link { z-index: 3; - color: #fff; - background-color: #f1641e; - border-color: #f1641e; + color: #ffffff; + background-color: #d84848; + border-color: #d84848; } .page-item.disabled .page-link { color: #6c757d; pointer-events: none; cursor: auto; - background-color: #fff; + background-color: #ffffff; border-color: #dee2e6; } + .pagination-lg .page-link { padding: 0.75rem 1.5rem; font-size: 1.25rem; @@ -4427,6 +4802,7 @@ input[type="submit"].btn-block { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } + .pagination-sm .page-link { padding: 0.25rem 0.5rem; font-size: 0.875rem; @@ -4440,6 +4816,7 @@ input[type="submit"].btn-block { border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; } + .badge { display: inline-block; padding: 0.25em 0.4em; @@ -4458,134 +4835,146 @@ input[type="submit"].btn-block { transition: none; } } -a.badge:focus, -a.badge:hover { +a.badge:hover, +a.badge:focus { text-decoration: none; } + .badge:empty { display: none; } + .btn .badge { position: relative; top: -1px; } + .badge-pill { padding-right: 0.6em; padding-left: 0.6em; border-radius: 10rem; } + .badge-primary { - color: #fff; - background-color: #f1641e; + color: #ffffff; + background-color: #d84848; +} +a.badge-primary:hover, +a.badge-primary:focus { + color: #ffffff; + background-color: #c32a2a; } a.badge-primary:focus, -a.badge-primary:hover { - color: #fff; - background-color: #cf4d0d; -} -a.badge-primary.focus, -a.badge-primary:focus { +a.badge-primary.focus { outline: 0; - box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.5); + box-shadow: 0 0 0 0.2rem rgba(216, 72, 72, 0.5); } + .badge-secondary { - color: #fff; - background-color: #c80000; + color: #ffffff; + background-color: #00c853; } -a.badge-secondary:focus, -a.badge-secondary:hover { - color: #fff; +a.badge-secondary:hover, +a.badge-secondary:focus { + color: #ffffff; background-color: #00953e; } -a.badge-secondary.focus, -a.badge-secondary:focus { +a.badge-secondary:focus, +a.badge-secondary.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 200, 83, 0.5); } + .badge-success { - color: #fff; + color: #ffffff; background-color: #6610f2; } -a.badge-success:focus, -a.badge-success:hover { - color: #fff; +a.badge-success:hover, +a.badge-success:focus { + color: #ffffff; background-color: #510bc4; } -a.badge-success.focus, -a.badge-success:focus { +a.badge-success:focus, +a.badge-success.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(102, 16, 242, 0.5); } + .badge-info { - color: #fff; + color: #ffffff; background-color: #007bff; } -a.badge-info:focus, -a.badge-info:hover { - color: #fff; +a.badge-info:hover, +a.badge-info:focus { + color: #ffffff; background-color: #0062cc; } -a.badge-info.focus, -a.badge-info:focus { +a.badge-info:focus, +a.badge-info.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); } + .badge-warning { color: #212529; background-color: #ffc107; } -a.badge-warning:focus, -a.badge-warning:hover { +a.badge-warning:hover, +a.badge-warning:focus { color: #212529; background-color: #d39e00; } -a.badge-warning.focus, -a.badge-warning:focus { +a.badge-warning:focus, +a.badge-warning.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); } + .badge-danger { - color: #fff; - background-color: #873208; + color: #ffffff; + background-color: #891d1d; +} +a.badge-danger:hover, +a.badge-danger:focus { + color: #ffffff; + background-color: #5e1414; } a.badge-danger:focus, -a.badge-danger:hover { - color: #fff; - background-color: #572105; -} -a.badge-danger.focus, -a.badge-danger:focus { +a.badge-danger.focus { outline: 0; - box-shadow: 0 0 0 0.2rem rgba(135, 50, 8, 0.5); + box-shadow: 0 0 0 0.2rem rgba(137, 29, 29, 0.5); } + .badge-light { color: #212529; background-color: #f8f9fa; } -a.badge-light:focus, -a.badge-light:hover { +a.badge-light:hover, +a.badge-light:focus { color: #212529; background-color: #dae0e5; } -a.badge-light.focus, -a.badge-light:focus { +a.badge-light:focus, +a.badge-light.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); } + .badge-dark { - color: #fff; + color: #ffffff; background-color: #343a40; } -a.badge-dark:focus, -a.badge-dark:hover { - color: #fff; +a.badge-dark:hover, +a.badge-dark:focus { + color: #ffffff; background-color: #1d2124; } -a.badge-dark.focus, -a.badge-dark:focus { +a.badge-dark:focus, +a.badge-dark.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); } + .jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; @@ -4597,11 +4986,13 @@ a.badge-dark:focus { padding: 4rem 2rem; } } + .jumbotron-fluid { padding-right: 0; padding-left: 0; border-radius: 0; } + .alert { position: relative; padding: 0.75rem 1.25rem; @@ -4609,12 +5000,15 @@ a.badge-dark:focus { border: 1px solid transparent; border-radius: 0.5rem; } + .alert-heading { color: inherit; } + .alert-link { font-weight: 600; } + .alert-dismissible { padding-right: 4rem; } @@ -4622,20 +5016,23 @@ a.badge-dark:focus { position: absolute; top: 0; right: 0; + z-index: 2; padding: 0.75rem 1.25rem; color: inherit; } + .alert-primary { - color: #8e4420; - background-color: #fce0d2; - border-color: #fbd4c0; + color: #813636; + background-color: #f7dada; + border-color: #f4cccc; } .alert-primary hr { - border-top-color: #f9c4a8; + border-top-color: #efb7b7; } .alert-primary .alert-link { - color: #643017; + color: #5d2727; } + .alert-secondary { color: #10783b; background-color: #ccf4dd; @@ -4647,6 +5044,7 @@ a.badge-dark:focus { .alert-secondary .alert-link { color: #0a4b25; } + .alert-success { color: #45198e; background-color: #e0cffc; @@ -4658,6 +5056,7 @@ a.badge-dark:focus { .alert-success .alert-link { color: #301163; } + .alert-info { color: #105095; background-color: #cce5ff; @@ -4669,6 +5068,7 @@ a.badge-dark:focus { .alert-info .alert-link { color: #0b3767; } + .alert-warning { color: #957514; background-color: #fff3cd; @@ -4680,17 +5080,19 @@ a.badge-dark:focus { .alert-warning .alert-link { color: #68520e; } + .alert-danger { - color: #572b15; - background-color: #e7d6ce; - border-color: #ddc6ba; + color: #581f1f; + background-color: #e7d2d2; + border-color: #dec0c0; } .alert-danger hr { - border-top-color: #d5b8a9; + border-top-color: #d5afaf; } .alert-danger .alert-link { - color: #2e170b; + color: #321212; } + .alert-light { color: #919292; background-color: #fefefe; @@ -4702,6 +5104,7 @@ a.badge-dark:focus { .alert-light .alert-link { color: #777979; } + .alert-dark { color: #2b2e32; background-color: #d6d8d9; @@ -4713,6 +5116,7 @@ a.badge-dark:focus { .alert-dark .alert-link { color: #131517; } + @keyframes progress-bar-stripes { from { background-position: 1rem 0; @@ -4730,15 +5134,16 @@ a.badge-dark:focus { background-color: #e9ecef; border-radius: 0.5rem; } + .progress-bar { display: flex; flex-direction: column; justify-content: center; overflow: hidden; - color: #fff; + color: #ffffff; text-align: center; white-space: nowrap; - background-color: #f1641e; + background-color: #d84848; transition: width 0.6s ease; } @media (prefers-reduced-motion: reduce) { @@ -4746,6 +5151,7 @@ a.badge-dark:focus { transition: none; } } + .progress-bar-striped { background-image: linear-gradient( 45deg, @@ -4759,21 +5165,25 @@ a.badge-dark:focus { ); background-size: 1rem 1rem; } + .progress-bar-animated { - animation: progress-bar-stripes 1s linear infinite; + animation: 1s linear infinite progress-bar-stripes; } @media (prefers-reduced-motion: reduce) { .progress-bar-animated { animation: none; } } + .media { display: flex; align-items: flex-start; } + .media-body { flex: 1; } + .list-group { display: flex; flex-direction: column; @@ -4781,13 +5191,14 @@ a.badge-dark:focus { margin-bottom: 0; border-radius: 0.5rem; } + .list-group-item-action { width: 100%; color: #495057; text-align: inherit; } -.list-group-item-action:focus, -.list-group-item-action:hover { +.list-group-item-action:hover, +.list-group-item-action:focus { z-index: 1; color: #495057; text-decoration: none; @@ -4797,11 +5208,12 @@ a.badge-dark:focus { color: #495057; background-color: #e9ecef; } + .list-group-item { position: relative; display: block; padding: 0.75rem 1.25rem; - background-color: #fff; + background-color: #ffffff; border: 1px solid rgba(34, 34, 34, 0.125); } .list-group-item:first-child { @@ -4816,13 +5228,13 @@ a.badge-dark:focus { .list-group-item:disabled { color: #6c757d; pointer-events: none; - background-color: #fff; + background-color: #ffffff; } .list-group-item.active { z-index: 2; - color: #fff; - background-color: #f1641e; - border-color: #f1641e; + color: #ffffff; + background-color: #d84848; + border-color: #d84848; } .list-group-item + .list-group-item { border-top-width: 0; @@ -4831,6 +5243,7 @@ a.badge-dark:focus { margin-top: -1px; border-top-width: 1px; } + .list-group-horizontal { flex-direction: row; } @@ -4853,6 +5266,7 @@ a.badge-dark:focus { margin-left: -1px; border-left-width: 1px; } + @media (min-width: 576px) { .list-group-horizontal-sm { flex-direction: row; @@ -4958,152 +5372,163 @@ a.badge-dark:focus { .list-group-flush > .list-group-item:last-child { border-bottom-width: 0; } + .list-group-item-primary { - color: #8e4420; - background-color: #fbd4c0; + color: #813636; + background-color: #f4cccc; } -.list-group-item-primary.list-group-item-action:focus, -.list-group-item-primary.list-group-item-action:hover { - color: #8e4420; - background-color: #f9c4a8; +.list-group-item-primary.list-group-item-action:hover, +.list-group-item-primary.list-group-item-action:focus { + color: #813636; + background-color: #efb7b7; } .list-group-item-primary.list-group-item-action.active { - color: #fff; - background-color: #8e4420; - border-color: #8e4420; + color: #ffffff; + background-color: #813636; + border-color: #813636; } + .list-group-item-secondary { color: #10783b; background-color: #b8f0cf; } -.list-group-item-secondary.list-group-item-action:focus, -.list-group-item-secondary.list-group-item-action:hover { +.list-group-item-secondary.list-group-item-action:hover, +.list-group-item-secondary.list-group-item-action:focus { color: #10783b; background-color: #a3ecc1; } .list-group-item-secondary.list-group-item-action.active { - color: #fff; + color: #ffffff; background-color: #10783b; border-color: #10783b; } + .list-group-item-success { color: #45198e; background-color: #d4bcfb; } -.list-group-item-success.list-group-item-action:focus, -.list-group-item-success.list-group-item-action:hover { +.list-group-item-success.list-group-item-action:hover, +.list-group-item-success.list-group-item-action:focus { color: #45198e; background-color: #c5a4fa; } .list-group-item-success.list-group-item-action.active { - color: #fff; + color: #ffffff; background-color: #45198e; border-color: #45198e; } + .list-group-item-info { color: #105095; background-color: #b8daff; } -.list-group-item-info.list-group-item-action:focus, -.list-group-item-info.list-group-item-action:hover { +.list-group-item-info.list-group-item-action:hover, +.list-group-item-info.list-group-item-action:focus { color: #105095; background-color: #9fcdff; } .list-group-item-info.list-group-item-action.active { - color: #fff; + color: #ffffff; background-color: #105095; border-color: #105095; } + .list-group-item-warning { color: #957514; background-color: #ffeeba; } -.list-group-item-warning.list-group-item-action:focus, -.list-group-item-warning.list-group-item-action:hover { +.list-group-item-warning.list-group-item-action:hover, +.list-group-item-warning.list-group-item-action:focus { color: #957514; background-color: #ffe8a1; } .list-group-item-warning.list-group-item-action.active { - color: #fff; + color: #ffffff; background-color: #957514; border-color: #957514; } + .list-group-item-danger { - color: #572b15; - background-color: #ddc6ba; + color: #581f1f; + background-color: #dec0c0; } -.list-group-item-danger.list-group-item-action:focus, -.list-group-item-danger.list-group-item-action:hover { - color: #572b15; - background-color: #d5b8a9; +.list-group-item-danger.list-group-item-action:hover, +.list-group-item-danger.list-group-item-action:focus { + color: #581f1f; + background-color: #d5afaf; } .list-group-item-danger.list-group-item-action.active { - color: #fff; - background-color: #572b15; - border-color: #572b15; + color: #ffffff; + background-color: #581f1f; + border-color: #581f1f; } + .list-group-item-light { color: #919292; background-color: #fdfdfe; } -.list-group-item-light.list-group-item-action:focus, -.list-group-item-light.list-group-item-action:hover { +.list-group-item-light.list-group-item-action:hover, +.list-group-item-light.list-group-item-action:focus { color: #919292; background-color: #ececf6; } .list-group-item-light.list-group-item-action.active { - color: #fff; + color: #ffffff; background-color: #919292; border-color: #919292; } + .list-group-item-dark { color: #2b2e32; background-color: #c6c8ca; } -.list-group-item-dark.list-group-item-action:focus, -.list-group-item-dark.list-group-item-action:hover { +.list-group-item-dark.list-group-item-action:hover, +.list-group-item-dark.list-group-item-action:focus { color: #2b2e32; background-color: #b9bbbe; } .list-group-item-dark.list-group-item-action.active { - color: #fff; + color: #ffffff; background-color: #2b2e32; border-color: #2b2e32; } + .close { float: right; font-size: 1.5rem; font-weight: 600; line-height: 1; - color: #222; - text-shadow: 0 1px 0 #fff; + color: #222222; + text-shadow: 0 1px 0 #ffffff; opacity: 0.5; } .close:hover { - color: #222; + color: #222222; text-decoration: none; } -.close:not(:disabled):not(.disabled):focus, -.close:not(:disabled):not(.disabled):hover { +.close:not(:disabled):not(.disabled):hover, +.close:not(:disabled):not(.disabled):focus { opacity: 0.75; } + button.close { padding: 0; background-color: transparent; border: 0; } + a.close.disabled { pointer-events: none; } + .toast { + flex-basis: 350px; max-width: 350px; - overflow: hidden; font-size: 0.875rem; background-color: rgba(255, 255, 255, 0.85); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 0.25rem 0.75rem rgba(34, 34, 34, 0.1); - backdrop-filter: blur(10px); opacity: 0; border-radius: 0.25rem; } @@ -5120,6 +5545,7 @@ a.close.disabled { .toast.hide { display: none; } + .toast-header { display: flex; align-items: center; @@ -5128,10 +5554,14 @@ a.close.disabled { background-color: rgba(255, 255, 255, 0.85); background-clip: padding-box; border-bottom: 1px solid rgba(0, 0, 0, 0.05); + border-top-left-radius: calc(0.25rem - 1px); + border-top-right-radius: calc(0.25rem - 1px); } + .toast-body { padding: 0.75rem; } + .modal-open { overflow: hidden; } @@ -5139,6 +5569,7 @@ a.close.disabled { overflow-x: hidden; overflow-y: auto; } + .modal { position: fixed; top: 0; @@ -5150,6 +5581,7 @@ a.close.disabled { overflow: hidden; outline: 0; } + .modal-dialog { position: relative; width: auto; @@ -5171,6 +5603,7 @@ a.close.disabled { .modal.modal-static .modal-dialog { transform: scale(1.02); } + .modal-dialog-scrollable { display: flex; max-height: calc(100% - 1rem); @@ -5179,13 +5612,14 @@ a.close.disabled { max-height: calc(100vh - 1rem); overflow: hidden; } -.modal-dialog-scrollable .modal-footer, -.modal-dialog-scrollable .modal-header { +.modal-dialog-scrollable .modal-header, +.modal-dialog-scrollable .modal-footer { flex-shrink: 0; } .modal-dialog-scrollable .modal-body { overflow-y: auto; } + .modal-dialog-centered { display: flex; align-items: center; @@ -5208,18 +5642,20 @@ a.close.disabled { .modal-dialog-centered.modal-dialog-scrollable::before { content: none; } + .modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; - background-color: #fff; + background-color: #ffffff; background-clip: padding-box; border: 1px solid rgba(34, 34, 34, 0.2); border-radius: 0.5rem; outline: 0; } + .modal-backdrop { position: fixed; top: 0; @@ -5227,7 +5663,7 @@ a.close.disabled { z-index: 1040; width: 100vw; height: 100vh; - background-color: #222; + background-color: #222222; } .modal-backdrop.fade { opacity: 0; @@ -5235,6 +5671,7 @@ a.close.disabled { .modal-backdrop.show { opacity: 0.5; } + .modal-header { display: flex; align-items: flex-start; @@ -5248,15 +5685,18 @@ a.close.disabled { padding: 1rem 1rem; margin: -1rem -1rem -1rem auto; } + .modal-title { margin-bottom: 0; line-height: 1.5; } + .modal-body { position: relative; flex: 1 1 auto; padding: 1rem; } + .modal-footer { display: flex; flex-wrap: wrap; @@ -5270,6 +5710,7 @@ a.close.disabled { .modal-footer > * { margin: 0.25rem; } + .modal-scrollbar-measure { position: absolute; top: -9999px; @@ -5277,6 +5718,7 @@ a.close.disabled { height: 50px; overflow: scroll; } + @media (min-width: 576px) { .modal-dialog { max-width: 500px; @@ -5316,7 +5758,7 @@ a.close.disabled { display: block; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Droid Sans", "Segoe UI", - Helvetica, Arial, sans-serif; + "Helvetica", Arial, sans-serif; font-style: normal; font-weight: 400; line-height: 1.5; @@ -5327,8 +5769,8 @@ a.close.disabled { text-transform: none; letter-spacing: normal; word-break: normal; - word-spacing: normal; white-space: normal; + word-spacing: normal; line-break: auto; font-size: 0.875rem; word-wrap: break-word; @@ -5349,74 +5791,80 @@ a.close.disabled { border-color: transparent; border-style: solid; } -.bs-tooltip-auto[x-placement^="top"], -.bs-tooltip-top { + +.bs-tooltip-top, +.bs-tooltip-auto[x-placement^="top"] { padding: 0.4rem 0; } -.bs-tooltip-auto[x-placement^="top"] .arrow, -.bs-tooltip-top .arrow { +.bs-tooltip-top .arrow, +.bs-tooltip-auto[x-placement^="top"] .arrow { bottom: 0; } -.bs-tooltip-auto[x-placement^="top"] .arrow::before, -.bs-tooltip-top .arrow::before { +.bs-tooltip-top .arrow::before, +.bs-tooltip-auto[x-placement^="top"] .arrow::before { top: 0; border-width: 0.4rem 0.4rem 0; - border-top-color: #222; + border-top-color: #222222; } -.bs-tooltip-auto[x-placement^="right"], -.bs-tooltip-right { + +.bs-tooltip-right, +.bs-tooltip-auto[x-placement^="right"] { padding: 0 0.4rem; } -.bs-tooltip-auto[x-placement^="right"] .arrow, -.bs-tooltip-right .arrow { +.bs-tooltip-right .arrow, +.bs-tooltip-auto[x-placement^="right"] .arrow { left: 0; width: 0.4rem; height: 0.8rem; } -.bs-tooltip-auto[x-placement^="right"] .arrow::before, -.bs-tooltip-right .arrow::before { +.bs-tooltip-right .arrow::before, +.bs-tooltip-auto[x-placement^="right"] .arrow::before { right: 0; border-width: 0.4rem 0.4rem 0.4rem 0; - border-right-color: #222; + border-right-color: #222222; } -.bs-tooltip-auto[x-placement^="bottom"], -.bs-tooltip-bottom { + +.bs-tooltip-bottom, +.bs-tooltip-auto[x-placement^="bottom"] { padding: 0.4rem 0; } -.bs-tooltip-auto[x-placement^="bottom"] .arrow, -.bs-tooltip-bottom .arrow { +.bs-tooltip-bottom .arrow, +.bs-tooltip-auto[x-placement^="bottom"] .arrow { top: 0; } -.bs-tooltip-auto[x-placement^="bottom"] .arrow::before, -.bs-tooltip-bottom .arrow::before { +.bs-tooltip-bottom .arrow::before, +.bs-tooltip-auto[x-placement^="bottom"] .arrow::before { bottom: 0; border-width: 0 0.4rem 0.4rem; - border-bottom-color: #222; + border-bottom-color: #222222; } -.bs-tooltip-auto[x-placement^="left"], -.bs-tooltip-left { + +.bs-tooltip-left, +.bs-tooltip-auto[x-placement^="left"] { padding: 0 0.4rem; } -.bs-tooltip-auto[x-placement^="left"] .arrow, -.bs-tooltip-left .arrow { +.bs-tooltip-left .arrow, +.bs-tooltip-auto[x-placement^="left"] .arrow { right: 0; width: 0.4rem; height: 0.8rem; } -.bs-tooltip-auto[x-placement^="left"] .arrow::before, -.bs-tooltip-left .arrow::before { +.bs-tooltip-left .arrow::before, +.bs-tooltip-auto[x-placement^="left"] .arrow::before { left: 0; border-width: 0.4rem 0 0.4rem 0.4rem; - border-left-color: #222; + border-left-color: #222222; } + .tooltip-inner { max-width: 200px; padding: 0.25rem 0.5rem; - color: #fff; + color: #ffffff; text-align: center; - background-color: #222; + background-color: #222222; border-radius: 0.5rem; } + .popover { position: absolute; top: 0; @@ -5425,7 +5873,7 @@ a.close.disabled { display: block; max-width: 276px; font-family: -apple-system, BlinkMacSystemFont, "Droid Sans", "Segoe UI", - Helvetica, Arial, sans-serif; + "Helvetica", Arial, sans-serif; font-style: normal; font-weight: 400; line-height: 1.5; @@ -5436,12 +5884,12 @@ a.close.disabled { text-transform: none; letter-spacing: normal; word-break: normal; - word-spacing: normal; white-space: normal; + word-spacing: normal; line-break: auto; font-size: 0.875rem; word-wrap: break-word; - background-color: #fff; + background-color: #ffffff; background-clip: padding-box; border: 1px solid rgba(34, 34, 34, 0.2); border-radius: 0.5rem; @@ -5453,79 +5901,82 @@ a.close.disabled { height: 0.5rem; margin: 0 0.5rem; } -.popover .arrow::after, -.popover .arrow::before { +.popover .arrow::before, +.popover .arrow::after { position: absolute; display: block; content: ""; border-color: transparent; border-style: solid; } -.bs-popover-auto[x-placement^="top"], -.bs-popover-top { + +.bs-popover-top, +.bs-popover-auto[x-placement^="top"] { margin-bottom: 0.5rem; } -.bs-popover-auto[x-placement^="top"] > .arrow, -.bs-popover-top > .arrow { +.bs-popover-top > .arrow, +.bs-popover-auto[x-placement^="top"] > .arrow { bottom: calc(-0.5rem - 1px); } -.bs-popover-auto[x-placement^="top"] > .arrow::before, -.bs-popover-top > .arrow::before { +.bs-popover-top > .arrow::before, +.bs-popover-auto[x-placement^="top"] > .arrow::before { bottom: 0; border-width: 0.5rem 0.5rem 0; border-top-color: rgba(34, 34, 34, 0.25); } -.bs-popover-auto[x-placement^="top"] > .arrow::after, -.bs-popover-top > .arrow::after { +.bs-popover-top > .arrow::after, +.bs-popover-auto[x-placement^="top"] > .arrow::after { bottom: 1px; border-width: 0.5rem 0.5rem 0; - border-top-color: #fff; + border-top-color: #ffffff; } -.bs-popover-auto[x-placement^="right"], -.bs-popover-right { + +.bs-popover-right, +.bs-popover-auto[x-placement^="right"] { margin-left: 0.5rem; } -.bs-popover-auto[x-placement^="right"] > .arrow, -.bs-popover-right > .arrow { +.bs-popover-right > .arrow, +.bs-popover-auto[x-placement^="right"] > .arrow { left: calc(-0.5rem - 1px); width: 0.5rem; height: 1rem; margin: 0.5rem 0; } -.bs-popover-auto[x-placement^="right"] > .arrow::before, -.bs-popover-right > .arrow::before { +.bs-popover-right > .arrow::before, +.bs-popover-auto[x-placement^="right"] > .arrow::before { left: 0; border-width: 0.5rem 0.5rem 0.5rem 0; border-right-color: rgba(34, 34, 34, 0.25); } -.bs-popover-auto[x-placement^="right"] > .arrow::after, -.bs-popover-right > .arrow::after { +.bs-popover-right > .arrow::after, +.bs-popover-auto[x-placement^="right"] > .arrow::after { left: 1px; border-width: 0.5rem 0.5rem 0.5rem 0; - border-right-color: #fff; + border-right-color: #ffffff; } -.bs-popover-auto[x-placement^="bottom"], -.bs-popover-bottom { + +.bs-popover-bottom, +.bs-popover-auto[x-placement^="bottom"] { margin-top: 0.5rem; } -.bs-popover-auto[x-placement^="bottom"] > .arrow, -.bs-popover-bottom > .arrow { +.bs-popover-bottom > .arrow, +.bs-popover-auto[x-placement^="bottom"] > .arrow { top: calc(-0.5rem - 1px); } -.bs-popover-auto[x-placement^="bottom"] > .arrow::before, -.bs-popover-bottom > .arrow::before { +.bs-popover-bottom > .arrow::before, +.bs-popover-auto[x-placement^="bottom"] > .arrow::before { top: 0; border-width: 0 0.5rem 0.5rem 0.5rem; border-bottom-color: rgba(34, 34, 34, 0.25); } -.bs-popover-auto[x-placement^="bottom"] > .arrow::after, -.bs-popover-bottom > .arrow::after { +.bs-popover-bottom > .arrow::after, +.bs-popover-auto[x-placement^="bottom"] > .arrow::after { top: 1px; border-width: 0 0.5rem 0.5rem 0.5rem; - border-bottom-color: #fff; + border-bottom-color: #ffffff; } -.bs-popover-auto[x-placement^="bottom"] .popover-header::before, -.bs-popover-bottom .popover-header::before { +.bs-popover-bottom .popover-header::before, +.bs-popover-auto[x-placement^="bottom"] .popover-header::before { position: absolute; top: 0; left: 50%; @@ -5535,29 +5986,31 @@ a.close.disabled { content: ""; border-bottom: 1px solid #f7f7f7; } -.bs-popover-auto[x-placement^="left"], -.bs-popover-left { + +.bs-popover-left, +.bs-popover-auto[x-placement^="left"] { margin-right: 0.5rem; } -.bs-popover-auto[x-placement^="left"] > .arrow, -.bs-popover-left > .arrow { +.bs-popover-left > .arrow, +.bs-popover-auto[x-placement^="left"] > .arrow { right: calc(-0.5rem - 1px); width: 0.5rem; height: 1rem; margin: 0.5rem 0; } -.bs-popover-auto[x-placement^="left"] > .arrow::before, -.bs-popover-left > .arrow::before { +.bs-popover-left > .arrow::before, +.bs-popover-auto[x-placement^="left"] > .arrow::before { right: 0; border-width: 0.5rem 0 0.5rem 0.5rem; border-left-color: rgba(34, 34, 34, 0.25); } -.bs-popover-auto[x-placement^="left"] > .arrow::after, -.bs-popover-left > .arrow::after { +.bs-popover-left > .arrow::after, +.bs-popover-auto[x-placement^="left"] > .arrow::after { right: 1px; border-width: 0.5rem 0 0.5rem 0.5rem; - border-left-color: #fff; + border-left-color: #ffffff; } + .popover-header { padding: 0.5rem 0.75rem; margin-bottom: 0; @@ -5571,16 +6024,20 @@ a.close.disabled { .popover-header:empty { display: none; } + .popover-body { padding: 0.5rem 0.75rem; color: #495057; } + .carousel { position: relative; } + .carousel.pointer-event { touch-action: pan-y; } + .carousel-inner { position: relative; width: 100%; @@ -5591,6 +6048,7 @@ a.close.disabled { clear: both; content: ""; } + .carousel-item { position: relative; display: none; @@ -5605,27 +6063,31 @@ a.close.disabled { transition: none; } } + +.carousel-item.active, .carousel-item-next, -.carousel-item-prev, -.carousel-item.active { +.carousel-item-prev { display: block; } -.active.carousel-item-right, -.carousel-item-next:not(.carousel-item-left) { + +.carousel-item-next:not(.carousel-item-left), +.active.carousel-item-right { transform: translateX(100%); } -.active.carousel-item-left, -.carousel-item-prev:not(.carousel-item-right) { + +.carousel-item-prev:not(.carousel-item-right), +.active.carousel-item-left { transform: translateX(-100%); } + .carousel-fade .carousel-item { opacity: 0; transition-property: opacity; transform: none; } +.carousel-fade .carousel-item.active, .carousel-fade .carousel-item-next.carousel-item-left, -.carousel-fade .carousel-item-prev.carousel-item-right, -.carousel-fade .carousel-item.active { +.carousel-fade .carousel-item-prev.carousel-item-right { z-index: 1; opacity: 1; } @@ -5641,8 +6103,9 @@ a.close.disabled { transition: none; } } -.carousel-control-next, -.carousel-control-prev { + +.carousel-control-prev, +.carousel-control-next { position: absolute; top: 0; bottom: 0; @@ -5651,45 +6114,54 @@ a.close.disabled { align-items: center; justify-content: center; width: 15%; - color: #fff; + padding: 0; + color: #ffffff; text-align: center; + background: none; + border: 0; opacity: 0.5; transition: opacity 0.15s ease; } @media (prefers-reduced-motion: reduce) { - .carousel-control-next, - .carousel-control-prev { + .carousel-control-prev, + .carousel-control-next { transition: none; } } -.carousel-control-next:focus, -.carousel-control-next:hover, +.carousel-control-prev:hover, .carousel-control-prev:focus, -.carousel-control-prev:hover { - color: #fff; +.carousel-control-next:hover, +.carousel-control-next:focus { + color: #ffffff; text-decoration: none; outline: 0; opacity: 0.9; } + .carousel-control-prev { left: 0; } + .carousel-control-next { right: 0; } -.carousel-control-next-icon, -.carousel-control-prev-icon { + +.carousel-control-prev-icon, +.carousel-control-next-icon { display: inline-block; width: 20px; height: 20px; - background: no-repeat 50%/100% 100%; + background: 50%/100% 100% no-repeat; } + .carousel-control-prev-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e"); } + .carousel-control-next-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e"); } + .carousel-indicators { position: absolute; right: 0; @@ -5712,7 +6184,7 @@ a.close.disabled { margin-left: 3px; text-indent: -999px; cursor: pointer; - background-color: #fff; + background-color: #ffffff; background-clip: padding-box; border-top: 10px solid transparent; border-bottom: 10px solid transparent; @@ -5727,6 +6199,7 @@ a.close.disabled { .carousel-indicators .active { opacity: 1; } + .carousel-caption { position: absolute; right: 15%; @@ -5735,9 +6208,10 @@ a.close.disabled { z-index: 10; padding-top: 20px; padding-bottom: 20px; - color: #fff; + color: #ffffff; text-align: center; } + @keyframes spinner-border { to { transform: rotate(360deg); @@ -5747,17 +6221,19 @@ a.close.disabled { display: inline-block; width: 2rem; height: 2rem; - vertical-align: text-bottom; - border: 0.25em solid currentColor; + vertical-align: -0.125em; + border: 0.25em solid currentcolor; border-right-color: transparent; border-radius: 50%; - animation: spinner-border 0.75s linear infinite; + animation: 0.75s linear infinite spinner-border; } + .spinner-border-sm { width: 1rem; height: 1rem; border-width: 0.2em; } + @keyframes spinner-grow { 0% { transform: scale(0); @@ -5771,235 +6247,306 @@ a.close.disabled { display: inline-block; width: 2rem; height: 2rem; - vertical-align: text-bottom; - background-color: currentColor; + vertical-align: -0.125em; + background-color: currentcolor; border-radius: 50%; opacity: 0; - animation: spinner-grow 0.75s linear infinite; + animation: 0.75s linear infinite spinner-grow; } + .spinner-grow-sm { width: 1rem; height: 1rem; } + +@media (prefers-reduced-motion: reduce) { + .spinner-border, + .spinner-grow { + animation-duration: 1.5s; + } +} .align-baseline { vertical-align: baseline !important; } + .align-top { vertical-align: top !important; } + .align-middle { vertical-align: middle !important; } + .align-bottom { vertical-align: bottom !important; } + .align-text-bottom { vertical-align: text-bottom !important; } + .align-text-top { vertical-align: text-top !important; } + .bg-primary { - background-color: #f1641e !important; + background-color: #d84848 !important; } -a.bg-primary:focus, + a.bg-primary:hover, -button.bg-primary:focus, -button.bg-primary:hover { - background-color: #cf4d0d !important; +a.bg-primary:focus, +button.bg-primary:hover, +button.bg-primary:focus { + background-color: #c32a2a !important; } + .bg-secondary { background-color: #00c853 !important; } -a.bg-secondary:focus, + a.bg-secondary:hover, -button.bg-secondary:focus, -button.bg-secondary:hover { +a.bg-secondary:focus, +button.bg-secondary:hover, +button.bg-secondary:focus { background-color: #00953e !important; } + .bg-success { background-color: #6610f2 !important; } -a.bg-success:focus, + a.bg-success:hover, -button.bg-success:focus, -button.bg-success:hover { +a.bg-success:focus, +button.bg-success:hover, +button.bg-success:focus { background-color: #510bc4 !important; } + .bg-info { background-color: #007bff !important; } -a.bg-info:focus, + a.bg-info:hover, -button.bg-info:focus, -button.bg-info:hover { +a.bg-info:focus, +button.bg-info:hover, +button.bg-info:focus { background-color: #0062cc !important; } + .bg-warning { background-color: #ffc107 !important; } -a.bg-warning:focus, + a.bg-warning:hover, -button.bg-warning:focus, -button.bg-warning:hover { +a.bg-warning:focus, +button.bg-warning:hover, +button.bg-warning:focus { background-color: #d39e00 !important; } + .bg-danger { - background-color: #873208 !important; + background-color: #891d1d !important; } -a.bg-danger:focus, + a.bg-danger:hover, -button.bg-danger:focus, -button.bg-danger:hover { - background-color: #572105 !important; +a.bg-danger:focus, +button.bg-danger:hover, +button.bg-danger:focus { + background-color: #5e1414 !important; } + .bg-light { background-color: #f8f9fa !important; } -a.bg-light:focus, + a.bg-light:hover, -button.bg-light:focus, -button.bg-light:hover { +a.bg-light:focus, +button.bg-light:hover, +button.bg-light:focus { background-color: #dae0e5 !important; } + .bg-dark { background-color: #343a40 !important; } -a.bg-dark:focus, + a.bg-dark:hover, -button.bg-dark:focus, -button.bg-dark:hover { +a.bg-dark:focus, +button.bg-dark:hover, +button.bg-dark:focus { background-color: #1d2124 !important; } + .bg-white { - background-color: #fff !important; + background-color: #ffffff !important; } + .bg-transparent { background-color: transparent !important; } + .border { border: 1px solid #495057 !important; } + .border-top { border-top: 1px solid #495057 !important; } + .border-right { border-right: 1px solid #495057 !important; } + .border-bottom { border-bottom: 1px solid #495057 !important; } + .border-left { border-left: 1px solid #495057 !important; } + .border-0 { border: 0 !important; } + .border-top-0 { border-top: 0 !important; } + .border-right-0 { border-right: 0 !important; } + .border-bottom-0 { border-bottom: 0 !important; } + .border-left-0 { border-left: 0 !important; } + .border-primary { - border-color: #f1641e !important; + border-color: #d84848 !important; } + .border-secondary { - border-color: #c80000 !important; + border-color: #00c853 !important; } + .border-success { border-color: #6610f2 !important; } + .border-info { border-color: #007bff !important; } + .border-warning { border-color: #ffc107 !important; } + .border-danger { - border-color: #873208 !important; + border-color: #891d1d !important; } + .border-light { border-color: #f8f9fa !important; } + .border-dark { border-color: #343a40 !important; } + .border-white { - border-color: #fff !important; + border-color: #ffffff !important; } + .rounded-sm { border-radius: 1rem !important; } + .rounded { border-radius: 0.5rem !important; } + .rounded-top { border-top-left-radius: 0.5rem !important; border-top-right-radius: 0.5rem !important; } + .rounded-right { border-top-right-radius: 0.5rem !important; border-bottom-right-radius: 0.5rem !important; } + .rounded-bottom { border-bottom-right-radius: 0.5rem !important; border-bottom-left-radius: 0.5rem !important; } + .rounded-left { border-top-left-radius: 0.5rem !important; border-bottom-left-radius: 0.5rem !important; } + .rounded-lg { border-radius: 0.5rem !important; } + .rounded-circle { border-radius: 50% !important; } + .rounded-pill { border-radius: 0.25rem !important; } + .rounded-0 { border-radius: 0 !important; } + .clearfix::after { display: block; clear: both; content: ""; } + .d-none { display: none !important; } + .d-inline { display: inline !important; } + .d-inline-block { display: inline-block !important; } + .d-block { display: block !important; } + .d-table { display: table !important; } + .d-table-row { display: table-row !important; } + .d-table-cell { display: table-cell !important; } + .d-flex { display: flex !important; } + .d-inline-flex { display: inline-flex !important; } + @media (min-width: 576px) { .d-sm-none { display: none !important; @@ -6157,8 +6704,8 @@ button.bg-dark:hover { content: ""; } .embed-responsive .embed-responsive-item, -.embed-responsive embed, .embed-responsive iframe, +.embed-responsive embed, .embed-responsive object, .embed-responsive video { position: absolute; @@ -6169,120 +6716,159 @@ button.bg-dark:hover { height: 100%; border: 0; } + .embed-responsive-21by9::before { - padding-top: 42.85714%; + padding-top: 42.85714286%; } + .embed-responsive-16by9::before { padding-top: 56.25%; } + .embed-responsive-4by3::before { padding-top: 75%; } + .embed-responsive-1by1::before { padding-top: 100%; } + .flex-row { flex-direction: row !important; } + .flex-column { flex-direction: column !important; } + .flex-row-reverse { flex-direction: row-reverse !important; } + .flex-column-reverse { flex-direction: column-reverse !important; } + .flex-wrap { flex-wrap: wrap !important; } + .flex-nowrap { flex-wrap: nowrap !important; } + .flex-wrap-reverse { flex-wrap: wrap-reverse !important; } + .flex-fill { flex: 1 1 auto !important; } + .flex-grow-0 { flex-grow: 0 !important; } + .flex-grow-1 { flex-grow: 1 !important; } + .flex-shrink-0 { flex-shrink: 0 !important; } + .flex-shrink-1 { flex-shrink: 1 !important; } + .justify-content-start { justify-content: flex-start !important; } + .justify-content-end { justify-content: flex-end !important; } + .justify-content-center { justify-content: center !important; } + .justify-content-between { justify-content: space-between !important; } + .justify-content-around { justify-content: space-around !important; } + .align-items-start { align-items: flex-start !important; } + .align-items-end { align-items: flex-end !important; } + .align-items-center { align-items: center !important; } + .align-items-baseline { align-items: baseline !important; } + .align-items-stretch { align-items: stretch !important; } + .align-content-start { align-content: flex-start !important; } + .align-content-end { align-content: flex-end !important; } + .align-content-center { align-content: center !important; } + .align-content-between { align-content: space-between !important; } + .align-content-around { align-content: space-around !important; } + .align-content-stretch { align-content: stretch !important; } + .align-self-auto { align-self: auto !important; } + .align-self-start { align-self: flex-start !important; } + .align-self-end { align-self: flex-end !important; } + .align-self-center { align-self: center !important; } + .align-self-baseline { align-self: baseline !important; } + .align-self-stretch { align-self: stretch !important; } + @media (min-width: 576px) { .flex-sm-row { flex-direction: row !important; @@ -6702,12 +7288,15 @@ button.bg-dark:hover { .float-left { float: left !important; } + .float-right { float: right !important; } + .float-none { float: none !important; } + @media (min-width: 576px) { .float-sm-left { float: left !important; @@ -6755,33 +7344,43 @@ button.bg-dark:hover { .user-select-all { user-select: all !important; } + .user-select-auto { user-select: auto !important; } + .user-select-none { user-select: none !important; } + .overflow-auto { overflow: auto !important; } + .overflow-hidden { overflow: hidden !important; } + .position-static { position: static !important; } + .position-relative { position: relative !important; } + .position-absolute { position: absolute !important; } + .position-fixed { position: fixed !important; } + .position-sticky { position: sticky !important; } + .fixed-top { position: fixed; top: 0; @@ -6789,6 +7388,7 @@ button.bg-dark:hover { left: 0; z-index: 1030; } + .fixed-bottom { position: fixed; right: 0; @@ -6796,6 +7396,7 @@ button.bg-dark:hover { left: 0; z-index: 1030; } + @supports (position: sticky) { .sticky-top { position: sticky; @@ -6803,6 +7404,7 @@ button.bg-dark:hover { z-index: 1020; } } + .sr-only { position: absolute; width: 1px; @@ -6814,6 +7416,7 @@ button.bg-dark:hover { white-space: nowrap; border: 0; } + .sr-only-focusable:active, .sr-only-focusable:focus { position: static; @@ -6823,408 +7426,519 @@ button.bg-dark:hover { clip: auto; white-space: normal; } + .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(34, 34, 34, 0.075) !important; } + .shadow { box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15) !important; } + .shadow-lg { box-shadow: 0 1rem 3rem rgba(34, 34, 34, 0.175) !important; } + .shadow-none { box-shadow: none !important; } + .w-25 { width: 25% !important; } + .w-50 { width: 50% !important; } + .w-75 { width: 75% !important; } + .w-100 { width: 100% !important; } + .w-auto { width: auto !important; } + .h-25 { height: 25% !important; } + .h-50 { height: 50% !important; } + .h-75 { height: 75% !important; } + .h-100 { height: 100% !important; } + .h-auto { height: auto !important; } + .mw-100 { max-width: 100% !important; } + .mh-100 { max-height: 100% !important; } + .min-vw-100 { min-width: 100vw !important; } + .min-vh-100 { min-height: 100vh !important; } + .vw-100 { width: 100vw !important; } + .vh-100 { height: 100vh !important; } + .m-0 { margin: 0 !important; } + .mt-0, .my-0 { margin-top: 0 !important; } + .mr-0, .mx-0 { margin-right: 0 !important; } + .mb-0, .my-0 { margin-bottom: 0 !important; } + .ml-0, .mx-0 { margin-left: 0 !important; } + .m-1 { margin: 0.25rem !important; } + .mt-1, .my-1 { margin-top: 0.25rem !important; } + .mr-1, .mx-1 { margin-right: 0.25rem !important; } + .mb-1, .my-1 { margin-bottom: 0.25rem !important; } + .ml-1, .mx-1 { margin-left: 0.25rem !important; } + .m-2 { margin: 0.5rem !important; } + .mt-2, .my-2 { margin-top: 0.5rem !important; } + .mr-2, .mx-2 { margin-right: 0.5rem !important; } + .mb-2, .my-2 { margin-bottom: 0.5rem !important; } + .ml-2, .mx-2 { margin-left: 0.5rem !important; } + .m-3 { margin: 1rem !important; } + .mt-3, .my-3 { margin-top: 1rem !important; } + .mr-3, .mx-3 { margin-right: 1rem !important; } + .mb-3, .my-3 { margin-bottom: 1rem !important; } + .ml-3, .mx-3 { margin-left: 1rem !important; } + .m-4 { margin: 1.5rem !important; } + .mt-4, .my-4 { margin-top: 1.5rem !important; } + .mr-4, .mx-4 { margin-right: 1.5rem !important; } + .mb-4, .my-4 { margin-bottom: 1.5rem !important; } + .ml-4, .mx-4 { margin-left: 1.5rem !important; } + .m-5 { margin: 3rem !important; } + .mt-5, .my-5 { margin-top: 3rem !important; } + .mr-5, .mx-5 { margin-right: 3rem !important; } + .mb-5, .my-5 { margin-bottom: 3rem !important; } + .ml-5, .mx-5 { margin-left: 3rem !important; } + .p-0 { padding: 0 !important; } + .pt-0, .py-0 { padding-top: 0 !important; } + .pr-0, .px-0 { padding-right: 0 !important; } + .pb-0, .py-0 { padding-bottom: 0 !important; } + .pl-0, .px-0 { padding-left: 0 !important; } + .p-1 { padding: 0.25rem !important; } + .pt-1, .py-1 { padding-top: 0.25rem !important; } + .pr-1, .px-1 { padding-right: 0.25rem !important; } + .pb-1, .py-1 { padding-bottom: 0.25rem !important; } + .pl-1, .px-1 { padding-left: 0.25rem !important; } + .p-2 { padding: 0.5rem !important; } + .pt-2, .py-2 { padding-top: 0.5rem !important; } + .pr-2, .px-2 { padding-right: 0.5rem !important; } + .pb-2, .py-2 { padding-bottom: 0.5rem !important; } + .pl-2, .px-2 { padding-left: 0.5rem !important; } + .p-3 { padding: 1rem !important; } + .pt-3, .py-3 { padding-top: 1rem !important; } + .pr-3, .px-3 { padding-right: 1rem !important; } + .pb-3, .py-3 { padding-bottom: 1rem !important; } + .pl-3, .px-3 { padding-left: 1rem !important; } + .p-4 { padding: 1.5rem !important; } + .pt-4, .py-4 { padding-top: 1.5rem !important; } + .pr-4, .px-4 { padding-right: 1.5rem !important; } + .pb-4, .py-4 { padding-bottom: 1.5rem !important; } + .pl-4, .px-4 { padding-left: 1.5rem !important; } + .p-5 { padding: 3rem !important; } + .pt-5, .py-5 { padding-top: 3rem !important; } + .pr-5, .px-5 { padding-right: 3rem !important; } + .pb-5, .py-5 { padding-bottom: 3rem !important; } + .pl-5, .px-5 { padding-left: 3rem !important; } + .m-n1 { margin: -0.25rem !important; } + .mt-n1, .my-n1 { margin-top: -0.25rem !important; } + .mr-n1, .mx-n1 { margin-right: -0.25rem !important; } + .mb-n1, .my-n1 { margin-bottom: -0.25rem !important; } + .ml-n1, .mx-n1 { margin-left: -0.25rem !important; } + .m-n2 { margin: -0.5rem !important; } + .mt-n2, .my-n2 { margin-top: -0.5rem !important; } + .mr-n2, .mx-n2 { margin-right: -0.5rem !important; } + .mb-n2, .my-n2 { margin-bottom: -0.5rem !important; } + .ml-n2, .mx-n2 { margin-left: -0.5rem !important; } + .m-n3 { margin: -1rem !important; } + .mt-n3, .my-n3 { margin-top: -1rem !important; } + .mr-n3, .mx-n3 { margin-right: -1rem !important; } + .mb-n3, .my-n3 { margin-bottom: -1rem !important; } + .ml-n3, .mx-n3 { margin-left: -1rem !important; } + .m-n4 { margin: -1.5rem !important; } + .mt-n4, .my-n4 { margin-top: -1.5rem !important; } + .mr-n4, .mx-n4 { margin-right: -1.5rem !important; } + .mb-n4, .my-n4 { margin-bottom: -1.5rem !important; } + .ml-n4, .mx-n4 { margin-left: -1.5rem !important; } + .m-n5 { margin: -3rem !important; } + .mt-n5, .my-n5 { margin-top: -3rem !important; } + .mr-n5, .mx-n5 { margin-right: -3rem !important; } + .mb-n5, .my-n5 { margin-bottom: -3rem !important; } + .ml-n5, .mx-n5 { margin-left: -3rem !important; } + .m-auto { margin: auto !important; } + .mt-auto, .my-auto { margin-top: auto !important; } + .mr-auto, .mx-auto { margin-right: auto !important; } + .mb-auto, .my-auto { margin-bottom: auto !important; } + .ml-auto, .mx-auto { margin-left: auto !important; } + @media (min-width: 576px) { .m-sm-0 { margin: 0 !important; @@ -8612,33 +9326,42 @@ button.bg-dark:hover { content: ""; background-color: rgba(0, 0, 0, 0); } + .text-monospace { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; } + .text-justify { text-align: justify !important; } + .text-wrap { white-space: normal !important; } + .text-nowrap { white-space: nowrap !important; } + .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .text-left { text-align: left !important; } + .text-right { text-align: right !important; } + .text-center { text-align: center !important; } + @media (min-width: 576px) { .text-sm-left { text-align: left !important; @@ -8686,101 +9409,131 @@ button.bg-dark:hover { .text-lowercase { text-transform: lowercase !important; } + .text-uppercase { text-transform: uppercase !important; } + .text-capitalize { text-transform: capitalize !important; } + .font-weight-light { font-weight: 300 !important; } + .font-weight-lighter { font-weight: lighter !important; } + .font-weight-normal { font-weight: 400 !important; } + .font-weight-bold { font-weight: 600 !important; } + .font-weight-bolder { font-weight: bolder !important; } + .font-italic { font-style: italic !important; } + .text-white { - color: #fff !important; + color: #ffffff !important; } + .text-primary { - color: #f1641e !important; + color: #d84848 !important; } -a.text-primary:focus, -a.text-primary:hover { - color: #b7440b !important; + +a.text-primary:hover, +a.text-primary:focus { + color: #ae2525 !important; } + .text-secondary { color: #00c853 !important; } -a.text-secondary:focus, -a.text-secondary:hover { + +a.text-secondary:hover, +a.text-secondary:focus { color: #007c33 !important; } + .text-success { color: #6610f2 !important; } -a.text-success:focus, -a.text-success:hover { + +a.text-success:hover, +a.text-success:focus { color: #4709ac !important; } + .text-info { color: #007bff !important; } -a.text-info:focus, -a.text-info:hover { + +a.text-info:hover, +a.text-info:focus { color: #0056b3 !important; } + .text-warning { color: #ffc107 !important; } -a.text-warning:focus, -a.text-warning:hover { + +a.text-warning:hover, +a.text-warning:focus { color: #ba8b00 !important; } + .text-danger { - color: #873208 !important; + color: #891d1d !important; } -a.text-danger:focus, -a.text-danger:hover { - color: #3f1804 !important; + +a.text-danger:hover, +a.text-danger:focus { + color: #491010 !important; } + .text-light { color: #f8f9fa !important; } -a.text-light:focus, -a.text-light:hover { + +a.text-light:hover, +a.text-light:focus { color: #cbd3da !important; } + .text-dark { color: #343a40 !important; } -a.text-dark:focus, -a.text-dark:hover { + +a.text-dark:hover, +a.text-dark:focus { color: #121416 !important; } + .text-body { color: #495057 !important; } + .text-muted { color: #6c757d !important; } + .text-black-50 { color: rgba(34, 34, 34, 0.5) !important; } + .text-white-50 { color: rgba(255, 255, 255, 0.5) !important; } + .text-hide { font: 0/0 a; color: transparent; @@ -8788,25 +9541,32 @@ a.text-dark:hover { background-color: transparent; border: 0; } + .text-decoration-none { text-decoration: none !important; } + .text-break { + word-break: break-word !important; word-wrap: break-word !important; } + .text-reset { color: inherit !important; } + .visible { visibility: visible !important; } + .invisible { visibility: hidden !important; } + @media print { *, - ::after, - ::before { + *::before, + *::after { text-shadow: none !important; box-shadow: none !important; } @@ -8819,21 +9579,18 @@ a.text-dark:hover { pre { white-space: pre-wrap !important; } - blockquote, - pre { + pre, + blockquote { border: 1px solid #adb5bd; page-break-inside: avoid; } - thead { - display: table-header-group; - } - img, - tr { + tr, + img { page-break-inside: avoid; } + p, h2, - h3, - p { + h3 { orphans: 3; widows: 3; } @@ -8854,26 +9611,26 @@ a.text-dark:hover { display: none; } .badge { - border: 1px solid #222; + border: 1px solid #222222; } .table { border-collapse: collapse !important; } .table td, .table th { - background-color: #fff !important; + background-color: #ffffff !important; } - .table-bordered td, - .table-bordered th { + .table-bordered th, + .table-bordered td { border: 1px solid #dee2e6 !important; } .table-dark { color: inherit; } - .table-dark tbody + tbody, - .table-dark td, .table-dark th, - .table-dark thead th { + .table-dark td, + .table-dark thead th, + .table-dark tbody + tbody { border-color: #495057; } .table .thead-dark th { @@ -8881,3 +9638,5 @@ a.text-dark:hover { border-color: #495057; } } + +/*# sourceMappingURL=litely-red.css.map */ diff --git a/src/assets/css/themes/litely.css b/src/assets/css/themes/litely.css index 9f7d685d..8f7bfb7a 100644 --- a/src/assets/css/themes/litely.css +++ b/src/assets/css/themes/litely.css @@ -1,3 +1,10 @@ +@charset "UTF-8"; +/*! + * Bootstrap v4.6.2 (https://getbootstrap.com/) + * Copyright 2011-2022 The Bootstrap Authors + * Copyright 2011-2022 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) + */ :root { --blue: #007bff; --indigo: #6610f2; @@ -30,17 +37,20 @@ --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } + *, -::after, -::before { +*::before, +*::after { box-sizing: border-box; } + html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(34, 34, 34, 0); } + article, aside, figcaption, @@ -53,10 +63,11 @@ nav, section { display: block; } + body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Droid Sans", "Segoe UI", - Helvetica, Arial, sans-serif; + "Helvetica", Arial, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; @@ -64,14 +75,17 @@ body { text-align: left; background-color: #fff; } + [tabindex="-1"]:focus:not(:focus-visible) { outline: 0 !important; } + hr { box-sizing: content-box; height: 0; overflow: visible; } + h1, h2, h3, @@ -81,52 +95,63 @@ h6 { margin-top: 0; margin-bottom: 0.5rem; } + p { margin-top: 0; margin-bottom: 1rem; } -abbr[data-original-title], -abbr[title] { + +abbr[title], +abbr[data-original-title] { text-decoration: underline; text-decoration: underline dotted; cursor: help; border-bottom: 0; text-decoration-skip-ink: none; } + address { margin-bottom: 1rem; font-style: normal; line-height: inherit; } -dl, + ol, -ul { +ul, +dl { margin-top: 0; margin-bottom: 1rem; } + ol ol, +ul ul, ol ul, -ul ol, -ul ul { +ul ol { margin-bottom: 0; } + dt { font-weight: 600; } + dd { margin-bottom: 0.5rem; margin-left: 0; } + blockquote { margin: 0 0 1rem; } + b, strong { font-weight: bolder; } + small { font-size: 80%; } + sub, sup { position: relative; @@ -134,12 +159,15 @@ sup { line-height: 0; vertical-align: baseline; } + sub { bottom: -0.25em; } + sup { top: -0.5em; } + a { color: #f1641e; text-decoration: none; @@ -149,42 +177,50 @@ a:hover { color: #b7440b; text-decoration: underline; } -a:not([href]) { + +a:not([href]):not([class]) { color: inherit; text-decoration: none; } -a:not([href]):hover { +a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } + +pre, code, kbd, -pre, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; } + pre { margin-top: 0; margin-bottom: 1rem; overflow: auto; -ms-overflow-style: scrollbar; } + figure { margin: 0 0 1rem; } + img { vertical-align: middle; border-style: none; } + svg { overflow: hidden; vertical-align: middle; } + table { border-collapse: collapse; } + caption { padding-top: 0.75rem; padding-bottom: 0.75rem; @@ -192,78 +228,94 @@ caption { text-align: left; caption-side: bottom; } + th { text-align: inherit; + text-align: -webkit-match-parent; } + label { display: inline-block; margin-bottom: 0.5rem; } + button { border-radius: 0; } -button:focus { - outline: 1px dotted; - outline: 5px auto -webkit-focus-ring-color; + +button:focus:not(:focus-visible) { + outline: 0; } -button, + input, -optgroup, +button, select, +optgroup, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } + button, input { overflow: visible; } + button, select { text-transform: none; } + [role="button"] { cursor: pointer; } + select { word-wrap: normal; } + +button, [type="button"], [type="reset"], -[type="submit"], -button { +[type="submit"] { -webkit-appearance: button; } + +button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), -[type="submit"]:not(:disabled), -button:not(:disabled) { +[type="submit"]:not(:disabled) { cursor: pointer; } + +button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner, -button::-moz-focus-inner { +[type="submit"]::-moz-focus-inner { padding: 0; border-style: none; } -input[type="checkbox"], -input[type="radio"] { + +input[type="radio"], +input[type="checkbox"] { box-sizing: border-box; padding: 0; } + textarea { overflow: auto; resize: vertical; } + fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } + legend { display: block; width: 100%; @@ -275,152 +327,184 @@ legend { color: inherit; white-space: normal; } + progress { vertical-align: baseline; } + [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } + [type="search"] { outline-offset: -2px; -webkit-appearance: none; } + [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } + ::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; } + output { display: inline-block; } + summary { display: list-item; cursor: pointer; } + template { display: none; } + [hidden] { display: none !important; } -.h1, -.h2, -.h3, -.h4, -.h5, -.h6, + h1, h2, h3, h4, h5, -h6 { +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; color: #495057; } -.h1, -h1 { + +h1, +.h1 { font-size: 2.5rem; } -.h2, -h2 { + +h2, +.h2 { font-size: 2rem; } -.h3, -h3 { + +h3, +.h3 { font-size: 1.75rem; } -.h4, -h4 { + +h4, +.h4 { font-size: 1.5rem; } -.h5, -h5 { + +h5, +.h5 { font-size: 1.25rem; } -.h6, -h6 { + +h6, +.h6 { font-size: 1rem; } + .lead { font-size: 1.25rem; font-weight: 300; } + .display-1 { font-size: 6rem; font-weight: 300; line-height: 1.2; } + .display-2 { font-size: 5.5rem; font-weight: 300; line-height: 1.2; } + .display-3 { font-size: 4.5rem; font-weight: 300; line-height: 1.2; } + .display-4 { font-size: 3.5rem; font-weight: 300; line-height: 1.2; } + hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top: 1px solid rgba(34, 34, 34, 0.1); } -.small, -small { - font-size: 80%; + +small, +.small { + font-size: 0.875em; font-weight: 400; } -.mark, -mark { + +mark, +.mark { padding: 0.2em; - background-color: #fffcef; + background-color: rgb(255, 252, 239); } + .list-unstyled { padding-left: 0; list-style: none; } + .list-inline { padding-left: 0; list-style: none; } + .list-inline-item { display: inline-block; } .list-inline-item:not(:last-child) { margin-right: 0.5rem; } + .initialism { font-size: 90%; text-transform: uppercase; } + .blockquote { margin-bottom: 1rem; font-size: 1.25rem; } + .blockquote-footer { display: block; - font-size: 80%; + font-size: 0.875em; color: #6c757d; } .blockquote-footer::before { - content: "\2014\00A0"; + content: "— "; } + .img-fluid { max-width: 100%; height: auto; } + .img-thumbnail { padding: 0.25rem; background-color: #fff; @@ -429,17 +513,21 @@ mark { max-width: 100%; height: auto; } + .figure { display: inline-block; } + .figure-img { margin-bottom: 0.5rem; line-height: 1; } + .figure-caption { font-size: 90%; color: #6c757d; } + code { font-size: 87.5%; color: #e83e8c; @@ -448,10 +536,11 @@ code { a > code { color: inherit; } + kbd { padding: 0.2rem 0.4rem; font-size: 87.5%; - color: #fff; + color: #ffffff; background-color: #212529; border-radius: 1rem; } @@ -460,6 +549,7 @@ kbd kbd { font-size: 100%; font-weight: 600; } + pre { display: block; font-size: 87.5%; @@ -470,75 +560,52 @@ pre code { color: inherit; word-break: normal; } + .pre-scrollable { max-height: 340px; overflow-y: scroll; } -.container { - width: 100%; - padding-right: 15px; - padding-left: 15px; - margin-right: auto; - margin-left: auto; -} -@media (min-width: 576px) { - .container { - max-width: 540px; - } -} -@media (min-width: 768px) { - .container { - max-width: 720px; - } -} -@media (min-width: 992px) { - .container { - max-width: 960px; - } -} -@media (min-width: 1200px) { - .container { - max-width: 1140px; - } -} + +.container, .container-fluid, +.container-xl, .container-lg, .container-md, -.container-sm, -.container-xl { +.container-sm { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } + @media (min-width: 576px) { - .container, - .container-sm { + .container-sm, + .container { max-width: 540px; } } @media (min-width: 768px) { - .container, .container-md, - .container-sm { + .container-sm, + .container { max-width: 720px; } } @media (min-width: 992px) { - .container, - .container-lg, - .container-md, - .container-sm { - max-width: 960px; - } -} -@media (min-width: 1200px) { - .container, .container-lg, .container-md, .container-sm, - .container-xl { + .container { + max-width: 960px; + } +} +@media (min-width: 1200px) { + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container { max-width: 1140px; } } @@ -548,6 +615,7 @@ pre code { margin-right: -15px; margin-left: -15px; } + .no-gutters { margin-right: 0; margin-left: 0; @@ -557,247 +625,293 @@ pre code { padding-right: 0; padding-left: 0; } -.col, -.col-1, -.col-10, -.col-11, -.col-12, -.col-2, -.col-3, -.col-4, -.col-5, -.col-6, -.col-7, -.col-8, -.col-9, -.col-auto, -.col-lg, -.col-lg-1, -.col-lg-10, -.col-lg-11, -.col-lg-12, -.col-lg-2, -.col-lg-3, -.col-lg-4, -.col-lg-5, -.col-lg-6, -.col-lg-7, -.col-lg-8, -.col-lg-9, -.col-lg-auto, -.col-md, -.col-md-1, -.col-md-10, -.col-md-11, -.col-md-12, -.col-md-2, -.col-md-3, -.col-md-4, -.col-md-5, -.col-md-6, -.col-md-7, -.col-md-8, -.col-md-9, -.col-md-auto, -.col-sm, -.col-sm-1, -.col-sm-10, -.col-sm-11, -.col-sm-12, -.col-sm-2, -.col-sm-3, -.col-sm-4, -.col-sm-5, -.col-sm-6, -.col-sm-7, -.col-sm-8, -.col-sm-9, -.col-sm-auto, + .col-xl, -.col-xl-1, -.col-xl-10, -.col-xl-11, +.col-xl-auto, .col-xl-12, -.col-xl-2, -.col-xl-3, -.col-xl-4, -.col-xl-5, -.col-xl-6, -.col-xl-7, -.col-xl-8, +.col-xl-11, +.col-xl-10, .col-xl-9, -.col-xl-auto { +.col-xl-8, +.col-xl-7, +.col-xl-6, +.col-xl-5, +.col-xl-4, +.col-xl-3, +.col-xl-2, +.col-xl-1, +.col-lg, +.col-lg-auto, +.col-lg-12, +.col-lg-11, +.col-lg-10, +.col-lg-9, +.col-lg-8, +.col-lg-7, +.col-lg-6, +.col-lg-5, +.col-lg-4, +.col-lg-3, +.col-lg-2, +.col-lg-1, +.col-md, +.col-md-auto, +.col-md-12, +.col-md-11, +.col-md-10, +.col-md-9, +.col-md-8, +.col-md-7, +.col-md-6, +.col-md-5, +.col-md-4, +.col-md-3, +.col-md-2, +.col-md-1, +.col-sm, +.col-sm-auto, +.col-sm-12, +.col-sm-11, +.col-sm-10, +.col-sm-9, +.col-sm-8, +.col-sm-7, +.col-sm-6, +.col-sm-5, +.col-sm-4, +.col-sm-3, +.col-sm-2, +.col-sm-1, +.col, +.col-auto, +.col-12, +.col-11, +.col-10, +.col-9, +.col-8, +.col-7, +.col-6, +.col-5, +.col-4, +.col-3, +.col-2, +.col-1 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } + .col { flex-basis: 0; flex-grow: 1; - min-width: 0; max-width: 100%; } + .row-cols-1 > * { flex: 0 0 100%; max-width: 100%; } + .row-cols-2 > * { flex: 0 0 50%; max-width: 50%; } + .row-cols-3 > * { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } + .row-cols-4 > * { flex: 0 0 25%; max-width: 25%; } + .row-cols-5 > * { flex: 0 0 20%; max-width: 20%; } + .row-cols-6 > * { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } + .col-auto { flex: 0 0 auto; width: auto; max-width: 100%; } + .col-1 { - flex: 0 0 8.33333%; - max-width: 8.33333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } + .col-2 { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } + .col-3 { flex: 0 0 25%; max-width: 25%; } + .col-4 { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } + .col-5 { - flex: 0 0 41.66667%; - max-width: 41.66667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } + .col-6 { flex: 0 0 50%; max-width: 50%; } + .col-7 { - flex: 0 0 58.33333%; - max-width: 58.33333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } + .col-8 { - flex: 0 0 66.66667%; - max-width: 66.66667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } + .col-9 { flex: 0 0 75%; max-width: 75%; } + .col-10 { - flex: 0 0 83.33333%; - max-width: 83.33333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } + .col-11 { - flex: 0 0 91.66667%; - max-width: 91.66667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } + .col-12 { flex: 0 0 100%; max-width: 100%; } + .order-first { order: -1; } + .order-last { order: 13; } + .order-0 { order: 0; } + .order-1 { order: 1; } + .order-2 { order: 2; } + .order-3 { order: 3; } + .order-4 { order: 4; } + .order-5 { order: 5; } + .order-6 { order: 6; } + .order-7 { order: 7; } + .order-8 { order: 8; } + .order-9 { order: 9; } + .order-10 { order: 10; } + .order-11 { order: 11; } + .order-12 { order: 12; } + .offset-1 { - margin-left: 8.33333%; + margin-left: 8.33333333%; } + .offset-2 { - margin-left: 16.66667%; + margin-left: 16.66666667%; } + .offset-3 { margin-left: 25%; } + .offset-4 { - margin-left: 33.33333%; + margin-left: 33.33333333%; } + .offset-5 { - margin-left: 41.66667%; + margin-left: 41.66666667%; } + .offset-6 { margin-left: 50%; } + .offset-7 { - margin-left: 58.33333%; + margin-left: 58.33333333%; } + .offset-8 { - margin-left: 66.66667%; + margin-left: 66.66666667%; } + .offset-9 { margin-left: 75%; } + .offset-10 { - margin-left: 83.33333%; + margin-left: 83.33333333%; } + .offset-11 { - margin-left: 91.66667%; + margin-left: 91.66666667%; } + @media (min-width: 576px) { .col-sm { flex-basis: 0; flex-grow: 1; - min-width: 0; max-width: 100%; } .row-cols-sm-1 > * { @@ -809,8 +923,8 @@ pre code { max-width: 50%; } .row-cols-sm-3 > * { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } .row-cols-sm-4 > * { flex: 0 0 25%; @@ -821,8 +935,8 @@ pre code { max-width: 20%; } .row-cols-sm-6 > * { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } .col-sm-auto { flex: 0 0 auto; @@ -830,48 +944,48 @@ pre code { max-width: 100%; } .col-sm-1 { - flex: 0 0 8.33333%; - max-width: 8.33333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } .col-sm-2 { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .col-sm-4 { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } .col-sm-5 { - flex: 0 0 41.66667%; - max-width: 41.66667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .col-sm-7 { - flex: 0 0 58.33333%; - max-width: 58.33333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } .col-sm-8 { - flex: 0 0 66.66667%; - max-width: 66.66667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } .col-sm-9 { flex: 0 0 75%; max-width: 75%; } .col-sm-10 { - flex: 0 0 83.33333%; - max-width: 83.33333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } .col-sm-11 { - flex: 0 0 91.66667%; - max-width: 91.66667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } .col-sm-12 { flex: 0 0 100%; @@ -926,44 +1040,43 @@ pre code { margin-left: 0; } .offset-sm-1 { - margin-left: 8.33333%; + margin-left: 8.33333333%; } .offset-sm-2 { - margin-left: 16.66667%; + margin-left: 16.66666667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { - margin-left: 33.33333%; + margin-left: 33.33333333%; } .offset-sm-5 { - margin-left: 41.66667%; + margin-left: 41.66666667%; } .offset-sm-6 { margin-left: 50%; } .offset-sm-7 { - margin-left: 58.33333%; + margin-left: 58.33333333%; } .offset-sm-8 { - margin-left: 66.66667%; + margin-left: 66.66666667%; } .offset-sm-9 { margin-left: 75%; } .offset-sm-10 { - margin-left: 83.33333%; + margin-left: 83.33333333%; } .offset-sm-11 { - margin-left: 91.66667%; + margin-left: 91.66666667%; } } @media (min-width: 768px) { .col-md { flex-basis: 0; flex-grow: 1; - min-width: 0; max-width: 100%; } .row-cols-md-1 > * { @@ -975,8 +1088,8 @@ pre code { max-width: 50%; } .row-cols-md-3 > * { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } .row-cols-md-4 > * { flex: 0 0 25%; @@ -987,8 +1100,8 @@ pre code { max-width: 20%; } .row-cols-md-6 > * { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } .col-md-auto { flex: 0 0 auto; @@ -996,48 +1109,48 @@ pre code { max-width: 100%; } .col-md-1 { - flex: 0 0 8.33333%; - max-width: 8.33333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } .col-md-2 { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } .col-md-5 { - flex: 0 0 41.66667%; - max-width: 41.66667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-7 { - flex: 0 0 58.33333%; - max-width: 58.33333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } .col-md-8 { - flex: 0 0 66.66667%; - max-width: 66.66667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-10 { - flex: 0 0 83.33333%; - max-width: 83.33333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } .col-md-11 { - flex: 0 0 91.66667%; - max-width: 91.66667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } .col-md-12 { flex: 0 0 100%; @@ -1092,44 +1205,43 @@ pre code { margin-left: 0; } .offset-md-1 { - margin-left: 8.33333%; + margin-left: 8.33333333%; } .offset-md-2 { - margin-left: 16.66667%; + margin-left: 16.66666667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { - margin-left: 33.33333%; + margin-left: 33.33333333%; } .offset-md-5 { - margin-left: 41.66667%; + margin-left: 41.66666667%; } .offset-md-6 { margin-left: 50%; } .offset-md-7 { - margin-left: 58.33333%; + margin-left: 58.33333333%; } .offset-md-8 { - margin-left: 66.66667%; + margin-left: 66.66666667%; } .offset-md-9 { margin-left: 75%; } .offset-md-10 { - margin-left: 83.33333%; + margin-left: 83.33333333%; } .offset-md-11 { - margin-left: 91.66667%; + margin-left: 91.66666667%; } } @media (min-width: 992px) { .col-lg { flex-basis: 0; flex-grow: 1; - min-width: 0; max-width: 100%; } .row-cols-lg-1 > * { @@ -1141,8 +1253,8 @@ pre code { max-width: 50%; } .row-cols-lg-3 > * { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } .row-cols-lg-4 > * { flex: 0 0 25%; @@ -1153,8 +1265,8 @@ pre code { max-width: 20%; } .row-cols-lg-6 > * { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } .col-lg-auto { flex: 0 0 auto; @@ -1162,48 +1274,48 @@ pre code { max-width: 100%; } .col-lg-1 { - flex: 0 0 8.33333%; - max-width: 8.33333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } .col-lg-2 { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .col-lg-4 { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } .col-lg-5 { - flex: 0 0 41.66667%; - max-width: 41.66667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .col-lg-7 { - flex: 0 0 58.33333%; - max-width: 58.33333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } .col-lg-8 { - flex: 0 0 66.66667%; - max-width: 66.66667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } .col-lg-9 { flex: 0 0 75%; max-width: 75%; } .col-lg-10 { - flex: 0 0 83.33333%; - max-width: 83.33333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } .col-lg-11 { - flex: 0 0 91.66667%; - max-width: 91.66667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } .col-lg-12 { flex: 0 0 100%; @@ -1258,44 +1370,43 @@ pre code { margin-left: 0; } .offset-lg-1 { - margin-left: 8.33333%; + margin-left: 8.33333333%; } .offset-lg-2 { - margin-left: 16.66667%; + margin-left: 16.66666667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { - margin-left: 33.33333%; + margin-left: 33.33333333%; } .offset-lg-5 { - margin-left: 41.66667%; + margin-left: 41.66666667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { - margin-left: 58.33333%; + margin-left: 58.33333333%; } .offset-lg-8 { - margin-left: 66.66667%; + margin-left: 66.66666667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { - margin-left: 83.33333%; + margin-left: 83.33333333%; } .offset-lg-11 { - margin-left: 91.66667%; + margin-left: 91.66666667%; } } @media (min-width: 1200px) { .col-xl { flex-basis: 0; flex-grow: 1; - min-width: 0; max-width: 100%; } .row-cols-xl-1 > * { @@ -1307,8 +1418,8 @@ pre code { max-width: 50%; } .row-cols-xl-3 > * { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.3333333333%; + max-width: 33.3333333333%; } .row-cols-xl-4 > * { flex: 0 0 25%; @@ -1319,8 +1430,8 @@ pre code { max-width: 20%; } .row-cols-xl-6 > * { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.6666666667%; + max-width: 16.6666666667%; } .col-xl-auto { flex: 0 0 auto; @@ -1328,48 +1439,48 @@ pre code { max-width: 100%; } .col-xl-1 { - flex: 0 0 8.33333%; - max-width: 8.33333%; + flex: 0 0 8.33333333%; + max-width: 8.33333333%; } .col-xl-2 { - flex: 0 0 16.66667%; - max-width: 16.66667%; + flex: 0 0 16.66666667%; + max-width: 16.66666667%; } .col-xl-3 { flex: 0 0 25%; max-width: 25%; } .col-xl-4 { - flex: 0 0 33.33333%; - max-width: 33.33333%; + flex: 0 0 33.33333333%; + max-width: 33.33333333%; } .col-xl-5 { - flex: 0 0 41.66667%; - max-width: 41.66667%; + flex: 0 0 41.66666667%; + max-width: 41.66666667%; } .col-xl-6 { flex: 0 0 50%; max-width: 50%; } .col-xl-7 { - flex: 0 0 58.33333%; - max-width: 58.33333%; + flex: 0 0 58.33333333%; + max-width: 58.33333333%; } .col-xl-8 { - flex: 0 0 66.66667%; - max-width: 66.66667%; + flex: 0 0 66.66666667%; + max-width: 66.66666667%; } .col-xl-9 { flex: 0 0 75%; max-width: 75%; } .col-xl-10 { - flex: 0 0 83.33333%; - max-width: 83.33333%; + flex: 0 0 83.33333333%; + max-width: 83.33333333%; } .col-xl-11 { - flex: 0 0 91.66667%; - max-width: 91.66667%; + flex: 0 0 91.66666667%; + max-width: 91.66666667%; } .col-xl-12 { flex: 0 0 100%; @@ -1424,37 +1535,37 @@ pre code { margin-left: 0; } .offset-xl-1 { - margin-left: 8.33333%; + margin-left: 8.33333333%; } .offset-xl-2 { - margin-left: 16.66667%; + margin-left: 16.66666667%; } .offset-xl-3 { margin-left: 25%; } .offset-xl-4 { - margin-left: 33.33333%; + margin-left: 33.33333333%; } .offset-xl-5 { - margin-left: 41.66667%; + margin-left: 41.66666667%; } .offset-xl-6 { margin-left: 50%; } .offset-xl-7 { - margin-left: 58.33333%; + margin-left: 58.33333333%; } .offset-xl-8 { - margin-left: 66.66667%; + margin-left: 66.66666667%; } .offset-xl-9 { margin-left: 75%; } .offset-xl-10 { - margin-left: 83.33333%; + margin-left: 83.33333333%; } .offset-xl-11 { - margin-left: 91.66667%; + margin-left: 91.66666667%; } } .table { @@ -1462,8 +1573,8 @@ pre code { margin-bottom: 1rem; color: #495057; } -.table td, -.table th { +.table th, +.table td { padding: 0.75rem; vertical-align: top; border-top: 1px solid #495057; @@ -1475,45 +1586,52 @@ pre code { .table tbody + tbody { border-top: 2px solid #495057; } -.table-sm td, -.table-sm th { + +.table-sm th, +.table-sm td { padding: 0.3rem; } + .table-bordered { border: 1px solid #495057; } -.table-bordered td, -.table-bordered th { +.table-bordered th, +.table-bordered td { border: 1px solid #495057; } -.table-bordered thead td, -.table-bordered thead th { +.table-bordered thead th, +.table-bordered thead td { border-bottom-width: 2px; } -.table-borderless tbody + tbody, -.table-borderless td, + .table-borderless th, -.table-borderless thead th { +.table-borderless td, +.table-borderless thead th, +.table-borderless tbody + tbody { border: 0; } + .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(34, 34, 34, 0.05); } + .table-hover tbody tr:hover { color: #495057; background-color: rgba(34, 34, 34, 0.075); } + .table-primary, -.table-primary > td, -.table-primary > th { +.table-primary > th, +.table-primary > td { background-color: #fbd4c0; } -.table-primary tbody + tbody, -.table-primary td, .table-primary th, -.table-primary thead th { +.table-primary td, +.table-primary thead th, +.table-primary tbody + tbody { border-color: #f8ae8a; } + .table-hover .table-primary:hover { background-color: #f9c4a8; } @@ -1521,17 +1639,19 @@ pre code { .table-hover .table-primary:hover > th { background-color: #f9c4a8; } + .table-secondary, -.table-secondary > td, -.table-secondary > th { +.table-secondary > th, +.table-secondary > td { background-color: #b8f0cf; } -.table-secondary tbody + tbody, -.table-secondary td, .table-secondary th, -.table-secondary thead th { +.table-secondary td, +.table-secondary thead th, +.table-secondary tbody + tbody { border-color: #7ae2a6; } + .table-hover .table-secondary:hover { background-color: #a3ecc1; } @@ -1539,17 +1659,19 @@ pre code { .table-hover .table-secondary:hover > th { background-color: #a3ecc1; } + .table-success, -.table-success > td, -.table-success > th { +.table-success > th, +.table-success > td { background-color: #d4bcfb; } -.table-success tbody + tbody, -.table-success td, .table-success th, -.table-success thead th { +.table-success td, +.table-success thead th, +.table-success tbody + tbody { border-color: #af83f8; } + .table-hover .table-success:hover { background-color: #c5a4fa; } @@ -1557,17 +1679,19 @@ pre code { .table-hover .table-success:hover > th { background-color: #c5a4fa; } + .table-info, -.table-info > td, -.table-info > th { +.table-info > th, +.table-info > td { background-color: #b8daff; } -.table-info tbody + tbody, -.table-info td, .table-info th, -.table-info thead th { +.table-info td, +.table-info thead th, +.table-info tbody + tbody { border-color: #7abaff; } + .table-hover .table-info:hover { background-color: #9fcdff; } @@ -1575,17 +1699,19 @@ pre code { .table-hover .table-info:hover > th { background-color: #9fcdff; } + .table-warning, -.table-warning > td, -.table-warning > th { +.table-warning > th, +.table-warning > td { background-color: #ffeeba; } -.table-warning tbody + tbody, -.table-warning td, .table-warning th, -.table-warning thead th { +.table-warning td, +.table-warning thead th, +.table-warning tbody + tbody { border-color: #ffdf7e; } + .table-hover .table-warning:hover { background-color: #ffe8a1; } @@ -1593,17 +1719,19 @@ pre code { .table-hover .table-warning:hover > th { background-color: #ffe8a1; } + .table-danger, -.table-danger > td, -.table-danger > th { +.table-danger > th, +.table-danger > td { background-color: #ddc6ba; } -.table-danger tbody + tbody, -.table-danger td, .table-danger th, -.table-danger thead th { - border-color: #c1957f; +.table-danger td, +.table-danger thead th, +.table-danger tbody + tbody { + border-color: #c1947f; } + .table-hover .table-danger:hover { background-color: #d5b8a9; } @@ -1611,17 +1739,19 @@ pre code { .table-hover .table-danger:hover > th { background-color: #d5b8a9; } + .table-light, -.table-light > td, -.table-light > th { +.table-light > th, +.table-light > td { background-color: #fdfdfe; } -.table-light tbody + tbody, -.table-light td, .table-light th, -.table-light thead th { +.table-light td, +.table-light thead th, +.table-light tbody + tbody { border-color: #fbfcfc; } + .table-hover .table-light:hover { background-color: #ececf6; } @@ -1629,17 +1759,19 @@ pre code { .table-hover .table-light:hover > th { background-color: #ececf6; } + .table-dark, -.table-dark > td, -.table-dark > th { +.table-dark > th, +.table-dark > td { background-color: #c6c8ca; } -.table-dark tbody + tbody, -.table-dark td, .table-dark th, -.table-dark thead th { +.table-dark td, +.table-dark thead th, +.table-dark tbody + tbody { border-color: #95999c; } + .table-hover .table-dark:hover { background-color: #b9bbbe; } @@ -1647,11 +1779,13 @@ pre code { .table-hover .table-dark:hover > th { background-color: #b9bbbe; } + .table-active, -.table-active > td, -.table-active > th { +.table-active > th, +.table-active > td { background-color: rgba(34, 34, 34, 0.075); } + .table-hover .table-active:hover { background-color: rgba(21, 21, 21, 0.075); } @@ -1659,8 +1793,9 @@ pre code { .table-hover .table-active:hover > th { background-color: rgba(21, 21, 21, 0.075); } + .table .thead-dark th { - color: #fff; + color: #ffffff; background-color: #343a40; border-color: #454d55; } @@ -1669,12 +1804,13 @@ pre code { background-color: #e9ecef; border-color: #495057; } + .table-dark { - color: #fff; + color: #ffffff; background-color: #343a40; } -.table-dark td, .table-dark th, +.table-dark td, .table-dark thead th { border-color: #454d55; } @@ -1685,9 +1821,10 @@ pre code { background-color: rgba(255, 255, 255, 0.05); } .table-dark.table-hover tbody tr:hover { - color: #fff; + color: #ffffff; background-color: rgba(255, 255, 255, 0.075); } + @media (max-width: 575.98px) { .table-responsive-sm { display: block; @@ -1741,6 +1878,7 @@ pre code { .table-responsive > .table-bordered { border: 0; } + .form-control { display: block; width: 100%; @@ -1750,7 +1888,7 @@ pre code { font-weight: 400; line-height: 1.5; color: #495057; - background-color: #fff; + background-color: #ffffff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.5rem; @@ -1765,13 +1903,9 @@ pre code { background-color: transparent; border: 0; } -.form-control:-moz-focusring { - color: transparent; - text-shadow: 0 0 0 #495057; -} .form-control:focus { color: #495057; - background-color: #fff; + background-color: #ffffff; border-color: #f8b796; outline: 0; box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.75); @@ -1785,21 +1919,29 @@ pre code { background-color: #e9ecef; opacity: 1; } + input[type="date"].form-control, +input[type="time"].form-control, input[type="datetime-local"].form-control, -input[type="month"].form-control, -input[type="time"].form-control { +input[type="month"].form-control { appearance: none; } + +select.form-control:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #495057; +} select.form-control:focus::-ms-value { color: #495057; - background-color: #fff; + background-color: #ffffff; } + .form-control-file, .form-control-range { display: block; width: 100%; } + .col-form-label { padding-top: calc(0.375rem + 1px); padding-bottom: calc(0.375rem + 1px); @@ -1807,18 +1949,21 @@ select.form-control:focus::-ms-value { font-size: inherit; line-height: 1.5; } + .col-form-label-lg { padding-top: calc(0.5rem + 1px); padding-bottom: calc(0.5rem + 1px); font-size: 1.25rem; line-height: 1.5; } + .col-form-label-sm { padding-top: calc(0.25rem + 1px); padding-bottom: calc(0.25rem + 1px); font-size: 0.875rem; line-height: 1.5; } + .form-control-plaintext { display: block; width: 100%; @@ -1831,11 +1976,12 @@ select.form-control:focus::-ms-value { border: solid transparent; border-width: 1px 0; } -.form-control-plaintext.form-control-lg, -.form-control-plaintext.form-control-sm { +.form-control-plaintext.form-control-sm, +.form-control-plaintext.form-control-lg { padding-right: 0; padding-left: 0; } + .form-control-sm { height: calc(1.5em + 0.5rem + 2px); padding: 0.25rem 0.5rem; @@ -1843,6 +1989,7 @@ select.form-control:focus::-ms-value { line-height: 1.5; border-radius: 1rem; } + .form-control-lg { height: calc(1.5em + 1rem + 2px); padding: 0.5rem 1rem; @@ -1850,20 +1997,25 @@ select.form-control:focus::-ms-value { line-height: 1.5; border-radius: 0.5rem; } -select.form-control[multiple], -select.form-control[size] { + +select.form-control[size], +select.form-control[multiple] { height: auto; } + textarea.form-control { height: auto; } + .form-group { margin-bottom: 1rem; } + .form-text { display: block; margin-top: 0.25rem; } + .form-row { display: flex; flex-wrap: wrap; @@ -1875,23 +2027,27 @@ textarea.form-control { padding-right: 5px; padding-left: 5px; } + .form-check { position: relative; display: block; padding-left: 1.25rem; } + .form-check-input { position: absolute; margin-top: 0.3rem; margin-left: -1.25rem; } -.form-check-input:disabled ~ .form-check-label, -.form-check-input[disabled] ~ .form-check-label { +.form-check-input[disabled] ~ .form-check-label, +.form-check-input:disabled ~ .form-check-label { color: #6c757d; } + .form-check-label { margin-bottom: 0; } + .form-check-inline { display: inline-flex; align-items: center; @@ -1904,16 +2060,19 @@ textarea.form-control { margin-right: 0.3125rem; margin-left: 0; } + .valid-feedback { display: none; width: 100%; margin-top: 0.25rem; - font-size: 80%; - color: #007bff; + font-size: 0.875em; + color: #02bdc2; } + .valid-tooltip { position: absolute; top: 100%; + left: 0; z-index: 5; display: none; max-width: 100%; @@ -1921,108 +2080,129 @@ textarea.form-control { margin-top: 0.1rem; font-size: 0.875rem; line-height: 1.5; - color: #fff; - background-color: rgba(0, 123, 255, 0.9); + color: #ffffff; + background-color: rgba(2, 189, 194, 0.9); border-radius: 0.5rem; } -.is-valid ~ .valid-feedback, -.is-valid ~ .valid-tooltip, +.form-row > .col > .valid-tooltip, +.form-row > [class*="col-"] > .valid-tooltip { + left: 5px; +} + .was-validated :valid ~ .valid-feedback, -.was-validated :valid ~ .valid-tooltip { +.was-validated :valid ~ .valid-tooltip, +.is-valid ~ .valid-feedback, +.is-valid ~ .valid-tooltip { display: block; } -.form-control.is-valid, -.was-validated .form-control:valid { - border-color: #007bff; - padding-right: calc(1.5em + 0.75rem); - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23007bff' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); + +.was-validated .form-control:valid, +.form-control.is-valid { + border-color: #02bdc2; + padding-right: calc(1.5em + 0.75rem) !important; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2302bdc2' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } -.form-control.is-valid:focus, -.was-validated .form-control:valid:focus { - border-color: #007bff; - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +.was-validated .form-control:valid:focus, +.form-control.is-valid:focus { + border-color: #02bdc2; + box-shadow: 0 0 0 0.2rem rgba(2, 189, 194, 0.25); } + +.was-validated select.form-control:valid, +select.form-control.is-valid { + padding-right: 3rem !important; + background-position: right 1.5rem center; +} + .was-validated textarea.form-control:valid, textarea.form-control.is-valid { padding-right: calc(1.5em + 0.75rem); background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); } -.custom-select.is-valid, -.was-validated .custom-select:valid { - border-color: #007bff; - padding-right: calc(0.75em + 2.3125rem); + +.was-validated .custom-select:valid, +.custom-select.is-valid { + border-color: #02bdc2; + padding-right: calc(0.75em + 2.3125rem) !important; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") - no-repeat right 0.75rem center/8px 10px, - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23007bff' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") - #fff no-repeat center right 1.75rem / calc(0.75em + 0.375rem) - calc(0.75em + 0.375rem); + right 0.75rem center/8px 10px no-repeat, + #ffffff + url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2302bdc2' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") + center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) + no-repeat; } -.custom-select.is-valid:focus, -.was-validated .custom-select:valid:focus { - border-color: #007bff; - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +.was-validated .custom-select:valid:focus, +.custom-select.is-valid:focus { + border-color: #02bdc2; + box-shadow: 0 0 0 0.2rem rgba(2, 189, 194, 0.25); } -.form-check-input.is-valid ~ .form-check-label, -.was-validated .form-check-input:valid ~ .form-check-label { - color: #007bff; + +.was-validated .form-check-input:valid ~ .form-check-label, +.form-check-input.is-valid ~ .form-check-label { + color: #02bdc2; } -.form-check-input.is-valid ~ .valid-feedback, -.form-check-input.is-valid ~ .valid-tooltip, .was-validated .form-check-input:valid ~ .valid-feedback, -.was-validated .form-check-input:valid ~ .valid-tooltip { +.was-validated .form-check-input:valid ~ .valid-tooltip, +.form-check-input.is-valid ~ .valid-feedback, +.form-check-input.is-valid ~ .valid-tooltip { display: block; } -.custom-control-input.is-valid ~ .custom-control-label, -.was-validated .custom-control-input:valid ~ .custom-control-label { - color: #007bff; + +.was-validated .custom-control-input:valid ~ .custom-control-label, +.custom-control-input.is-valid ~ .custom-control-label { + color: #02bdc2; } -.custom-control-input.is-valid ~ .custom-control-label::before, -.was-validated .custom-control-input:valid ~ .custom-control-label::before { - border-color: #007bff; +.was-validated .custom-control-input:valid ~ .custom-control-label::before, +.custom-control-input.is-valid ~ .custom-control-label::before { + border-color: #02bdc2; } -.custom-control-input.is-valid:checked ~ .custom-control-label::before, .was-validated .custom-control-input:valid:checked - ~ .custom-control-label::before { - border-color: #3395ff; - background-color: #3395ff; + ~ .custom-control-label::before, +.custom-control-input.is-valid:checked ~ .custom-control-label::before { + border-color: #03eef4; + background-color: #03eef4; } -.custom-control-input.is-valid:focus ~ .custom-control-label::before, .was-validated .custom-control-input:valid:focus - ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); -} -.custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before, +.custom-control-input.is-valid:focus ~ .custom-control-label::before { + box-shadow: 0 0 0 0.2rem rgba(2, 189, 194, 0.25); +} .was-validated .custom-control-input:valid:focus:not(:checked) + ~ .custom-control-label::before, +.custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before { - border-color: #007bff; + border-color: #02bdc2; } -.custom-file-input.is-valid ~ .custom-file-label, -.was-validated .custom-file-input:valid ~ .custom-file-label { - border-color: #007bff; + +.was-validated .custom-file-input:valid ~ .custom-file-label, +.custom-file-input.is-valid ~ .custom-file-label { + border-color: #02bdc2; } -.custom-file-input.is-valid:focus ~ .custom-file-label, -.was-validated .custom-file-input:valid:focus ~ .custom-file-label { - border-color: #007bff; - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); +.was-validated .custom-file-input:valid:focus ~ .custom-file-label, +.custom-file-input.is-valid:focus ~ .custom-file-label { + border-color: #02bdc2; + box-shadow: 0 0 0 0.2rem rgba(2, 189, 194, 0.25); } + .invalid-feedback { display: none; width: 100%; margin-top: 0.25rem; - font-size: 80%; + font-size: 0.875em; color: #873208; } + .invalid-tooltip { position: absolute; top: 100%; + left: 0; z-index: 5; display: none; max-width: 100%; @@ -2030,98 +2210,117 @@ textarea.form-control.is-valid { margin-top: 0.1rem; font-size: 0.875rem; line-height: 1.5; - color: #fff; + color: #ffffff; background-color: rgba(135, 50, 8, 0.9); border-radius: 0.5rem; } -.is-invalid ~ .invalid-feedback, -.is-invalid ~ .invalid-tooltip, +.form-row > .col > .invalid-tooltip, +.form-row > [class*="col-"] > .invalid-tooltip { + left: 5px; +} + .was-validated :invalid ~ .invalid-feedback, -.was-validated :invalid ~ .invalid-tooltip { +.was-validated :invalid ~ .invalid-tooltip, +.is-invalid ~ .invalid-feedback, +.is-invalid ~ .invalid-tooltip { display: block; } -.form-control.is-invalid, -.was-validated .form-control:invalid { + +.was-validated .form-control:invalid, +.form-control.is-invalid { border-color: #873208; - padding-right: calc(1.5em + 0.75rem); + padding-right: calc(1.5em + 0.75rem) !important; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23873208' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23873208' stroke='none'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } -.form-control.is-invalid:focus, -.was-validated .form-control:invalid:focus { +.was-validated .form-control:invalid:focus, +.form-control.is-invalid:focus { border-color: #873208; box-shadow: 0 0 0 0.2rem rgba(135, 50, 8, 0.25); } + +.was-validated select.form-control:invalid, +select.form-control.is-invalid { + padding-right: 3rem !important; + background-position: right 1.5rem center; +} + .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid { padding-right: calc(1.5em + 0.75rem); background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem); } -.custom-select.is-invalid, -.was-validated .custom-select:invalid { + +.was-validated .custom-select:invalid, +.custom-select.is-invalid { border-color: #873208; - padding-right: calc(0.75em + 2.3125rem); + padding-right: calc(0.75em + 2.3125rem) !important; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") - no-repeat right 0.75rem center/8px 10px, - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23873208' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23873208' stroke='none'/%3e%3c/svg%3e") - #fff no-repeat center right 1.75rem / calc(0.75em + 0.375rem) - calc(0.75em + 0.375rem); + right 0.75rem center/8px 10px no-repeat, + #ffffff + url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23873208' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23873208' stroke='none'/%3e%3c/svg%3e") + center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) + no-repeat; } -.custom-select.is-invalid:focus, -.was-validated .custom-select:invalid:focus { +.was-validated .custom-select:invalid:focus, +.custom-select.is-invalid:focus { border-color: #873208; box-shadow: 0 0 0 0.2rem rgba(135, 50, 8, 0.25); } -.form-check-input.is-invalid ~ .form-check-label, -.was-validated .form-check-input:invalid ~ .form-check-label { + +.was-validated .form-check-input:invalid ~ .form-check-label, +.form-check-input.is-invalid ~ .form-check-label { color: #873208; } -.form-check-input.is-invalid ~ .invalid-feedback, -.form-check-input.is-invalid ~ .invalid-tooltip, .was-validated .form-check-input:invalid ~ .invalid-feedback, -.was-validated .form-check-input:invalid ~ .invalid-tooltip { +.was-validated .form-check-input:invalid ~ .invalid-tooltip, +.form-check-input.is-invalid ~ .invalid-feedback, +.form-check-input.is-invalid ~ .invalid-tooltip { display: block; } -.custom-control-input.is-invalid ~ .custom-control-label, -.was-validated .custom-control-input:invalid ~ .custom-control-label { + +.was-validated .custom-control-input:invalid ~ .custom-control-label, +.custom-control-input.is-invalid ~ .custom-control-label { color: #873208; } -.custom-control-input.is-invalid ~ .custom-control-label::before, -.was-validated .custom-control-input:invalid ~ .custom-control-label::before { +.was-validated .custom-control-input:invalid ~ .custom-control-label::before, +.custom-control-input.is-invalid ~ .custom-control-label::before { border-color: #873208; } -.custom-control-input.is-invalid:checked ~ .custom-control-label::before, .was-validated .custom-control-input:invalid:checked - ~ .custom-control-label::before { + ~ .custom-control-label::before, +.custom-control-input.is-invalid:checked ~ .custom-control-label::before { border-color: #b7440b; background-color: #b7440b; } -.custom-control-input.is-invalid:focus ~ .custom-control-label::before, .was-validated .custom-control-input:invalid:focus - ~ .custom-control-label::before { + ~ .custom-control-label::before, +.custom-control-input.is-invalid:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(135, 50, 8, 0.25); } -.custom-control-input.is-invalid:focus:not(:checked) - ~ .custom-control-label::before, .was-validated .custom-control-input:invalid:focus:not(:checked) + ~ .custom-control-label::before, +.custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before { border-color: #873208; } -.custom-file-input.is-invalid ~ .custom-file-label, -.was-validated .custom-file-input:invalid ~ .custom-file-label { + +.was-validated .custom-file-input:invalid ~ .custom-file-label, +.custom-file-input.is-invalid ~ .custom-file-label { border-color: #873208; } -.custom-file-input.is-invalid:focus ~ .custom-file-label, -.was-validated .custom-file-input:invalid:focus ~ .custom-file-label { +.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, +.custom-file-input.is-invalid:focus ~ .custom-file-label { border-color: #873208; box-shadow: 0 0 0 0.2rem rgba(135, 50, 8, 0.25); } + .form-inline { display: flex; flex-flow: row wrap; @@ -2152,8 +2351,8 @@ textarea.form-control.is-invalid { .form-inline .form-control-plaintext { display: inline-block; } - .form-inline .custom-select, - .form-inline .input-group { + .form-inline .input-group, + .form-inline .custom-select { width: auto; } .form-inline .form-check { @@ -2178,6 +2377,7 @@ textarea.form-control.is-invalid { margin-bottom: 0; } } + .btn { display: inline-block; font-weight: 400; @@ -2203,8 +2403,8 @@ textarea.form-control.is-invalid { color: #495057; text-decoration: none; } -.btn.focus, -.btn:focus { +.btn:focus, +.btn.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.75); } @@ -2219,146 +2419,151 @@ a.btn.disabled, fieldset:disabled a.btn { pointer-events: none; } + .btn-primary { - color: #fff; + color: #ffffff; background-color: #f1641e; border-color: #f1641e; } .btn-primary:hover { - color: #fff; + color: #ffffff; background-color: #db520e; border-color: #cf4d0d; } -.btn-primary.focus, -.btn-primary:focus { - color: #fff; +.btn-primary:focus, +.btn-primary.focus { + color: #ffffff; background-color: #db520e; border-color: #cf4d0d; box-shadow: 0 0 0 0.2rem rgba(243, 123, 64, 0.5); } .btn-primary.disabled, .btn-primary:disabled { - color: #fff; + color: #ffffff; background-color: #f1641e; border-color: #f1641e; } -.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, +.btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { - color: #fff; + color: #ffffff; background-color: #cf4d0d; border-color: #c3490c; } -.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, +.btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(243, 123, 64, 0.5); } + .btn-secondary { - color: #fff; + color: #ffffff; background-color: #00c853; border-color: #00c853; } .btn-secondary:hover { - color: #fff; + color: #ffffff; background-color: #00a243; border-color: #00953e; } -.btn-secondary.focus, -.btn-secondary:focus { - color: #fff; +.btn-secondary:focus, +.btn-secondary.focus { + color: #ffffff; background-color: #00a243; border-color: #00953e; box-shadow: 0 0 0 0.2rem rgba(38, 208, 109, 0.5); } .btn-secondary.disabled, .btn-secondary:disabled { - color: #fff; + color: #ffffff; background-color: #00c853; border-color: #00c853; } -.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, +.btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { - color: #fff; + color: #ffffff; background-color: #00953e; border-color: #008839; } -.btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, +.btn-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(38, 208, 109, 0.5); } + .btn-success { - color: #fff; + color: #ffffff; background-color: #6610f2; border-color: #6610f2; } .btn-success:hover { - color: #fff; + color: #ffffff; background-color: #560bd0; border-color: #510bc4; } -.btn-success.focus, -.btn-success:focus { - color: #fff; +.btn-success:focus, +.btn-success.focus { + color: #ffffff; background-color: #560bd0; border-color: #510bc4; box-shadow: 0 0 0 0.2rem rgba(125, 52, 244, 0.5); } .btn-success.disabled, .btn-success:disabled { - color: #fff; + color: #ffffff; background-color: #6610f2; border-color: #6610f2; } -.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, +.btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle { - color: #fff; + color: #ffffff; background-color: #510bc4; border-color: #4c0ab8; } -.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, +.btn-success:not(:disabled):not(.disabled).active:focus, .show > .btn-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(125, 52, 244, 0.5); } + .btn-info { - color: #fff; + color: #ffffff; background-color: #007bff; border-color: #007bff; } .btn-info:hover { - color: #fff; + color: #ffffff; background-color: #0069d9; border-color: #0062cc; } -.btn-info.focus, -.btn-info:focus { - color: #fff; +.btn-info:focus, +.btn-info.focus { + color: #ffffff; background-color: #0069d9; border-color: #0062cc; box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } .btn-info.disabled, .btn-info:disabled { - color: #fff; + color: #ffffff; background-color: #007bff; border-color: #007bff; } -.btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, +.btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle { - color: #fff; + color: #ffffff; background-color: #0062cc; border-color: #005cbf; } -.btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus, +.btn-info:not(:disabled):not(.disabled).active:focus, .show > .btn-info.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); } + .btn-warning { color: #212529; background-color: #ffc107; @@ -2369,8 +2574,8 @@ fieldset:disabled a.btn { background-color: #e0a800; border-color: #d39e00; } -.btn-warning.focus, -.btn-warning:focus { +.btn-warning:focus, +.btn-warning.focus { color: #212529; background-color: #e0a800; border-color: #d39e00; @@ -2382,53 +2587,55 @@ fieldset:disabled a.btn { background-color: #ffc107; border-color: #ffc107; } -.btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, +.btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle { color: #212529; background-color: #d39e00; border-color: #c69500; } -.btn-warning:not(:disabled):not(.disabled).active:focus, .btn-warning:not(:disabled):not(.disabled):active:focus, +.btn-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-warning.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5); } + .btn-danger { - color: #fff; + color: #ffffff; background-color: #873208; border-color: #873208; } .btn-danger:hover { - color: #fff; + color: #ffffff; background-color: #632506; border-color: #572105; } -.btn-danger.focus, -.btn-danger:focus { - color: #fff; +.btn-danger:focus, +.btn-danger.focus { + color: #ffffff; background-color: #632506; border-color: #572105; box-shadow: 0 0 0 0.2rem rgba(153, 81, 45, 0.5); } .btn-danger.disabled, .btn-danger:disabled { - color: #fff; + color: #ffffff; background-color: #873208; border-color: #873208; } -.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, +.btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle { - color: #fff; + color: #ffffff; background-color: #572105; border-color: #4b1c05; } -.btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus, +.btn-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(153, 81, 45, 0.5); } + .btn-light { color: #212529; background-color: #f8f9fa; @@ -2439,8 +2646,8 @@ fieldset:disabled a.btn { background-color: #e2e6ea; border-color: #dae0e5; } -.btn-light.focus, -.btn-light:focus { +.btn-light:focus, +.btn-light.focus { color: #212529; background-color: #e2e6ea; border-color: #dae0e5; @@ -2452,64 +2659,66 @@ fieldset:disabled a.btn { background-color: #f8f9fa; border-color: #f8f9fa; } -.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, +.btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle { color: #212529; background-color: #dae0e5; border-color: #d3d9df; } -.btn-light:not(:disabled):not(.disabled).active:focus, .btn-light:not(:disabled):not(.disabled):active:focus, +.btn-light:not(:disabled):not(.disabled).active:focus, .show > .btn-light.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5); } + .btn-dark { - color: #fff; + color: #ffffff; background-color: #343a40; border-color: #343a40; } .btn-dark:hover { - color: #fff; + color: #ffffff; background-color: #23272b; border-color: #1d2124; } -.btn-dark.focus, -.btn-dark:focus { - color: #fff; +.btn-dark:focus, +.btn-dark.focus { + color: #ffffff; background-color: #23272b; border-color: #1d2124; box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5); } .btn-dark.disabled, .btn-dark:disabled { - color: #fff; + color: #ffffff; background-color: #343a40; border-color: #343a40; } -.btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active, +.btn-dark:not(:disabled):not(.disabled).active, .show > .btn-dark.dropdown-toggle { - color: #fff; + color: #ffffff; background-color: #1d2124; border-color: #171a1d; } -.btn-dark:not(:disabled):not(.disabled).active:focus, .btn-dark:not(:disabled):not(.disabled):active:focus, +.btn-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5); } + .btn-outline-primary { color: #f1641e; border-color: #f1641e; } .btn-outline-primary:hover { - color: #fff; + color: #ffffff; background-color: #f1641e; border-color: #f1641e; } -.btn-outline-primary.focus, -.btn-outline-primary:focus { +.btn-outline-primary:focus, +.btn-outline-primary.focus { box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.5); } .btn-outline-primary.disabled, @@ -2517,29 +2726,30 @@ fieldset:disabled a.btn { color: #f1641e; background-color: transparent; } -.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, +.btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle { - color: #fff; + color: #ffffff; background-color: #f1641e; border-color: #f1641e; } -.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, +.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.5); } + .btn-outline-secondary { color: #00c853; border-color: #00c853; } .btn-outline-secondary:hover { - color: #fff; + color: #ffffff; background-color: #00c853; border-color: #00c853; } -.btn-outline-secondary.focus, -.btn-outline-secondary:focus { +.btn-outline-secondary:focus, +.btn-outline-secondary.focus { box-shadow: 0 0 0 0.2rem rgba(0, 200, 83, 0.5); } .btn-outline-secondary.disabled, @@ -2547,29 +2757,30 @@ fieldset:disabled a.btn { color: #00c853; background-color: transparent; } -.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, +.btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle { - color: #fff; + color: #ffffff; background-color: #00c853; border-color: #00c853; } -.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, +.btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(0, 200, 83, 0.5); } + .btn-outline-success { color: #6610f2; border-color: #6610f2; } .btn-outline-success:hover { - color: #fff; + color: #ffffff; background-color: #6610f2; border-color: #6610f2; } -.btn-outline-success.focus, -.btn-outline-success:focus { +.btn-outline-success:focus, +.btn-outline-success.focus { box-shadow: 0 0 0 0.2rem rgba(102, 16, 242, 0.5); } .btn-outline-success.disabled, @@ -2577,29 +2788,30 @@ fieldset:disabled a.btn { color: #6610f2; background-color: transparent; } -.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active, +.btn-outline-success:not(:disabled):not(.disabled).active, .show > .btn-outline-success.dropdown-toggle { - color: #fff; + color: #ffffff; background-color: #6610f2; border-color: #6610f2; } -.btn-outline-success:not(:disabled):not(.disabled).active:focus, .btn-outline-success:not(:disabled):not(.disabled):active:focus, +.btn-outline-success:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(102, 16, 242, 0.5); } + .btn-outline-info { color: #007bff; border-color: #007bff; } .btn-outline-info:hover { - color: #fff; + color: #ffffff; background-color: #007bff; border-color: #007bff; } -.btn-outline-info.focus, -.btn-outline-info:focus { +.btn-outline-info:focus, +.btn-outline-info.focus { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); } .btn-outline-info.disabled, @@ -2607,18 +2819,19 @@ fieldset:disabled a.btn { color: #007bff; background-color: transparent; } -.btn-outline-info:not(:disabled):not(.disabled).active, .btn-outline-info:not(:disabled):not(.disabled):active, +.btn-outline-info:not(:disabled):not(.disabled).active, .show > .btn-outline-info.dropdown-toggle { - color: #fff; + color: #ffffff; background-color: #007bff; border-color: #007bff; } -.btn-outline-info:not(:disabled):not(.disabled).active:focus, .btn-outline-info:not(:disabled):not(.disabled):active:focus, +.btn-outline-info:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-info.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); } + .btn-outline-warning { color: #ffc107; border-color: #ffc107; @@ -2628,8 +2841,8 @@ fieldset:disabled a.btn { background-color: #ffc107; border-color: #ffc107; } -.btn-outline-warning.focus, -.btn-outline-warning:focus { +.btn-outline-warning:focus, +.btn-outline-warning.focus { box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); } .btn-outline-warning.disabled, @@ -2637,29 +2850,30 @@ fieldset:disabled a.btn { color: #ffc107; background-color: transparent; } -.btn-outline-warning:not(:disabled):not(.disabled).active, .btn-outline-warning:not(:disabled):not(.disabled):active, +.btn-outline-warning:not(:disabled):not(.disabled).active, .show > .btn-outline-warning.dropdown-toggle { color: #212529; background-color: #ffc107; border-color: #ffc107; } -.btn-outline-warning:not(:disabled):not(.disabled).active:focus, .btn-outline-warning:not(:disabled):not(.disabled):active:focus, +.btn-outline-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-warning.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); } + .btn-outline-danger { color: #873208; border-color: #873208; } .btn-outline-danger:hover { - color: #fff; + color: #ffffff; background-color: #873208; border-color: #873208; } -.btn-outline-danger.focus, -.btn-outline-danger:focus { +.btn-outline-danger:focus, +.btn-outline-danger.focus { box-shadow: 0 0 0 0.2rem rgba(135, 50, 8, 0.5); } .btn-outline-danger.disabled, @@ -2667,18 +2881,19 @@ fieldset:disabled a.btn { color: #873208; background-color: transparent; } -.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active, +.btn-outline-danger:not(:disabled):not(.disabled).active, .show > .btn-outline-danger.dropdown-toggle { - color: #fff; + color: #ffffff; background-color: #873208; border-color: #873208; } -.btn-outline-danger:not(:disabled):not(.disabled).active:focus, .btn-outline-danger:not(:disabled):not(.disabled):active:focus, +.btn-outline-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(135, 50, 8, 0.5); } + .btn-outline-light { color: #f8f9fa; border-color: #f8f9fa; @@ -2688,8 +2903,8 @@ fieldset:disabled a.btn { background-color: #f8f9fa; border-color: #f8f9fa; } -.btn-outline-light.focus, -.btn-outline-light:focus { +.btn-outline-light:focus, +.btn-outline-light.focus { box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); } .btn-outline-light.disabled, @@ -2697,29 +2912,30 @@ fieldset:disabled a.btn { color: #f8f9fa; background-color: transparent; } -.btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active, +.btn-outline-light:not(:disabled):not(.disabled).active, .show > .btn-outline-light.dropdown-toggle { color: #212529; background-color: #f8f9fa; border-color: #f8f9fa; } -.btn-outline-light:not(:disabled):not(.disabled).active:focus, .btn-outline-light:not(:disabled):not(.disabled):active:focus, +.btn-outline-light:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-light.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); } + .btn-outline-dark { color: #343a40; border-color: #343a40; } .btn-outline-dark:hover { - color: #fff; + color: #ffffff; background-color: #343a40; border-color: #343a40; } -.btn-outline-dark.focus, -.btn-outline-dark:focus { +.btn-outline-dark:focus, +.btn-outline-dark.focus { box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); } .btn-outline-dark.disabled, @@ -2727,18 +2943,19 @@ fieldset:disabled a.btn { color: #343a40; background-color: transparent; } -.btn-outline-dark:not(:disabled):not(.disabled).active, .btn-outline-dark:not(:disabled):not(.disabled):active, +.btn-outline-dark:not(:disabled):not(.disabled).active, .show > .btn-outline-dark.dropdown-toggle { - color: #fff; + color: #ffffff; background-color: #343a40; border-color: #343a40; } -.btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, +.btn-outline-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); } + .btn-link { font-weight: 400; color: #f1641e; @@ -2748,29 +2965,32 @@ fieldset:disabled a.btn { color: #b7440b; text-decoration: underline; } -.btn-link.focus, -.btn-link:focus { +.btn-link:focus, +.btn-link.focus { text-decoration: underline; } -.btn-link.disabled, -.btn-link:disabled { +.btn-link:disabled, +.btn-link.disabled { color: #6c757d; pointer-events: none; } -.btn-group-lg > .btn, -.btn-lg { + +.btn-lg, +.btn-group-lg > .btn { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.5rem; } -.btn-group-sm > .btn, -.btn-sm { + +.btn-sm, +.btn-group-sm > .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 1rem; } + .btn-block { display: block; width: 100%; @@ -2778,11 +2998,13 @@ fieldset:disabled a.btn { .btn-block + .btn-block { margin-top: 0.5rem; } -input[type="button"].btn-block, + +input[type="submit"].btn-block, input[type="reset"].btn-block, -input[type="submit"].btn-block { +input[type="button"].btn-block { width: 100%; } + .fade { transition: opacity 0.15s linear; } @@ -2794,9 +3016,11 @@ input[type="submit"].btn-block { .fade:not(.show) { opacity: 0; } + .collapse:not(.show) { display: none; } + .collapsing { position: relative; height: 0; @@ -2808,12 +3032,24 @@ input[type="submit"].btn-block { transition: none; } } -.dropdown, -.dropleft, +.collapsing.width { + width: 0; + height: auto; + transition: width 0.35s ease; +} +@media (prefers-reduced-motion: reduce) { + .collapsing.width { + transition: none; + } +} + +.dropup, .dropright, -.dropup { +.dropdown, +.dropleft { position: relative; } + .dropdown-toggle { white-space: nowrap; } @@ -2830,6 +3066,7 @@ input[type="submit"].btn-block { .dropdown-toggle:empty::after { margin-left: 0; } + .dropdown-menu { position: absolute; top: 100%; @@ -2844,19 +3081,22 @@ input[type="submit"].btn-block { color: #495057; text-align: left; list-style: none; - background-color: #fff; + background-color: #ffffff; background-clip: padding-box; border: 1px solid rgba(34, 34, 34, 0.15); border-radius: 0.5rem; } + .dropdown-menu-left { right: auto; left: 0; } + .dropdown-menu-right { right: 0; left: auto; } + @media (min-width: 576px) { .dropdown-menu-sm-left { right: auto; @@ -2916,6 +3156,7 @@ input[type="submit"].btn-block { .dropup .dropdown-toggle:empty::after { margin-left: 0; } + .dropright .dropdown-menu { top: 0; right: auto; @@ -2939,6 +3180,7 @@ input[type="submit"].btn-block { .dropright .dropdown-toggle::after { vertical-align: 0; } + .dropleft .dropdown-menu { top: 0; right: 100%; @@ -2970,19 +3212,22 @@ input[type="submit"].btn-block { .dropleft .dropdown-toggle::before { vertical-align: 0; } -.dropdown-menu[x-placement^="bottom"], -.dropdown-menu[x-placement^="left"], + +.dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], -.dropdown-menu[x-placement^="top"] { +.dropdown-menu[x-placement^="bottom"], +.dropdown-menu[x-placement^="left"] { right: auto; bottom: auto; } + .dropdown-divider { height: 0; margin: 0.5rem 0; overflow: hidden; border-top: 1px solid #e9ecef; } + .dropdown-item { display: block; width: 100%; @@ -2995,27 +3240,29 @@ input[type="submit"].btn-block { background-color: transparent; border: 0; } -.dropdown-item:focus, -.dropdown-item:hover { +.dropdown-item:hover, +.dropdown-item:focus { color: #16181b; text-decoration: none; - background-color: #f8f9fa; + background-color: #e9ecef; } .dropdown-item.active, .dropdown-item:active { - color: #fff; + color: #ffffff; text-decoration: none; background-color: #f1641e; } .dropdown-item.disabled, .dropdown-item:disabled { - color: #6c757d; + color: #adb5bd; pointer-events: none; background-color: transparent; } + .dropdown-menu.show { display: block; } + .dropdown-header { display: block; padding: 0.5rem 1.5rem; @@ -3024,34 +3271,37 @@ input[type="submit"].btn-block { color: #6c757d; white-space: nowrap; } + .dropdown-item-text { display: block; padding: 0.25rem 1.5rem; color: #212529; } + .btn-group, .btn-group-vertical { position: relative; display: inline-flex; vertical-align: middle; } -.btn-group-vertical > .btn, -.btn-group > .btn { +.btn-group > .btn, +.btn-group-vertical > .btn { position: relative; flex: 1 1 auto; } -.btn-group-vertical > .btn:hover, -.btn-group > .btn:hover { +.btn-group > .btn:hover, +.btn-group-vertical > .btn:hover { z-index: 1; } -.btn-group-vertical > .btn.active, -.btn-group-vertical > .btn:active, -.btn-group-vertical > .btn:focus, -.btn-group > .btn.active, +.btn-group > .btn:focus, .btn-group > .btn:active, -.btn-group > .btn:focus { +.btn-group > .btn.active, +.btn-group-vertical > .btn:focus, +.btn-group-vertical > .btn:active, +.btn-group-vertical > .btn.active { z-index: 1; } + .btn-toolbar { display: flex; flex-wrap: wrap; @@ -3060,42 +3310,47 @@ input[type="submit"].btn-block { .btn-toolbar .input-group { width: auto; } -.btn-group > .btn-group:not(:first-child), -.btn-group > .btn:not(:first-child) { + +.btn-group > .btn:not(:first-child), +.btn-group > .btn-group:not(:first-child) { margin-left: -1px; } -.btn-group > .btn-group:not(:last-child) > .btn, -.btn-group > .btn:not(:last-child):not(.dropdown-toggle) { +.btn-group > .btn:not(:last-child):not(.dropdown-toggle), +.btn-group > .btn-group:not(:last-child) > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; } -.btn-group > .btn-group:not(:first-child) > .btn, -.btn-group > .btn:not(:first-child) { +.btn-group > .btn:not(:first-child), +.btn-group > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } + .dropdown-toggle-split { padding-right: 0.5625rem; padding-left: 0.5625rem; } .dropdown-toggle-split::after, -.dropright .dropdown-toggle-split::after, -.dropup .dropdown-toggle-split::after { +.dropup .dropdown-toggle-split::after, +.dropright .dropdown-toggle-split::after { margin-left: 0; } .dropleft .dropdown-toggle-split::before { margin-right: 0; } -.btn-group-sm > .btn + .dropdown-toggle-split, -.btn-sm + .dropdown-toggle-split { + +.btn-sm + .dropdown-toggle-split, +.btn-group-sm > .btn + .dropdown-toggle-split { padding-right: 0.375rem; padding-left: 0.375rem; } -.btn-group-lg > .btn + .dropdown-toggle-split, -.btn-lg + .dropdown-toggle-split { + +.btn-lg + .dropdown-toggle-split, +.btn-group-lg > .btn + .dropdown-toggle-split { padding-right: 0.75rem; padding-left: 0.75rem; } + .btn-group-vertical { flex-direction: column; align-items: flex-start; @@ -3105,32 +3360,34 @@ input[type="submit"].btn-block { .btn-group-vertical > .btn-group { width: 100%; } -.btn-group-vertical > .btn-group:not(:first-child), -.btn-group-vertical > .btn:not(:first-child) { +.btn-group-vertical > .btn:not(:first-child), +.btn-group-vertical > .btn-group:not(:first-child) { margin-top: -1px; } -.btn-group-vertical > .btn-group:not(:last-child) > .btn, -.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle) { +.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle), +.btn-group-vertical > .btn-group:not(:last-child) > .btn { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } -.btn-group-vertical > .btn-group:not(:first-child) > .btn, -.btn-group-vertical > .btn:not(:first-child) { +.btn-group-vertical > .btn:not(:first-child), +.btn-group-vertical > .btn-group:not(:first-child) > .btn { border-top-left-radius: 0; border-top-right-radius: 0; } + .btn-group-toggle > .btn, .btn-group-toggle > .btn-group > .btn { margin-bottom: 0; } -.btn-group-toggle > .btn input[type="checkbox"], .btn-group-toggle > .btn input[type="radio"], -.btn-group-toggle > .btn-group > .btn input[type="checkbox"], -.btn-group-toggle > .btn-group > .btn input[type="radio"] { +.btn-group-toggle > .btn input[type="checkbox"], +.btn-group-toggle > .btn-group > .btn input[type="radio"], +.btn-group-toggle > .btn-group > .btn input[type="checkbox"] { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; } + .input-group { position: relative; display: flex; @@ -3138,45 +3395,40 @@ input[type="submit"].btn-block { align-items: stretch; width: 100%; } -.input-group > .custom-file, -.input-group > .custom-select, .input-group > .form-control, -.input-group > .form-control-plaintext { +.input-group > .form-control-plaintext, +.input-group > .custom-select, +.input-group > .custom-file { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; margin-bottom: 0; } -.input-group > .custom-file + .custom-file, -.input-group > .custom-file + .custom-select, -.input-group > .custom-file + .form-control, -.input-group > .custom-select + .custom-file, -.input-group > .custom-select + .custom-select, -.input-group > .custom-select + .form-control, -.input-group > .form-control + .custom-file, -.input-group > .form-control + .custom-select, .input-group > .form-control + .form-control, -.input-group > .form-control-plaintext + .custom-file, +.input-group > .form-control + .custom-select, +.input-group > .form-control + .custom-file, +.input-group > .form-control-plaintext + .form-control, .input-group > .form-control-plaintext + .custom-select, -.input-group > .form-control-plaintext + .form-control { +.input-group > .form-control-plaintext + .custom-file, +.input-group > .custom-select + .form-control, +.input-group > .custom-select + .custom-select, +.input-group > .custom-select + .custom-file, +.input-group > .custom-file + .form-control, +.input-group > .custom-file + .custom-select, +.input-group > .custom-file + .custom-file { margin-left: -1px; } -.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label, +.input-group > .form-control:focus, .input-group > .custom-select:focus, -.input-group > .form-control:focus { +.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label { z-index: 3; } .input-group > .custom-file .custom-file-input:focus { z-index: 4; } -.input-group > .custom-select:not(:last-child), -.input-group > .form-control:not(:last-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} -.input-group > .custom-select:not(:first-child), -.input-group > .form-control:not(:first-child) { +.input-group > .form-control:not(:first-child), +.input-group > .custom-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } @@ -3193,35 +3445,61 @@ input[type="submit"].btn-block { border-top-left-radius: 0; border-bottom-left-radius: 0; } -.input-group-append, -.input-group-prepend { +.input-group:not(.has-validation) > .form-control:not(:last-child), +.input-group:not(.has-validation) > .custom-select:not(:last-child), +.input-group:not(.has-validation) + > .custom-file:not(:last-child) + .custom-file-label, +.input-group:not(.has-validation) + > .custom-file:not(:last-child) + .custom-file-label::after { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.input-group.has-validation > .form-control:nth-last-child(n + 3), +.input-group.has-validation > .custom-select:nth-last-child(n + 3), +.input-group.has-validation + > .custom-file:nth-last-child(n + 3) + .custom-file-label, +.input-group.has-validation + > .custom-file:nth-last-child(n + 3) + .custom-file-label::after { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.input-group-prepend, +.input-group-append { display: flex; } -.input-group-append .btn, -.input-group-prepend .btn { +.input-group-prepend .btn, +.input-group-append .btn { position: relative; z-index: 2; } -.input-group-append .btn:focus, -.input-group-prepend .btn:focus { +.input-group-prepend .btn:focus, +.input-group-append .btn:focus { z-index: 3; } -.input-group-append .btn + .btn, -.input-group-append .btn + .input-group-text, -.input-group-append .input-group-text + .btn, -.input-group-append .input-group-text + .input-group-text, .input-group-prepend .btn + .btn, .input-group-prepend .btn + .input-group-text, +.input-group-prepend .input-group-text + .input-group-text, .input-group-prepend .input-group-text + .btn, -.input-group-prepend .input-group-text + .input-group-text { +.input-group-append .btn + .btn, +.input-group-append .btn + .input-group-text, +.input-group-append .input-group-text + .input-group-text, +.input-group-append .input-group-text + .btn { margin-left: -1px; } + .input-group-prepend { margin-right: -1px; } + .input-group-append { margin-left: -1px; } + .input-group-text { display: flex; align-items: center; @@ -3237,78 +3515,96 @@ input[type="submit"].btn-block { border: 1px solid #ced4da; border-radius: 0.5rem; } -.input-group-text input[type="checkbox"], -.input-group-text input[type="radio"] { +.input-group-text input[type="radio"], +.input-group-text input[type="checkbox"] { margin-top: 0; } -.input-group-lg > .custom-select, -.input-group-lg > .form-control:not(textarea) { + +.input-group-lg > .form-control:not(textarea), +.input-group-lg > .custom-select { height: calc(1.5em + 1rem + 2px); } -.input-group-lg > .custom-select, + .input-group-lg > .form-control, -.input-group-lg > .input-group-append > .btn, +.input-group-lg > .custom-select, +.input-group-lg > .input-group-prepend > .input-group-text, .input-group-lg > .input-group-append > .input-group-text, .input-group-lg > .input-group-prepend > .btn, -.input-group-lg > .input-group-prepend > .input-group-text { +.input-group-lg > .input-group-append > .btn { padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.5rem; } -.input-group-sm > .custom-select, -.input-group-sm > .form-control:not(textarea) { + +.input-group-sm > .form-control:not(textarea), +.input-group-sm > .custom-select { height: calc(1.5em + 0.5rem + 2px); } -.input-group-sm > .custom-select, + .input-group-sm > .form-control, -.input-group-sm > .input-group-append > .btn, +.input-group-sm > .custom-select, +.input-group-sm > .input-group-prepend > .input-group-text, .input-group-sm > .input-group-append > .input-group-text, .input-group-sm > .input-group-prepend > .btn, -.input-group-sm > .input-group-prepend > .input-group-text { +.input-group-sm > .input-group-append > .btn { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 1rem; } + .input-group-lg > .custom-select, .input-group-sm > .custom-select { padding-right: 1.75rem; } + +.input-group > .input-group-prepend > .btn, +.input-group > .input-group-prepend > .input-group-text, +.input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn, +.input-group:not(.has-validation) + > .input-group-append:not(:last-child) + > .input-group-text, +.input-group.has-validation > .input-group-append:nth-last-child(n + 3) > .btn, +.input-group.has-validation + > .input-group-append:nth-last-child(n + 3) + > .input-group-text, .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-append:last-child - > .input-group-text:not(:last-child), -.input-group > .input-group-append:not(:last-child) > .btn, -.input-group > .input-group-append:not(:last-child) > .input-group-text, -.input-group > .input-group-prepend > .btn, -.input-group > .input-group-prepend > .input-group-text { + > .input-group-text:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } + .input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text, +.input-group > .input-group-prepend:not(:first-child) > .btn, +.input-group > .input-group-prepend:not(:first-child) > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child), .input-group > .input-group-prepend:first-child - > .input-group-text:not(:first-child), -.input-group > .input-group-prepend:not(:first-child) > .btn, -.input-group > .input-group-prepend:not(:first-child) > .input-group-text { + > .input-group-text:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } + .custom-control { position: relative; + z-index: 1; display: block; min-height: 1.5rem; padding-left: 1.5rem; + print-color-adjust: exact; } + .custom-control-inline { display: inline-flex; margin-right: 1rem; } + .custom-control-input { position: absolute; left: 0; @@ -3318,7 +3614,7 @@ input[type="submit"].btn-block { opacity: 0; } .custom-control-input:checked ~ .custom-control-label::before { - color: #fff; + color: #ffffff; border-color: #f1641e; background-color: #f1641e; } @@ -3329,18 +3625,19 @@ input[type="submit"].btn-block { border-color: #f8b796; } .custom-control-input:not(:disabled):active ~ .custom-control-label::before { - color: #fff; + color: #ffffff; background-color: #fbd8c6; border-color: #fbd8c6; } -.custom-control-input:disabled ~ .custom-control-label, -.custom-control-input[disabled] ~ .custom-control-label { +.custom-control-input[disabled] ~ .custom-control-label, +.custom-control-input:disabled ~ .custom-control-label { color: #6c757d; } -.custom-control-input:disabled ~ .custom-control-label::before, -.custom-control-input[disabled] ~ .custom-control-label::before { +.custom-control-input[disabled] ~ .custom-control-label::before, +.custom-control-input:disabled ~ .custom-control-label::before { background-color: #e9ecef; } + .custom-control-label { position: relative; margin-bottom: 0; @@ -3355,8 +3652,8 @@ input[type="submit"].btn-block { height: 1rem; pointer-events: none; content: ""; - background-color: #fff; - border: #adb5bd solid 1px; + background-color: #ffffff; + border: 1px solid #adb5bd; } .custom-control-label::after { position: absolute; @@ -3366,8 +3663,9 @@ input[type="submit"].btn-block { width: 1rem; height: 1rem; content: ""; - background: no-repeat 50%/50% 50%; + background: 50%/50% 50% no-repeat; } + .custom-checkbox .custom-control-label::before { border-radius: 0.5rem; } @@ -3395,6 +3693,7 @@ input[type="submit"].btn-block { ~ .custom-control-label::before { background-color: rgba(241, 100, 30, 0.5); } + .custom-radio .custom-control-label::before { border-radius: 50%; } @@ -3406,6 +3705,7 @@ input[type="submit"].btn-block { ~ .custom-control-label::before { background-color: rgba(241, 100, 30, 0.5); } + .custom-switch { padding-left: 2.25rem; } @@ -3431,7 +3731,7 @@ input[type="submit"].btn-block { } } .custom-switch .custom-control-input:checked ~ .custom-control-label::after { - background-color: #fff; + background-color: #ffffff; transform: translateX(0.75rem); } .custom-switch @@ -3439,6 +3739,7 @@ input[type="submit"].btn-block { ~ .custom-control-label::before { background-color: rgba(241, 100, 30, 0.5); } + .custom-select { display: inline-block; width: 100%; @@ -3449,9 +3750,9 @@ input[type="submit"].btn-block { line-height: 1.5; color: #495057; vertical-align: middle; - background: #fff + background: #ffffff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") - no-repeat right 0.75rem center/8px 10px; + right 0.75rem center/8px 10px no-repeat; border: 1px solid #ced4da; border-radius: 0.5rem; appearance: none; @@ -3463,7 +3764,7 @@ input[type="submit"].btn-block { } .custom-select:focus::-ms-value { color: #495057; - background-color: #fff; + background-color: #ffffff; } .custom-select[multiple], .custom-select[size]:not([size="1"]) { @@ -3482,6 +3783,7 @@ input[type="submit"].btn-block { color: transparent; text-shadow: 0 0 0 #495057; } + .custom-select-sm { height: calc(1.5em + 0.5rem + 2px); padding-top: 0.25rem; @@ -3489,6 +3791,7 @@ input[type="submit"].btn-block { padding-left: 0.5rem; font-size: 0.875rem; } + .custom-select-lg { height: calc(1.5em + 1rem + 2px); padding-top: 0.5rem; @@ -3496,6 +3799,7 @@ input[type="submit"].btn-block { padding-left: 1rem; font-size: 1.25rem; } + .custom-file { position: relative; display: inline-block; @@ -3503,20 +3807,22 @@ input[type="submit"].btn-block { height: calc(1.5em + 0.75rem + 2px); margin-bottom: 0; } + .custom-file-input { position: relative; z-index: 2; width: 100%; height: calc(1.5em + 0.75rem + 2px); margin: 0; + overflow: hidden; opacity: 0; } .custom-file-input:focus ~ .custom-file-label { border-color: #f8b796; box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.75); } -.custom-file-input:disabled ~ .custom-file-label, -.custom-file-input[disabled] ~ .custom-file-label { +.custom-file-input[disabled] ~ .custom-file-label, +.custom-file-input:disabled ~ .custom-file-label { background-color: #e9ecef; } .custom-file-input:lang(en) ~ .custom-file-label::after { @@ -3525,6 +3831,7 @@ input[type="submit"].btn-block { .custom-file-input ~ .custom-file-label[data-browse]::after { content: attr(data-browse); } + .custom-file-label { position: absolute; top: 0; @@ -3533,10 +3840,11 @@ input[type="submit"].btn-block { z-index: 1; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; + overflow: hidden; font-weight: 400; line-height: 1.5; color: #495057; - background-color: #fff; + background-color: #ffffff; border: 1px solid #ced4da; border-radius: 0.5rem; } @@ -3556,6 +3864,7 @@ input[type="submit"].btn-block { border-left: inherit; border-radius: 0 0.5rem 0.5rem 0; } + .custom-range { width: 100%; height: 1.4rem; @@ -3687,6 +3996,7 @@ input[type="submit"].btn-block { .custom-range:disabled::-ms-thumb { background-color: #adb5bd; } + .custom-control-label::before, .custom-file-label, .custom-select { @@ -3700,6 +4010,7 @@ input[type="submit"].btn-block { transition: none; } } + .nav { display: flex; flex-wrap: wrap; @@ -3707,12 +4018,13 @@ input[type="submit"].btn-block { margin-bottom: 0; list-style: none; } + .nav-link { display: block; padding: 0.5rem 1rem; } -.nav-link:focus, -.nav-link:hover { +.nav-link:hover, +.nav-link:focus { text-decoration: none; } .nav-link.disabled { @@ -3720,19 +4032,20 @@ input[type="submit"].btn-block { pointer-events: none; cursor: default; } + .nav-tabs { border-bottom: 1px solid #dee2e6; } -.nav-tabs .nav-item { - margin-bottom: -1px; -} .nav-tabs .nav-link { + margin-bottom: -1px; + background-color: transparent; border: 1px solid transparent; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; } -.nav-tabs .nav-link:focus, -.nav-tabs .nav-link:hover { +.nav-tabs .nav-link:hover, +.nav-tabs .nav-link:focus { + isolation: isolate; border-color: #e9ecef #e9ecef #dee2e6; } .nav-tabs .nav-link.disabled { @@ -3740,8 +4053,8 @@ input[type="submit"].btn-block { background-color: transparent; border-color: transparent; } -.nav-tabs .nav-item.show .nav-link, -.nav-tabs .nav-link.active { +.nav-tabs .nav-link.active, +.nav-tabs .nav-item.show .nav-link { color: #495057; background-color: #fff; border-color: #dee2e6 #dee2e6 #fff; @@ -3751,29 +4064,38 @@ input[type="submit"].btn-block { border-top-left-radius: 0; border-top-right-radius: 0; } + .nav-pills .nav-link { + background: none; + border: 0; border-radius: 0.5rem; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { - color: #fff; + color: #ffffff; background-color: #f1641e; } + +.nav-fill > .nav-link, .nav-fill .nav-item { flex: 1 1 auto; text-align: center; } + +.nav-justified > .nav-link, .nav-justified .nav-item { flex-basis: 0; flex-grow: 1; text-align: center; } + .tab-content > .tab-pane { display: none; } .tab-content > .active { display: block; } + .navbar { position: relative; display: flex; @@ -3784,9 +4106,9 @@ input[type="submit"].btn-block { } .navbar .container, .navbar .container-fluid, -.navbar .container-lg, -.navbar .container-md, .navbar .container-sm, +.navbar .container-md, +.navbar .container-lg, .navbar .container-xl { display: flex; flex-wrap: wrap; @@ -3802,10 +4124,11 @@ input[type="submit"].btn-block { line-height: inherit; white-space: nowrap; } -.navbar-brand:focus, -.navbar-brand:hover { +.navbar-brand:hover, +.navbar-brand:focus { text-decoration: none; } + .navbar-nav { display: flex; flex-direction: column; @@ -3821,16 +4144,19 @@ input[type="submit"].btn-block { position: static; float: none; } + .navbar-text { display: inline-block; padding-top: 0.5rem; padding-bottom: 0.5rem; } + .navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; } + .navbar-toggler { padding: 0.25rem 0.75rem; font-size: 1.25rem; @@ -3839,25 +4165,31 @@ input[type="submit"].btn-block { border: 1px solid transparent; border-radius: 0.5rem; } -.navbar-toggler:focus, -.navbar-toggler:hover { +.navbar-toggler:hover, +.navbar-toggler:focus { text-decoration: none; } + .navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; content: ""; - background: no-repeat center center; - background-size: 100% 100%; + background: 50%/100% 100% no-repeat; } + +.navbar-nav-scroll { + max-height: 75vh; + overflow-y: auto; +} + @media (max-width: 575.98px) { .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid, - .navbar-expand-sm > .container-lg, - .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-sm, + .navbar-expand-sm > .container-md, + .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl { padding-right: 0; padding-left: 0; @@ -3880,12 +4212,15 @@ input[type="submit"].btn-block { } .navbar-expand-sm > .container, .navbar-expand-sm > .container-fluid, - .navbar-expand-sm > .container-lg, - .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-sm, + .navbar-expand-sm > .container-md, + .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl { flex-wrap: nowrap; } + .navbar-expand-sm .navbar-nav-scroll { + overflow: visible; + } .navbar-expand-sm .navbar-collapse { display: flex !important; flex-basis: auto; @@ -3897,9 +4232,9 @@ input[type="submit"].btn-block { @media (max-width: 767.98px) { .navbar-expand-md > .container, .navbar-expand-md > .container-fluid, - .navbar-expand-md > .container-lg, - .navbar-expand-md > .container-md, .navbar-expand-md > .container-sm, + .navbar-expand-md > .container-md, + .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl { padding-right: 0; padding-left: 0; @@ -3922,12 +4257,15 @@ input[type="submit"].btn-block { } .navbar-expand-md > .container, .navbar-expand-md > .container-fluid, - .navbar-expand-md > .container-lg, - .navbar-expand-md > .container-md, .navbar-expand-md > .container-sm, + .navbar-expand-md > .container-md, + .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl { flex-wrap: nowrap; } + .navbar-expand-md .navbar-nav-scroll { + overflow: visible; + } .navbar-expand-md .navbar-collapse { display: flex !important; flex-basis: auto; @@ -3939,9 +4277,9 @@ input[type="submit"].btn-block { @media (max-width: 991.98px) { .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid, - .navbar-expand-lg > .container-lg, - .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-sm, + .navbar-expand-lg > .container-md, + .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl { padding-right: 0; padding-left: 0; @@ -3964,12 +4302,15 @@ input[type="submit"].btn-block { } .navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid, - .navbar-expand-lg > .container-lg, - .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-sm, + .navbar-expand-lg > .container-md, + .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl { flex-wrap: nowrap; } + .navbar-expand-lg .navbar-nav-scroll { + overflow: visible; + } .navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto; @@ -3981,9 +4322,9 @@ input[type="submit"].btn-block { @media (max-width: 1199.98px) { .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid, - .navbar-expand-xl > .container-lg, - .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-sm, + .navbar-expand-xl > .container-md, + .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl { padding-right: 0; padding-left: 0; @@ -4006,12 +4347,15 @@ input[type="submit"].btn-block { } .navbar-expand-xl > .container, .navbar-expand-xl > .container-fluid, - .navbar-expand-xl > .container-lg, - .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-sm, + .navbar-expand-xl > .container-md, + .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl { flex-wrap: nowrap; } + .navbar-expand-xl .navbar-nav-scroll { + overflow: visible; + } .navbar-expand-xl .navbar-collapse { display: flex !important; flex-basis: auto; @@ -4026,9 +4370,9 @@ input[type="submit"].btn-block { } .navbar-expand > .container, .navbar-expand > .container-fluid, -.navbar-expand > .container-lg, -.navbar-expand > .container-md, .navbar-expand > .container-sm, +.navbar-expand > .container-md, +.navbar-expand > .container-lg, .navbar-expand > .container-xl { padding-right: 0; padding-left: 0; @@ -4045,12 +4389,15 @@ input[type="submit"].btn-block { } .navbar-expand > .container, .navbar-expand > .container-fluid, -.navbar-expand > .container-lg, -.navbar-expand > .container-md, .navbar-expand > .container-sm, +.navbar-expand > .container-md, +.navbar-expand > .container-lg, .navbar-expand > .container-xl { flex-wrap: nowrap; } +.navbar-expand .navbar-nav-scroll { + overflow: visible; +} .navbar-expand .navbar-collapse { display: flex !important; flex-basis: auto; @@ -4058,27 +4405,28 @@ input[type="submit"].btn-block { .navbar-expand .navbar-toggler { display: none; } + .navbar-light .navbar-brand { color: #212529; } -.navbar-light .navbar-brand:focus, -.navbar-light .navbar-brand:hover { +.navbar-light .navbar-brand:hover, +.navbar-light .navbar-brand:focus { color: #212529; } .navbar-light .navbar-nav .nav-link { color: #6c757d; } -.navbar-light .navbar-nav .nav-link:focus, -.navbar-light .navbar-nav .nav-link:hover { +.navbar-light .navbar-nav .nav-link:hover, +.navbar-light .navbar-nav .nav-link:focus { color: #212529; } .navbar-light .navbar-nav .nav-link.disabled { color: rgba(34, 34, 34, 0.3); } +.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, -.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, -.navbar-light .navbar-nav .show > .nav-link { +.navbar-light .navbar-nav .nav-link.active { color: #212529; } .navbar-light .navbar-toggler { @@ -4094,32 +4442,33 @@ input[type="submit"].btn-block { .navbar-light .navbar-text a { color: #212529; } -.navbar-light .navbar-text a:focus, -.navbar-light .navbar-text a:hover { +.navbar-light .navbar-text a:hover, +.navbar-light .navbar-text a:focus { color: #212529; } + .navbar-dark .navbar-brand { - color: #fff; + color: #ffffff; } -.navbar-dark .navbar-brand:focus, -.navbar-dark .navbar-brand:hover { - color: #fff; +.navbar-dark .navbar-brand:hover, +.navbar-dark .navbar-brand:focus { + color: #ffffff; } .navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.5); } -.navbar-dark .navbar-nav .nav-link:focus, -.navbar-dark .navbar-nav .nav-link:hover { +.navbar-dark .navbar-nav .nav-link:hover, +.navbar-dark .navbar-nav .nav-link:focus { color: rgba(255, 255, 255, 0.75); } .navbar-dark .navbar-nav .nav-link.disabled { color: rgba(255, 255, 255, 0.25); } +.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, -.navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, -.navbar-dark .navbar-nav .show > .nav-link { - color: #fff; +.navbar-dark .navbar-nav .nav-link.active { + color: #ffffff; } .navbar-dark .navbar-toggler { color: rgba(255, 255, 255, 0.5); @@ -4132,12 +4481,13 @@ input[type="submit"].btn-block { color: rgba(255, 255, 255, 0.5); } .navbar-dark .navbar-text a { - color: #fff; + color: #ffffff; } -.navbar-dark .navbar-text a:focus, -.navbar-dark .navbar-text a:hover { - color: #fff; +.navbar-dark .navbar-text a:hover, +.navbar-dark .navbar-text a:focus { + color: #ffffff; } + .card { position: relative; display: flex; @@ -4167,28 +4517,38 @@ input[type="submit"].btn-block { border-bottom-right-radius: calc(0.5rem - 1px); border-bottom-left-radius: calc(0.5rem - 1px); } +.card > .card-header + .list-group, +.card > .list-group + .card-footer { + border-top: 0; +} + .card-body { flex: 1 1 auto; min-height: 1px; padding: 1.25rem; color: #495057; } + .card-title { margin-bottom: 0.75rem; } + .card-subtitle { margin-top: -0.375rem; margin-bottom: 0; } + .card-text:last-child { margin-bottom: 0; } + .card-link:hover { text-decoration: none; } .card-link + .card-link { margin-left: 1.25rem; } + .card-header { padding: 0.75rem 1.25rem; margin-bottom: 0; @@ -4199,9 +4559,7 @@ input[type="submit"].btn-block { .card-header:first-child { border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0; } -.card-header + .list-group .list-group-item:first-child { - border-top: 0; -} + .card-footer { padding: 0.75rem 1.25rem; color: #495057; @@ -4211,16 +4569,19 @@ input[type="submit"].btn-block { .card-footer:last-child { border-radius: 0 0 calc(0.5rem - 1px) calc(0.5rem - 1px); } + .card-header-tabs { margin-right: -0.625rem; margin-bottom: -0.75rem; margin-left: -0.625rem; border-bottom: 0; } + .card-header-pills { margin-right: -0.625rem; margin-left: -0.625rem; } + .card-img-overlay { position: absolute; top: 0; @@ -4228,23 +4589,28 @@ input[type="submit"].btn-block { bottom: 0; left: 0; padding: 1.25rem; + border-radius: calc(0.5rem - 1px); } + .card-img, -.card-img-bottom, -.card-img-top { +.card-img-top, +.card-img-bottom { flex-shrink: 0; width: 100%; } + .card-img, .card-img-top { border-top-left-radius: calc(0.5rem - 1px); border-top-right-radius: calc(0.5rem - 1px); } + .card-img, .card-img-bottom { border-bottom-right-radius: calc(0.5rem - 1px); border-bottom-left-radius: calc(0.5rem - 1px); } + .card-deck .card { margin-bottom: 15px; } @@ -4262,6 +4628,7 @@ input[type="submit"].btn-block { margin-left: 15px; } } + .card-group > .card { margin-bottom: 15px; } @@ -4282,27 +4649,28 @@ input[type="submit"].btn-block { border-top-right-radius: 0; border-bottom-right-radius: 0; } - .card-group > .card:not(:last-child) .card-header, - .card-group > .card:not(:last-child) .card-img-top { + .card-group > .card:not(:last-child) .card-img-top, + .card-group > .card:not(:last-child) .card-header { border-top-right-radius: 0; } - .card-group > .card:not(:last-child) .card-footer, - .card-group > .card:not(:last-child) .card-img-bottom { + .card-group > .card:not(:last-child) .card-img-bottom, + .card-group > .card:not(:last-child) .card-footer { border-bottom-right-radius: 0; } .card-group > .card:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } - .card-group > .card:not(:first-child) .card-header, - .card-group > .card:not(:first-child) .card-img-top { + .card-group > .card:not(:first-child) .card-img-top, + .card-group > .card:not(:first-child) .card-header { border-top-left-radius: 0; } - .card-group > .card:not(:first-child) .card-footer, - .card-group > .card:not(:first-child) .card-img-bottom { + .card-group > .card:not(:first-child) .card-img-bottom, + .card-group > .card:not(:first-child) .card-footer { border-bottom-left-radius: 0; } } + .card-columns .card { margin-bottom: 0.75rem; } @@ -4318,6 +4686,10 @@ input[type="submit"].btn-block { width: 100%; } } + +.accordion { + overflow-anchor: none; +} .accordion > .card { overflow: hidden; } @@ -4334,6 +4706,7 @@ input[type="submit"].btn-block { border-radius: 0; margin-bottom: -1px; } + .breadcrumb { display: flex; flex-wrap: wrap; @@ -4343,14 +4716,12 @@ input[type="submit"].btn-block { background-color: #e9ecef; border-radius: 0.5rem; } -.breadcrumb-item { - display: flex; -} + .breadcrumb-item + .breadcrumb-item { padding-left: 0.5rem; } .breadcrumb-item + .breadcrumb-item::before { - display: inline-block; + float: left; padding-right: 0.5rem; color: #6c757d; content: "/"; @@ -4364,12 +4735,14 @@ input[type="submit"].btn-block { .breadcrumb-item.active { color: #6c757d; } + .pagination { display: flex; padding-left: 0; list-style: none; border-radius: 0.5rem; } + .page-link { position: relative; display: block; @@ -4377,7 +4750,7 @@ input[type="submit"].btn-block { margin-left: -1px; line-height: 1.25; color: #f1641e; - background-color: #fff; + background-color: #ffffff; border: 1px solid #dee2e6; } .page-link:hover { @@ -4392,6 +4765,7 @@ input[type="submit"].btn-block { outline: 0; box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.75); } + .page-item:first-child .page-link { margin-left: 0; border-top-left-radius: 0.5rem; @@ -4403,7 +4777,7 @@ input[type="submit"].btn-block { } .page-item.active .page-link { z-index: 3; - color: #fff; + color: #ffffff; background-color: #f1641e; border-color: #f1641e; } @@ -4411,9 +4785,10 @@ input[type="submit"].btn-block { color: #6c757d; pointer-events: none; cursor: auto; - background-color: #fff; + background-color: #ffffff; border-color: #dee2e6; } + .pagination-lg .page-link { padding: 0.75rem 1.5rem; font-size: 1.25rem; @@ -4427,6 +4802,7 @@ input[type="submit"].btn-block { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } + .pagination-sm .page-link { padding: 0.25rem 0.5rem; font-size: 0.875rem; @@ -4440,6 +4816,7 @@ input[type="submit"].btn-block { border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; } + .badge { display: inline-block; padding: 0.25em 0.4em; @@ -4458,134 +4835,146 @@ input[type="submit"].btn-block { transition: none; } } -a.badge:focus, -a.badge:hover { +a.badge:hover, +a.badge:focus { text-decoration: none; } + .badge:empty { display: none; } + .btn .badge { position: relative; top: -1px; } + .badge-pill { padding-right: 0.6em; padding-left: 0.6em; border-radius: 10rem; } + .badge-primary { - color: #fff; + color: #ffffff; background-color: #f1641e; } -a.badge-primary:focus, -a.badge-primary:hover { - color: #fff; +a.badge-primary:hover, +a.badge-primary:focus { + color: #ffffff; background-color: #cf4d0d; } -a.badge-primary.focus, -a.badge-primary:focus { +a.badge-primary:focus, +a.badge-primary.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.5); } + .badge-secondary { - color: #fff; + color: #ffffff; background-color: #00c853; } -a.badge-secondary:focus, -a.badge-secondary:hover { - color: #fff; +a.badge-secondary:hover, +a.badge-secondary:focus { + color: #ffffff; background-color: #00953e; } -a.badge-secondary.focus, -a.badge-secondary:focus { +a.badge-secondary:focus, +a.badge-secondary.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 200, 83, 0.5); } + .badge-success { - color: #fff; + color: #ffffff; background-color: #6610f2; } -a.badge-success:focus, -a.badge-success:hover { - color: #fff; +a.badge-success:hover, +a.badge-success:focus { + color: #ffffff; background-color: #510bc4; } -a.badge-success.focus, -a.badge-success:focus { +a.badge-success:focus, +a.badge-success.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(102, 16, 242, 0.5); } + .badge-info { - color: #fff; + color: #ffffff; background-color: #007bff; } -a.badge-info:focus, -a.badge-info:hover { - color: #fff; +a.badge-info:hover, +a.badge-info:focus { + color: #ffffff; background-color: #0062cc; } -a.badge-info.focus, -a.badge-info:focus { +a.badge-info:focus, +a.badge-info.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); } + .badge-warning { color: #212529; background-color: #ffc107; } -a.badge-warning:focus, -a.badge-warning:hover { +a.badge-warning:hover, +a.badge-warning:focus { color: #212529; background-color: #d39e00; } -a.badge-warning.focus, -a.badge-warning:focus { +a.badge-warning:focus, +a.badge-warning.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); } + .badge-danger { - color: #fff; + color: #ffffff; background-color: #873208; } -a.badge-danger:focus, -a.badge-danger:hover { - color: #fff; +a.badge-danger:hover, +a.badge-danger:focus { + color: #ffffff; background-color: #572105; } -a.badge-danger.focus, -a.badge-danger:focus { +a.badge-danger:focus, +a.badge-danger.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(135, 50, 8, 0.5); } + .badge-light { color: #212529; background-color: #f8f9fa; } -a.badge-light:focus, -a.badge-light:hover { +a.badge-light:hover, +a.badge-light:focus { color: #212529; background-color: #dae0e5; } -a.badge-light.focus, -a.badge-light:focus { +a.badge-light:focus, +a.badge-light.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5); } + .badge-dark { - color: #fff; + color: #ffffff; background-color: #343a40; } -a.badge-dark:focus, -a.badge-dark:hover { - color: #fff; +a.badge-dark:hover, +a.badge-dark:focus { + color: #ffffff; background-color: #1d2124; } -a.badge-dark.focus, -a.badge-dark:focus { +a.badge-dark:focus, +a.badge-dark.focus { outline: 0; box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5); } + .jumbotron { padding: 2rem 1rem; margin-bottom: 2rem; @@ -4597,11 +4986,13 @@ a.badge-dark:focus { padding: 4rem 2rem; } } + .jumbotron-fluid { padding-right: 0; padding-left: 0; border-radius: 0; } + .alert { position: relative; padding: 0.75rem 1.25rem; @@ -4609,12 +5000,15 @@ a.badge-dark:focus { border: 1px solid transparent; border-radius: 0.5rem; } + .alert-heading { color: inherit; } + .alert-link { font-weight: 600; } + .alert-dismissible { padding-right: 4rem; } @@ -4622,9 +5016,11 @@ a.badge-dark:focus { position: absolute; top: 0; right: 0; + z-index: 2; padding: 0.75rem 1.25rem; color: inherit; } + .alert-primary { color: #8e4420; background-color: #fce0d2; @@ -4636,6 +5032,7 @@ a.badge-dark:focus { .alert-primary .alert-link { color: #643017; } + .alert-secondary { color: #10783b; background-color: #ccf4dd; @@ -4647,6 +5044,7 @@ a.badge-dark:focus { .alert-secondary .alert-link { color: #0a4b25; } + .alert-success { color: #45198e; background-color: #e0cffc; @@ -4658,6 +5056,7 @@ a.badge-dark:focus { .alert-success .alert-link { color: #301163; } + .alert-info { color: #105095; background-color: #cce5ff; @@ -4669,6 +5068,7 @@ a.badge-dark:focus { .alert-info .alert-link { color: #0b3767; } + .alert-warning { color: #957514; background-color: #fff3cd; @@ -4680,8 +5080,9 @@ a.badge-dark:focus { .alert-warning .alert-link { color: #68520e; } + .alert-danger { - color: #572b15; + color: #572a14; background-color: #e7d6ce; border-color: #ddc6ba; } @@ -4689,8 +5090,9 @@ a.badge-dark:focus { border-top-color: #d5b8a9; } .alert-danger .alert-link { - color: #2e170b; + color: #2e160a; } + .alert-light { color: #919292; background-color: #fefefe; @@ -4702,6 +5104,7 @@ a.badge-dark:focus { .alert-light .alert-link { color: #777979; } + .alert-dark { color: #2b2e32; background-color: #d6d8d9; @@ -4713,6 +5116,7 @@ a.badge-dark:focus { .alert-dark .alert-link { color: #131517; } + @keyframes progress-bar-stripes { from { background-position: 1rem 0; @@ -4730,12 +5134,13 @@ a.badge-dark:focus { background-color: #e9ecef; border-radius: 0.5rem; } + .progress-bar { display: flex; flex-direction: column; justify-content: center; overflow: hidden; - color: #fff; + color: #ffffff; text-align: center; white-space: nowrap; background-color: #f1641e; @@ -4746,6 +5151,7 @@ a.badge-dark:focus { transition: none; } } + .progress-bar-striped { background-image: linear-gradient( 45deg, @@ -4759,21 +5165,25 @@ a.badge-dark:focus { ); background-size: 1rem 1rem; } + .progress-bar-animated { - animation: progress-bar-stripes 1s linear infinite; + animation: 1s linear infinite progress-bar-stripes; } @media (prefers-reduced-motion: reduce) { .progress-bar-animated { animation: none; } } + .media { display: flex; align-items: flex-start; } + .media-body { flex: 1; } + .list-group { display: flex; flex-direction: column; @@ -4781,13 +5191,14 @@ a.badge-dark:focus { margin-bottom: 0; border-radius: 0.5rem; } + .list-group-item-action { width: 100%; color: #495057; text-align: inherit; } -.list-group-item-action:focus, -.list-group-item-action:hover { +.list-group-item-action:hover, +.list-group-item-action:focus { z-index: 1; color: #495057; text-decoration: none; @@ -4797,11 +5208,12 @@ a.badge-dark:focus { color: #495057; background-color: #e9ecef; } + .list-group-item { position: relative; display: block; padding: 0.75rem 1.25rem; - background-color: #fff; + background-color: #ffffff; border: 1px solid rgba(34, 34, 34, 0.125); } .list-group-item:first-child { @@ -4816,11 +5228,11 @@ a.badge-dark:focus { .list-group-item:disabled { color: #6c757d; pointer-events: none; - background-color: #fff; + background-color: #ffffff; } .list-group-item.active { z-index: 2; - color: #fff; + color: #ffffff; background-color: #f1641e; border-color: #f1641e; } @@ -4831,6 +5243,7 @@ a.badge-dark:focus { margin-top: -1px; border-top-width: 1px; } + .list-group-horizontal { flex-direction: row; } @@ -4853,6 +5266,7 @@ a.badge-dark:focus { margin-left: -1px; border-left-width: 1px; } + @media (min-width: 576px) { .list-group-horizontal-sm { flex-direction: row; @@ -4958,152 +5372,163 @@ a.badge-dark:focus { .list-group-flush > .list-group-item:last-child { border-bottom-width: 0; } + .list-group-item-primary { color: #8e4420; background-color: #fbd4c0; } -.list-group-item-primary.list-group-item-action:focus, -.list-group-item-primary.list-group-item-action:hover { +.list-group-item-primary.list-group-item-action:hover, +.list-group-item-primary.list-group-item-action:focus { color: #8e4420; background-color: #f9c4a8; } .list-group-item-primary.list-group-item-action.active { - color: #fff; + color: #ffffff; background-color: #8e4420; border-color: #8e4420; } + .list-group-item-secondary { color: #10783b; background-color: #b8f0cf; } -.list-group-item-secondary.list-group-item-action:focus, -.list-group-item-secondary.list-group-item-action:hover { +.list-group-item-secondary.list-group-item-action:hover, +.list-group-item-secondary.list-group-item-action:focus { color: #10783b; background-color: #a3ecc1; } .list-group-item-secondary.list-group-item-action.active { - color: #fff; + color: #ffffff; background-color: #10783b; border-color: #10783b; } + .list-group-item-success { color: #45198e; background-color: #d4bcfb; } -.list-group-item-success.list-group-item-action:focus, -.list-group-item-success.list-group-item-action:hover { +.list-group-item-success.list-group-item-action:hover, +.list-group-item-success.list-group-item-action:focus { color: #45198e; background-color: #c5a4fa; } .list-group-item-success.list-group-item-action.active { - color: #fff; + color: #ffffff; background-color: #45198e; border-color: #45198e; } + .list-group-item-info { color: #105095; background-color: #b8daff; } -.list-group-item-info.list-group-item-action:focus, -.list-group-item-info.list-group-item-action:hover { +.list-group-item-info.list-group-item-action:hover, +.list-group-item-info.list-group-item-action:focus { color: #105095; background-color: #9fcdff; } .list-group-item-info.list-group-item-action.active { - color: #fff; + color: #ffffff; background-color: #105095; border-color: #105095; } + .list-group-item-warning { color: #957514; background-color: #ffeeba; } -.list-group-item-warning.list-group-item-action:focus, -.list-group-item-warning.list-group-item-action:hover { +.list-group-item-warning.list-group-item-action:hover, +.list-group-item-warning.list-group-item-action:focus { color: #957514; background-color: #ffe8a1; } .list-group-item-warning.list-group-item-action.active { - color: #fff; + color: #ffffff; background-color: #957514; border-color: #957514; } + .list-group-item-danger { - color: #572b15; + color: #572a14; background-color: #ddc6ba; } -.list-group-item-danger.list-group-item-action:focus, -.list-group-item-danger.list-group-item-action:hover { - color: #572b15; +.list-group-item-danger.list-group-item-action:hover, +.list-group-item-danger.list-group-item-action:focus { + color: #572a14; background-color: #d5b8a9; } .list-group-item-danger.list-group-item-action.active { - color: #fff; - background-color: #572b15; - border-color: #572b15; + color: #ffffff; + background-color: #572a14; + border-color: #572a14; } + .list-group-item-light { color: #919292; background-color: #fdfdfe; } -.list-group-item-light.list-group-item-action:focus, -.list-group-item-light.list-group-item-action:hover { +.list-group-item-light.list-group-item-action:hover, +.list-group-item-light.list-group-item-action:focus { color: #919292; background-color: #ececf6; } .list-group-item-light.list-group-item-action.active { - color: #fff; + color: #ffffff; background-color: #919292; border-color: #919292; } + .list-group-item-dark { color: #2b2e32; background-color: #c6c8ca; } -.list-group-item-dark.list-group-item-action:focus, -.list-group-item-dark.list-group-item-action:hover { +.list-group-item-dark.list-group-item-action:hover, +.list-group-item-dark.list-group-item-action:focus { color: #2b2e32; background-color: #b9bbbe; } .list-group-item-dark.list-group-item-action.active { - color: #fff; + color: #ffffff; background-color: #2b2e32; border-color: #2b2e32; } + .close { float: right; font-size: 1.5rem; font-weight: 600; line-height: 1; - color: #222; - text-shadow: 0 1px 0 #fff; + color: #222222; + text-shadow: 0 1px 0 #ffffff; opacity: 0.5; } .close:hover { - color: #222; + color: #222222; text-decoration: none; } -.close:not(:disabled):not(.disabled):focus, -.close:not(:disabled):not(.disabled):hover { +.close:not(:disabled):not(.disabled):hover, +.close:not(:disabled):not(.disabled):focus { opacity: 0.75; } + button.close { padding: 0; background-color: transparent; border: 0; } + a.close.disabled { pointer-events: none; } + .toast { + flex-basis: 350px; max-width: 350px; - overflow: hidden; font-size: 0.875rem; background-color: rgba(255, 255, 255, 0.85); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 0.25rem 0.75rem rgba(34, 34, 34, 0.1); - backdrop-filter: blur(10px); opacity: 0; border-radius: 0.25rem; } @@ -5120,6 +5545,7 @@ a.close.disabled { .toast.hide { display: none; } + .toast-header { display: flex; align-items: center; @@ -5128,10 +5554,14 @@ a.close.disabled { background-color: rgba(255, 255, 255, 0.85); background-clip: padding-box; border-bottom: 1px solid rgba(0, 0, 0, 0.05); + border-top-left-radius: calc(0.25rem - 1px); + border-top-right-radius: calc(0.25rem - 1px); } + .toast-body { padding: 0.75rem; } + .modal-open { overflow: hidden; } @@ -5139,6 +5569,7 @@ a.close.disabled { overflow-x: hidden; overflow-y: auto; } + .modal { position: fixed; top: 0; @@ -5150,6 +5581,7 @@ a.close.disabled { overflow: hidden; outline: 0; } + .modal-dialog { position: relative; width: auto; @@ -5171,6 +5603,7 @@ a.close.disabled { .modal.modal-static .modal-dialog { transform: scale(1.02); } + .modal-dialog-scrollable { display: flex; max-height: calc(100% - 1rem); @@ -5179,13 +5612,14 @@ a.close.disabled { max-height: calc(100vh - 1rem); overflow: hidden; } -.modal-dialog-scrollable .modal-footer, -.modal-dialog-scrollable .modal-header { +.modal-dialog-scrollable .modal-header, +.modal-dialog-scrollable .modal-footer { flex-shrink: 0; } .modal-dialog-scrollable .modal-body { overflow-y: auto; } + .modal-dialog-centered { display: flex; align-items: center; @@ -5208,18 +5642,20 @@ a.close.disabled { .modal-dialog-centered.modal-dialog-scrollable::before { content: none; } + .modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; - background-color: #fff; + background-color: #ffffff; background-clip: padding-box; border: 1px solid rgba(34, 34, 34, 0.2); border-radius: 0.5rem; outline: 0; } + .modal-backdrop { position: fixed; top: 0; @@ -5227,7 +5663,7 @@ a.close.disabled { z-index: 1040; width: 100vw; height: 100vh; - background-color: #222; + background-color: #222222; } .modal-backdrop.fade { opacity: 0; @@ -5235,6 +5671,7 @@ a.close.disabled { .modal-backdrop.show { opacity: 0.5; } + .modal-header { display: flex; align-items: flex-start; @@ -5248,15 +5685,18 @@ a.close.disabled { padding: 1rem 1rem; margin: -1rem -1rem -1rem auto; } + .modal-title { margin-bottom: 0; line-height: 1.5; } + .modal-body { position: relative; flex: 1 1 auto; padding: 1rem; } + .modal-footer { display: flex; flex-wrap: wrap; @@ -5270,6 +5710,7 @@ a.close.disabled { .modal-footer > * { margin: 0.25rem; } + .modal-scrollbar-measure { position: absolute; top: -9999px; @@ -5277,6 +5718,7 @@ a.close.disabled { height: 50px; overflow: scroll; } + @media (min-width: 576px) { .modal-dialog { max-width: 500px; @@ -5316,7 +5758,7 @@ a.close.disabled { display: block; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Droid Sans", "Segoe UI", - Helvetica, Arial, sans-serif; + "Helvetica", Arial, sans-serif; font-style: normal; font-weight: 400; line-height: 1.5; @@ -5327,8 +5769,8 @@ a.close.disabled { text-transform: none; letter-spacing: normal; word-break: normal; - word-spacing: normal; white-space: normal; + word-spacing: normal; line-break: auto; font-size: 0.875rem; word-wrap: break-word; @@ -5349,74 +5791,80 @@ a.close.disabled { border-color: transparent; border-style: solid; } -.bs-tooltip-auto[x-placement^="top"], -.bs-tooltip-top { + +.bs-tooltip-top, +.bs-tooltip-auto[x-placement^="top"] { padding: 0.4rem 0; } -.bs-tooltip-auto[x-placement^="top"] .arrow, -.bs-tooltip-top .arrow { +.bs-tooltip-top .arrow, +.bs-tooltip-auto[x-placement^="top"] .arrow { bottom: 0; } -.bs-tooltip-auto[x-placement^="top"] .arrow::before, -.bs-tooltip-top .arrow::before { +.bs-tooltip-top .arrow::before, +.bs-tooltip-auto[x-placement^="top"] .arrow::before { top: 0; border-width: 0.4rem 0.4rem 0; - border-top-color: #222; + border-top-color: #222222; } -.bs-tooltip-auto[x-placement^="right"], -.bs-tooltip-right { + +.bs-tooltip-right, +.bs-tooltip-auto[x-placement^="right"] { padding: 0 0.4rem; } -.bs-tooltip-auto[x-placement^="right"] .arrow, -.bs-tooltip-right .arrow { +.bs-tooltip-right .arrow, +.bs-tooltip-auto[x-placement^="right"] .arrow { left: 0; width: 0.4rem; height: 0.8rem; } -.bs-tooltip-auto[x-placement^="right"] .arrow::before, -.bs-tooltip-right .arrow::before { +.bs-tooltip-right .arrow::before, +.bs-tooltip-auto[x-placement^="right"] .arrow::before { right: 0; border-width: 0.4rem 0.4rem 0.4rem 0; - border-right-color: #222; + border-right-color: #222222; } -.bs-tooltip-auto[x-placement^="bottom"], -.bs-tooltip-bottom { + +.bs-tooltip-bottom, +.bs-tooltip-auto[x-placement^="bottom"] { padding: 0.4rem 0; } -.bs-tooltip-auto[x-placement^="bottom"] .arrow, -.bs-tooltip-bottom .arrow { +.bs-tooltip-bottom .arrow, +.bs-tooltip-auto[x-placement^="bottom"] .arrow { top: 0; } -.bs-tooltip-auto[x-placement^="bottom"] .arrow::before, -.bs-tooltip-bottom .arrow::before { +.bs-tooltip-bottom .arrow::before, +.bs-tooltip-auto[x-placement^="bottom"] .arrow::before { bottom: 0; border-width: 0 0.4rem 0.4rem; - border-bottom-color: #222; + border-bottom-color: #222222; } -.bs-tooltip-auto[x-placement^="left"], -.bs-tooltip-left { + +.bs-tooltip-left, +.bs-tooltip-auto[x-placement^="left"] { padding: 0 0.4rem; } -.bs-tooltip-auto[x-placement^="left"] .arrow, -.bs-tooltip-left .arrow { +.bs-tooltip-left .arrow, +.bs-tooltip-auto[x-placement^="left"] .arrow { right: 0; width: 0.4rem; height: 0.8rem; } -.bs-tooltip-auto[x-placement^="left"] .arrow::before, -.bs-tooltip-left .arrow::before { +.bs-tooltip-left .arrow::before, +.bs-tooltip-auto[x-placement^="left"] .arrow::before { left: 0; border-width: 0.4rem 0 0.4rem 0.4rem; - border-left-color: #222; + border-left-color: #222222; } + .tooltip-inner { max-width: 200px; padding: 0.25rem 0.5rem; - color: #fff; + color: #ffffff; text-align: center; - background-color: #222; + background-color: #222222; border-radius: 0.5rem; } + .popover { position: absolute; top: 0; @@ -5425,7 +5873,7 @@ a.close.disabled { display: block; max-width: 276px; font-family: -apple-system, BlinkMacSystemFont, "Droid Sans", "Segoe UI", - Helvetica, Arial, sans-serif; + "Helvetica", Arial, sans-serif; font-style: normal; font-weight: 400; line-height: 1.5; @@ -5436,12 +5884,12 @@ a.close.disabled { text-transform: none; letter-spacing: normal; word-break: normal; - word-spacing: normal; white-space: normal; + word-spacing: normal; line-break: auto; font-size: 0.875rem; word-wrap: break-word; - background-color: #fff; + background-color: #ffffff; background-clip: padding-box; border: 1px solid rgba(34, 34, 34, 0.2); border-radius: 0.5rem; @@ -5453,79 +5901,82 @@ a.close.disabled { height: 0.5rem; margin: 0 0.5rem; } -.popover .arrow::after, -.popover .arrow::before { +.popover .arrow::before, +.popover .arrow::after { position: absolute; display: block; content: ""; border-color: transparent; border-style: solid; } -.bs-popover-auto[x-placement^="top"], -.bs-popover-top { + +.bs-popover-top, +.bs-popover-auto[x-placement^="top"] { margin-bottom: 0.5rem; } -.bs-popover-auto[x-placement^="top"] > .arrow, -.bs-popover-top > .arrow { +.bs-popover-top > .arrow, +.bs-popover-auto[x-placement^="top"] > .arrow { bottom: calc(-0.5rem - 1px); } -.bs-popover-auto[x-placement^="top"] > .arrow::before, -.bs-popover-top > .arrow::before { +.bs-popover-top > .arrow::before, +.bs-popover-auto[x-placement^="top"] > .arrow::before { bottom: 0; border-width: 0.5rem 0.5rem 0; border-top-color: rgba(34, 34, 34, 0.25); } -.bs-popover-auto[x-placement^="top"] > .arrow::after, -.bs-popover-top > .arrow::after { +.bs-popover-top > .arrow::after, +.bs-popover-auto[x-placement^="top"] > .arrow::after { bottom: 1px; border-width: 0.5rem 0.5rem 0; - border-top-color: #fff; + border-top-color: #ffffff; } -.bs-popover-auto[x-placement^="right"], -.bs-popover-right { + +.bs-popover-right, +.bs-popover-auto[x-placement^="right"] { margin-left: 0.5rem; } -.bs-popover-auto[x-placement^="right"] > .arrow, -.bs-popover-right > .arrow { +.bs-popover-right > .arrow, +.bs-popover-auto[x-placement^="right"] > .arrow { left: calc(-0.5rem - 1px); width: 0.5rem; height: 1rem; margin: 0.5rem 0; } -.bs-popover-auto[x-placement^="right"] > .arrow::before, -.bs-popover-right > .arrow::before { +.bs-popover-right > .arrow::before, +.bs-popover-auto[x-placement^="right"] > .arrow::before { left: 0; border-width: 0.5rem 0.5rem 0.5rem 0; border-right-color: rgba(34, 34, 34, 0.25); } -.bs-popover-auto[x-placement^="right"] > .arrow::after, -.bs-popover-right > .arrow::after { +.bs-popover-right > .arrow::after, +.bs-popover-auto[x-placement^="right"] > .arrow::after { left: 1px; border-width: 0.5rem 0.5rem 0.5rem 0; - border-right-color: #fff; + border-right-color: #ffffff; } -.bs-popover-auto[x-placement^="bottom"], -.bs-popover-bottom { + +.bs-popover-bottom, +.bs-popover-auto[x-placement^="bottom"] { margin-top: 0.5rem; } -.bs-popover-auto[x-placement^="bottom"] > .arrow, -.bs-popover-bottom > .arrow { +.bs-popover-bottom > .arrow, +.bs-popover-auto[x-placement^="bottom"] > .arrow { top: calc(-0.5rem - 1px); } -.bs-popover-auto[x-placement^="bottom"] > .arrow::before, -.bs-popover-bottom > .arrow::before { +.bs-popover-bottom > .arrow::before, +.bs-popover-auto[x-placement^="bottom"] > .arrow::before { top: 0; border-width: 0 0.5rem 0.5rem 0.5rem; border-bottom-color: rgba(34, 34, 34, 0.25); } -.bs-popover-auto[x-placement^="bottom"] > .arrow::after, -.bs-popover-bottom > .arrow::after { +.bs-popover-bottom > .arrow::after, +.bs-popover-auto[x-placement^="bottom"] > .arrow::after { top: 1px; border-width: 0 0.5rem 0.5rem 0.5rem; - border-bottom-color: #fff; + border-bottom-color: #ffffff; } -.bs-popover-auto[x-placement^="bottom"] .popover-header::before, -.bs-popover-bottom .popover-header::before { +.bs-popover-bottom .popover-header::before, +.bs-popover-auto[x-placement^="bottom"] .popover-header::before { position: absolute; top: 0; left: 50%; @@ -5535,29 +5986,31 @@ a.close.disabled { content: ""; border-bottom: 1px solid #f7f7f7; } -.bs-popover-auto[x-placement^="left"], -.bs-popover-left { + +.bs-popover-left, +.bs-popover-auto[x-placement^="left"] { margin-right: 0.5rem; } -.bs-popover-auto[x-placement^="left"] > .arrow, -.bs-popover-left > .arrow { +.bs-popover-left > .arrow, +.bs-popover-auto[x-placement^="left"] > .arrow { right: calc(-0.5rem - 1px); width: 0.5rem; height: 1rem; margin: 0.5rem 0; } -.bs-popover-auto[x-placement^="left"] > .arrow::before, -.bs-popover-left > .arrow::before { +.bs-popover-left > .arrow::before, +.bs-popover-auto[x-placement^="left"] > .arrow::before { right: 0; border-width: 0.5rem 0 0.5rem 0.5rem; border-left-color: rgba(34, 34, 34, 0.25); } -.bs-popover-auto[x-placement^="left"] > .arrow::after, -.bs-popover-left > .arrow::after { +.bs-popover-left > .arrow::after, +.bs-popover-auto[x-placement^="left"] > .arrow::after { right: 1px; border-width: 0.5rem 0 0.5rem 0.5rem; - border-left-color: #fff; + border-left-color: #ffffff; } + .popover-header { padding: 0.5rem 0.75rem; margin-bottom: 0; @@ -5571,16 +6024,20 @@ a.close.disabled { .popover-header:empty { display: none; } + .popover-body { padding: 0.5rem 0.75rem; color: #495057; } + .carousel { position: relative; } + .carousel.pointer-event { touch-action: pan-y; } + .carousel-inner { position: relative; width: 100%; @@ -5591,6 +6048,7 @@ a.close.disabled { clear: both; content: ""; } + .carousel-item { position: relative; display: none; @@ -5605,27 +6063,31 @@ a.close.disabled { transition: none; } } + +.carousel-item.active, .carousel-item-next, -.carousel-item-prev, -.carousel-item.active { +.carousel-item-prev { display: block; } -.active.carousel-item-right, -.carousel-item-next:not(.carousel-item-left) { + +.carousel-item-next:not(.carousel-item-left), +.active.carousel-item-right { transform: translateX(100%); } -.active.carousel-item-left, -.carousel-item-prev:not(.carousel-item-right) { + +.carousel-item-prev:not(.carousel-item-right), +.active.carousel-item-left { transform: translateX(-100%); } + .carousel-fade .carousel-item { opacity: 0; transition-property: opacity; transform: none; } +.carousel-fade .carousel-item.active, .carousel-fade .carousel-item-next.carousel-item-left, -.carousel-fade .carousel-item-prev.carousel-item-right, -.carousel-fade .carousel-item.active { +.carousel-fade .carousel-item-prev.carousel-item-right { z-index: 1; opacity: 1; } @@ -5641,8 +6103,9 @@ a.close.disabled { transition: none; } } -.carousel-control-next, -.carousel-control-prev { + +.carousel-control-prev, +.carousel-control-next { position: absolute; top: 0; bottom: 0; @@ -5651,45 +6114,54 @@ a.close.disabled { align-items: center; justify-content: center; width: 15%; - color: #fff; + padding: 0; + color: #ffffff; text-align: center; + background: none; + border: 0; opacity: 0.5; transition: opacity 0.15s ease; } @media (prefers-reduced-motion: reduce) { - .carousel-control-next, - .carousel-control-prev { + .carousel-control-prev, + .carousel-control-next { transition: none; } } -.carousel-control-next:focus, -.carousel-control-next:hover, +.carousel-control-prev:hover, .carousel-control-prev:focus, -.carousel-control-prev:hover { - color: #fff; +.carousel-control-next:hover, +.carousel-control-next:focus { + color: #ffffff; text-decoration: none; outline: 0; opacity: 0.9; } + .carousel-control-prev { left: 0; } + .carousel-control-next { right: 0; } -.carousel-control-next-icon, -.carousel-control-prev-icon { + +.carousel-control-prev-icon, +.carousel-control-next-icon { display: inline-block; width: 20px; height: 20px; - background: no-repeat 50%/100% 100%; + background: 50%/100% 100% no-repeat; } + .carousel-control-prev-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e"); } + .carousel-control-next-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e"); } + .carousel-indicators { position: absolute; right: 0; @@ -5712,7 +6184,7 @@ a.close.disabled { margin-left: 3px; text-indent: -999px; cursor: pointer; - background-color: #fff; + background-color: #ffffff; background-clip: padding-box; border-top: 10px solid transparent; border-bottom: 10px solid transparent; @@ -5727,6 +6199,7 @@ a.close.disabled { .carousel-indicators .active { opacity: 1; } + .carousel-caption { position: absolute; right: 15%; @@ -5735,9 +6208,10 @@ a.close.disabled { z-index: 10; padding-top: 20px; padding-bottom: 20px; - color: #fff; + color: #ffffff; text-align: center; } + @keyframes spinner-border { to { transform: rotate(360deg); @@ -5747,17 +6221,19 @@ a.close.disabled { display: inline-block; width: 2rem; height: 2rem; - vertical-align: text-bottom; - border: 0.25em solid currentColor; + vertical-align: -0.125em; + border: 0.25em solid currentcolor; border-right-color: transparent; border-radius: 50%; - animation: spinner-border 0.75s linear infinite; + animation: 0.75s linear infinite spinner-border; } + .spinner-border-sm { width: 1rem; height: 1rem; border-width: 0.2em; } + @keyframes spinner-grow { 0% { transform: scale(0); @@ -5771,235 +6247,306 @@ a.close.disabled { display: inline-block; width: 2rem; height: 2rem; - vertical-align: text-bottom; - background-color: currentColor; + vertical-align: -0.125em; + background-color: currentcolor; border-radius: 50%; opacity: 0; - animation: spinner-grow 0.75s linear infinite; + animation: 0.75s linear infinite spinner-grow; } + .spinner-grow-sm { width: 1rem; height: 1rem; } + +@media (prefers-reduced-motion: reduce) { + .spinner-border, + .spinner-grow { + animation-duration: 1.5s; + } +} .align-baseline { vertical-align: baseline !important; } + .align-top { vertical-align: top !important; } + .align-middle { vertical-align: middle !important; } + .align-bottom { vertical-align: bottom !important; } + .align-text-bottom { vertical-align: text-bottom !important; } + .align-text-top { vertical-align: text-top !important; } + .bg-primary { background-color: #f1641e !important; } -a.bg-primary:focus, + a.bg-primary:hover, -button.bg-primary:focus, -button.bg-primary:hover { +a.bg-primary:focus, +button.bg-primary:hover, +button.bg-primary:focus { background-color: #cf4d0d !important; } + .bg-secondary { background-color: #00c853 !important; } -a.bg-secondary:focus, + a.bg-secondary:hover, -button.bg-secondary:focus, -button.bg-secondary:hover { +a.bg-secondary:focus, +button.bg-secondary:hover, +button.bg-secondary:focus { background-color: #00953e !important; } + .bg-success { background-color: #6610f2 !important; } -a.bg-success:focus, + a.bg-success:hover, -button.bg-success:focus, -button.bg-success:hover { +a.bg-success:focus, +button.bg-success:hover, +button.bg-success:focus { background-color: #510bc4 !important; } + .bg-info { background-color: #007bff !important; } -a.bg-info:focus, + a.bg-info:hover, -button.bg-info:focus, -button.bg-info:hover { +a.bg-info:focus, +button.bg-info:hover, +button.bg-info:focus { background-color: #0062cc !important; } + .bg-warning { background-color: #ffc107 !important; } -a.bg-warning:focus, + a.bg-warning:hover, -button.bg-warning:focus, -button.bg-warning:hover { +a.bg-warning:focus, +button.bg-warning:hover, +button.bg-warning:focus { background-color: #d39e00 !important; } + .bg-danger { background-color: #873208 !important; } -a.bg-danger:focus, + a.bg-danger:hover, -button.bg-danger:focus, -button.bg-danger:hover { +a.bg-danger:focus, +button.bg-danger:hover, +button.bg-danger:focus { background-color: #572105 !important; } + .bg-light { background-color: #f8f9fa !important; } -a.bg-light:focus, + a.bg-light:hover, -button.bg-light:focus, -button.bg-light:hover { +a.bg-light:focus, +button.bg-light:hover, +button.bg-light:focus { background-color: #dae0e5 !important; } + .bg-dark { background-color: #343a40 !important; } -a.bg-dark:focus, + a.bg-dark:hover, -button.bg-dark:focus, -button.bg-dark:hover { +a.bg-dark:focus, +button.bg-dark:hover, +button.bg-dark:focus { background-color: #1d2124 !important; } + .bg-white { - background-color: #fff !important; + background-color: #ffffff !important; } + .bg-transparent { background-color: transparent !important; } + .border { border: 1px solid #495057 !important; } + .border-top { border-top: 1px solid #495057 !important; } + .border-right { border-right: 1px solid #495057 !important; } + .border-bottom { border-bottom: 1px solid #495057 !important; } + .border-left { border-left: 1px solid #495057 !important; } + .border-0 { border: 0 !important; } + .border-top-0 { border-top: 0 !important; } + .border-right-0 { border-right: 0 !important; } + .border-bottom-0 { border-bottom: 0 !important; } + .border-left-0 { border-left: 0 !important; } + .border-primary { border-color: #f1641e !important; } + .border-secondary { border-color: #00c853 !important; } + .border-success { border-color: #6610f2 !important; } + .border-info { border-color: #007bff !important; } + .border-warning { border-color: #ffc107 !important; } + .border-danger { border-color: #873208 !important; } + .border-light { border-color: #f8f9fa !important; } + .border-dark { border-color: #343a40 !important; } + .border-white { - border-color: #fff !important; + border-color: #ffffff !important; } + .rounded-sm { border-radius: 1rem !important; } + .rounded { border-radius: 0.5rem !important; } + .rounded-top { border-top-left-radius: 0.5rem !important; border-top-right-radius: 0.5rem !important; } + .rounded-right { border-top-right-radius: 0.5rem !important; border-bottom-right-radius: 0.5rem !important; } + .rounded-bottom { border-bottom-right-radius: 0.5rem !important; border-bottom-left-radius: 0.5rem !important; } + .rounded-left { border-top-left-radius: 0.5rem !important; border-bottom-left-radius: 0.5rem !important; } + .rounded-lg { border-radius: 0.5rem !important; } + .rounded-circle { border-radius: 50% !important; } + .rounded-pill { border-radius: 0.25rem !important; } + .rounded-0 { border-radius: 0 !important; } + .clearfix::after { display: block; clear: both; content: ""; } + .d-none { display: none !important; } + .d-inline { display: inline !important; } + .d-inline-block { display: inline-block !important; } + .d-block { display: block !important; } + .d-table { display: table !important; } + .d-table-row { display: table-row !important; } + .d-table-cell { display: table-cell !important; } + .d-flex { display: flex !important; } + .d-inline-flex { display: inline-flex !important; } + @media (min-width: 576px) { .d-sm-none { display: none !important; @@ -6157,8 +6704,8 @@ button.bg-dark:hover { content: ""; } .embed-responsive .embed-responsive-item, -.embed-responsive embed, .embed-responsive iframe, +.embed-responsive embed, .embed-responsive object, .embed-responsive video { position: absolute; @@ -6169,120 +6716,159 @@ button.bg-dark:hover { height: 100%; border: 0; } + .embed-responsive-21by9::before { - padding-top: 42.85714%; + padding-top: 42.85714286%; } + .embed-responsive-16by9::before { padding-top: 56.25%; } + .embed-responsive-4by3::before { padding-top: 75%; } + .embed-responsive-1by1::before { padding-top: 100%; } + .flex-row { flex-direction: row !important; } + .flex-column { flex-direction: column !important; } + .flex-row-reverse { flex-direction: row-reverse !important; } + .flex-column-reverse { flex-direction: column-reverse !important; } + .flex-wrap { flex-wrap: wrap !important; } + .flex-nowrap { flex-wrap: nowrap !important; } + .flex-wrap-reverse { flex-wrap: wrap-reverse !important; } + .flex-fill { flex: 1 1 auto !important; } + .flex-grow-0 { flex-grow: 0 !important; } + .flex-grow-1 { flex-grow: 1 !important; } + .flex-shrink-0 { flex-shrink: 0 !important; } + .flex-shrink-1 { flex-shrink: 1 !important; } + .justify-content-start { justify-content: flex-start !important; } + .justify-content-end { justify-content: flex-end !important; } + .justify-content-center { justify-content: center !important; } + .justify-content-between { justify-content: space-between !important; } + .justify-content-around { justify-content: space-around !important; } + .align-items-start { align-items: flex-start !important; } + .align-items-end { align-items: flex-end !important; } + .align-items-center { align-items: center !important; } + .align-items-baseline { align-items: baseline !important; } + .align-items-stretch { align-items: stretch !important; } + .align-content-start { align-content: flex-start !important; } + .align-content-end { align-content: flex-end !important; } + .align-content-center { align-content: center !important; } + .align-content-between { align-content: space-between !important; } + .align-content-around { align-content: space-around !important; } + .align-content-stretch { align-content: stretch !important; } + .align-self-auto { align-self: auto !important; } + .align-self-start { align-self: flex-start !important; } + .align-self-end { align-self: flex-end !important; } + .align-self-center { align-self: center !important; } + .align-self-baseline { align-self: baseline !important; } + .align-self-stretch { align-self: stretch !important; } + @media (min-width: 576px) { .flex-sm-row { flex-direction: row !important; @@ -6702,12 +7288,15 @@ button.bg-dark:hover { .float-left { float: left !important; } + .float-right { float: right !important; } + .float-none { float: none !important; } + @media (min-width: 576px) { .float-sm-left { float: left !important; @@ -6755,33 +7344,43 @@ button.bg-dark:hover { .user-select-all { user-select: all !important; } + .user-select-auto { user-select: auto !important; } + .user-select-none { user-select: none !important; } + .overflow-auto { overflow: auto !important; } + .overflow-hidden { overflow: hidden !important; } + .position-static { position: static !important; } + .position-relative { position: relative !important; } + .position-absolute { position: absolute !important; } + .position-fixed { position: fixed !important; } + .position-sticky { position: sticky !important; } + .fixed-top { position: fixed; top: 0; @@ -6789,6 +7388,7 @@ button.bg-dark:hover { left: 0; z-index: 1030; } + .fixed-bottom { position: fixed; right: 0; @@ -6796,6 +7396,7 @@ button.bg-dark:hover { left: 0; z-index: 1030; } + @supports (position: sticky) { .sticky-top { position: sticky; @@ -6803,6 +7404,7 @@ button.bg-dark:hover { z-index: 1020; } } + .sr-only { position: absolute; width: 1px; @@ -6814,6 +7416,7 @@ button.bg-dark:hover { white-space: nowrap; border: 0; } + .sr-only-focusable:active, .sr-only-focusable:focus { position: static; @@ -6823,408 +7426,519 @@ button.bg-dark:hover { clip: auto; white-space: normal; } + .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(34, 34, 34, 0.075) !important; } + .shadow { box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15) !important; } + .shadow-lg { box-shadow: 0 1rem 3rem rgba(34, 34, 34, 0.175) !important; } + .shadow-none { box-shadow: none !important; } + .w-25 { width: 25% !important; } + .w-50 { width: 50% !important; } + .w-75 { width: 75% !important; } + .w-100 { width: 100% !important; } + .w-auto { width: auto !important; } + .h-25 { height: 25% !important; } + .h-50 { height: 50% !important; } + .h-75 { height: 75% !important; } + .h-100 { height: 100% !important; } + .h-auto { height: auto !important; } + .mw-100 { max-width: 100% !important; } + .mh-100 { max-height: 100% !important; } + .min-vw-100 { min-width: 100vw !important; } + .min-vh-100 { min-height: 100vh !important; } + .vw-100 { width: 100vw !important; } + .vh-100 { height: 100vh !important; } + .m-0 { margin: 0 !important; } + .mt-0, .my-0 { margin-top: 0 !important; } + .mr-0, .mx-0 { margin-right: 0 !important; } + .mb-0, .my-0 { margin-bottom: 0 !important; } + .ml-0, .mx-0 { margin-left: 0 !important; } + .m-1 { margin: 0.25rem !important; } + .mt-1, .my-1 { margin-top: 0.25rem !important; } + .mr-1, .mx-1 { margin-right: 0.25rem !important; } + .mb-1, .my-1 { margin-bottom: 0.25rem !important; } + .ml-1, .mx-1 { margin-left: 0.25rem !important; } + .m-2 { margin: 0.5rem !important; } + .mt-2, .my-2 { margin-top: 0.5rem !important; } + .mr-2, .mx-2 { margin-right: 0.5rem !important; } + .mb-2, .my-2 { margin-bottom: 0.5rem !important; } + .ml-2, .mx-2 { margin-left: 0.5rem !important; } + .m-3 { margin: 1rem !important; } + .mt-3, .my-3 { margin-top: 1rem !important; } + .mr-3, .mx-3 { margin-right: 1rem !important; } + .mb-3, .my-3 { margin-bottom: 1rem !important; } + .ml-3, .mx-3 { margin-left: 1rem !important; } + .m-4 { margin: 1.5rem !important; } + .mt-4, .my-4 { margin-top: 1.5rem !important; } + .mr-4, .mx-4 { margin-right: 1.5rem !important; } + .mb-4, .my-4 { margin-bottom: 1.5rem !important; } + .ml-4, .mx-4 { margin-left: 1.5rem !important; } + .m-5 { margin: 3rem !important; } + .mt-5, .my-5 { margin-top: 3rem !important; } + .mr-5, .mx-5 { margin-right: 3rem !important; } + .mb-5, .my-5 { margin-bottom: 3rem !important; } + .ml-5, .mx-5 { margin-left: 3rem !important; } + .p-0 { padding: 0 !important; } + .pt-0, .py-0 { padding-top: 0 !important; } + .pr-0, .px-0 { padding-right: 0 !important; } + .pb-0, .py-0 { padding-bottom: 0 !important; } + .pl-0, .px-0 { padding-left: 0 !important; } + .p-1 { padding: 0.25rem !important; } + .pt-1, .py-1 { padding-top: 0.25rem !important; } + .pr-1, .px-1 { padding-right: 0.25rem !important; } + .pb-1, .py-1 { padding-bottom: 0.25rem !important; } + .pl-1, .px-1 { padding-left: 0.25rem !important; } + .p-2 { padding: 0.5rem !important; } + .pt-2, .py-2 { padding-top: 0.5rem !important; } + .pr-2, .px-2 { padding-right: 0.5rem !important; } + .pb-2, .py-2 { padding-bottom: 0.5rem !important; } + .pl-2, .px-2 { padding-left: 0.5rem !important; } + .p-3 { padding: 1rem !important; } + .pt-3, .py-3 { padding-top: 1rem !important; } + .pr-3, .px-3 { padding-right: 1rem !important; } + .pb-3, .py-3 { padding-bottom: 1rem !important; } + .pl-3, .px-3 { padding-left: 1rem !important; } + .p-4 { padding: 1.5rem !important; } + .pt-4, .py-4 { padding-top: 1.5rem !important; } + .pr-4, .px-4 { padding-right: 1.5rem !important; } + .pb-4, .py-4 { padding-bottom: 1.5rem !important; } + .pl-4, .px-4 { padding-left: 1.5rem !important; } + .p-5 { padding: 3rem !important; } + .pt-5, .py-5 { padding-top: 3rem !important; } + .pr-5, .px-5 { padding-right: 3rem !important; } + .pb-5, .py-5 { padding-bottom: 3rem !important; } + .pl-5, .px-5 { padding-left: 3rem !important; } + .m-n1 { margin: -0.25rem !important; } + .mt-n1, .my-n1 { margin-top: -0.25rem !important; } + .mr-n1, .mx-n1 { margin-right: -0.25rem !important; } + .mb-n1, .my-n1 { margin-bottom: -0.25rem !important; } + .ml-n1, .mx-n1 { margin-left: -0.25rem !important; } + .m-n2 { margin: -0.5rem !important; } + .mt-n2, .my-n2 { margin-top: -0.5rem !important; } + .mr-n2, .mx-n2 { margin-right: -0.5rem !important; } + .mb-n2, .my-n2 { margin-bottom: -0.5rem !important; } + .ml-n2, .mx-n2 { margin-left: -0.5rem !important; } + .m-n3 { margin: -1rem !important; } + .mt-n3, .my-n3 { margin-top: -1rem !important; } + .mr-n3, .mx-n3 { margin-right: -1rem !important; } + .mb-n3, .my-n3 { margin-bottom: -1rem !important; } + .ml-n3, .mx-n3 { margin-left: -1rem !important; } + .m-n4 { margin: -1.5rem !important; } + .mt-n4, .my-n4 { margin-top: -1.5rem !important; } + .mr-n4, .mx-n4 { margin-right: -1.5rem !important; } + .mb-n4, .my-n4 { margin-bottom: -1.5rem !important; } + .ml-n4, .mx-n4 { margin-left: -1.5rem !important; } + .m-n5 { margin: -3rem !important; } + .mt-n5, .my-n5 { margin-top: -3rem !important; } + .mr-n5, .mx-n5 { margin-right: -3rem !important; } + .mb-n5, .my-n5 { margin-bottom: -3rem !important; } + .ml-n5, .mx-n5 { margin-left: -3rem !important; } + .m-auto { margin: auto !important; } + .mt-auto, .my-auto { margin-top: auto !important; } + .mr-auto, .mx-auto { margin-right: auto !important; } + .mb-auto, .my-auto { margin-bottom: auto !important; } + .ml-auto, .mx-auto { margin-left: auto !important; } + @media (min-width: 576px) { .m-sm-0 { margin: 0 !important; @@ -8612,33 +9326,42 @@ button.bg-dark:hover { content: ""; background-color: rgba(0, 0, 0, 0); } + .text-monospace { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; } + .text-justify { text-align: justify !important; } + .text-wrap { white-space: normal !important; } + .text-nowrap { white-space: nowrap !important; } + .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + .text-left { text-align: left !important; } + .text-right { text-align: right !important; } + .text-center { text-align: center !important; } + @media (min-width: 576px) { .text-sm-left { text-align: left !important; @@ -8686,101 +9409,131 @@ button.bg-dark:hover { .text-lowercase { text-transform: lowercase !important; } + .text-uppercase { text-transform: uppercase !important; } + .text-capitalize { text-transform: capitalize !important; } + .font-weight-light { font-weight: 300 !important; } + .font-weight-lighter { font-weight: lighter !important; } + .font-weight-normal { font-weight: 400 !important; } + .font-weight-bold { font-weight: 600 !important; } + .font-weight-bolder { font-weight: bolder !important; } + .font-italic { font-style: italic !important; } + .text-white { - color: #fff !important; + color: #ffffff !important; } + .text-primary { color: #f1641e !important; } -a.text-primary:focus, -a.text-primary:hover { + +a.text-primary:hover, +a.text-primary:focus { color: #b7440b !important; } + .text-secondary { color: #00c853 !important; } -a.text-secondary:focus, -a.text-secondary:hover { + +a.text-secondary:hover, +a.text-secondary:focus { color: #007c33 !important; } + .text-success { color: #6610f2 !important; } -a.text-success:focus, -a.text-success:hover { + +a.text-success:hover, +a.text-success:focus { color: #4709ac !important; } + .text-info { color: #007bff !important; } -a.text-info:focus, -a.text-info:hover { + +a.text-info:hover, +a.text-info:focus { color: #0056b3 !important; } + .text-warning { color: #ffc107 !important; } -a.text-warning:focus, -a.text-warning:hover { + +a.text-warning:hover, +a.text-warning:focus { color: #ba8b00 !important; } + .text-danger { color: #873208 !important; } -a.text-danger:focus, -a.text-danger:hover { + +a.text-danger:hover, +a.text-danger:focus { color: #3f1804 !important; } + .text-light { color: #f8f9fa !important; } -a.text-light:focus, -a.text-light:hover { + +a.text-light:hover, +a.text-light:focus { color: #cbd3da !important; } + .text-dark { color: #343a40 !important; } -a.text-dark:focus, -a.text-dark:hover { + +a.text-dark:hover, +a.text-dark:focus { color: #121416 !important; } + .text-body { color: #495057 !important; } + .text-muted { color: #6c757d !important; } + .text-black-50 { color: rgba(34, 34, 34, 0.5) !important; } + .text-white-50 { color: rgba(255, 255, 255, 0.5) !important; } + .text-hide { font: 0/0 a; color: transparent; @@ -8788,25 +9541,32 @@ a.text-dark:hover { background-color: transparent; border: 0; } + .text-decoration-none { text-decoration: none !important; } + .text-break { + word-break: break-word !important; word-wrap: break-word !important; } + .text-reset { color: inherit !important; } + .visible { visibility: visible !important; } + .invisible { visibility: hidden !important; } + @media print { *, - ::after, - ::before { + *::before, + *::after { text-shadow: none !important; box-shadow: none !important; } @@ -8819,21 +9579,18 @@ a.text-dark:hover { pre { white-space: pre-wrap !important; } - blockquote, - pre { + pre, + blockquote { border: 1px solid #adb5bd; page-break-inside: avoid; } - thead { - display: table-header-group; - } - img, - tr { + tr, + img { page-break-inside: avoid; } + p, h2, - h3, - p { + h3 { orphans: 3; widows: 3; } @@ -8854,26 +9611,26 @@ a.text-dark:hover { display: none; } .badge { - border: 1px solid #222; + border: 1px solid #222222; } .table { border-collapse: collapse !important; } .table td, .table th { - background-color: #fff !important; + background-color: #ffffff !important; } - .table-bordered td, - .table-bordered th { + .table-bordered th, + .table-bordered td { border: 1px solid #dee2e6 !important; } .table-dark { color: inherit; } - .table-dark tbody + tbody, - .table-dark td, .table-dark th, - .table-dark thead th { + .table-dark td, + .table-dark thead th, + .table-dark tbody + tbody { border-color: #495057; } .table .thead-dark th { @@ -8881,3 +9638,5 @@ a.text-dark:hover { border-color: #495057; } } + +/*# sourceMappingURL=litely.css.map */ From 14775734fa96c3882963791af10a04b57121d9c4 Mon Sep 17 00:00:00 2001 From: Florian Heft Date: Wed, 14 Jun 2023 10:09:21 +0200 Subject: [PATCH 04/26] Fixed NSFW image blur spilling outside the preview * Hide overflow of wrapping picture element to contain the blur of the inner img element. * This aligns the visible image area to the clickable area. * fixes #1245 --- src/assets/css/main.css | 3 +++ src/shared/components/common/pictrs-image.tsx | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/assets/css/main.css b/src/assets/css/main.css index 1c45341d..a150522c 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -434,3 +434,6 @@ br.big { em-emoji-picker { width: 100%; } +.overflow-hidden { + overflow: hidden; +} diff --git a/src/shared/components/common/pictrs-image.tsx b/src/shared/components/common/pictrs-image.tsx index 27d1cc5f..f975e4ac 100644 --- a/src/shared/components/common/pictrs-image.tsx +++ b/src/shared/components/common/pictrs-image.tsx @@ -22,7 +22,7 @@ export class PictrsImage extends Component { render() { return ( - + From 535e9ae337537f283b81a9a95e34d3125f5715e1 Mon Sep 17 00:00:00 2001 From: Florian Heft Date: Thu, 15 Jun 2023 09:00:29 +0200 Subject: [PATCH 05/26] Removed duplicated CSS rule * Bootstrap has us covered already --- src/assets/css/main.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/assets/css/main.css b/src/assets/css/main.css index a150522c..1c45341d 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -434,6 +434,3 @@ br.big { em-emoji-picker { width: 100%; } -.overflow-hidden { - overflow: hidden; -} From 2a16c85ed028c7e08f3b6612e0ffce908f96b7f2 Mon Sep 17 00:00:00 2001 From: abias Date: Thu, 15 Jun 2023 22:39:04 -0400 Subject: [PATCH 06/26] Cleanup --- src/shared/components/community/community.tsx | 49 +++++------------ src/shared/components/home/admin-settings.tsx | 13 ++--- src/shared/components/home/home.tsx | 54 +++++++++---------- src/shared/components/home/instances.tsx | 8 +-- src/shared/components/modlog.tsx | 47 +++++++--------- src/shared/components/person/inbox.tsx | 18 +++---- src/shared/components/person/reports.tsx | 27 +++++----- src/shared/components/post/create-post.tsx | 14 ++--- src/shared/components/search.tsx | 38 ++++++------- src/shared/utils.ts | 2 +- 10 files changed, 114 insertions(+), 156 deletions(-) diff --git a/src/shared/components/community/community.tsx b/src/shared/components/community/community.tsx index e8412e76..6b4eecff 100644 --- a/src/shared/components/community/community.tsx +++ b/src/shared/components/community/community.tsx @@ -102,9 +102,9 @@ import { PostListings } from "../post/post-listings"; import { CommunityLink } from "./community-link"; type CommunityData = RouteDataResponse<{ - communityResponse: GetCommunityResponse; - postsResponse?: GetPostsResponse; - commentsResponse?: GetCommentsResponse; + communityRes: GetCommunityResponse; + postsRes: GetPostsResponse; + commentsRes: GetCommentsResponse; }>; interface State { @@ -201,37 +201,15 @@ export class Community extends Component< // Only fetch the data if coming from another route if (FirstLoadService.isFirstLoad) { - const { - communityResponse: communityRes, - commentsResponse: commentsRes, - postsResponse: postsRes, - } = this.isoData.routeData; + const { communityRes, commentsRes, postsRes } = this.isoData.routeData; this.state = { ...this.state, isIsomorphic: true, + commentsRes, + communityRes, + postsRes, }; - - if (communityRes.state === "success") { - this.state = { - ...this.state, - communityRes, - }; - } - - if (postsRes?.state === "success") { - this.state = { - ...this.state, - postsRes, - }; - } - - if (commentsRes?.state === "success") { - this.state = { - ...this.state, - commentsRes, - }; - } } } @@ -279,9 +257,10 @@ export class Community extends Component< const page = getPageFromString(urlPage); - let postsResponse: RequestState | undefined = undefined; - let commentsResponse: RequestState | undefined = - undefined; + let postsResponse: RequestState = { state: "empty" }; + let commentsResponse: RequestState = { + state: "empty", + }; if (dataType === DataType.Post) { const getPostsForm: GetPosts = { @@ -310,9 +289,9 @@ export class Community extends Component< } return { - communityResponse: await client.getCommunity(communityForm), - commentsResponse, - postsResponse, + communityRes: await client.getCommunity(communityForm), + commentsRes: commentsResponse, + postsRes: postsResponse, }; } diff --git a/src/shared/components/home/admin-settings.tsx b/src/shared/components/home/admin-settings.tsx index 11be7257..91ba727f 100644 --- a/src/shared/components/home/admin-settings.tsx +++ b/src/shared/components/home/admin-settings.tsx @@ -34,8 +34,8 @@ import { SiteForm } from "./site-form"; import { TaglineForm } from "./tagline-form"; type AdminSettingsData = RouteDataResponse<{ - bannedPersonsResponse: BannedPersonsResponse; - federatedInstancesResponse: GetFederatedInstancesResponse; + bannedRes: BannedPersonsResponse; + instancesRes: GetFederatedInstancesResponse; }>; interface AdminSettingsState { @@ -72,10 +72,7 @@ export class AdminSettings extends Component { // Only fetch the data if coming from another route if (FirstLoadService.isFirstLoad) { - const { - bannedPersonsResponse: bannedRes, - federatedInstancesResponse: instancesRes, - } = this.isoData.routeData; + const { bannedRes, instancesRes } = this.isoData.routeData; this.state = { ...this.state, @@ -91,10 +88,10 @@ export class AdminSettings extends Component { client, }: InitialFetchRequest): Promise { return { - bannedPersonsResponse: await client.getBannedPersons({ + bannedRes: await client.getBannedPersons({ auth: auth as string, }), - federatedInstancesResponse: await client.getFederatedInstances({ + instancesRes: await client.getFederatedInstances({ auth: auth as string, }), }; diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index 3daaa4fd..4dc797ce 100644 --- a/src/shared/components/home/home.tsx +++ b/src/shared/components/home/home.tsx @@ -119,9 +119,9 @@ interface HomeProps { } type HomeData = RouteDataResponse<{ - postsResponse?: GetPostsResponse; - commentsResponse?: GetCommentsResponse; - trendingResponse: ListCommunitiesResponse; + postsRes: GetPostsResponse; + commentsRes: GetCommentsResponse; + trendingCommunitiesRes: ListCommunitiesResponse; }>; function getDataTypeFromQuery(type?: string): DataType { @@ -236,37 +236,30 @@ export class Home extends Component { // Only fetch the data if coming from another route if (FirstLoadService.isFirstLoad) { const { - trendingResponse: trendingCommunitiesRes, - commentsResponse: commentsRes, - postsResponse: postsRes, + trendingCommunitiesRes: trendingCommunitiesRes, + commentsRes: commentsRes, + postsRes: postsRes, } = this.isoData.routeData; this.state = { ...this.state, trendingCommunitiesRes, + commentsRes, + postsRes, tagline: getRandomFromList(this.state?.siteRes?.taglines ?? []) ?.content, isIsomorphic: true, }; - - if (commentsRes?.state === "success") { - this.state = { - ...this.state, - commentsRes, - }; - } - - if (postsRes?.state === "success") { - this.state = { - ...this.state, - postsRes, - }; - } } } async componentDidMount() { - if (!this.state.isIsomorphic || !this.isoData.routeData.length) { + if ( + !this.state.isIsomorphic || + !Object.values(this.isoData.routeData).some( + res => res.state === "success" || res.state === "failed" + ) + ) { await Promise.all([this.fetchTrendingCommunities(), this.fetchData()]); } @@ -290,9 +283,10 @@ export class Home extends Component { const page = urlPage ? Number(urlPage) : 1; - let postsResponse: RequestState | undefined = undefined; - let commentsResponse: RequestState | undefined = - undefined; + let postsRes: RequestState = { state: "empty" }; + let commentsRes: RequestState = { + state: "empty", + }; if (dataType === DataType.Post) { const getPostsForm: GetPosts = { @@ -304,7 +298,7 @@ export class Home extends Component { auth, }; - postsResponse = await client.getPosts(getPostsForm); + postsRes = await client.getPosts(getPostsForm); } else { const getCommentsForm: GetComments = { page, @@ -315,7 +309,7 @@ export class Home extends Component { auth, }; - commentsResponse = await client.getComments(getCommentsForm); + commentsRes = await client.getComments(getCommentsForm); } const trendingCommunitiesForm: ListCommunities = { @@ -326,9 +320,11 @@ export class Home extends Component { }; return { - trendingResponse: await client.listCommunities(trendingCommunitiesForm), - commentsResponse, - postsResponse, + trendingCommunitiesRes: await client.listCommunities( + trendingCommunitiesForm + ), + commentsRes, + postsRes, }; } diff --git a/src/shared/components/home/instances.tsx b/src/shared/components/home/instances.tsx index bec472cf..ec2ff635 100644 --- a/src/shared/components/home/instances.tsx +++ b/src/shared/components/home/instances.tsx @@ -59,11 +59,11 @@ export class Instances extends Component { }); } - static async fetchInitialData( - req: InitialFetchRequest - ): Promise { + static async fetchInitialData({ + client, + }: InitialFetchRequest): Promise { return { - federatedInstancesResponse: await req.client.getFederatedInstances({}), + federatedInstancesResponse: await client.getFederatedInstances({}), }; } diff --git a/src/shared/components/modlog.tsx b/src/shared/components/modlog.tsx index 48be10b6..b3f1fff1 100644 --- a/src/shared/components/modlog.tsx +++ b/src/shared/components/modlog.tsx @@ -77,10 +77,10 @@ type View = | AdminPurgeCommentView; type ModlogData = RouteDataResponse<{ - modlogResponse: GetModlogResponse; - communityResponse?: GetCommunityResponse; - modUserResponse?: GetPersonDetailsResponse; - userResponse?: GetPersonDetailsResponse; + res: GetModlogResponse; + communityRes: GetCommunityResponse; + modUserResponse: GetPersonDetailsResponse; + userResponse: GetPersonDetailsResponse; }>; interface ModlogType { @@ -662,33 +662,23 @@ export class Modlog extends Component< // Only fetch the data if coming from another route if (FirstLoadService.isFirstLoad) { - const { - modlogResponse: res, - communityResponse: communityRes, - modUserResponse, - userResponse, - } = this.isoData.routeData; + const { res, communityRes, modUserResponse, userResponse } = + this.isoData.routeData; this.state = { ...this.state, res, + communityRes, }; - if (communityRes?.state === "success") { - this.state = { - ...this.state, - communityRes, - }; - } - - if (modUserResponse?.state === "success") { + if (modUserResponse.state === "success") { this.state = { ...this.state, modSearchOptions: [personToChoice(modUserResponse.data.person_view)], }; } - if (userResponse?.state === "success") { + if (userResponse.state === "success") { this.state = { ...this.state, userSearchOptions: [personToChoice(userResponse.data.person_view)], @@ -1002,8 +992,9 @@ export class Modlog extends Component< auth, }; - let communityResponse: RequestState | undefined = - undefined; + let communityResponse: RequestState = { + state: "empty", + }; if (communityId) { const communityForm: GetCommunity = { @@ -1014,8 +1005,9 @@ export class Modlog extends Component< communityResponse = await client.getCommunity(communityForm); } - let modUserResponse: RequestState | undefined = - undefined; + let modUserResponse: RequestState = { + state: "empty", + }; if (modId) { const getPersonForm: GetPersonDetails = { @@ -1026,8 +1018,9 @@ export class Modlog extends Component< modUserResponse = await client.getPersonDetails(getPersonForm); } - let userResponse: RequestState | undefined = - undefined; + let userResponse: RequestState = { + state: "empty", + }; if (userId) { const getPersonForm: GetPersonDetails = { @@ -1039,8 +1032,8 @@ export class Modlog extends Component< } return { - modlogResponse: await client.getModlog(modlogForm), - communityResponse, + res: await client.getModlog(modlogForm), + communityRes: communityResponse, modUserResponse, userResponse, }; diff --git a/src/shared/components/person/inbox.tsx b/src/shared/components/person/inbox.tsx index b0550f22..c65d897b 100644 --- a/src/shared/components/person/inbox.tsx +++ b/src/shared/components/person/inbox.tsx @@ -92,9 +92,9 @@ enum ReplyEnum { } type InboxData = RouteDataResponse<{ - repliesResponse: GetRepliesResponse; - personMentionsResponse: GetPersonMentionsResponse; - privateMessagesResponse: PrivateMessagesResponse; + repliesRes: GetRepliesResponse; + mentionsRes: GetPersonMentionsResponse; + messagesRes: PrivateMessagesResponse; }>; type ReplyType = { @@ -167,11 +167,7 @@ export class Inbox extends Component { // Only fetch the data if coming from another route if (FirstLoadService.isFirstLoad) { - const { - personMentionsResponse: mentionsRes, - privateMessagesResponse: messagesRes, - repliesResponse: repliesRes, - } = this.isoData.routeData; + const { mentionsRes, messagesRes, repliesRes } = this.isoData.routeData; this.state = { ...this.state, @@ -702,7 +698,7 @@ export class Inbox extends Component { const sort: CommentSortType = "New"; return { - personMentionsResponse: auth + mentionsRes: auth ? await client.getPersonMentions({ sort, unread_only: true, @@ -711,7 +707,7 @@ export class Inbox extends Component { auth, }) : { state: "empty" }, - privateMessagesResponse: auth + messagesRes: auth ? await client.getPrivateMessages({ unread_only: true, page: 1, @@ -719,7 +715,7 @@ export class Inbox extends Component { auth, }) : { state: "empty" }, - repliesResponse: auth + repliesRes: auth ? await client.getReplies({ sort, unread_only: true, diff --git a/src/shared/components/person/reports.tsx b/src/shared/components/person/reports.tsx index fb8e8b83..99a03336 100644 --- a/src/shared/components/person/reports.tsx +++ b/src/shared/components/person/reports.tsx @@ -58,9 +58,9 @@ enum MessageEnum { } type ReportsData = RouteDataResponse<{ - commentReportsResponse: ListCommentReportsResponse; - postReportsResponse: ListPostReportsResponse; - privateMessageReportsResponse?: ListPrivateMessageReportsResponse; + commentReportsRes: ListCommentReportsResponse; + postReportsRes: ListPostReportsResponse; + messageReportsRes: ListPrivateMessageReportsResponse; }>; type ItemType = { @@ -106,11 +106,8 @@ export class Reports extends Component { // Only fetch the data if coming from another route if (FirstLoadService.isFirstLoad) { - const { - commentReportsResponse: commentReportsRes, - postReportsResponse: postReportsRes, - privateMessageReportsResponse: messageReportsRes, - } = this.isoData.routeData; + const { commentReportsRes, postReportsRes, messageReportsRes } = + this.isoData.routeData; this.state = { ...this.state, @@ -122,7 +119,7 @@ export class Reports extends Component { if (amAdmin()) { this.state = { ...this.state, - messageReportsRes: messageReportsRes ?? { state: "empty" }, + messageReportsRes: messageReportsRes, }; } } @@ -515,10 +512,9 @@ export class Reports extends Component { }; const data: ReportsData = { - commentReportsResponse: await client.listCommentReports( - commentReportsForm - ), - postReportsResponse: await client.listPostReports(postReportsForm), + commentReportsRes: await client.listCommentReports(commentReportsForm), + postReportsRes: await client.listPostReports(postReportsForm), + messageReportsRes: { state: "empty" }, }; if (amAdmin()) { @@ -529,8 +525,9 @@ export class Reports extends Component { auth: auth as string, }; - data.privateMessageReportsResponse = - await client.listPrivateMessageReports(privateMessageReportsForm); + data.messageReportsRes = await client.listPrivateMessageReports( + privateMessageReportsForm + ); } return data; diff --git a/src/shared/components/post/create-post.tsx b/src/shared/components/post/create-post.tsx index bb39cdad..a0e439bb 100644 --- a/src/shared/components/post/create-post.tsx +++ b/src/shared/components/post/create-post.tsx @@ -81,6 +81,13 @@ export class CreatePost extends Component< const { communityResponse: communityRes, initialCommunitiesRes } = this.isoData.routeData; + this.state = { + ...this.state, + loading: false, + initialCommunitiesRes, + isIsomorphic: true, + }; + if (communityRes?.state === "success") { const communityChoice: Choice = { label: communityRes.data.community_view.community.title, @@ -92,13 +99,6 @@ export class CreatePost extends Component< selectedCommunityChoice: communityChoice, }; } - - this.state = { - ...this.state, - loading: false, - initialCommunitiesRes, - isIsomorphic: true, - }; } } diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx index 9f466730..054cab01 100644 --- a/src/shared/components/search.tsx +++ b/src/shared/components/search.tsx @@ -72,11 +72,11 @@ interface SearchProps { } type SearchData = RouteDataResponse<{ - communityResponse?: GetCommunityResponse; - listCommunitiesResponse?: ListCommunitiesResponse; - creatorDetailsResponse?: GetPersonDetailsResponse; - searchResponse?: SearchResponse; - resolveObjectResponse?: ResolveObjectResponse; + communityResponse: GetCommunityResponse; + listCommunitiesResponse: ListCommunitiesResponse; + creatorDetailsResponse: GetPersonDetailsResponse; + searchResponse: SearchResponse; + resolveObjectResponse: ResolveObjectResponse; }>; type FilterType = "creator" | "community"; @@ -365,11 +365,12 @@ export class Search extends Component { query: { communityId, creatorId, q, type, sort, listingType, page }, }: InitialFetchRequest>): Promise { const community_id = getIdFromString(communityId); - let communityResponse: RequestState | undefined = - undefined; - let listCommunitiesResponse: - | RequestState - | undefined = undefined; + let communityResponse: RequestState = { + state: "empty", + }; + let listCommunitiesResponse: RequestState = { + state: "empty", + }; if (community_id) { const getCommunityForm: GetCommunity = { id: community_id, @@ -391,9 +392,9 @@ export class Search extends Component { } const creator_id = getIdFromString(creatorId); - let creatorDetailsResponse: - | RequestState - | undefined = undefined; + let creatorDetailsResponse: RequestState = { + state: "empty", + }; if (creator_id) { const getCreatorForm: GetPersonDetails = { person_id: creator_id, @@ -405,9 +406,10 @@ export class Search extends Component { const query = getSearchQueryFromQuery(q); - let searchResponse: RequestState | undefined = undefined; - let resolveObjectResponse: RequestState | undefined = - undefined; + let searchResponse: RequestState = { state: "empty" }; + let resolveObjectResponse: RequestState = { + state: "empty", + }; if (query) { const form: SearchForm = { @@ -429,9 +431,7 @@ export class Search extends Component { q: query, auth, }; - resolveObjectResponse = await client - .resolveObject(resolveObjectForm) - .catch(() => undefined); + resolveObjectResponse = await client.resolveObject(resolveObjectForm); } } } diff --git a/src/shared/utils.ts b/src/shared/utils.ts index cf59086b..e1a0c14e 100644 --- a/src/shared/utils.ts +++ b/src/shared/utils.ts @@ -1499,7 +1499,7 @@ export function newVote(voteType: VoteType, myVote?: number): number { } export type RouteDataResponse> = { - [K in keyof T]: RequestState>; + [K in keyof T]: RequestState; }; function sleep(millis: number): Promise { From 3afd636b9e343e8fa6f50324c9898698dc414640 Mon Sep 17 00:00:00 2001 From: Florian Heft Date: Fri, 16 Jun 2023 10:53:26 +0200 Subject: [PATCH 07/26] Fixed color scheme variables of litely-red * Adapted variables to the actual color that was used before --- .../css/themes/_variables.litely-red.scss | 6 +- src/assets/css/themes/litely-red.css | 434 +++++++++--------- 2 files changed, 220 insertions(+), 220 deletions(-) diff --git a/src/assets/css/themes/_variables.litely-red.scss b/src/assets/css/themes/_variables.litely-red.scss index 2c4c72e8..4cec067a 100644 --- a/src/assets/css/themes/_variables.litely-red.scss +++ b/src/assets/css/themes/_variables.litely-red.scss @@ -15,9 +15,9 @@ $white: #ffffff; $orange: #f1641e; $cyan: #02bdc2; $green: #00c853; -$primary: #d84848; -$secondary: $green; -$info: $cyan; +$primary: #f1641e; +$secondary: #c80000; +$info: $blue; $body-color: $gray-700; $link-color: $primary; $red: #d8486a; diff --git a/src/assets/css/themes/litely-red.css b/src/assets/css/themes/litely-red.css index 5592526f..9b51f26c 100644 --- a/src/assets/css/themes/litely-red.css +++ b/src/assets/css/themes/litely-red.css @@ -19,12 +19,12 @@ --white: #ffffff; --gray: #6c757d; --gray-dark: #343a40; - --primary: #d84848; - --secondary: #00c853; + --primary: #f1641e; + --secondary: #c80000; --success: #6610f2; --info: #007bff; --warning: #ffc107; - --danger: #891d1d; + --danger: #8c3409; --light: #f8f9fa; --dark: #343a40; --breakpoint-xs: 0; @@ -169,12 +169,12 @@ sup { } a { - color: #d84848; + color: #f1641e; text-decoration: none; background-color: transparent; } a:hover { - color: #ae2525; + color: #b7440b; text-decoration: underline; } @@ -1623,41 +1623,41 @@ pre code { .table-primary, .table-primary > th, .table-primary > td { - background-color: #f4cccc; + background-color: #fbd4c0; } .table-primary th, .table-primary td, .table-primary thead th, .table-primary tbody + tbody { - border-color: #eba0a0; + border-color: #f8ae8a; } .table-hover .table-primary:hover { - background-color: #efb7b7; + background-color: #f9c4a8; } .table-hover .table-primary:hover > td, .table-hover .table-primary:hover > th { - background-color: #efb7b7; + background-color: #f9c4a8; } .table-secondary, .table-secondary > th, .table-secondary > td { - background-color: #b8f0cf; + background-color: #f0b8b8; } .table-secondary th, .table-secondary td, .table-secondary thead th, .table-secondary tbody + tbody { - border-color: #7ae2a6; + border-color: #e27a7a; } .table-hover .table-secondary:hover { - background-color: #a3ecc1; + background-color: #eca3a3; } .table-hover .table-secondary:hover > td, .table-hover .table-secondary:hover > th { - background-color: #a3ecc1; + background-color: #eca3a3; } .table-success, @@ -1723,21 +1723,21 @@ pre code { .table-danger, .table-danger > th, .table-danger > td { - background-color: #dec0c0; + background-color: #dfc6ba; } .table-danger th, .table-danger td, .table-danger thead th, .table-danger tbody + tbody { - border-color: #c28989; + border-color: #c3957f; } .table-hover .table-danger:hover { - background-color: #d5afaf; + background-color: #d7b8a9; } .table-hover .table-danger:hover > td, .table-hover .table-danger:hover > th { - background-color: #d5afaf; + background-color: #d7b8a9; } .table-light, @@ -1906,9 +1906,9 @@ pre code { .form-control:focus { color: #495057; background-color: #ffffff; - border-color: #eeb1b1; + border-color: #f8b796; outline: 0; - box-shadow: 0 0 0 0.2rem rgba(216, 72, 72, 0.75); + box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.75); } .form-control::placeholder { color: #6c757d; @@ -2066,7 +2066,7 @@ textarea.form-control { width: 100%; margin-top: 0.25rem; font-size: 0.875em; - color: #02bdc2; + color: #007bff; } .valid-tooltip { @@ -2081,7 +2081,7 @@ textarea.form-control { font-size: 0.875rem; line-height: 1.5; color: #ffffff; - background-color: rgba(2, 189, 194, 0.9); + background-color: rgba(0, 123, 255, 0.9); border-radius: 0.5rem; } .form-row > .col > .valid-tooltip, @@ -2098,17 +2098,17 @@ textarea.form-control { .was-validated .form-control:valid, .form-control.is-valid { - border-color: #02bdc2; + border-color: #007bff; padding-right: calc(1.5em + 0.75rem) !important; - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2302bdc2' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23007bff' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .was-validated .form-control:valid:focus, .form-control.is-valid:focus { - border-color: #02bdc2; - box-shadow: 0 0 0 0.2rem rgba(2, 189, 194, 0.25); + border-color: #007bff; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .was-validated select.form-control:valid, @@ -2126,24 +2126,24 @@ textarea.form-control.is-valid { .was-validated .custom-select:valid, .custom-select.is-valid { - border-color: #02bdc2; + border-color: #007bff; padding-right: calc(0.75em + 2.3125rem) !important; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #ffffff - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2302bdc2' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") + url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23007bff' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat; } .was-validated .custom-select:valid:focus, .custom-select.is-valid:focus { - border-color: #02bdc2; - box-shadow: 0 0 0 0.2rem rgba(2, 189, 194, 0.25); + border-color: #007bff; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label { - color: #02bdc2; + color: #007bff; } .was-validated .form-check-input:valid ~ .valid-feedback, .was-validated .form-check-input:valid ~ .valid-tooltip, @@ -2154,41 +2154,41 @@ textarea.form-control.is-valid { .was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label { - color: #02bdc2; + color: #007bff; } .was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before { - border-color: #02bdc2; + border-color: #007bff; } .was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before { - border-color: #03eef4; - background-color: #03eef4; + border-color: #3395ff; + background-color: #3395ff; } .was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(2, 189, 194, 0.25); + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before { - border-color: #02bdc2; + border-color: #007bff; } .was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label { - border-color: #02bdc2; + border-color: #007bff; } .was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label { - border-color: #02bdc2; - box-shadow: 0 0 0 0.2rem rgba(2, 189, 194, 0.25); + border-color: #007bff; + box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .invalid-feedback { @@ -2196,7 +2196,7 @@ textarea.form-control.is-valid { width: 100%; margin-top: 0.25rem; font-size: 0.875em; - color: #891d1d; + color: #8c3409; } .invalid-tooltip { @@ -2211,7 +2211,7 @@ textarea.form-control.is-valid { font-size: 0.875rem; line-height: 1.5; color: #ffffff; - background-color: rgba(137, 29, 29, 0.9); + background-color: rgba(140, 52, 9, 0.9); border-radius: 0.5rem; } .form-row > .col > .invalid-tooltip, @@ -2228,17 +2228,17 @@ textarea.form-control.is-valid { .was-validated .form-control:invalid, .form-control.is-invalid { - border-color: #891d1d; + border-color: #8c3409; padding-right: calc(1.5em + 0.75rem) !important; - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23891d1d' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23891d1d' stroke='none'/%3e%3c/svg%3e"); + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238c3409' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%238c3409' stroke='none'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { - border-color: #891d1d; - box-shadow: 0 0 0 0.2rem rgba(137, 29, 29, 0.25); + border-color: #8c3409; + box-shadow: 0 0 0 0.2rem rgba(140, 52, 9, 0.25); } .was-validated select.form-control:invalid, @@ -2256,24 +2256,24 @@ textarea.form-control.is-invalid { .was-validated .custom-select:invalid, .custom-select.is-invalid { - border-color: #891d1d; + border-color: #8c3409; padding-right: calc(0.75em + 2.3125rem) !important; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat, #ffffff - url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23891d1d' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23891d1d' stroke='none'/%3e%3c/svg%3e") + url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238c3409' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%238c3409' stroke='none'/%3e%3c/svg%3e") center right 1.75rem / calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) no-repeat; } .was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus { - border-color: #891d1d; - box-shadow: 0 0 0 0.2rem rgba(137, 29, 29, 0.25); + border-color: #8c3409; + box-shadow: 0 0 0 0.2rem rgba(140, 52, 9, 0.25); } .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label { - color: #891d1d; + color: #8c3409; } .was-validated .form-check-input:invalid ~ .invalid-feedback, .was-validated .form-check-input:invalid ~ .invalid-tooltip, @@ -2284,41 +2284,41 @@ textarea.form-control.is-invalid { .was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label { - color: #891d1d; + color: #8c3409; } .was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before { - border-color: #891d1d; + border-color: #8c3409; } .was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before { - border-color: #b32626; - background-color: #b32626; + border-color: #bc460c; + background-color: #bc460c; } .was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(137, 29, 29, 0.25); + box-shadow: 0 0 0 0.2rem rgba(140, 52, 9, 0.25); } .was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before { - border-color: #891d1d; + border-color: #8c3409; } .was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label { - border-color: #891d1d; + border-color: #8c3409; } .was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label { - border-color: #891d1d; - box-shadow: 0 0 0 0.2rem rgba(137, 29, 29, 0.25); + border-color: #8c3409; + box-shadow: 0 0 0 0.2rem rgba(140, 52, 9, 0.25); } .form-inline { @@ -2406,7 +2406,7 @@ textarea.form-control.is-invalid { .btn:focus, .btn.focus { outline: 0; - box-shadow: 0 0 0 0.2rem rgba(216, 72, 72, 0.75); + box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.75); } .btn.disabled, .btn:disabled { @@ -2422,74 +2422,74 @@ fieldset:disabled a.btn { .btn-primary { color: #ffffff; - background-color: #d84848; - border-color: #d84848; + background-color: #f1641e; + border-color: #f1641e; } .btn-primary:hover { color: #ffffff; - background-color: #ce2c2c; - border-color: #c32a2a; + background-color: #db520e; + border-color: #cf4d0d; } .btn-primary:focus, .btn-primary.focus { color: #ffffff; - background-color: #ce2c2c; - border-color: #c32a2a; - box-shadow: 0 0 0 0.2rem rgba(222, 99, 99, 0.5); + background-color: #db520e; + border-color: #cf4d0d; + box-shadow: 0 0 0 0.2rem rgba(243, 123, 64, 0.5); } .btn-primary.disabled, .btn-primary:disabled { color: #ffffff; - background-color: #d84848; - border-color: #d84848; + background-color: #f1641e; + border-color: #f1641e; } .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { color: #ffffff; - background-color: #c32a2a; - border-color: #b92727; + background-color: #cf4d0d; + border-color: #c3490c; } .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(222, 99, 99, 0.5); + box-shadow: 0 0 0 0.2rem rgba(243, 123, 64, 0.5); } .btn-secondary { color: #ffffff; - background-color: #00c853; - border-color: #00c853; + background-color: #c80000; + border-color: #c80000; } .btn-secondary:hover { color: #ffffff; - background-color: #00a243; - border-color: #00953e; + background-color: #a20000; + border-color: #950000; } .btn-secondary:focus, .btn-secondary.focus { color: #ffffff; - background-color: #00a243; - border-color: #00953e; - box-shadow: 0 0 0 0.2rem rgba(38, 208, 109, 0.5); + background-color: #a20000; + border-color: #950000; + box-shadow: 0 0 0 0.2rem rgba(208, 38, 38, 0.5); } .btn-secondary.disabled, .btn-secondary:disabled { color: #ffffff; - background-color: #00c853; - border-color: #00c853; + background-color: #c80000; + border-color: #c80000; } .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { color: #ffffff; - background-color: #00953e; - border-color: #008839; + background-color: #950000; + border-color: #880000; } .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-secondary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(38, 208, 109, 0.5); + box-shadow: 0 0 0 0.2rem rgba(208, 38, 38, 0.5); } .btn-success { @@ -2602,38 +2602,38 @@ fieldset:disabled a.btn { .btn-danger { color: #ffffff; - background-color: #891d1d; - border-color: #891d1d; + background-color: #8c3409; + border-color: #8c3409; } .btn-danger:hover { color: #ffffff; - background-color: #691616; - border-color: #5e1414; + background-color: #682706; + border-color: #5c2206; } .btn-danger:focus, .btn-danger.focus { color: #ffffff; - background-color: #691616; - border-color: #5e1414; - box-shadow: 0 0 0 0.2rem rgba(155, 63, 63, 0.5); + background-color: #682706; + border-color: #5c2206; + box-shadow: 0 0 0 0.2rem rgba(157, 82, 46, 0.5); } .btn-danger.disabled, .btn-danger:disabled { color: #ffffff; - background-color: #891d1d; - border-color: #891d1d; + background-color: #8c3409; + border-color: #8c3409; } .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle { color: #ffffff; - background-color: #5e1414; - border-color: #541212; + background-color: #5c2206; + border-color: #501e05; } .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-danger.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(155, 63, 63, 0.5); + box-shadow: 0 0 0 0.2rem rgba(157, 82, 46, 0.5); } .btn-light { @@ -2709,65 +2709,65 @@ fieldset:disabled a.btn { } .btn-outline-primary { - color: #d84848; - border-color: #d84848; + color: #f1641e; + border-color: #f1641e; } .btn-outline-primary:hover { color: #ffffff; - background-color: #d84848; - border-color: #d84848; + background-color: #f1641e; + border-color: #f1641e; } .btn-outline-primary:focus, .btn-outline-primary.focus { - box-shadow: 0 0 0 0.2rem rgba(216, 72, 72, 0.5); + box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.5); } .btn-outline-primary.disabled, .btn-outline-primary:disabled { - color: #d84848; + color: #f1641e; background-color: transparent; } .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle { color: #ffffff; - background-color: #d84848; - border-color: #d84848; + background-color: #f1641e; + border-color: #f1641e; } .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(216, 72, 72, 0.5); + box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.5); } .btn-outline-secondary { - color: #00c853; - border-color: #00c853; + color: #c80000; + border-color: #c80000; } .btn-outline-secondary:hover { color: #ffffff; - background-color: #00c853; - border-color: #00c853; + background-color: #c80000; + border-color: #c80000; } .btn-outline-secondary:focus, .btn-outline-secondary.focus { - box-shadow: 0 0 0 0.2rem rgba(0, 200, 83, 0.5); + box-shadow: 0 0 0 0.2rem rgba(200, 0, 0, 0.5); } .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { - color: #00c853; + color: #c80000; background-color: transparent; } .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle { color: #ffffff; - background-color: #00c853; - border-color: #00c853; + background-color: #c80000; + border-color: #c80000; } .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(0, 200, 83, 0.5); + box-shadow: 0 0 0 0.2rem rgba(200, 0, 0, 0.5); } .btn-outline-success { @@ -2864,34 +2864,34 @@ fieldset:disabled a.btn { } .btn-outline-danger { - color: #891d1d; - border-color: #891d1d; + color: #8c3409; + border-color: #8c3409; } .btn-outline-danger:hover { color: #ffffff; - background-color: #891d1d; - border-color: #891d1d; + background-color: #8c3409; + border-color: #8c3409; } .btn-outline-danger:focus, .btn-outline-danger.focus { - box-shadow: 0 0 0 0.2rem rgba(137, 29, 29, 0.5); + box-shadow: 0 0 0 0.2rem rgba(140, 52, 9, 0.5); } .btn-outline-danger.disabled, .btn-outline-danger:disabled { - color: #891d1d; + color: #8c3409; background-color: transparent; } .btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active, .show > .btn-outline-danger.dropdown-toggle { color: #ffffff; - background-color: #891d1d; - border-color: #891d1d; + background-color: #8c3409; + border-color: #8c3409; } .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-danger.dropdown-toggle:focus { - box-shadow: 0 0 0 0.2rem rgba(137, 29, 29, 0.5); + box-shadow: 0 0 0 0.2rem rgba(140, 52, 9, 0.5); } .btn-outline-light { @@ -2958,11 +2958,11 @@ fieldset:disabled a.btn { .btn-link { font-weight: 400; - color: #d84848; + color: #f1641e; text-decoration: none; } .btn-link:hover { - color: #ae2525; + color: #b7440b; text-decoration: underline; } .btn-link:focus, @@ -3250,7 +3250,7 @@ input[type="button"].btn-block { .dropdown-item:active { color: #ffffff; text-decoration: none; - background-color: #d84848; + background-color: #f1641e; } .dropdown-item.disabled, .dropdown-item:disabled { @@ -3615,19 +3615,19 @@ input[type="button"].btn-block { } .custom-control-input:checked ~ .custom-control-label::before { color: #ffffff; - border-color: #d84848; - background-color: #d84848; + border-color: #f1641e; + background-color: #f1641e; } .custom-control-input:focus ~ .custom-control-label::before { - box-shadow: 0 0 0 0.2rem rgba(216, 72, 72, 0.75); + box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.75); } .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { - border-color: #eeb1b1; + border-color: #f8b796; } .custom-control-input:not(:disabled):active ~ .custom-control-label::before { color: #ffffff; - background-color: #f7dbdb; - border-color: #f7dbdb; + background-color: #fbd8c6; + border-color: #fbd8c6; } .custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label { @@ -3675,8 +3675,8 @@ input[type="button"].btn-block { .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { - border-color: #d84848; - background-color: #d84848; + border-color: #f1641e; + background-color: #f1641e; } .custom-checkbox .custom-control-input:indeterminate @@ -3686,12 +3686,12 @@ input[type="button"].btn-block { .custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before { - background-color: rgba(216, 72, 72, 0.5); + background-color: rgba(241, 100, 30, 0.5); } .custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before { - background-color: rgba(216, 72, 72, 0.5); + background-color: rgba(241, 100, 30, 0.5); } .custom-radio .custom-control-label::before { @@ -3703,7 +3703,7 @@ input[type="button"].btn-block { .custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before { - background-color: rgba(216, 72, 72, 0.5); + background-color: rgba(241, 100, 30, 0.5); } .custom-switch { @@ -3737,7 +3737,7 @@ input[type="button"].btn-block { .custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before { - background-color: rgba(216, 72, 72, 0.5); + background-color: rgba(241, 100, 30, 0.5); } .custom-select { @@ -3758,9 +3758,9 @@ input[type="button"].btn-block { appearance: none; } .custom-select:focus { - border-color: #eeb1b1; + border-color: #f8b796; outline: 0; - box-shadow: 0 0 0 0.2rem rgba(216, 72, 72, 0.75); + box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.75); } .custom-select:focus::-ms-value { color: #495057; @@ -3818,8 +3818,8 @@ input[type="button"].btn-block { opacity: 0; } .custom-file-input:focus ~ .custom-file-label { - border-color: #eeb1b1; - box-shadow: 0 0 0 0.2rem rgba(216, 72, 72, 0.75); + border-color: #f8b796; + box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.75); } .custom-file-input[disabled] ~ .custom-file-label, .custom-file-input:disabled ~ .custom-file-label { @@ -3876,13 +3876,13 @@ input[type="button"].btn-block { outline: 0; } .custom-range:focus::-webkit-slider-thumb { - box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(216, 72, 72, 0.75); + box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(241, 100, 30, 0.75); } .custom-range:focus::-moz-range-thumb { - box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(216, 72, 72, 0.75); + box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(241, 100, 30, 0.75); } .custom-range:focus::-ms-thumb { - box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(216, 72, 72, 0.75); + box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(241, 100, 30, 0.75); } .custom-range::-moz-focus-outer { border: 0; @@ -3891,7 +3891,7 @@ input[type="button"].btn-block { width: 1rem; height: 1rem; margin-top: -0.25rem; - background-color: #d84848; + background-color: #f1641e; border: 0; border-radius: 1rem; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, @@ -3904,7 +3904,7 @@ input[type="button"].btn-block { } } .custom-range::-webkit-slider-thumb:active { - background-color: #f7dbdb; + background-color: #fbd8c6; } .custom-range::-webkit-slider-runnable-track { width: 100%; @@ -3918,7 +3918,7 @@ input[type="button"].btn-block { .custom-range::-moz-range-thumb { width: 1rem; height: 1rem; - background-color: #d84848; + background-color: #f1641e; border: 0; border-radius: 1rem; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, @@ -3931,7 +3931,7 @@ input[type="button"].btn-block { } } .custom-range::-moz-range-thumb:active { - background-color: #f7dbdb; + background-color: #fbd8c6; } .custom-range::-moz-range-track { width: 100%; @@ -3948,7 +3948,7 @@ input[type="button"].btn-block { margin-top: 0; margin-right: 0.2rem; margin-left: 0.2rem; - background-color: #d84848; + background-color: #f1641e; border: 0; border-radius: 1rem; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, @@ -3961,7 +3961,7 @@ input[type="button"].btn-block { } } .custom-range::-ms-thumb:active { - background-color: #f7dbdb; + background-color: #fbd8c6; } .custom-range::-ms-track { width: 100%; @@ -4073,7 +4073,7 @@ input[type="button"].btn-block { .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #ffffff; - background-color: #d84848; + background-color: #f1641e; } .nav-fill > .nav-link, @@ -4749,13 +4749,13 @@ input[type="button"].btn-block { padding: 0.5rem 0.75rem; margin-left: -1px; line-height: 1.25; - color: #d84848; + color: #f1641e; background-color: #ffffff; border: 1px solid #dee2e6; } .page-link:hover { z-index: 2; - color: #ae2525; + color: #b7440b; text-decoration: none; background-color: #e9ecef; border-color: #dee2e6; @@ -4763,7 +4763,7 @@ input[type="button"].btn-block { .page-link:focus { z-index: 3; outline: 0; - box-shadow: 0 0 0 0.2rem rgba(216, 72, 72, 0.75); + box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.75); } .page-item:first-child .page-link { @@ -4778,8 +4778,8 @@ input[type="button"].btn-block { .page-item.active .page-link { z-index: 3; color: #ffffff; - background-color: #d84848; - border-color: #d84848; + background-color: #f1641e; + border-color: #f1641e; } .page-item.disabled .page-link { color: #6c757d; @@ -4857,32 +4857,32 @@ a.badge:focus { .badge-primary { color: #ffffff; - background-color: #d84848; + background-color: #f1641e; } a.badge-primary:hover, a.badge-primary:focus { color: #ffffff; - background-color: #c32a2a; + background-color: #cf4d0d; } a.badge-primary:focus, a.badge-primary.focus { outline: 0; - box-shadow: 0 0 0 0.2rem rgba(216, 72, 72, 0.5); + box-shadow: 0 0 0 0.2rem rgba(241, 100, 30, 0.5); } .badge-secondary { color: #ffffff; - background-color: #00c853; + background-color: #c80000; } a.badge-secondary:hover, a.badge-secondary:focus { color: #ffffff; - background-color: #00953e; + background-color: #950000; } a.badge-secondary:focus, a.badge-secondary.focus { outline: 0; - box-shadow: 0 0 0 0.2rem rgba(0, 200, 83, 0.5); + box-shadow: 0 0 0 0.2rem rgba(200, 0, 0, 0.5); } .badge-success { @@ -4932,17 +4932,17 @@ a.badge-warning.focus { .badge-danger { color: #ffffff; - background-color: #891d1d; + background-color: #8c3409; } a.badge-danger:hover, a.badge-danger:focus { color: #ffffff; - background-color: #5e1414; + background-color: #5c2206; } a.badge-danger:focus, a.badge-danger.focus { outline: 0; - box-shadow: 0 0 0 0.2rem rgba(137, 29, 29, 0.5); + box-shadow: 0 0 0 0.2rem rgba(140, 52, 9, 0.5); } .badge-light { @@ -5022,27 +5022,27 @@ a.badge-dark.focus { } .alert-primary { - color: #813636; - background-color: #f7dada; - border-color: #f4cccc; + color: #8e4420; + background-color: #fce0d2; + border-color: #fbd4c0; } .alert-primary hr { - border-top-color: #efb7b7; + border-top-color: #f9c4a8; } .alert-primary .alert-link { - color: #5d2727; + color: #643017; } .alert-secondary { - color: #10783b; - background-color: #ccf4dd; - border-color: #b8f0cf; + color: #781010; + background-color: #f4cccc; + border-color: #f0b8b8; } .alert-secondary hr { - border-top-color: #a3ecc1; + border-top-color: #eca3a3; } .alert-secondary .alert-link { - color: #0a4b25; + color: #4b0a0a; } .alert-success { @@ -5082,15 +5082,15 @@ a.badge-dark.focus { } .alert-danger { - color: #581f1f; - background-color: #e7d2d2; - border-color: #dec0c0; + color: #592b15; + background-color: #e8d6ce; + border-color: #dfc6ba; } .alert-danger hr { - border-top-color: #d5afaf; + border-top-color: #d7b8a9; } .alert-danger .alert-link { - color: #321212; + color: #30170b; } .alert-light { @@ -5143,7 +5143,7 @@ a.badge-dark.focus { color: #ffffff; text-align: center; white-space: nowrap; - background-color: #d84848; + background-color: #f1641e; transition: width 0.6s ease; } @media (prefers-reduced-motion: reduce) { @@ -5233,8 +5233,8 @@ a.badge-dark.focus { .list-group-item.active { z-index: 2; color: #ffffff; - background-color: #d84848; - border-color: #d84848; + background-color: #f1641e; + border-color: #f1641e; } .list-group-item + .list-group-item { border-top-width: 0; @@ -5374,33 +5374,33 @@ a.badge-dark.focus { } .list-group-item-primary { - color: #813636; - background-color: #f4cccc; + color: #8e4420; + background-color: #fbd4c0; } .list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus { - color: #813636; - background-color: #efb7b7; + color: #8e4420; + background-color: #f9c4a8; } .list-group-item-primary.list-group-item-action.active { color: #ffffff; - background-color: #813636; - border-color: #813636; + background-color: #8e4420; + border-color: #8e4420; } .list-group-item-secondary { - color: #10783b; - background-color: #b8f0cf; + color: #781010; + background-color: #f0b8b8; } .list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus { - color: #10783b; - background-color: #a3ecc1; + color: #781010; + background-color: #eca3a3; } .list-group-item-secondary.list-group-item-action.active { color: #ffffff; - background-color: #10783b; - border-color: #10783b; + background-color: #781010; + border-color: #781010; } .list-group-item-success { @@ -5449,18 +5449,18 @@ a.badge-dark.focus { } .list-group-item-danger { - color: #581f1f; - background-color: #dec0c0; + color: #592b15; + background-color: #dfc6ba; } .list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus { - color: #581f1f; - background-color: #d5afaf; + color: #592b15; + background-color: #d7b8a9; } .list-group-item-danger.list-group-item-action.active { color: #ffffff; - background-color: #581f1f; - border-color: #581f1f; + background-color: #592b15; + border-color: #592b15; } .list-group-item-light { @@ -6290,25 +6290,25 @@ a.close.disabled { } .bg-primary { - background-color: #d84848 !important; + background-color: #f1641e !important; } a.bg-primary:hover, a.bg-primary:focus, button.bg-primary:hover, button.bg-primary:focus { - background-color: #c32a2a !important; + background-color: #cf4d0d !important; } .bg-secondary { - background-color: #00c853 !important; + background-color: #c80000 !important; } a.bg-secondary:hover, a.bg-secondary:focus, button.bg-secondary:hover, button.bg-secondary:focus { - background-color: #00953e !important; + background-color: #950000 !important; } .bg-success { @@ -6345,14 +6345,14 @@ button.bg-warning:focus { } .bg-danger { - background-color: #891d1d !important; + background-color: #8c3409 !important; } a.bg-danger:hover, a.bg-danger:focus, button.bg-danger:hover, button.bg-danger:focus { - background-color: #5e1414 !important; + background-color: #5c2206 !important; } .bg-light { @@ -6426,11 +6426,11 @@ button.bg-dark:focus { } .border-primary { - border-color: #d84848 !important; + border-color: #f1641e !important; } .border-secondary { - border-color: #00c853 !important; + border-color: #c80000 !important; } .border-success { @@ -6446,7 +6446,7 @@ button.bg-dark:focus { } .border-danger { - border-color: #891d1d !important; + border-color: #8c3409 !important; } .border-light { @@ -9447,21 +9447,21 @@ button.bg-dark:focus { } .text-primary { - color: #d84848 !important; + color: #f1641e !important; } a.text-primary:hover, a.text-primary:focus { - color: #ae2525 !important; + color: #b7440b !important; } .text-secondary { - color: #00c853 !important; + color: #c80000 !important; } a.text-secondary:hover, a.text-secondary:focus { - color: #007c33 !important; + color: #7c0000 !important; } .text-success { @@ -9492,12 +9492,12 @@ a.text-warning:focus { } .text-danger { - color: #891d1d !important; + color: #8c3409 !important; } a.text-danger:hover, a.text-danger:focus { - color: #491010 !important; + color: #441904 !important; } .text-light { From 4da24386383a4150dc1634869a6ad11ece1f625f Mon Sep 17 00:00:00 2001 From: Sean Spade Date: Fri, 9 Jun 2023 23:28:56 -0400 Subject: [PATCH 08/26] chore: ensures validURL function does not throw exception --- src/shared/utils.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/shared/utils.ts b/src/shared/utils.ts index df7673a4..c9d3e919 100644 --- a/src/shared/utils.ts +++ b/src/shared/utils.ts @@ -327,7 +327,12 @@ export function isVideo(url: string) { } export function validURL(str: string) { - return !!new URL(str); + try { + new URL(str); + return true; + } catch (_) { + return false; + } } export function validInstanceTLD(str: string) { From d3e181222a4dfb4c2be80eda979bb95339a83f2a Mon Sep 17 00:00:00 2001 From: Sean Spade Date: Sat, 10 Jun 2023 15:39:41 -0400 Subject: [PATCH 09/26] feat: Adds Jump to main content functionality feat: Adds media query for prefers reduced motion chore: remove from index.tsx chore: remove tranisiton for skip link chore: remove omitted error variable update translations chore: update translations chore: Covert jump to content from html to Inferno JSX chore: add translation feat: add main as a parent to routes so jump to content always skips navigation on every page chore: Use bootstrap classes feat: Tidy Jump to content feature with some basic JS feat: Jump to main content --- lemmy-translations | 2 +- src/assets/css/main.css | 15 +++++++++++++++ src/shared/components/app/app.tsx | 31 +++++++++++++++++++++++-------- src/shared/utils.ts | 2 +- 4 files changed, 40 insertions(+), 10 deletions(-) diff --git a/lemmy-translations b/lemmy-translations index f45ddff2..c9a07885 160000 --- a/lemmy-translations +++ b/lemmy-translations @@ -1 +1 @@ -Subproject commit f45ddff206adb52ab0ac7555bf14978edac5d2f2 +Subproject commit c9a07885f35cf334d3cf167cb57587a8177fc3fb diff --git a/src/assets/css/main.css b/src/assets/css/main.css index 82f8433e..da5be8db 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -420,3 +420,18 @@ br.big { em-emoji-picker { width: 100%; } + +.skip-link { + top: -40px; + transition: top 0.3s ease; +} + +@media (prefers-reduced-motion: reduce) { + .skip-link { + transition: none; + } +} + +.skip-link:focus { + top: 0; +} diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx index 96857f31..d8d6f8bd 100644 --- a/src/shared/components/app/app.tsx +++ b/src/shared/components/app/app.tsx @@ -1,4 +1,4 @@ -import { Component } from "inferno"; +import { Component, createRef, linkEvent, RefObject } from "inferno"; import { Provider } from "inferno-i18next-dess"; import { Route, Switch } from "inferno-router"; import { i18n } from "../../i18next"; @@ -15,8 +15,15 @@ import { Theme } from "./theme"; export class App extends Component { private isoData: IsoDataOptionalSite = setIsoData(this.context); + private readonly mainContentRef: RefObject; constructor(props: any, context: any) { super(props, context); + this.mainContentRef = createRef(); + } + + handleJumpToContent(event) { + event.preventDefault(); + this.mainContentRef.current?.focus(); } render() { const siteRes = this.isoData.site_res; @@ -26,6 +33,12 @@ export class App extends Component { <>
+ + ${i18n.t("jump_to_content", "Jump to content")} + {siteView && ( )} @@ -39,14 +52,16 @@ export class App extends Component { exact component={routeProps => ( - {RouteComponent && - (isAuthPath(path ?? "") ? ( - +
+ {RouteComponent && + (isAuthPath(path ?? "") ? ( + + + + ) : ( - - ) : ( - - ))} + ))} +
)} /> diff --git a/src/shared/utils.ts b/src/shared/utils.ts index c9d3e919..4b8dd0ad 100644 --- a/src/shared/utils.ts +++ b/src/shared/utils.ts @@ -330,7 +330,7 @@ export function validURL(str: string) { try { new URL(str); return true; - } catch (_) { + } catch { return false; } } From ebba5bdd80d8c18e72d66d58dd895e103e25a28a Mon Sep 17 00:00:00 2001 From: Jay Sitter Date: Fri, 16 Jun 2023 17:47:42 -0400 Subject: [PATCH 10/26] feat: Move text formatting bar above textarea --- src/assets/css/main.css | 12 +-- .../components/common/language-select.tsx | 9 +- .../components/common/markdown-textarea.tsx | 87 +++++++++---------- 3 files changed, 49 insertions(+), 59 deletions(-) diff --git a/src/assets/css/main.css b/src/assets/css/main.css index 82f8433e..e316ab92 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -46,7 +46,7 @@ } .md-div p:last-child { - margin-bottom: 0px; + margin-bottom: 0; } .md-div img { @@ -371,7 +371,7 @@ br.big { } .tribute-container li { - padding: 5px 5px; + padding: 5px; cursor: pointer; } @@ -410,13 +410,7 @@ br.big { -webkit-line-clamp: 3; -webkit-box-orient: vertical; } -.lang-select-action { - width: 100px; -} -.lang-select-action:focus { - width: auto; -} -em-emoji-picker { +.emoji-picker { width: 100%; } diff --git a/src/shared/components/common/language-select.tsx b/src/shared/components/common/language-select.tsx index fac3216f..09e9c968 100644 --- a/src/shared/components/common/language-select.tsx +++ b/src/shared/components/common/language-select.tsx @@ -100,12 +100,9 @@ export class LanguageSelect extends Component { return (