WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-17 21:25:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: update css of folder component and remove unncessary css file

Browse Source
This commit is contained in:
prafull-opensignlabs
2024-06-16 15:12:20 +05:30
parent 9594e9438e
commit f8d6547c24
16 changed files with 137 additions and 491 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/OpenSign/src/components/dashboard/DashboardButton.js
-1
View File
@@ -1,5 +1,4 @@
import React from "react";
import "../../styles/loader.css";
import { useNavigate } from "react-router-dom";
import { openInNewTab } from "../../constant/Utils";
apps/OpenSign/src/components/dashboard/DashboardCard.js
-1
View File
@@ -2,7 +2,6 @@ import React, { useState, useEffect } from "react";
import axios from "axios";
import Parse from "parse";
import getReplacedHashQuery from "../../constant/getReplacedHashQuery";
import "../../styles/loader.css";
import { useNavigate } from "react-router-dom";
import Tooltip from "../../primitives/Tooltip";
apps/OpenSign/src/components/pdf/EditTemplate.js
+5 -5
View File
@@ -61,7 +61,7 @@ const EditTemplate = ({ template, onSuccess }) => {
<div className="max-h-[300px] md:max-h-[400px] overflow-y-scroll p-[10px]">
<div className="text-base-content">
<form onSubmit={handleSubmit}>
<div>
<div className="mb-[0.35rem]">
<label htmlFor="name" className="text-[13px]">
File
</label>
@@ -69,7 +69,7 @@ const EditTemplate = ({ template, onSuccess }) => {
{getFileName(template.URL)}
</div>
</div>
<div className="form-section">
<div className="mb-[0.35rem]">
<label htmlFor="name" className="text-[13px]">
Name
<span className="text-[13px] text-[red]"> *</span>
@@ -83,7 +83,7 @@ const EditTemplate = ({ template, onSuccess }) => {
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
/>
</div>
<div className="form-section">
<div className="mb-[0.35rem]">
<label htmlFor="Note" className="text-[13px]">
Note
</label>
@@ -96,7 +96,7 @@ const EditTemplate = ({ template, onSuccess }) => {
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
/>
</div>
<div className="form-section">
<div className="mb-[0.35rem]">
<label htmlFor="Description" className="text-[13px]">
Description
</label>
@@ -109,7 +109,7 @@ const EditTemplate = ({ template, onSuccess }) => {
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
/>
</div>
<div className="form-section">
<div className="mb-[0.35rem]">
<label className="text-[13px]">Send In Order</label>
<div className="flex items-center gap-[8px] ml-[8px] mb-[5px]">
<input
apps/OpenSign/src/components/shared/fields/CreateFolder.js
+4 -4
View File
@@ -124,7 +124,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
Name<span className="text-red-500 text-[13px]">*</span>
</label>
<input
className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
value={name}
onChange={(e) => setName(e.target.value)}
required
@@ -135,7 +135,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
<select
value={selectedParent}
onChange={handleOptions}
className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-full text-xs"
>
<option>select</option>
{folderList.length > 0 &&
@@ -150,9 +150,9 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
<button
onClick={handleCreateFolder}
disabled={isLoader}
className="flex items-center rounded p-2 bg-[#32a3ac] text-white mt-3"
className="op-btn op-btn-primary op-btn-sm mt-3"
>
<i className="fa-solid fa-plus mr-1"></i>
<i className="fa-solid fa-plus"></i>
<span>Create</span>
</button>
</div>
apps/OpenSign/src/components/shared/fields/SelectFolder.js
+14 -8
View File
@@ -178,7 +178,7 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
>
<div>
<i
className="far fa-folder-open text-[40px] text-[#33bbff]"
className="far fa-folder-open text-[40px] text-neutral"
style={{ fontSize: "40px" }}
aria-hidden="true"
></i>
@@ -250,12 +250,12 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
folderList.map((folder) => (
<div
key={folder.Name}
className="border-[1px] border-[#8a8a8a] px-2 py-2 mb-2 cursor-pointer "
className="border-b-[1px] border-[#8a8a8a] px-2 py-2 mb-2 cursor-pointer "
onClick={() => handleSelect(folder)}
>
<div className="flex items-center gap-2">
<i
className="fa fa-folder text-[#33bbff] text-[1.4rem]"
className="fa fa-folder text-neutral text-[1.4rem]"
aria-hidden="true"
></i>
<span className="font-semibold">{folder.Name}</span>
@@ -280,22 +280,28 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
<hr />
<div className="flex justify-between items-center py-[.75rem] px-[1.25rem]">
<div
className="text-[30px] cursor-pointer text-[#32a3ac]"
className="op-btn op-btn-seconday op-btn-sm"
title="Save Here"
onClick={handleCreate}
>
{isAdd ? (
<i className="fa-solid fa-arrow-left" aria-hidden="true"></i>
<>
<i className="fa-solid fa-arrow-left" aria-hidden="true"></i>
<span className="text-xs">Back</span>
</>
) : (
<i className="fa-solid fa-square-plus" aria-hidden="true"></i>
<>
<i className="fa-solid fa-square-plus" aria-hidden="true"></i>
<span className="">Add folder</span>
</>
)}
</div>
<div
className="text-[30px] cursor-pointer"
className="op-btn op-btn-primary op-btn-sm"
title="Save Here"
onClick={handleSubmit}
>
<i className="fas fa-save" aria-hidden="true"></i>
<i className="fas fa-save" aria-hidden="true"></i>Save here
</div>
</div>
</ModalUi>
apps/OpenSign/src/components/shared/fields/SelectSigners.js
-1
View File
@@ -1,6 +1,5 @@
import React, { useState } from "react";
import Parse from "parse";
import "../../../styles/AddUser.css";
import AsyncSelect from "react-select/async";
const SelectSigners = (props) => {
apps/OpenSign/src/constant/Utils.js
+1 -1
View File
@@ -386,7 +386,7 @@ export const getWidgetType = (item) => {
{item.type}
</span>
</div>
<div className="text-[20px] op-btn op-btn-primary w-[40px] h-full flex justify-center items-center">
<div className="text-[20px] op-btn op-btn-primary rounded-none w-[40px] h-full flex justify-center items-center">
<i className={item.icon}></i>
</div>
</div>
apps/OpenSign/src/pages/Dashboard.js
-1
View File
@@ -1,5 +1,4 @@
import React, { useState, useEffect } from "react";
import "../styles/loader.css";
import GetDashboard from "../components/dashboard/GetDashboard";
import { useNavigate, useParams } from "react-router-dom";
import Title from "../components/Title";
apps/OpenSign/src/pages/DebugPdf.js
+26 -104
View File
@@ -1,7 +1,5 @@
import React, { useEffect, useState } from "react";
import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
import "../styles/signature.css";
import "../styles/AddUser.css";
import Title from "../components/Title";
import RenderDebugPdf from "../components/RenderDebugPdf";
import { pdfjs } from "react-pdf";
@@ -217,14 +215,18 @@ const DebugPdf = () => {
};
return (
<div>
{copied && <Alert type="success">Copied</Alert>}
{copied && (
<Alert type="success">
<span className="ml-3">Copied</span>
</Alert>
)}
<Title title={"Debug Pdf"} />
{width < 800 ? (
<HandleError handleError={"Debug PDF only availble for PC"} />
) : (
<>
{!isModal && (
<div className="signatureContainer">
<div className="flex flex-row justify-between">
{/* this component used to render all pdf pages in left side */}
<RenderAllPdfPage
signPdfUrl={pdf}
@@ -253,106 +255,55 @@ const DebugPdf = () => {
/>
</div>
</div>
<div style={{ backgroundColor: "white", width: 220 }}>
<div
style={{
fontSize: 18,
fontWeight: 500,
padding: "10px 12px",
borderBottom: "1px solid grey"
}}
>
<div className="w-[220px] bg-base-100">
<div className="text-[18px] font-medium py-[10px] px-[12px] border-b-[1px] border-[gray]">
PDF details
</div>
<div style={{ fontSize: 14, padding: "5px 12px" }}>
<div className="text-[14px] py-[5px] px-[12px]">
Name: {pdfDetails?.name}
</div>
<div style={{ fontSize: 14, padding: "5px 12px" }}>
<div className="text-[14px] py-[5px] px-[12px]">
Pdf type: {pdfDetails?.pdftype}
</div>
<div style={{ fontSize: 14, padding: "5px 12px" }}>
<div className="text-[14px] py-[5px] px-[12px]">
Total Pages: {pdfDetails?.totalPages}
</div>
<div style={{ fontSize: 14, padding: "5px 12px" }}>
<div className="text-[14px] py-[5px] px-[12px]">
Current Page: {pdfDetails?.currentPage}
</div>
<div style={{ fontSize: 14, padding: "5px 12px" }}>
<div className="text-[14px] py-[5px] px-[12px]">
Base64 : {pdfDetails?.base64.slice(0, 10)}...
<span
style={{
borderRadius: 4,
padding: "3px 5px",
border: "1px solid gray",
fontSize: 12,
margin: 2,
cursor: "pointer"
}}
className="op-btn op-btn-outline op-btn-primary op-btn-xs rounded-md w-[25px] h-[25px] text-[12px] m-[2px] "
onClick={() => copytoclipboard(pdfDetails?.base64)}
>
<i className="fa-solid fa-copy"></i>
</span>
</div>
<div
style={{
fontSize: 18,
fontWeight: 500,
padding: "10px 12px",
borderBottom: "1px solid grey"
}}
>
<div className="text-[18px] font-medium py-[10px] px-[12px] border-b-[1px] border-[gray]">
Last click
</div>
<div style={{ fontSize: 14, padding: "5px 12px" }}>
<div className="text-[14px] py-[5px] px-[12px]">
x co-ordinate: {pdfDetails?.x}
</div>
<div style={{ fontSize: 14, padding: "5px 12px" }}>
<div className="text-[14px] py-[5px] px-[12px]">
y co-ordinate: {pdfDetails?.y}
</div>
<div
style={{
fontSize: 18,
fontWeight: 500,
padding: "10px 12px",
borderBottom: "1px solid grey",
borderTop: "1px solid grey"
}}
>
<div className="text-[18px] font-medium py-[10px] px-[12px] border-y-[1px] border-[gray]">
Annotation
</div>
<ul
style={{
listStyle: "none",
padding: 10,
height: 500,
overflowY: "auto",
scrollbarWidth: 5
}}
>
<ul className=" list-none p-[10px] h-[500px] overflow-y-auto">
{annotations.map((coord, index) => (
<li key={index}>
<span style={{ fontSize: 13, fontWeight: 500 }}>{`Box ${
<span className="text-[13px] font-medium">{`Box ${
index + 1
}:`}</span>
<code
style={{
fontSize: 12,
color: "black",
cursor: "pointer"
}}
>
<code className="text-[12px] text-base-content select-none">
{` ["page":${coord?.page}, "x": ${coord.x}, "y": ${coord.y}, "w": ${coord.width}, "h": ${coord.height}]`}
</code>
<div>
<span
style={{
borderRadius: 4,
padding: "3px 5px",
border: "1px solid gray",
fontSize: 12,
margin: 2,
cursor: "pointer"
}}
className="op-btn op-btn-outline op-btn-primary op-btn-xs rounded-md w-[23px] h-[20px] text-[12px] m-[2px] "
onClick={() =>
copytoclipboard(
`"page":${coord?.page}, "x": ${coord.x}, "y": ${coord.y}, "w": ${coord.width}, "h": ${coord.height}`
@@ -362,14 +313,7 @@ const DebugPdf = () => {
<i className="fa-solid fa-copy"></i>
</span>
<span
style={{
borderRadius: 4,
padding: "3px 5px",
border: "1px solid gray",
fontSize: 12,
margin: 2,
cursor: "pointer"
}}
className="op-btn op-btn-outline op-btn-error op-btn-xs rounded-md w-[23px] h-[20px] text-[12px] m-[2px] "
onClick={() => handleDelete(coord.key)}
>
<i className="fa-solid fa-trash-can"></i>
@@ -382,38 +326,16 @@ const DebugPdf = () => {
</div>
)}
<ModalUi title={"Select PDF"} isOpen={isModal}>
<form onSubmit={handleSubmit} style={{ margin: "10px" }}>
<form onSubmit={handleSubmit} className="m-[10px]">
<input
type="file"
onChange={(e) => handleFileChange(e.target.files)}
style={{
width: "100%",
border: "1px solid grey",
borderRadius: "4px",
padding: "5px",
fontSize: 12
}}
className="op-file-input op-file-input-bordered op-file-input-sm focus:outline-none hover:border-base-content w-full h-[40px] text-xs"
accept=".pdf"
required
/>
<div
style={{ borderTop: "1px solid grey", margin: "10px 0" }}
></div>
<button
style={{
background: "#32a3ac",
borderRadius: "2px",
boxShadow:
"0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18)",
border: "none",
textTransform: "uppercase",
fontSize: "13px",
fontWeight: "600",
padding: "0.375rem 0.75rem",
textAlign: "center",
color: "#ffffff",
outline: "none"
}}
className="op-btn op-btn-primary w-full mt-3 mb-1"
type="submit"
>
Submit
apps/OpenSign/src/pages/Login.js
-1
View File
@@ -1,6 +1,5 @@
import React, { useEffect, useState } from "react";
import Parse from "parse";
import "../styles/loader.css";
import { useDispatch } from "react-redux";
import axios from "axios";
import Title from "../components/Title";
apps/OpenSign/src/pages/Pgsignup.js
+85 -80
View File
@@ -1,5 +1,4 @@
import React, { useState, useEffect } from "react";
import "../styles/pgsignup.css";
import Parse from "parse";
import axios from "axios";
import { useDispatch } from "react-redux";
@@ -409,95 +408,101 @@ const PgSignUp = () => {
}
};
return (
<div className="bg-white">
<div className="w-full h-screen">
<Title title={"Pgsignup page"} />
{isLoader ? (
<div className="flex justify-center items-center h-[100vh]">
<Loader />
</div>
) : (
<form id="signup" className="pgsignup-content" onSubmit={handleSubmit}>
<div className="pgsignup-container">
<h1 className="text-2xl md:text-3xl font-bold">Choose Password</h1>
<hr className="hrt" />
<label htmlFor="password">
<b className="text-[13px]">Password</b>
</label>
<input
type="password"
placeholder="Enter Password"
name="password"
className="inputt"
value={formData.password}
onChange={handlePassowordChange}
required
/>
<label htmlFor="confirmPassword">
<b className="text-[13px]">Confirm Password</b>
</label>
<input
type="password"
placeholder="Confirm Password"
name="confirmPassword"
className="confirmInputt"
style={{
border: validationMessage
? validationMessage === "Passwords match!"
? "2px solid green"
: "2px solid red"
: "2px solid transparent",
outline: "none"
}}
value={formData.confirmPassword}
onChange={handleConFirmPassowordChange}
required
/>
<div
className="icon"
style={{
margin: validationMessage ? "0 2px 0 2px" : "0 2px 22px 2px",
color:
validationMessage === "Passwords match!" ? "green" : "red",
fontSize: 11
}}
>
{validationMessage}
</div>
{formData.password.length > 0 && (
<div className="mt-1 text-[11px]">
<p
className={`${
lengthValid ? "text-green-600" : "text-red-600"
}`}
>
{lengthValid ? "✓" : "✗"} Password should be 8 characters long
</p>
<p
className={`${
caseDigitValid ? "text-green-600" : "text-red-600"
}`}
>
{caseDigitValid ? "✓" : "✗"} Password should contain uppercase
letter, lowercase letter, digit
</p>
<p
className={`${
specialCharValid ? "text-green-600" : "text-red-600"
}`}
>
{specialCharValid ? "✓" : "✗"} Password should contain special
character
</p>
<div className="py-10 lg:p-16 flex justify-center">
<form
id="signup"
className="w-[90%] md:w-[55%] bg-base-100 text-base-content op-card shadow-md"
onSubmit={handleSubmit}
>
<div className="p-[16px]">
<h1 className="text-2xl md:text-3xl font-bold">
Choose Password
</h1>
<hr className="border-[1px] border-[#cecece] mb-[5px]" />
<label htmlFor="password">
<b className="text-[13px]">Password</b>
</label>
<input
type="password"
placeholder="Enter Password"
name="password"
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
value={formData.password}
onChange={handlePassowordChange}
required
/>
<label htmlFor="confirmPassword">
<b className="text-[13px]">Confirm Password</b>
</label>
<input
type="password"
placeholder="Confirm Password"
name="confirmPassword"
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
style={{
border: validationMessage
? validationMessage === "Passwords match!"
? "1px solid green"
: "1px solid red"
: ""
}}
value={formData.confirmPassword}
onChange={handleConFirmPassowordChange}
required
/>
<div
className={`${
validationMessage === "Passwords match!"
? "text-[green]"
: "text-[red]"
} ml-[13px] text-[11px]`}
>
{validationMessage}
</div>
)}
<div className="clearfix">
<button type="submit" className="signupbtn">
{formData.password.length > 0 && (
<div className="mt-1 text-[11px]">
<p
className={`${
lengthValid ? "text-green-600" : "text-red-600"
}`}
>
{lengthValid ? "✓" : "✗"} Password should be 8 characters
long
</p>
<p
className={`${
caseDigitValid ? "text-green-600" : "text-red-600"
}`}
>
{caseDigitValid ? "✓" : "✗"} Password should contain
uppercase letter, lowercase letter, digit
</p>
<p
className={`${
specialCharValid ? "text-green-600" : "text-red-600"
}`}
>
{specialCharValid ? "✓" : "✗"} Password should contain
special character
</p>
</div>
)}
<button
type="submit"
className="op-btn op-btn-primary w-full mt-[8px]"
>
Submit
</button>
</div>
</div>
</form>
</form>
</div>
)}
</div>
);
apps/OpenSign/src/pages/SignyourselfPdf.js
+1 -1
View File
@@ -1098,7 +1098,7 @@ function SignYourSelf() {
) : (
<div>
{isUiLoading && (
<div className="absolute h-[100vh] w-full z-[999] flex flex-col justify-center items-start bg-[#e6f2f2] bg-opacity-80">
<div className="absolute h-[100vh] w-full z-[999] flex flex-col justify-center items-center bg-[#e6f2f2] bg-opacity-80">
<Loader />
<span className="font-bold text-[13px]">
This might take some time
apps/OpenSign/src/primitives/AddContact.js
+1 -2
View File
@@ -1,7 +1,6 @@
import React, { useState, useEffect } from "react";
import Parse from "parse";
import axios from "axios";
import "../styles/AddUser.css";
import Loader from "./Loader";
const AddContact = (props) => {
const [name, setName] = useState("");
@@ -203,7 +202,7 @@ const AddContact = (props) => {
</div>
)}
<div className="w-full mx-auto p-[8px]">
<div className="text-[14px] font-[700]">Add User</div>
<div className="text-[14px] font-[700]">Add Contact</div>
{isUserExist && (
<div className="mb-[0.75rem] flex items-center mt-1">
<input
apps/OpenSign/src/styles/AddUser.css
-79
View File
@@ -1,82 +1,3 @@
.addusercontainer {
height: 100%;
padding: 10px 20px 10px 20px;
}
.loaderdiv {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.3);
}
.form-wrapper {
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 8px;
}
.form-section {
margin-bottom: 0.75rem;
}
.checkbox-label {
margin-left: 0.5rem;
color: #4b5563;
}
.addUserInput {
padding: 0.5rem 0.75rem;
width: 100%;
border-width: 1px;
border-color: #d1d5db;
border-radius: 0.375rem;
outline: none;
font-size: 0.75rem;
}
.buttoncontainer {
margin-top: 1rem;
display: flex;
justify-content: flex-start;
}
.submitbutton {
background: #1ab6ce;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
border: none;
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
padding: 0.375rem 0.75rem;
text-align: center;
color: #ffffff;
outline: none;
}
/* For classes: bg-[#188ae2] text-sm text-white px-4 py-2 rounded ml-2 shadow focus:outline-none */
.resetbutton {
background-color: #188ae2;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
border: none;
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
padding: 0.375rem 0.75rem;
text-align: center;
color: #ffffff;
outline: none;
margin-left: 8px;
}
.validationlist {
position: absolute;
left: 0;
apps/OpenSign/src/styles/loader.css
-66
View File
@@ -1,66 +0,0 @@
fieldset {
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
[class*="loader-"] {
display: inline-block;
width: 1em;
height: 1em;
color: inherit;
vertical-align: middle;
pointer-events: none;
}
.loader-37 {
border-right: 0.1em solid currentcolor;
border-radius: 100%;
-webkit-animation: loader-37 800ms linear infinite;
animation: loader-37 800ms linear infinite;
}
.loader-37:before,
.loader-37:after {
content: "";
width: 0.8em;
height: 0.8em;
display: block;
position: absolute;
top: calc(50% - 0.4em);
left: calc(50% - 0.4em);
border-left: 0.08em solid currentcolor;
border-radius: 100%;
animation: loader-37 400ms linear infinite reverse;
}
.loader-37:after {
width: 0.6em;
height: 0.6em;
top: calc(50% - 0.3em);
left: calc(50% - 0.3em);
border: 0;
border-right: 0.05em solid currentcolor;
-webkit-animation: none;
animation: none;
}
@-webkit-keyframes loader-37 {
from {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes loader-37 {
from {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
apps/OpenSign/src/styles/pgsignup.css
-136
View File
@@ -1,136 +0,0 @@
/* Full-width input fields */
.inputt {
width: 100%;
padding: 8px;
margin-bottom: 10px;
/* margin: 5px 0 14px 0; */
display: inline-block;
border: none;
background: #f1f1f1;
color: black;
font-size: 12px;
}
/* Add a background color when the inputs get focus */
.inputt:focus {
background-color: #ddd;
outline: none;
}
.confirmInputt {
width: 100%;
padding: 8px;
/* margin: 5px 0 14px 0; */
display: inline-block;
background: #f1f1f1;
color: black;
font-size: 12px;
}
.inputt::placeholder,
.confirmInputt::placeholder {
color: #474e5d;
opacity: 1;
/* Firefox */
}
.inputt:-ms-input-placeholder,
.confirmInputt:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #474e5d;
}
/* Set a style for all buttons */
.signupbtn {
background-color: #15b4e9;
color: white;
padding: 12px 12px;
margin: 8px 0;
border: none;
cursor: pointer;
opacity: 0.9;
float: left;
width: 50%;
}
.signupbtn:hover {
opacity: 1;
}
/* Add padding to pgsignup-container elements */
.pgsignup-container {
padding: 16px;
}
/* The pgsignup (background) */
.pgsignup {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: #474e5d;
padding-top: 50px;
}
/* pgsignup Content/Box */
.pgsignup-content {
background-color: #fefefe;
margin: 5% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 50%;
/* Could be more or less, depending on screen size */
}
/* Style the horizontal ruler */
.hrt {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.clearfix {
display: flex;
justify-content: center;
align-items: center;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 768px) {
/* pgsignup Content/Box */
.pgsignup-content {
background-color: #fefefe;
margin: 5% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 90%;
/* Could be more or less, depending on screen size */
}
.signupbtn {
width: 100%;
font-size: 16px;
}
/* Style the horizontal ruler */
.hrt {
border: 1px solid #f1f1f1;
margin-bottom: 16px;
}
}