pict-section-recordset 1.0.64 → 1.0.67

package/example_applications/bookstore/css/bookstore.css

@@ -0,0 +1,729 @@
+body {
+	color: #264653;
+	margin: 0;
+	padding: 0;
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+	background: #FAEDCD;
+}
+
+.pure-img-responsive {
+	max-width: 100%;
+	height: auto;
+}
+
+/*
+Add transition to containers so they can push in and out.
+*/
+#layout,
+#menu,
+.menu-link {
+	-webkit-transition: all 0.2s ease-out;
+	-moz-transition: all 0.2s ease-out;
+	-ms-transition: all 0.2s ease-out;
+	-o-transition: all 0.2s ease-out;
+	transition: all 0.2s ease-out;
+}
+
+/*
+This is the parent `<div>` that contains the menu and the content area.
+*/
+#layout {
+	position: relative;
+	left: 0;
+	padding-left: 0;
+}
+	#layout.active #menu {
+		left: 200px;
+		width: 200px;
+	}
+
+	#layout.active .menu-link {
+		left: 200px;
+	}
+
+/*
+The content `<div>` is where all your content goes.
+*/
+.content {
+	margin: 0 auto;
+	padding: 0 2em;
+	max-width: 900px;
+	margin-bottom: 50px;
+	line-height: 1.6em;
+}
+
+.header {
+	margin: 0;
+	color: #264653;
+	text-align: center;
+	padding: 2.5em 2em 0;
+	border-bottom: 1px solid #D4A373;
+}
+	.header h1 {
+		margin: 0.2em 0;
+		font-size: 2.5em;
+		font-weight: 300;
+	}
+	.header h2 {
+		font-weight: 300;
+		color: #D4A373;
+		padding: 0;
+		margin-top: 0;
+	}
+
+.content-subhead {
+	margin: 50px 0 20px 0;
+	font-weight: 300;
+	color: #E76F51;
+}
+
+/*
+The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
+appears on the left side of the page.
+*/
+
+#menu {
+	margin-left: -200px; /* "#menu" width */
+	width: 200px;
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	z-index: 1000; /* so the menu or its navicon stays above all content */
+	background: #264653;
+	overflow-y: auto;
+}
+	/*
+	All anchors inside the menu should be styled like this.
+	*/
+	#menu a {
+		color: #D4A373;
+		border: none;
+		padding: 0.6em 0 0.6em 0.6em;
+	}
+
+	/*
+	Remove all background/borders, since we are applying them to #menu.
+	*/
+	#menu .pure-menu,
+	#menu .pure-menu ul {
+		border: none;
+		background: transparent;
+	}
+
+	/*
+	Add that light border to separate items into groups.
+	*/
+	#menu .pure-menu ul,
+	#menu .pure-menu .menu-item-divided {
+		border-top: 1px solid #1A3340;
+	}
+		/*
+		Change color of the anchor links on hover/focus.
+		*/
+		#menu .pure-menu li a:hover,
+		#menu .pure-menu li a:focus {
+			background: #1A3340;
+			color: #FAEDCD;
+		}
+
+	/*
+	This styles the selected menu item `<li>`.
+	*/
+	#menu .pure-menu-selected,
+	#menu .pure-menu-heading {
+		background: #E76F51;
+	}
+		/*
+		This styles a link within a selected menu item `<li>`.
+		*/
+		#menu .pure-menu-selected a {
+			color: #fff;
+		}
+
+	/*
+	This styles the menu heading.
+	*/
+	#menu .pure-menu-heading {
+		font-size: 110%;
+		color: #fff;
+		margin: 0;
+	}
+
+/* -- Dynamic Button For Responsive Menu ------------------------------------- */
+
+/*
+`.menu-link` represents the responsive menu toggle that shows/hides on
+small screens.
+*/
+.menu-link {
+	position: fixed;
+	display: block; /* show this only on small screens */
+	top: 0;
+	left: 0; /* "#menu width" */
+	background: #264653;
+	background: rgba(38,70,83,0.85);
+	font-size: 10px; /* change this value to increase/decrease button size */
+	z-index: 10;
+	width: 2em;
+	height: auto;
+	padding: 2.1em 1.6em;
+}
+
+	.menu-link:hover,
+	.menu-link:focus {
+		background: #264653;
+	}
+
+	.menu-link span {
+		position: relative;
+		display: block;
+	}
+
+	.menu-link span,
+	.menu-link span:before,
+	.menu-link span:after {
+		background-color: #FAEDCD;
+		pointer-events: none;
+		width: 100%;
+		height: 0.2em;
+	}
+
+		.menu-link span:before,
+		.menu-link span:after {
+			position: absolute;
+			margin-top: -0.6em;
+			content: " ";
+		}
+
+		.menu-link span:after {
+			margin-top: 0.6em;
+		}
+
+
+/* -- Login Screen ----------------------------------------------------------- */
+
+#Bookstore-Login-Container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: 100vh;
+	padding: 2rem;
+}
+
+.bookstore-login-header {
+	text-align: center;
+	margin-bottom: 1.5rem;
+}
+
+.bookstore-login-header h1 {
+	font-size: 2rem;
+	color: #264653;
+	margin: 0 0 0.25rem 0;
+	font-weight: 300;
+}
+
+.bookstore-login-header p {
+	color: #D4A373;
+	font-size: 0.9rem;
+	margin: 0;
+}
+
+.bookstore-login-hint {
+	margin-top: 1rem;
+	text-align: center;
+	font-size: 0.8rem;
+	color: #999;
+}
+
+.bookstore-login-hint code {
+	background: #264653;
+	color: #FAEDCD;
+	padding: 0.1rem 0.35rem;
+	border-radius: 3px;
+	font-size: 0.75rem;
+}
+
+/* -- PRSP RecordSet Container Styling --------------------------------------- */
+
+#PRSP_Container {
+	background: #fff;
+	border: 1px solid #D4A373;
+	border-top: 4px solid #E76F51;
+	border-radius: 6px;
+	padding: 1.25rem;
+	box-shadow: 0 2px 8px rgba(38,70,83,0.08);
+}
+
+/* Form Elements inside PRSP */
+#PRSP_Container input[type="text"],
+#PRSP_Container input[type="number"],
+#PRSP_Container input[type="email"],
+#PRSP_Container input[type="date"],
+#PRSP_Container textarea,
+#PRSP_Container select {
+	border: 1px solid #D4C4A8;
+	background: #FFFCF7;
+	padding: 0.45rem 0.6rem;
+	border-radius: 4px;
+	font-size: 0.9rem;
+	color: #264653;
+	width: 100%;
+}
+#PRSP_Container input:focus,
+#PRSP_Container textarea:focus,
+#PRSP_Container select:focus {
+	outline: none;
+	border-color: #E76F51;
+	box-shadow: 0 0 0 2px rgba(231,111,81,0.15);
+}
+#PRSP_Container label {
+	color: #264653;
+	font-weight: 600;
+	font-size: 0.85rem;
+}
+#PRSP_Container h1, #PRSP_Container h2, #PRSP_Container h3, #PRSP_Container h4 {
+	color: #264653;
+}
+#PRSP_Container button,
+#PRSP_Container input[type="button"],
+#PRSP_Container input[type="submit"] {
+	background: #E76F51;
+	color: #fff;
+	border: none;
+	padding: 0.5rem 1.25rem;
+	border-radius: 4px;
+	font-size: 0.85rem;
+	font-weight: 600;
+	cursor: pointer;
+}
+#PRSP_Container button:hover,
+#PRSP_Container input[type="button"]:hover,
+#PRSP_Container input[type="submit"]:hover {
+	background: #C45A3E;
+}
+#PRSP_Container table {
+	width: 100%;
+	border-collapse: collapse;
+}
+#PRSP_Container th {
+	background: #264653;
+	color: #FAEDCD;
+	padding: 0.5rem 0.75rem;
+	text-align: left;
+	font-size: 0.8rem;
+}
+#PRSP_Container td {
+	padding: 0.5rem 0.75rem;
+	border-bottom: 1px solid #E8D9C0;
+	font-size: 0.85rem;
+}
+#PRSP_Container tr:nth-child(even) td {
+	background: #FFF9F0;
+}
+
+/* Title Section */
+#PRSP_Title_Container {
+	margin-bottom: 1rem;
+}
+#PRSP_Title_Container h1 {
+	margin: 0 0 0.15rem;
+	font-size: 1.4rem;
+}
+#PRSP_Title_Container h2 {
+	margin: 0;
+	font-size: 0.95rem;
+	font-weight: 400;
+	color: #D4A373;
+}
+
+/* Filter Section */
+#PRSP_Filters_Container {
+	background: #FFF9F0;
+	border: 1px solid #D4A373;
+	border-radius: 6px;
+	padding: 1rem 1.25rem;
+	margin-bottom: 1rem;
+}
+#PRSP_Filter_Form {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+}
+#PRSP_Filter_Form > fieldset {
+	border: none;
+	padding: 0;
+	margin: 0;
+}
+
+/* Search filter row */
+#PRSP_Filter_Form > fieldset:first-child {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+}
+#PRSP_Filter_Form > fieldset:first-child label {
+	flex-shrink: 0;
+	font-weight: 600;
+	font-size: 0.85rem;
+	color: #264653;
+}
+#PRSP_Filter_Form > fieldset:first-child input[type="text"] {
+	flex: 1;
+}
+
+/* Filter instances */
+#PRSP_Filter_Instances {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+#PRSP_Filter_Instances > div {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	background: #fff;
+	border: 1px solid #E8D9C0;
+	border-radius: 4px;
+	padding: 0.5rem 0.75rem;
+	flex-wrap: wrap;
+}
+
+/* Remove buttons in filter rows */
+#PRSP_Filter_Instances > div > button[type="button"] {
+	background: #B33030;
+	color: #fff;
+	border: none;
+	width: 1.6rem;
+	height: 1.6rem;
+	border-radius: 50%;
+	font-size: 0.85rem;
+	font-weight: 700;
+	cursor: pointer;
+	flex-shrink: 0;
+	padding: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	line-height: 1;
+}
+#PRSP_Filter_Instances > div > button[type="button"]:hover {
+	background: #8B2020;
+}
+
+/* Filter labels */
+#PRSP_Filter_Instances span {
+	font-size: 0.85rem;
+	font-weight: 600;
+	color: #264653;
+	white-space: nowrap;
+}
+
+/* Date inputs in filters */
+#PRSP_Filter_Instances input[type="datetime-local"] {
+	border: 1px solid #D4C4A8;
+	background: #FFFCF7;
+	padding: 0.35rem 0.5rem;
+	border-radius: 4px;
+	font-size: 0.85rem;
+	color: #264653;
+}
+
+/* Text inputs in filters */
+#PRSP_Filter_Instances input[type="text"] {
+	border: 1px solid #D4C4A8;
+	background: #FFFCF7;
+	padding: 0.35rem 0.5rem;
+	border-radius: 4px;
+	font-size: 0.85rem;
+	color: #264653;
+	flex: 1;
+	min-width: 120px;
+}
+
+/* Action button fieldsets */
+#PRSP_Filter_Form > fieldset:nth-child(n+3) {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding-top: 0.35rem;
+}
+#PRSP_Filter_Form > fieldset:nth-child(3) {
+	border-top: 1px solid #E8D9C0;
+	margin-top: 0.25rem;
+	padding-top: 0.6rem;
+}
+#PRSP_Filter_Button_Clear {
+	background: #264653 !important;
+	color: #FAEDCD !important;
+}
+#PRSP_Filter_Button_Clear:hover {
+	background: #1A3340 !important;
+}
+#PRSP_Filter_Button_Reset {
+	background: #D4A373 !important;
+	color: #fff !important;
+}
+#PRSP_Filter_Button_Reset:hover {
+	background: #B88A5C !important;
+}
+#PRSP_Filter_Button_Apply {
+	background: #E76F51 !important;
+	color: #fff !important;
+}
+#PRSP_Filter_Button_Apply:hover {
+	background: #C45A3E !important;
+}
+#PRSP_Filter_Button_Add {
+	background: #264653 !important;
+	color: #FAEDCD !important;
+	width: 2rem;
+	height: 2rem;
+	border-radius: 50% !important;
+	font-size: 1rem;
+	font-weight: 700;
+	display: flex !important;
+	align-items: center;
+	justify-content: center;
+	padding: 0 !important;
+}
+#PRSP_Filter_Button_Add:hover {
+	background: #1A3340 !important;
+}
+#PRSP_Filter_Button_Manage {
+	background: #264653 !important;
+	color: #FAEDCD !important;
+}
+#PRSP_Filter_Button_Manage:hover {
+	background: #1A3340 !important;
+}
+
+/* Filter dropdowns/popovers */
+#PRSP-SUBSET-Filters-Template-Add-Filter-Container {
+	background: #fff;
+	border: 1px solid #D4A373;
+	border-radius: 4px;
+	padding: 0.5rem;
+	margin-top: 0.25rem;
+	box-shadow: 0 2px 8px rgba(38,70,83,0.12);
+}
+#FilterPersistenceView-Container {
+	background: #fff;
+	border: 1px solid #D4A373;
+	border-radius: 4px;
+	padding: 0.5rem;
+	margin-top: 0.25rem;
+	box-shadow: 0 2px 8px rgba(38,70,83,0.12);
+}
+
+/* Pagination */
+#RSP_Upper_Pagination_Container,
+#RSP_Lower_Pagination_Container {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0.5rem 0;
+	margin-bottom: 0.25rem;
+	font-size: 0.85rem;
+	color: #264653;
+}
+#RSP_Upper_Pagination_Container div,
+#RSP_Lower_Pagination_Container div {
+	display: flex;
+	align-items: center;
+	gap: 0.35rem;
+}
+#RSP_Upper_Pagination_Container ul,
+#RSP_Lower_Pagination_Container ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	gap: 0.25rem;
+}
+#RSP_Upper_Pagination_Container ul li a,
+#RSP_Lower_Pagination_Container ul li a {
+	display: block;
+	padding: 0.35rem 0.75rem;
+	border: 1px solid #D4A373;
+	border-radius: 4px;
+	text-decoration: none;
+	color: #264653;
+	font-size: 0.8rem;
+	font-weight: 500;
+	transition: background 0.15s, color 0.15s;
+}
+#RSP_Upper_Pagination_Container ul li a:hover,
+#RSP_Lower_Pagination_Container ul li a:hover {
+	background: #E76F51;
+	color: #fff;
+	border-color: #E76F51;
+}
+
+/* Page Number Links */
+a[class^="page-offset"] {
+	display: inline-block;
+	padding: 0.3rem 0.6rem;
+	border: 1px solid #D4A373;
+	border-radius: 4px;
+	text-decoration: none;
+	color: #264653;
+	font-size: 0.8rem;
+	font-weight: 500;
+	transition: background 0.15s, color 0.15s;
+	background: #fff;
+}
+a[class^="page-offset"]:hover {
+	background: #E76F51;
+	color: #fff;
+	border-color: #E76F51;
+}
+
+/* List Table */
+#PRSP_List_Table {
+	width: 100%;
+	border-collapse: collapse;
+}
+#PRSP_List_Table th {
+	background: #264653 !important;
+	color: #FAEDCD !important;
+	padding: 0.6rem 0.75rem !important;
+	border-bottom: none !important;
+	text-align: left;
+	font-size: 0.8rem;
+	font-weight: 600;
+	white-space: nowrap;
+}
+#PRSP_List_Table td {
+	padding: 0.6rem 0.75rem !important;
+	border-bottom: 1px solid #E8D9C0 !important;
+	font-size: 0.85rem;
+	background: #fff;
+	vertical-align: middle;
+}
+#PRSP_List_Table tr:nth-child(even) td {
+	background: #FFF9F0;
+}
+#PRSP_List_Table tr:hover td {
+	background: #FFF0E0;
+}
+#PRSP_List_Table img {
+	max-width: 80px;
+	max-height: 100px;
+	border-radius: 3px;
+	border: 1px solid #E8D9C0;
+}
+#PRSP_List_Table a {
+	color: #E76F51;
+	font-weight: 600;
+	text-decoration: none;
+}
+#PRSP_List_Table a:hover {
+	color: #C45A3E;
+	text-decoration: underline;
+}
+
+/* List container */
+#PRSP_List_Container {
+	margin-bottom: 0.5rem;
+}
+#PRSP_List_Container > section {
+	border: 1px solid #D4A373;
+	border-top: 4px solid #E76F51;
+	border-radius: 6px;
+	overflow: hidden;
+	box-shadow: 0 2px 8px rgba(38,70,83,0.08);
+	margin-bottom: 0.5rem;
+}
+
+/* Record View Tabs */
+#PRSP-Read-Tabs-Container {
+	margin-top: 0.5rem;
+}
+#PRSP-Read-Tab-Nav {
+	display: flex;
+	gap: 0;
+	border-bottom: 2px solid #D4A373;
+	margin-bottom: 0;
+}
+.psrs-tab {
+	padding: 0.55rem 1.25rem;
+	font-size: 0.9rem;
+	font-weight: 500;
+	color: #264653;
+	cursor: pointer;
+	border: 1px solid transparent;
+	border-bottom: none;
+	border-radius: 4px 4px 0 0;
+	margin-bottom: -2px;
+	transition: background 0.15s, color 0.15s;
+}
+.psrs-tab:hover {
+	background: #FFF9F0;
+}
+.psrs-tab.is-active {
+	background: #264653;
+	color: #FAEDCD;
+	border-color: #264653;
+}
+.psrs-tab-body {
+	display: none;
+	padding: 1rem 0 0;
+}
+.psrs-tab-body.is-active {
+	display: block;
+}
+
+/* Record View Content */
+#PRSP_Container h2 {
+	font-size: 1.1rem;
+	margin: 0.75rem 0 0.5rem;
+	color: #264653;
+}
+#PRSP_Container h3 {
+	font-size: 0.95rem;
+	margin: 0.5rem 0 0.35rem;
+	color: #D4A373;
+}
+
+/* Utility */
+.is-hidden {
+	display: none;
+}
+
+/* -- Responsive Styles (Media Queries) ------------------------------------- */
+
+@media (min-width: 48em) {
+
+	.header,
+	.content {
+		padding-left: 2em;
+		padding-right: 2em;
+	}
+
+	#layout {
+		padding-left: 200px; /* left col width "#menu" */
+		left: 0;
+	}
+	#menu {
+		left: 200px;
+	}
+
+	.menu-link {
+		position: fixed;
+		left: 200px;
+		display: none;
+	}
+
+	#layout.active .menu-link {
+		left: 200px;
+	}
+}
+
+@media (max-width: 48em) {
+	#layout.active {
+		position: relative;
+		left: 200px;
+	}
+}