mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-07-16 11:23:10 +02:00
refactor: move modules under app/ directory and update file paths (#3938)
# Description of Changes - **What was changed:** - Renamed top-level directories: `stirling-pdf` → `app/core`, `common` → `app/common`, `proprietary` → `app/proprietary`. - Updated all path references in `.gitattributes`, GitHub workflows (`.github/workflows/*`), scripts (`.github/scripts/*`), `.gitignore`, Dockerfiles, license files, and template settings to reflect the new structure. - Added a new CI job `check-generateOpenApiDocs` to generate and upload OpenAPI documentation. - Removed redundant `@Autowired` annotations from `TempFileShutdownHook` and `UnlockPDFFormsController`. - Minor formatting and comment adjustments in YAML templates and resource files. - **Why the change was made:** - To introduce a clear `app/` directory hierarchy for core, common, and proprietary modules, improving organization and maintainability. - To ensure continuous integration and Docker builds continue to work seamlessly with the reorganized structure. - To automate OpenAPI documentation generation as part of the CI pipeline. --- ## Checklist ### General - [x] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [x] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [x] I have performed a self-review of my own code - [x] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing) for more details.
This commit is contained in:
Ludy
@@ -0,0 +1,50 @@
|
||||
multipart.enabled=true
|
||||
logging.level.org.springframework=WARN
|
||||
logging.level.org.hibernate=WARN
|
||||
logging.level.org.eclipse.jetty=WARN
|
||||
#logging.level.org.springframework.security.saml2=TRACE
|
||||
#logging.level.org.springframework.security=DEBUG
|
||||
#logging.level.org.opensaml=DEBUG
|
||||
#logging.level.stirling.software.SPDF.config.security: DEBUG
|
||||
logging.level.com.zaxxer.hikari=WARN
|
||||
spring.jpa.open-in-view=false
|
||||
server.forward-headers-strategy=NATIVE
|
||||
server.error.path=/error
|
||||
server.error.whitelabel.enabled=false
|
||||
server.error.include-stacktrace=always
|
||||
server.error.include-exception=true
|
||||
server.error.include-message=always
|
||||
#logging.level.org.springframework.web=DEBUG
|
||||
#logging.level.org.springframework=DEBUG
|
||||
#logging.level.org.springframework.security=DEBUG
|
||||
|
||||
spring.servlet.multipart.max-file-size=2000MB
|
||||
spring.servlet.multipart.max-request-size=2000MB
|
||||
server.servlet.session.tracking-modes=cookie
|
||||
server.servlet.context-path=${SYSTEM_ROOTURIPATH:/}
|
||||
spring.devtools.restart.enabled=true
|
||||
spring.devtools.livereload.enabled=true
|
||||
spring.devtools.restart.exclude=stirling.software.proprietary.security/**
|
||||
spring.thymeleaf.encoding=UTF-8
|
||||
spring.web.resources.mime-mappings.webmanifest=application/manifest+json
|
||||
spring.mvc.async.request-timeout=${SYSTEM_CONNECTIONTIMEOUTMILLISECONDS:1200000}
|
||||
|
||||
spring.datasource.url=jdbc:h2:file:./configs/stirling-pdf-DB-2.3.232;DB_CLOSE_DELAY=-1;DB_CLOSE_ON_EXIT=FALSE;MODE=PostgreSQL
|
||||
spring.datasource.driver-class-name=org.h2.Driver
|
||||
spring.datasource.username=sa
|
||||
spring.datasource.password=
|
||||
spring.h2.console.enabled=false
|
||||
spring.jpa.hibernate.ddl-auto=update
|
||||
server.servlet.session.timeout:30m
|
||||
# Change the default URL path for OpenAPI JSON
|
||||
springdoc.api-docs.path=/v1/api-docs
|
||||
# Set the URL of the OpenAPI JSON for the Swagger UI
|
||||
springdoc.swagger-ui.url=/v1/api-docs
|
||||
springdoc.swagger-ui.path=/index.html
|
||||
posthog.api.key=phc_fiR65u5j6qmXTYL56MNrLZSWqLaDW74OrZH0Insd2xq
|
||||
posthog.host=https://eu.i.posthog.com
|
||||
|
||||
spring.main.allow-bean-definition-overriding=true
|
||||
|
||||
# Set up a consistent temporary directory location
|
||||
java.io.tmpdir=${stirling.tempfiles.directory:${java.io.tmpdir}/stirling-pdf}
|
||||
@@ -0,0 +1,6 @@
|
||||
____ _____ ___ ____ _ ___ _ _ ____ ____ ____ _____
|
||||
/ ___|_ _|_ _| _ \| | |_ _| \ | |/ ___| | _ \| _ \| ___|
|
||||
\___ \ | | | || |_) | | | || \| | | _ _____| |_) | | | | |_
|
||||
___) || | | || _ <| |___ | || |\ | |_| |_____| __/| |_| | _|
|
||||
|____/ |_| |___|_| \_\_____|___|_| \_|\____| |_| |____/|_|
|
||||
Powered by Spring Boot ${spring-boot.version}
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
@@ -0,0 +1,48 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<configuration>
|
||||
<define name="LOG_PATH" class="stirling.software.SPDF.config.LogbackPropertyLoader" />
|
||||
|
||||
<!-- Console Appender -->
|
||||
<appender name="CONSOLE" class="ch.qos.logback.core.ConsoleAppender">
|
||||
<encoder>
|
||||
<pattern>%d{HH:mm:ss.SSS} [%thread] %-5level %logger{36} - %msg%n</pattern>
|
||||
</encoder>
|
||||
</appender>
|
||||
|
||||
<!-- Rolling File Appender for Auth Logs -->
|
||||
<appender name="AUTHLOG" class="ch.qos.logback.core.rolling.RollingFileAppender">
|
||||
<file>${LOG_PATH}/invalid-auths.log</file>
|
||||
<encoder>
|
||||
<pattern>%d %p %c{1} [%thread] %m%n</pattern>
|
||||
</encoder>
|
||||
<rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
|
||||
<fileNamePattern>${LOG_PATH}/auth-%d{yyyy-MM-dd}.log</fileNamePattern>
|
||||
<maxHistory>1</maxHistory>
|
||||
</rollingPolicy>
|
||||
</appender>
|
||||
|
||||
<!-- Rolling File Appender for General Logs -->
|
||||
<appender name="GENERAL" class="ch.qos.logback.core.rolling.RollingFileAppender">
|
||||
<file>${LOG_PATH}/info.log</file>
|
||||
<encoder>
|
||||
<pattern>%d %p %c{1} [%thread] %m%n</pattern>
|
||||
</encoder>
|
||||
<rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
|
||||
<fileNamePattern>${LOG_PATH}/info-%d{yyyy-MM-dd}.log</fileNamePattern>
|
||||
<maxHistory>1</maxHistory>
|
||||
</rollingPolicy>
|
||||
</appender>
|
||||
|
||||
<!-- Root Logger -->
|
||||
<root level="INFO">
|
||||
<appender-ref ref="CONSOLE"/>
|
||||
<appender-ref ref="GENERAL"/>
|
||||
</root>
|
||||
|
||||
<!-- Specific Logger -->
|
||||
<logger name="stirling.software.SPDF.config.security.CustomAuthenticationFailureHandler"
|
||||
level="ERROR" additivity="false">
|
||||
<appender-ref ref="CONSOLE"/>
|
||||
<appender-ref ref="AUTHLOG"/>
|
||||
</logger>
|
||||
</configuration>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,179 @@
|
||||
#############################################################################################################
|
||||
# Welcome to settings file from #
|
||||
# ____ _____ ___ ____ _ ___ _ _ ____ ____ ____ _____ #
|
||||
# / ___|_ _|_ _| _ \| | |_ _| \ | |/ ___| | _ \| _ \| ___| #
|
||||
# \___ \ | | | || |_) | | | || \| | | _ _____| |_) | | | | |_ #
|
||||
# ___) || | | || _ <| |___ | || |\ | |_| |_____| __/| |_| | _| #
|
||||
# |____/ |_| |___|_| \_\_____|___|_| \_|\____| |_| |____/|_| #
|
||||
# #
|
||||
# Do not comment out any entry, it will be removed on next startup #
|
||||
# If you want to override with environment parameter follow parameter naming SECURITY_INITIALLOGIN_USERNAME #
|
||||
#############################################################################################################
|
||||
|
||||
security:
|
||||
enableLogin: false # set to 'true' to enable login
|
||||
csrfDisabled: false # set to 'true' to disable CSRF protection (not recommended for production)
|
||||
loginAttemptCount: 5 # lock user account after 5 tries; when using e.g. Fail2Ban you can deactivate the function with -1
|
||||
loginResetTimeMinutes: 120 # lock account for 2 hours after x attempts
|
||||
loginMethod: all # Accepts values like 'all' and 'normal'(only Login with Username/Password), 'oauth2'(only Login with OAuth2) or 'saml2'(only Login with SAML2)
|
||||
initialLogin:
|
||||
username: '' # initial username for the first login
|
||||
password: '' # initial password for the first login
|
||||
oauth2:
|
||||
enabled: false # set to 'true' to enable login (Note: enableLogin must also be 'true' for this to work)
|
||||
client:
|
||||
keycloak:
|
||||
issuer: '' # URL of the Keycloak realm's OpenID Connect Discovery endpoint
|
||||
clientId: '' # client ID for Keycloak OAuth2
|
||||
clientSecret: '' # client secret for Keycloak OAuth2
|
||||
scopes: openid, profile, email # scopes for Keycloak OAuth2
|
||||
useAsUsername: preferred_username # field to use as the username for Keycloak OAuth2. Available options are: [email | name | given_name | family_name | preferred_name]
|
||||
google:
|
||||
clientId: '' # client ID for Google OAuth2
|
||||
clientSecret: '' # client secret for Google OAuth2
|
||||
scopes: email, profile # scopes for Google OAuth2
|
||||
useAsUsername: email # field to use as the username for Google OAuth2. Available options are: [email | name | given_name | family_name]
|
||||
github:
|
||||
clientId: '' # client ID for GitHub OAuth2
|
||||
clientSecret: '' # client secret for GitHub OAuth2
|
||||
scopes: read:user # scope for GitHub OAuth2
|
||||
useAsUsername: login # field to use as the username for GitHub OAuth2. Available options are: [email | login | name]
|
||||
issuer: '' # set to any Provider that supports OpenID Connect Discovery (/.well-known/openid-configuration) endpoint
|
||||
clientId: '' # client ID from your Provider
|
||||
clientSecret: '' # client secret from your Provider
|
||||
autoCreateUser: true # set to 'true' to allow auto-creation of non-existing users
|
||||
blockRegistration: false # set to 'true' to deny login with SSO without prior registration by an admin
|
||||
useAsUsername: email # default is 'email'; custom fields can be used as the username
|
||||
scopes: openid, profile, email # specify the scopes for which the application will request permissions
|
||||
provider: google # set this to your OAuth Provider's name, e.g., 'google' or 'keycloak'
|
||||
saml2:
|
||||
enabled: false # Only enabled for paid enterprise clients (enterpriseEdition.enabled must be true)
|
||||
provider: '' # The name of your Provider
|
||||
autoCreateUser: true # set to 'true' to allow auto-creation of non-existing users
|
||||
blockRegistration: false # set to 'true' to deny login with SSO without prior registration by an admin
|
||||
registrationId: stirling # The name of your Service Provider (SP) app name. Should match the name in the path for your SSO & SLO URLs
|
||||
idpMetadataUri: https://dev-XXXXXXXX.okta.com/app/externalKey/sso/saml/metadata # The uri for your Provider's metadata
|
||||
idpSingleLoginUrl: https://dev-XXXXXXXX.okta.com/app/dev-XXXXXXXX_stirlingpdf_1/externalKey/sso/saml # The URL for initiating SSO. Provided by your Provider
|
||||
idpSingleLogoutUrl: https://dev-XXXXXXXX.okta.com/app/dev-XXXXXXXX_stirlingpdf_1/externalKey/slo/saml # The URL for initiating SLO. Provided by your Provider
|
||||
idpIssuer: '' # The ID of your Provider
|
||||
idpCert: classpath:okta.cert # The certificate your Provider will use to authenticate your app's SAML authentication requests. Provided by your Provider
|
||||
privateKey: classpath:saml-private-key.key # Your private key. Generated from your keypair
|
||||
spCert: classpath:saml-public-cert.crt # Your signing certificate. Generated from your keypair
|
||||
|
||||
premium:
|
||||
key: 00000000-0000-0000-0000-000000000000
|
||||
enabled: false # Enable license key checks for pro/enterprise features
|
||||
proFeatures:
|
||||
database: true # Enable database features
|
||||
SSOAutoLogin: false
|
||||
CustomMetadata:
|
||||
autoUpdateMetadata: false
|
||||
author: username
|
||||
creator: Stirling-PDF
|
||||
producer: Stirling-PDF
|
||||
googleDrive:
|
||||
enabled: false
|
||||
clientId: ''
|
||||
apiKey: ''
|
||||
appId: ''
|
||||
enterpriseFeatures:
|
||||
audit:
|
||||
enabled: true # Enable audit logging
|
||||
level: 2 # Audit logging level: 0=OFF, 1=BASIC, 2=STANDARD, 3=VERBOSE
|
||||
retentionDays: 90 # Number of days to retain audit logs
|
||||
|
||||
mail:
|
||||
enabled: false # set to 'true' to enable sending emails
|
||||
host: smtp.example.com # SMTP server hostname
|
||||
port: 587 # SMTP server port
|
||||
username: '' # SMTP server username
|
||||
password: '' # SMTP server password
|
||||
from: '' # sender email address
|
||||
|
||||
legal:
|
||||
termsAndConditions: https://www.stirlingpdf.com/terms-and-conditions # URL to the terms and conditions of your application (e.g. https://example.com/terms). Empty string to disable or filename to load from local file in static folder
|
||||
privacyPolicy: https://www.stirlingpdf.com/privacy-policy # URL to the privacy policy of your application (e.g. https://example.com/privacy). Empty string to disable or filename to load from local file in static folder
|
||||
accessibilityStatement: '' # URL to the accessibility statement of your application (e.g. https://example.com/accessibility). Empty string to disable or filename to load from local file in static folder
|
||||
cookiePolicy: '' # URL to the cookie policy of your application (e.g. https://example.com/cookie). Empty string to disable or filename to load from local file in static folder
|
||||
impressum: '' # URL to the impressum of your application (e.g. https://example.com/impressum). Empty string to disable or filename to load from local file in static folder
|
||||
|
||||
system:
|
||||
defaultLocale: en-US # set the default language (e.g. 'de-DE', 'fr-FR', etc)
|
||||
googlevisibility: false # 'true' to allow Google visibility (via robots.txt), 'false' to disallow
|
||||
enableAlphaFunctionality: false # set to enable functionality which might need more testing before it fully goes live (this feature might make no changes)
|
||||
showUpdate: false # see when a new update is available
|
||||
showUpdateOnlyAdmin: false # only admins can see when a new update is available, depending on showUpdate it must be set to 'true'
|
||||
customHTMLFiles: false # enable to have files placed in /customFiles/templates override the existing template HTML files
|
||||
tessdataDir: /usr/share/tessdata # path to the directory containing the Tessdata files. This setting is relevant for Windows systems. For Windows users, this path should be adjusted to point to the appropriate directory where the Tessdata files are stored.
|
||||
enableAnalytics: null # set to 'true' to enable analytics, set to 'false' to disable analytics; for enterprise users, this is set to true
|
||||
enableUrlToPDF: false # Set to 'true' to enable URL to PDF, INTERNAL ONLY, known security issues, should not be used externally
|
||||
disableSanitize: false # set to true to disable Sanitize HTML; (can lead to injections in HTML)
|
||||
datasource:
|
||||
enableCustomDatabase: false # Enterprise users ONLY, set this property to 'true' if you would like to use your own custom database configuration
|
||||
customDatabaseUrl: '' # eg jdbc:postgresql://localhost:5432/postgres, set the url for your own custom database connection. If provided, the type, hostName, port and name are not necessary and will not be used
|
||||
username: postgres # set the database username
|
||||
password: postgres # set the database password
|
||||
type: postgresql # the type of the database to set (e.g. 'h2', 'postgresql')
|
||||
hostName: localhost # the host name to use for the database url. Set to 'localhost' when running the app locally. Set to match the name of the container name of your database container when running the app on a server (Docker configuration)
|
||||
port: 5432 # set the port number of the database. Ensure this matches the port the database is listening to
|
||||
name: postgres # set the name of your database. Should match the name of the database you create
|
||||
customPaths:
|
||||
pipeline:
|
||||
watchedFoldersDir: '' # Defaults to /pipeline/watchedFolders
|
||||
finishedFoldersDir: '' # Defaults to /pipeline/finishedFolders
|
||||
operations:
|
||||
weasyprint: '' # Defaults to /opt/venv/bin/weasyprint
|
||||
unoconvert: '' # Defaults to /opt/venv/bin/unoconvert
|
||||
fileUploadLimit: '' # Defaults to "". No limit when string is empty. Set a number, between 0 and 999, followed by one of the following strings to set a limit. "KB", "MB", "GB".
|
||||
tempFileManagement:
|
||||
baseTmpDir: '' # Defaults to java.io.tmpdir/stirling-pdf
|
||||
libreofficeDir: '' # Defaults to tempFileManagement.baseTmpDir/libreoffice
|
||||
systemTempDir: '' # Only used if cleanupSystemTemp is true
|
||||
prefix: stirling-pdf- # Prefix for temp file names
|
||||
maxAgeHours: 24 # Maximum age in hours before temp files are cleaned up
|
||||
cleanupIntervalMinutes: 30 # How often to run cleanup (in minutes)
|
||||
startupCleanup: true # Clean up old temp files on startup
|
||||
cleanupSystemTemp: false # Whether to clean broader system temp directory
|
||||
|
||||
ui:
|
||||
appName: '' # application's visible name
|
||||
homeDescription: '' # short description or tagline shown on the homepage
|
||||
appNameNavbar: '' # name displayed on the navigation bar
|
||||
languages: [] # If empty, all languages are enabled. To display only German and Polish ["de_DE", "pl_PL"]. British English is always enabled.
|
||||
|
||||
endpoints:
|
||||
toRemove: [] # list endpoints to disable (e.g. ['img-to-pdf', 'remove-pages'])
|
||||
groupsToRemove: [] # list groups to disable (e.g. ['LibreOffice'])
|
||||
|
||||
metrics:
|
||||
enabled: true # 'true' to enable Info APIs (`/api/*`) endpoints, 'false' to disable
|
||||
|
||||
# Automatically Generated Settings (Do Not Edit Directly)
|
||||
AutomaticallyGenerated:
|
||||
key: example
|
||||
UUID: example
|
||||
appVersion: 0.35.0
|
||||
|
||||
processExecutor:
|
||||
sessionLimit: # Process executor instances limits
|
||||
libreOfficeSessionLimit: 1
|
||||
pdfToHtmlSessionLimit: 1
|
||||
qpdfSessionLimit: 4
|
||||
tesseractSessionLimit: 1
|
||||
pythonOpenCvSessionLimit: 8
|
||||
weasyPrintSessionLimit: 16
|
||||
installAppSessionLimit: 1
|
||||
calibreSessionLimit: 1
|
||||
ghostscriptSessionLimit: 8
|
||||
ocrMyPdfSessionLimit: 2
|
||||
timeoutMinutes: # Process executor timeout in minutes
|
||||
libreOfficetimeoutMinutes: 30
|
||||
pdfToHtmltimeoutMinutes: 20
|
||||
pythonOpenCvtimeoutMinutes: 30
|
||||
weasyPrinttimeoutMinutes: 30
|
||||
installApptimeoutMinutes: 60
|
||||
calibretimeoutMinutes: 30
|
||||
tesseractTimeoutMinutes: 30
|
||||
qpdfTimeoutMinutes: 30
|
||||
ghostscriptTimeoutMinutes: 30
|
||||
ocrMyPdfTimeoutMinutes: 30
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square150x150logo src="/mstile-150x150.png"/>
|
||||
<TileColor>#00aba9</TileColor>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
@@ -0,0 +1,4 @@
|
||||
.buttons-container {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
#box-drag-container {
|
||||
position: relative;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
#pdf-canvas {
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.384);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.draggable-buttons-box {
|
||||
position: relative;
|
||||
top: 0;
|
||||
padding: 10px;
|
||||
width: calc(100% + 4.4rem);
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
z-index: 5;
|
||||
margin-left: -2.2rem;
|
||||
}
|
||||
|
||||
.draggable-buttons-box>button {
|
||||
z-index: 4;
|
||||
background-color: rgba(13, 110, 253, 0.1);
|
||||
flex: 1 1 auto;
|
||||
min-width: 2.5rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
|
||||
|
||||
.draggable-canvas {
|
||||
border: 1px solid red;
|
||||
position: absolute;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.input-with-icon {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-with-icon .icon {
|
||||
position: absolute;
|
||||
left: 0.5rem;
|
||||
pointer-events: none;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.input-with-icon input {
|
||||
padding-left: 2.2rem;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,79 @@
|
||||
.cc--darkmode{
|
||||
--cc-bg: var(--md-sys-color-inverse-on-surface);
|
||||
--cc-primary-color: var(--md-sys-color-on-surface);
|
||||
--cc-secondary-color: var(--md-sys-color-on-surface);
|
||||
|
||||
--cc-btn-primary-bg: var(--md-sys-color-secondary);
|
||||
--cc-btn-primary-color: var(--cc-bg);
|
||||
--cc-btn-primary-border-color: var(--cc-btn-primary-bg);
|
||||
--cc-btn-primary-hover-bg: var(--md-sys-color-surface-3);
|
||||
--cc-btn-primary-hover-color: var(--md-sys-color-on-secondary-container);
|
||||
--cc-btn-primary-hover-border-color: var(--md-sys-color-surface-3);
|
||||
|
||||
--cc-btn-secondary-bg: var(--md-sys-color-surface-3);
|
||||
--cc-btn-secondary-color: var(--md-sys-color-on-secondary-container);
|
||||
--cc-btn-secondary-border-color: var(--md-sys-color-surface-3);
|
||||
--cc-btn-secondary-hover-bg:var(--md-sys-color-secondary);
|
||||
--cc-btn-secondary-hover-color: var(--cc-bg);
|
||||
--cc-btn-secondary-hover-border-color: var(--md-sys-color-secondary);
|
||||
|
||||
--cc-separator-border-color: var(--md-sys-color-outline);
|
||||
|
||||
--cc-toggle-on-bg: var(--cc-btn-primary-bg);
|
||||
--cc-toggle-off-bg: var(--md-sys-color-outline);
|
||||
--cc-toggle-on-knob-bg: var(--cc-btn-primary-color);
|
||||
--cc-toggle-off-knob-bg: var(--cc-btn-primary-color);
|
||||
|
||||
--cc-toggle-enabled-icon-color: var(--cc-btn-primary-color);
|
||||
--cc-toggle-disabled-icon-color: var(--cc-btn-primary-color);
|
||||
|
||||
--cc-toggle-readonly-bg: var(--md-sys-color-surface);
|
||||
--cc-toggle-readonly-knob-bg: var(--md-sys-color-outline);
|
||||
--cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg);
|
||||
|
||||
--cc-section-category-border: var(--md-sys-color-outline);
|
||||
|
||||
--cc-cookie-category-block-bg: var(--cc-btn-secondary-bg);
|
||||
--cc-cookie-category-block-border: var(--cc-btn-secondary-bg);
|
||||
--cc-cookie-category-block-hover-bg: var(--cc-btn-secondary-bg);
|
||||
--cc-cookie-category-block-hover-border: var(--cc-btn-secondary-bg);
|
||||
|
||||
--cc-cookie-category-expanded-block-bg: var(--cc-btn-secondary-bg);
|
||||
--cc-cookie-category-expanded-block-hover-bg: var(--cc-toggle-readonly-bg);
|
||||
|
||||
/* --cc-overlay-bg: rgba(0, 0, 0, 0.65);
|
||||
--cc-webkit-scrollbar-bg: var(--cc-section-category-border);
|
||||
--cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg);
|
||||
*/
|
||||
--cc-footer-bg: var(--cc-bg);
|
||||
--cc-footer-color: var(--cc-primary-color);
|
||||
--cc-footer-border-color: var(--cc-bg);
|
||||
}
|
||||
.cm__body{
|
||||
max-width: 90% !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
|
||||
}
|
||||
|
||||
.cm__desc{
|
||||
max-width: 70rem !important;
|
||||
}
|
||||
|
||||
.cm__btns{
|
||||
flex-direction: row-reverse !important;
|
||||
gap:10px !important;
|
||||
padding-top: 3.4rem !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1400px) {
|
||||
.cm__body{
|
||||
max-width: 90% !important;
|
||||
flex-direction: column !important;
|
||||
align-items: normal !important;
|
||||
}
|
||||
|
||||
.cm__btns{
|
||||
padding-top: 1rem !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
#drag-container {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 10000;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#drag-container:not(:empty) {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#drag-container .dragged-img {
|
||||
position: fixed;
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.58);
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
#drag-container .multidrag {
|
||||
position: fixed;
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
transform-origin: top left;
|
||||
margin-left: 1rem;
|
||||
background-color: rgba(0, 29, 41, 0.9);
|
||||
}
|
||||
|
||||
.drag-manager_dragging {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
|
||||
.drag-manager_draghover .insert-file-button-container {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.drag-manager_draghover .button-container {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .drag-manager_draghover img {
|
||||
left: 80% !important;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .drag-manager_draghover img {
|
||||
left: 25px;
|
||||
}
|
||||
|
||||
.drag-manager_dragging-container .hide-on-drag {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.drag-manager_endpoint {
|
||||
width: 150px;
|
||||
height: 250px;
|
||||
background-color: #ffffff10;
|
||||
transition: width 0.1s;
|
||||
animation: end-drop-expand 0.3s ease;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left:16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.drag-manager_endpoint svg {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
translate: -50% -50%;
|
||||
}
|
||||
|
||||
.drag-manager_endpoint.drag-manager_draghover {
|
||||
width: 180px !important;
|
||||
border: 2px solid darkgreen;
|
||||
}
|
||||
|
||||
@keyframes end-drop-expand {
|
||||
from {
|
||||
width: 0;
|
||||
}
|
||||
to {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
.moved-element img {
|
||||
border: 8px solid #198754;
|
||||
border-radius: 3px;
|
||||
transition: border 0.5s ease-out;
|
||||
}
|
||||
|
||||
.moved-element.remove img{
|
||||
border: 8px solid transparent;
|
||||
}
|
||||
@@ -0,0 +1,276 @@
|
||||
/* Main bookmark container styles */
|
||||
.bookmark-editor {
|
||||
margin-top: 20px;
|
||||
padding: 20px;
|
||||
border: 1px solid var(--border-color, #ced4da);
|
||||
border-radius: 0.25rem;
|
||||
background-color: var(--bg-container, var(--md-sys-color-surface, #edf0f5));
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bookmark-editor {
|
||||
--border-color: #495057;
|
||||
--bg-container: var(--md-sys-color-surface, #15202a);
|
||||
}
|
||||
|
||||
/* Bookmark item styles */
|
||||
.bookmark-item {
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid var(--border-item, #e9ecef);
|
||||
border-radius: 0.5rem;
|
||||
background-color: var(--bg-item, var(--md-sys-color-surface-container-lowest, #ffffff));
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bookmark-item {
|
||||
--border-item: var(--md-sys-color-surface-variant, #444b53);
|
||||
--bg-item: var(--md-sys-color-surface-container-low, #24282e);
|
||||
}
|
||||
|
||||
/* Bookmark header (collapsible part) */
|
||||
.bookmark-header {
|
||||
padding: 12px 15px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
background-color: var(--bg-header, var(--md-sys-color-surface-container, #f1f3f5));
|
||||
border-bottom: 1px solid var(--border-header, var(--md-sys-color-outline-variant, #e9ecef));
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.bookmark-header:hover {
|
||||
background-color: var(--bg-header-hover, var(--md-sys-state-hover-opacity, #e9ecef));
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bookmark-header {
|
||||
--bg-header: var(--md-sys-color-surface-container-high, #3a424a);
|
||||
--bg-header-hover: var(--md-sys-color-surface-container-highest, #434a52);
|
||||
--border-header: var(--md-sys-color-outline-variant, #444b53);
|
||||
}
|
||||
|
||||
/* Bookmark content (inside accordion) */
|
||||
.bookmark-content {
|
||||
padding: 15px;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
/* Children container */
|
||||
.bookmark-children {
|
||||
margin-top: 10px;
|
||||
margin-left: 20px;
|
||||
padding-left: 15px;
|
||||
border-left: 2px solid var(--border-children, #6c757d);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bookmark-children {
|
||||
--border-children: #6c757d;
|
||||
}
|
||||
|
||||
/* Level indicators */
|
||||
.bookmark-level-indicator {
|
||||
font-size: 0.8em;
|
||||
color: var(--text-muted, #6c757d);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bookmark-level-indicator {
|
||||
--text-muted: #adb5bd;
|
||||
}
|
||||
|
||||
/* Button styles */
|
||||
.btn-bookmark-action {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
padding: 0;
|
||||
margin-right: 6px;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn-bookmark-action:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Visual distinction for child vs sibling buttons using theme colors */
|
||||
.btn-add-child {
|
||||
background-color: var(--btn-add-child-bg, var(--md-sys-color-surface-container-low, #e9ecef));
|
||||
color: var(--btn-add-child-color, var(--md-nav-section-color-other, #72bd54));
|
||||
border-color: var(--btn-add-child-border, var(--md-nav-section-color-other, #72bd54));
|
||||
}
|
||||
|
||||
.btn-add-child::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
top: 50%;
|
||||
width: 5px;
|
||||
height: 1px;
|
||||
background-color: var(--btn-add-child-border, var(--md-nav-section-color-other, #72bd54));
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .btn-add-child {
|
||||
--btn-add-child-bg: var(--md-sys-color-surface-container, #28323a);
|
||||
--btn-add-child-color: var(--favourite-add, #9ed18c);
|
||||
--btn-add-child-border: var(--favourite-add, #9ed18c);
|
||||
}
|
||||
|
||||
.btn-add-sibling {
|
||||
background-color: var(--btn-add-sibling-bg, var(--md-sys-color-surface-container-low, #e9ecef));
|
||||
color: var(--btn-add-sibling-color, var(--md-sys-color-primary, #0060aa));
|
||||
border-color: var(--btn-add-sibling-border, var(--md-sys-color-primary, #0060aa));
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .btn-add-sibling {
|
||||
--btn-add-sibling-bg: var(--md-sys-color-surface-container, #28323a);
|
||||
--btn-add-sibling-color: var(--md-sys-color-primary, #a2c9ff);
|
||||
--btn-add-sibling-border: var(--md-sys-color-primary, #a2c9ff);
|
||||
}
|
||||
|
||||
.bookmark-actions-header {
|
||||
display: flex;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.bookmark-actions-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px dashed var(--border-subtle-color, #dee2e6);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bookmark-actions-content {
|
||||
--border-subtle-color: #495057;
|
||||
}
|
||||
|
||||
/* Main actions section */
|
||||
.bookmark-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* Collapse/expand icons */
|
||||
.toggle-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.collapsed .toggle-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
/* Title and page display in header */
|
||||
.bookmark-title-preview {
|
||||
font-weight: 500;
|
||||
margin-right: 10px;
|
||||
color: var(--text-primary, var(--md-sys-color-on-surface, #212529));
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bookmark-title-preview {
|
||||
--text-primary: var(--md-sys-color-on-surface, #e9ecef);
|
||||
}
|
||||
|
||||
.bookmark-page-preview {
|
||||
font-size: 0.9em;
|
||||
color: var(--text-secondary, var(--md-sys-color-on-surface-variant, #6c757d));
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bookmark-page-preview {
|
||||
--text-secondary: var(--md-sys-color-on-surface-variant, #adb5bd);
|
||||
}
|
||||
|
||||
/* Input text colors */
|
||||
.bookmark-content input,
|
||||
.bookmark-content label {
|
||||
color: var(--input-text, var(--md-sys-color-on-surface, #212529));
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bookmark-content input,
|
||||
[data-bs-theme="dark"] .bookmark-content label {
|
||||
--input-text: var(--md-sys-color-on-surface, #e9ecef);
|
||||
background-color: var(--input-bg, var(--md-sys-color-surface-container-high, #3a424a));
|
||||
border-color: var(--input-border, var(--md-sys-color-outline, #495057));
|
||||
}
|
||||
|
||||
/* We've removed the drag handle since it's not functional */
|
||||
|
||||
/* Add button at the top level */
|
||||
.btn-add-bookmark {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.btn-add-bookmark::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 0;
|
||||
width: 2px;
|
||||
height: 50%;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
.btn-add-bookmark.top-level::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Relationship indicators */
|
||||
.bookmark-relationship-indicator {
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 14px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.relationship-line {
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 2px;
|
||||
background-color: var(--relationship-color, var(--md-nav-section-color-other, #72bd54));
|
||||
}
|
||||
|
||||
.relationship-arrow {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 50%;
|
||||
width: 8px;
|
||||
height: 2px;
|
||||
background-color: var(--relationship-color, var(--md-nav-section-color-other, #72bd54));
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .bookmark-relationship-indicator {
|
||||
--relationship-color: var(--favourite-add, #9ed18c);
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
.empty-bookmarks {
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
color: var(--text-muted, var(--md-sys-color-on-surface-variant, #6c757d));
|
||||
background-color: var(--bg-empty, var(--md-sys-color-surface-container-lowest, #ffffff));
|
||||
border-radius: 0.375rem;
|
||||
border: 1px dashed var(--border-empty, var(--md-sys-color-outline, #ced4da));
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .empty-bookmarks {
|
||||
--text-muted: var(--md-sys-color-on-surface-variant, #adb5bd);
|
||||
--bg-empty: var(--md-sys-color-surface-container-low, #24282e);
|
||||
--border-empty: var(--md-sys-color-outline, #495057);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
.features-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(21rem, 3fr));
|
||||
gap: 25px 30px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
border-radius: 0.25rem;
|
||||
padding: 1.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.feature-card .card-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#button-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#home-button,
|
||||
#github-button,
|
||||
#discord-button {
|
||||
display: inline-block;
|
||||
padding: 1rem 2rem;
|
||||
margin: 1rem;
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border-radius: 3rem;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
#errorContainer {
|
||||
margin: 1rem 0rem 2rem;
|
||||
border-radius: 3rem;
|
||||
}
|
||||
|
||||
#helpModalDialog {
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
#helpModal h1 {
|
||||
text-align: center;
|
||||
margin-top: 10%;
|
||||
}
|
||||
|
||||
#helpModal p {
|
||||
text-align: center;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
#helpModal .button:hover {
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
#helpModal .features-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(21rem, 3fr));
|
||||
gap: 25px 30px;
|
||||
}
|
||||
|
||||
#helpModal .feature-card {
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
border-radius: 0.25rem;
|
||||
padding: 1.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
#helpModal .feature-card .card-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#button-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#home-button,
|
||||
#github-button,
|
||||
#discord-button {
|
||||
display: inline-block;
|
||||
padding: 1rem 2rem;
|
||||
margin: 1rem;
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border-radius: 3rem;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
@@ -0,0 +1,353 @@
|
||||
.custom-file-chooser {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
min-height: 55px;
|
||||
border-radius: 1rem;
|
||||
--selected-files-display: none;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
position: relative;
|
||||
border-radius: 1rem;
|
||||
border: 1px dashed rgb(105, 116, 134);
|
||||
|
||||
column-gap: 7px;
|
||||
row-gap: 7px;
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
|
||||
--overlay-display: none;
|
||||
transition: background-color 0.5s linear;
|
||||
}
|
||||
|
||||
.input-container:hover {
|
||||
outline: none;
|
||||
border: none;
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
|
||||
-webkit-transition: box-shadow 1s ease, background-color 2s linear;
|
||||
-moz-transition: box-shadow 1s ease, background-color 2s linear;
|
||||
-o-transition: box-shadow 1s ease, background-color 2s linear;
|
||||
-ms-transition: box-shadow 1s ease, background-color 2s linear;
|
||||
transition: box-shadow 1s ease, background-color 2s linear;
|
||||
|
||||
box-shadow: 0 0 10px rgb(105, 116, 134);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input-container * {
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
.input-container::before {
|
||||
display: var(--overlay-display);
|
||||
position: absolute;
|
||||
|
||||
content: '';
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
background-color: var(--md-sys-color-surface);
|
||||
z-index: 1;
|
||||
|
||||
white-space: pre;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.input-container::after {
|
||||
display: var(--overlay-display);
|
||||
position: absolute;
|
||||
|
||||
content: attr(data-text);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 550;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
min-width: 150px;
|
||||
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
text-align: center;
|
||||
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.input-container input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.input-container div:nth-of-type(2) {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
|
||||
.input-container div:nth-of-type(1), .input-container div:nth-of-type(3) {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Responsive text sizing for drag & drop area */
|
||||
#fileInputText {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
max-width: 100%;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Progressive font size reduction for high zoom levels */
|
||||
@media only screen and (max-width: 1280px) {
|
||||
#fileInputText {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
#fileInputText {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
#fileInputText {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
#fileInputText {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
#fileInputText {
|
||||
font-size: 11px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 384px) {
|
||||
#fileInputText {
|
||||
font-size: 10px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Also scale the container at ultra-high zoom */
|
||||
.input-container {
|
||||
height: 130px;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.file-input-btn {
|
||||
display: inline-block;
|
||||
|
||||
border: 1px solid #ccc;
|
||||
padding: 6px 12px;
|
||||
cursor: pointer;
|
||||
|
||||
color: #212529;
|
||||
font-size: 1rem;
|
||||
border-radius: 3rem;
|
||||
|
||||
background-color: #DDE0E3;
|
||||
}
|
||||
|
||||
.small-file-container {
|
||||
padding-top: 1px;
|
||||
position: relative;
|
||||
row-gap: 1px;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
top:4px;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.file-icon * {
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.file-info > div:nth-child(1) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
|
||||
max-width: 60px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.file-info > div:nth-child(2) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: grey;
|
||||
|
||||
max-width: 60px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.remove-selected-file {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
position: absolute;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
|
||||
right: 0px;
|
||||
top: -17px;
|
||||
}
|
||||
|
||||
.remove-selected-file * {
|
||||
overflow: hidden;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
z-index: 3;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.remove-selected-file:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
||||
left: 1;
|
||||
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
|
||||
background-color: white;
|
||||
z-index: 2;
|
||||
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.remove-selected-file:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-file-label {
|
||||
padding-right: 90px;
|
||||
}
|
||||
|
||||
.selected-files {
|
||||
display: var(--selected-files-display);
|
||||
padding-left: 5px;
|
||||
padding-right: 3px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
|
||||
flex: 1;
|
||||
white-space: pre-wrap;
|
||||
|
||||
row-gap: 12px;
|
||||
column-gap: 5px;
|
||||
|
||||
border-radius: 1rem;
|
||||
border: 1px solid rgb(105, 116, 134, 0.5);
|
||||
}
|
||||
|
||||
.draggable-image-overlay{
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: none;
|
||||
z-index: 10;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
pointer-events: none;
|
||||
left:0;
|
||||
top:0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.small-file-container:hover .drag-icon {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.drag-icon {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
font-size: 14px;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#imagePreviewModal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.google-drive-button {
|
||||
width: 2.5rem;
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
transition-duration: 0.4s;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0 5px var(--md-sys-color-on-surface-variant);
|
||||
background-color: var(--md-sys-color-on-surface-container-high)
|
||||
}
|
||||
|
||||
.horizontal-divider {
|
||||
width: 85%;
|
||||
border-top: 1px dashed;
|
||||
padding: 0px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.google-drive-button img {
|
||||
width:100%
|
||||
}
|
||||
|
||||
.google-drive-button:hover {
|
||||
background-color: var(--md-sys-color-on-surface-variant)
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,61 @@
|
||||
#footer {
|
||||
display: flex;
|
||||
flex-direction: column; /* Stack children vertically */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-center {
|
||||
display: flex;
|
||||
align-items: center; /* Center children horizontally */
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
margin-top: 1rem;;
|
||||
}
|
||||
|
||||
.footer-powered-by {
|
||||
margin-top: auto; /* Pushes the text to the bottom */
|
||||
text-align: center; /* Centers the text inside the div */
|
||||
width: 100%; /* Full width to center the text properly */
|
||||
}
|
||||
.stirling-link {
|
||||
text-decoration: none; /* Remove the underline */
|
||||
color: inherit; /* Keep the text color the same as the surrounding text */
|
||||
cursor: pointer; /* Change the cursor to indicate it's clickable */
|
||||
font-weight: bold; /* Make it bold to subtly hint that it's clickable */
|
||||
transition: color 0.3s ease; /* Add a smooth transition effect for color change on hover */
|
||||
}
|
||||
|
||||
.stirling-link:hover {
|
||||
color: #007BFF; /* Change the color on hover to a noticeable link color */
|
||||
}
|
||||
.footer-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.footer-link-list {
|
||||
display: flex;
|
||||
flex-direction: row; /* Align links in a row */
|
||||
}
|
||||
|
||||
/* Responsive styles for smaller screens */
|
||||
@media (max-width: 650px) {
|
||||
.footer-link {
|
||||
font-size: 0.8rem; /* Adjust font size for smaller screens */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.footer-link {
|
||||
font-size: 1rem; /* Adjust font size for smaller screens */
|
||||
}
|
||||
.footer-link-list{
|
||||
flex-direction: column; /* Stack links vertically on smaller screens */
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
#game-container {
|
||||
position: relative;
|
||||
width: 100vh;
|
||||
height: 0;
|
||||
padding-bottom: 75%; /* 4:3 aspect ratio */
|
||||
background-color: transparent;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
border: 2px solid black; /* Add border */
|
||||
}
|
||||
|
||||
.pdf,
|
||||
.player,
|
||||
.projectile {
|
||||
position: absolute;
|
||||
}
|
||||
.pdf {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.player {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.projectile {
|
||||
background-color: black !important;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
}
|
||||
#score,
|
||||
#level,
|
||||
#lives,
|
||||
#high-score {
|
||||
color: black;
|
||||
font-family: sans-serif;
|
||||
position: absolute;
|
||||
font-size: calc(14px + 0.25vw); /* Reduced font size */
|
||||
}
|
||||
#score {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
#lives {
|
||||
top: 10px;
|
||||
left: calc(9vw); /* Adjusted position */
|
||||
}
|
||||
#high-score {
|
||||
top: 10px;
|
||||
left: calc(14vw); /* Adjusted position */
|
||||
}
|
||||
#level {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
#page-container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
#content-wrap {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#footer {
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
height: auto;
|
||||
white-space: nowrap;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
/* TODO enable later
|
||||
.navbar .container {
|
||||
|
||||
|
||||
max-width: 100%; //Allows the container to expand up to full width
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}*/
|
||||
|
||||
|
||||
html[dir="ltr"] * {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
html[dir="rtl"] * {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ignore-rtl {
|
||||
direction: ltr !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.align-top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.align-center-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.align-center-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.align-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.btn-group>label:first-of-type {
|
||||
border-top-left-radius: 0.25rem !important;
|
||||
border-bottom-left-radius: 0.25rem !important;
|
||||
}
|
||||
|
||||
html[dir="rtl"] input.form-check-input {
|
||||
position: relative;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
html[dir="rtl"] label.form-check-label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.margin-auto-parent {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.margin-center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#pdf-canvas {
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.384);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fixed-shadow-canvas {
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.384);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.shadow-canvas {
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.384);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:focus {
|
||||
transition: background-color 600000s 0s, color 600000s 0s;
|
||||
}
|
||||
|
||||
input[data-autocompleted] {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.btn-tooltip {
|
||||
position: absolute !important;
|
||||
display: none;
|
||||
padding: 7px;
|
||||
background-color: rgba(0, 29, 41, 0.9);
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
color: whitesmoke;
|
||||
animation: fadeup 0.15s linear;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
@keyframes fadeup {
|
||||
0% {
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,229 @@
|
||||
#searchBar {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 0.75rem 3.5rem;
|
||||
border: 1px solid var(--md-sys-color-outline-variant);
|
||||
border-radius: 3rem;
|
||||
outline-color: var(--md-sys-color-outline-variant);
|
||||
}
|
||||
|
||||
#filtersContainer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.filter-button {
|
||||
color: var(--md-sys-color-secondary);
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.filter-button:hover {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
margin: 0.75rem 1rem;
|
||||
border: 0.1rem solid transparent;
|
||||
}
|
||||
|
||||
.features-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.feature-group-legacy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.feature-group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
margin-bottom: 15px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.feature-group-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(15rem, 3fr));
|
||||
gap: 30px 30px;
|
||||
overflow: hidden;
|
||||
margin: -20px;
|
||||
padding: 20px;
|
||||
box-sizing:content-box;
|
||||
}
|
||||
|
||||
.feature-group-container.animated-group {
|
||||
transition: 0.5s all;
|
||||
}
|
||||
|
||||
.feature-group-legacy.collapsed>.feature-group-container {
|
||||
max-height: 0 !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.header-expand-button {
|
||||
transition: 0.5s all;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.header-expand-button.collapsed {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
border: 1px solid var(--md-sys-color-surface-5);
|
||||
border-radius: 1.75rem;
|
||||
padding: 1.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
background: var(--md-sys-color-surface-5);
|
||||
transition:
|
||||
transform 0.3s,
|
||||
border 0.3s;
|
||||
transform-origin: center center;
|
||||
outline: 0px solid transparent;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.feature-card a {
|
||||
text-decoration: none;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.feature-card .card-text {
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
cursor: pointer;
|
||||
transform: scale(1.08);
|
||||
box-shadow: var(--md-sys-elevation-2);
|
||||
}
|
||||
|
||||
.card-title.text-primary {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.home-card-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.favorite-icon {
|
||||
display: none !important;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
color: var(--md-sys-color-secondary);
|
||||
}
|
||||
|
||||
#tool-icon {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#tool-text {
|
||||
margin: 0.0rem 0 0 1.25rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Only show the favorite icons when the parent card is being hovered over */
|
||||
.feature-card:hover .favorite-icon {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.favorite-icon img {
|
||||
filter: brightness(0) invert(var(--md-theme-filter-color));
|
||||
}
|
||||
|
||||
.favorite-icon:hover .material-symbols-rounded {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.favorite-icon .material-symbols-rounded.fill{
|
||||
color: #f5c000;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
padding: 3rem 3rem;
|
||||
/* Reduce vertical padding */
|
||||
}
|
||||
|
||||
.lookatme {
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.lookatme::after {
|
||||
color: #e33100;
|
||||
text-shadow: 0 0 5px #e33100;
|
||||
/* in the html, the data-lookatme-text attribute must */
|
||||
/* contain the same text as the .lookatme element */
|
||||
content: attr(data-lookatme-text);
|
||||
padding: inherit;
|
||||
position: absolute;
|
||||
inset: 0 0 0 0;
|
||||
z-index: 1;
|
||||
/* 20 steps / 2 seconds = 10fps */
|
||||
-webkit-animation: 2s infinite Pulse steps(20);
|
||||
animation: 2s infinite Pulse steps(20);
|
||||
}
|
||||
|
||||
@keyframes Pulse {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.update-notice {
|
||||
animation: scale 1s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes scale {
|
||||
0% {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
#searchBar {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
margin-bottom: 2rem;
|
||||
padding: 0.75rem 3.5rem;
|
||||
border: 1px solid var(--md-sys-color-outline-variant);
|
||||
border-radius: 3rem;
|
||||
outline-color: var(--md-sys-color-outline-variant);
|
||||
}
|
||||
|
||||
#filtersContainer {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.filter-button {
|
||||
color: var(--md-sys-color-secondary);
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.filter-button:hover {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
margin: 0.75rem 1rem;
|
||||
border: 0.1rem solid transparent;
|
||||
}
|
||||
|
||||
.favorite-icon {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
color: var(--md-sys-color-secondary);
|
||||
}
|
||||
|
||||
#tool-icon {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#tool-text {
|
||||
margin: 0.0rem 0 0 1.25rem;
|
||||
}
|
||||
|
||||
.favorite-icon img {
|
||||
filter: brightness(0) invert(var(--md-theme-filter-color));
|
||||
}
|
||||
|
||||
.favorite-icon:hover .material-symbols-rounded {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.favorite-icon .material-symbols-rounded.fill{
|
||||
color: #f5c000;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
padding: 3rem 3rem;
|
||||
/* Reduce vertical padding */
|
||||
}
|
||||
|
||||
.lookatme {
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.lookatme::after {
|
||||
color: #e33100;
|
||||
text-shadow: 0 0 5px #e33100;
|
||||
/* in the html, the data-lookatme-text attribute must */
|
||||
/* contain the same text as the .lookatme element */
|
||||
content: attr(data-lookatme-text);
|
||||
padding: inherit;
|
||||
position: absolute;
|
||||
inset: 0 0 0 0;
|
||||
z-index: 1;
|
||||
/* 20 steps / 2 seconds = 10fps */
|
||||
-webkit-animation: 2s infinite Pulse steps(20);
|
||||
animation: 2s infinite Pulse steps(20);
|
||||
}
|
||||
|
||||
.newfeature{
|
||||
display: flex;
|
||||
width:fit-content
|
||||
}
|
||||
.recent-features{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
color: var(--favourite-remove) !important;
|
||||
}
|
||||
.add-icon {
|
||||
color: var(--favourite-add) !important;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
#image-highlighter {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
inset: 0;
|
||||
z-index: 10000;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
visibility: hidden;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition:
|
||||
visbility 0.1s linear,
|
||||
background-color 0.1s linear;
|
||||
}
|
||||
|
||||
#image-highlighter > * {
|
||||
max-width: 80vw;
|
||||
max-height: 80vh;
|
||||
animation: image-highlight 0.1s linear;
|
||||
transition:
|
||||
transform 0.1s linear,
|
||||
opacity 0.1s linear;
|
||||
}
|
||||
|
||||
#image-highlighter > *.remove {
|
||||
transform: scale(0.8) !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
#image-highlighter:not(:empty) {
|
||||
background-color: rgba(0, 0, 0, 0.37);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@keyframes image-highlight {
|
||||
from {
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
td a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
td a:hover,
|
||||
td a:focus {
|
||||
text-decoration: underline;
|
||||
/* Adds underline on hover/focus for clarity */
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.form-signin {
|
||||
width: 100%;
|
||||
max-width: 330px;
|
||||
padding: 15px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.form-signin .checkbox {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.form-signin .form-floating:focus-within {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.form-signin input[type="text"] {
|
||||
margin-bottom: -1px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.form-signin input[type="password"] {
|
||||
margin-bottom: 10px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.container-flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
width: 100%; /* Set width to 100% */
|
||||
align-items: center; /* Center its children horizontally */
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 1.25rem !important;
|
||||
}
|
||||
|
||||
.form-signin .form-floating {
|
||||
margin: 1rem 0px;
|
||||
}
|
||||
|
||||
input[type="checkbox" i] {
|
||||
margin: 0px 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Removing default styles for ul and li */
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Positioning the container of these elements to the top right */
|
||||
.your-container-class {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Styling for the dropdown */
|
||||
.dropdown-menu {
|
||||
min-width: 200px; /* or whatever width you prefer */
|
||||
}
|
||||
|
||||
.navbar-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
.list-group-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filename {
|
||||
flex-grow: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.arrows {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.arrows .btn {
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.move-up span,
|
||||
.move-down span {
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
@@ -0,0 +1,625 @@
|
||||
/* Base Container Styles */
|
||||
.multi-tool-container {
|
||||
max-width: 100vw;
|
||||
margin: 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Form Elements */
|
||||
label {
|
||||
text-align: left;
|
||||
display: block;
|
||||
padding: 0rem 0.25rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 16px !important;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--theme-color-outline-variant);
|
||||
flex-grow: 5;
|
||||
}
|
||||
|
||||
/* Action Bar Styles */
|
||||
.mt-action-bar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: start;
|
||||
border: none;
|
||||
backdrop-filter: blur(2px);
|
||||
top: 10px;
|
||||
z-index: 11;
|
||||
padding: 1.25rem;
|
||||
border-radius: 2rem;
|
||||
margin: 0px 25px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mt-action-bar > * {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.mt-file-uploader {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mt-action-bar svg,
|
||||
.mt-action-btn svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.mt-action-bar .mt-filename {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* Action Button Styles */
|
||||
.mt-action-btn {
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 2rem;
|
||||
z-index: 12;
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
width: fit-content;
|
||||
justify-content: center;
|
||||
padding: 10px 20px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.mt-action-btn .btn {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
border-radius: 20px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Card and Container Styles */
|
||||
.bg-card {
|
||||
background-color: var(--md-sys-color-surface-5);
|
||||
border-radius: 3rem;
|
||||
padding: 15px 0;
|
||||
margin-left: 55px;
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
#pages-container-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0.75rem;
|
||||
border-radius: 25px;
|
||||
min-height: 275px;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
#pages-container {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
justify-content: flex-start;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Scrollbar Styles */
|
||||
#pages-container-wrapper::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
#pages-container-wrapper::-webkit-scrollbar-track {
|
||||
background: var(--scroll-bar-color);
|
||||
}
|
||||
|
||||
#pages-container-wrapper::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background: var(--scroll-bar-thumb);
|
||||
}
|
||||
|
||||
#pages-container-wrapper::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--scroll-bar-thumb-hover);
|
||||
}
|
||||
|
||||
/* Page Container Base Styles */
|
||||
.page-container {
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
line-height: 50px;
|
||||
margin-top: 15px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
aspect-ratio: 1;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
transition: width 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Responsive Page Container Sizes */
|
||||
@media only screen and (max-width: 480px) {
|
||||
.page-container {
|
||||
width: calc(100vw - 90px);
|
||||
height: calc(100vw - 90px);
|
||||
max-width: 300px;
|
||||
max-height: 300px;
|
||||
margin: 5px auto;
|
||||
}
|
||||
#pages-container { gap: 10px; }
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 481px) and (max-width: 768px) {
|
||||
.page-container {
|
||||
width: calc((100vw - 120px - 12px) / 2);
|
||||
height: calc((100vw - 120px - 12px) / 2);
|
||||
max-width: 250px;
|
||||
max-height: 250px;
|
||||
margin: 6px;
|
||||
}
|
||||
#pages-container { gap: 12px; }
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 769px) and (max-width: 1199px) {
|
||||
.page-container {
|
||||
width: calc((100vw - 140px - 45px) / 3);
|
||||
height: calc((100vw - 140px - 45px) / 3);
|
||||
max-width: 220px;
|
||||
max-height: 220px;
|
||||
margin: 7px;
|
||||
}
|
||||
#pages-container { gap: 15px; }
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) and (max-width: 1280px) {
|
||||
.page-container {
|
||||
width: calc((100vw - 160px - 60px) / 4);
|
||||
height: calc((100vw - 160px - 60px) / 4);
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
margin: 8px;
|
||||
}
|
||||
#pages-container { gap: 17px; }
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1281px) {
|
||||
.page-container {
|
||||
width: calc((100vw - 180px - 80px) / 5);
|
||||
height: calc((100vw - 180px - 80px) / 5);
|
||||
max-width: 190px;
|
||||
max-height: 190px;
|
||||
margin: 10px;
|
||||
}
|
||||
#pages-container { gap: 20px; }
|
||||
}
|
||||
|
||||
/* Split Page Styles */
|
||||
.page-container.split-before {
|
||||
border-left: 1px dashed var(--md-sys-color-on-surface);
|
||||
padding-left: -1px;
|
||||
}
|
||||
|
||||
.page-container.split-before:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.page-container:first-child .pdf-actions_split-file-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* RTL Language Support */
|
||||
.page-container:last-child:lang(ar),
|
||||
.page-container:last-child:lang(he),
|
||||
.page-container:last-child:lang(fa),
|
||||
.page-container:last-child:lang(ur),
|
||||
.page-container:last-child:lang(ckb),
|
||||
.page-container:last-child:lang(ks),
|
||||
.page-container:last-child:lang(kk),
|
||||
.page-container:last-child:lang(uz),
|
||||
.page-container:last-child:lang(ky),
|
||||
.page-container:last-child:lang(bal),
|
||||
.page-container:last-child:lang(dv),
|
||||
.page-container:last-child:lang(ps),
|
||||
.page-container:last-child:lang(sdg),
|
||||
.page-container:last-child:lang(syr),
|
||||
.page-container:last-child:lang(mzn),
|
||||
.page-container:last-child:lang(tgl),
|
||||
.page-container:last-child:lang(pnb),
|
||||
.page-container:last-child:lang(ug),
|
||||
.page-container:last-child:lang(nqo),
|
||||
.page-container:last-child:lang(bqi) {
|
||||
margin-left: auto !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
/* Page Image Styles */
|
||||
.page-container img {
|
||||
max-width: calc(100% - 8px);
|
||||
max-height: calc(100% - 8px);
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
translate: -50% -50%;
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.384);
|
||||
border-radius: 4px;
|
||||
transition: rotate 0.3s;
|
||||
}
|
||||
|
||||
/* Page Number Styles */
|
||||
.page-number {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
line-height: normal;
|
||||
color: var(--md-sys-color-on-secondary);
|
||||
background-color: rgba(162, 201, 255, 0.8);
|
||||
padding: 6px 8px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
z-index: 2;
|
||||
font-weight: 450;
|
||||
}
|
||||
|
||||
/* Tool Header and Button Styles */
|
||||
.tool-header {
|
||||
margin: 0.5rem 1rem 1rem;
|
||||
}
|
||||
|
||||
#select-pages-button {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#add-pdf-button {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Selected Pages Container Styles */
|
||||
.selected-pages-container {
|
||||
background-color: var(--md-sys-color-surface);
|
||||
border-radius: 16px;
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.selected-pages-container h3 {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.selected-pages-header {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.selected-pages-header h5 {
|
||||
margin: 0 0 8px 0 !important;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
|
||||
.selected-pages-header #csv-input {
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--md-sys-color-outline);
|
||||
background-color: var(--md-sys-color-surface);
|
||||
color: var(--md-sys-color-on-surface);
|
||||
padding: 0 12px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.selected-pages-header #csv-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--md-sys-color-primary);
|
||||
box-shadow: 0 0 0 2px rgba(var(--md-sys-color-primary-rgb), 0.2);
|
||||
}
|
||||
|
||||
/* Pages List Styles */
|
||||
.pages-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
min-height: 0;
|
||||
max-height: 10rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: bold;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
width: 7rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.selected-page-number {
|
||||
width: 4rem;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
cursor: pointer;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.checkbox-container {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
/* Zoom Level Responsive Styles */
|
||||
@media only screen and (min-width: 2000px) {
|
||||
.mt-action-btn {
|
||||
gap: 12px;
|
||||
padding: 12px 24px;
|
||||
border-radius: 2.5rem;
|
||||
}
|
||||
.mt-action-btn .btn {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
border-radius: 22px;
|
||||
}
|
||||
.mt-action-btn .btn .material-symbols-rounded {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 2560px) {
|
||||
.mt-action-btn {
|
||||
gap: 15px;
|
||||
padding: 15px 30px;
|
||||
border-radius: 3rem;
|
||||
}
|
||||
.mt-action-btn .btn {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-radius: 28px;
|
||||
}
|
||||
.mt-action-btn .btn .material-symbols-rounded {
|
||||
font-size: 2.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 3840px) {
|
||||
.mt-action-btn {
|
||||
gap: 20px;
|
||||
padding: 20px 40px;
|
||||
border-radius: 4rem;
|
||||
}
|
||||
.mt-action-btn .btn {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
border-radius: 40px;
|
||||
}
|
||||
.mt-action-btn .btn .material-symbols-rounded {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 7680px) {
|
||||
.mt-action-btn {
|
||||
gap: 40px;
|
||||
padding: 40px 80px;
|
||||
border-radius: 8rem;
|
||||
}
|
||||
.mt-action-btn .btn {
|
||||
width: 14rem;
|
||||
height: 14rem;
|
||||
border-radius: 80px;
|
||||
}
|
||||
.mt-action-btn .btn .material-symbols-rounded {
|
||||
font-size: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Zoom-responsive Sidebar Styles */
|
||||
@media only screen and (max-width: 1280px) {
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mt-action-btn {
|
||||
position: fixed !important;
|
||||
left: 10px !important;
|
||||
top: 80px !important;
|
||||
bottom: 20px !important;
|
||||
margin: 0 !important;
|
||||
transform: none !important;
|
||||
border-radius: 16px !important;
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
backdrop-filter: blur(8px);
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
height: calc(100vh - 100px) !important;
|
||||
overflow-y: auto !important;
|
||||
scrollbar-width: none !important;
|
||||
-ms-overflow-style: none !important;
|
||||
z-index: 12;
|
||||
width: 70px !important;
|
||||
gap: 8px !important;
|
||||
padding: 12px 8px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.mt-action-btn:has(.btn:nth-last-child(n+7)) {
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
|
||||
.mt-action-btn::-webkit-scrollbar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.mt-action-btn .btn {
|
||||
width: 48px !important;
|
||||
height: 48px !important;
|
||||
border-radius: 12px !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
flex-shrink: 0;
|
||||
font-size: 16px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.mt-action-btn .btn .material-symbols-rounded {
|
||||
font-size: 20px !important;
|
||||
line-height: 1 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
|
||||
}
|
||||
|
||||
.multi-tool-container {
|
||||
margin-left: 0 !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.mt-action-bar {
|
||||
margin-left: 25px !important;
|
||||
margin-right: 25px !important;
|
||||
}
|
||||
|
||||
.mt-action-btn:not(:has(*:nth-child(6))) {
|
||||
justify-content: center !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile and High Zoom Responsive Styles */
|
||||
@media only screen and (max-width: 960px) {
|
||||
.mt-action-btn {
|
||||
left: 8px !important;
|
||||
top: 75px !important;
|
||||
bottom: 15px !important;
|
||||
height: calc(100vh - 90px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.mt-action-btn {
|
||||
left: 5px !important;
|
||||
width: 60px !important;
|
||||
top: calc(var(--navbar-height, 60px) + 10px) !important;
|
||||
bottom: 10px !important;
|
||||
height: calc(100vh - var(--navbar-height, 60px) - 20px) !important;
|
||||
}
|
||||
|
||||
.mt-action-btn .btn {
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.mt-action-btn .btn .material-symbols-rounded {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
#pages-container {
|
||||
margin: 0 auto !important;
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
justify-content: center !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
width: calc(100vw - 55px) !important;
|
||||
height: calc(100vw - 60px) !important;
|
||||
max-width: 350px !important;
|
||||
max-height: 350px !important;
|
||||
margin: 5px auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.mt-action-btn {
|
||||
left: 2px !important;
|
||||
top: calc(var(--navbar-height, 60px) + 5px) !important;
|
||||
bottom: 5px !important;
|
||||
height: calc(100vh - var(--navbar-height, 60px) - 10px) !important;
|
||||
width: 50px !important;
|
||||
gap: 6px !important;
|
||||
padding: 10px 6px !important;
|
||||
}
|
||||
|
||||
.mt-action-btn .btn {
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
border-radius: 10px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.mt-action-btn .btn .material-symbols-rounded {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 384px) {
|
||||
.mt-action-btn {
|
||||
left: 2px !important;
|
||||
top: calc(var(--navbar-height, 60px) + 5px) !important;
|
||||
bottom: 5px !important;
|
||||
height: calc(100vh - var(--navbar-height, 60px) - 10px) !important;
|
||||
width: 40px !important;
|
||||
gap: 4px !important;
|
||||
padding: 8px 4px !important;
|
||||
}
|
||||
|
||||
.mt-action-btn .btn {
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
border-radius: 8px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.mt-action-btn .btn .material-symbols-rounded {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
width: calc(100vw - 55px) !important;
|
||||
height: calc(100vw - 60px) !important;
|
||||
max-width: 280px !important;
|
||||
max-height: 280px !important;
|
||||
margin: 3px auto !important;
|
||||
}
|
||||
|
||||
.page-container img {
|
||||
max-width: calc(100% - 4px) !important;
|
||||
max-height: calc(100% - 4px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,652 @@
|
||||
#navbarSearch {
|
||||
top: 100%;
|
||||
right: 0;
|
||||
transition: all 0.3s;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#navbarSearch.show {
|
||||
height: auto;
|
||||
/*dynamically changes height*/
|
||||
}
|
||||
|
||||
#searchResults .dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
height: 50px;
|
||||
/* Fixed height */
|
||||
overflow: hidden;
|
||||
/* Hide overflow */
|
||||
}
|
||||
|
||||
#searchResults .icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#searchResults .icon-text {
|
||||
display: inline;
|
||||
overflow: hidden;
|
||||
/* Hide overflow */
|
||||
text-overflow: ellipsis;
|
||||
/* Add ellipsis for long text */
|
||||
}
|
||||
|
||||
#search-icon i {
|
||||
font-size: 24px;
|
||||
/* Adjust this to your desired size */
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
#search-icon:hover i {
|
||||
color: #666;
|
||||
/* Adjust this to your hover color */
|
||||
}
|
||||
|
||||
.search-input {
|
||||
transition: border 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #666;
|
||||
/* Adjust this to your focus color */
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
/* Adjust this to your desired shadow */
|
||||
}
|
||||
|
||||
|
||||
.main-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
vertical-align: middle;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Responsive navbar brand - prevent hamburger from wrapping */
|
||||
.navbar-brand {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0; /* Allow shrinking */
|
||||
}
|
||||
|
||||
.navbar-brand .icon-text {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Progressive text shrinking to prevent hamburger wrap */
|
||||
@media only screen and (max-width: 480px) {
|
||||
.navbar-brand .icon-text {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.main-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 420px) {
|
||||
.navbar-brand .icon-text {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.main-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 380px) {
|
||||
.navbar-brand .icon-text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.main-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 340px) {
|
||||
.navbar-brand .icon-text {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.main-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ultra-small screens - hide text, keep icon */
|
||||
@media only screen and (max-width: 320px) {
|
||||
.navbar-brand .icon-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
vertical-align: middle;
|
||||
font-size: 2rem !important;
|
||||
padding: 0.25rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.icon+.icon {
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
.icon-text {
|
||||
margin-left: 8px;
|
||||
margin-right: 4px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
.scalable-languages-container {
|
||||
display: grid;
|
||||
/* Auto-fill columns, with a minimum width of 180px */
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
}
|
||||
|
||||
.scalable-languages-container:not(:has(> :nth-child(4))) .lang-dropdown-item-wrapper:last-child {
|
||||
border: 0px !important
|
||||
}
|
||||
|
||||
.scalable-languages-container:has(> *:nth-child(1)) {
|
||||
--count: 1;
|
||||
}
|
||||
|
||||
.scalable-languages-container:has(> *:nth-child(2)) {
|
||||
--count: 2;
|
||||
}
|
||||
|
||||
.scalable-languages-container:has(> *:nth-child(3)) {
|
||||
--count: 3;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .lang-dropdown-item-wrapper {
|
||||
border-right: 2px solid var(--md-nav-color-on-separator);
|
||||
}
|
||||
|
||||
html[dir="rtl"] .lang-dropdown-item-wrapper {
|
||||
border-left: 2px solid var(--md-nav-color-on-separator);
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (min-width: 1200px) {
|
||||
.lang-dropdown-item-wrapper .dropdown-item {
|
||||
min-width: 200px
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.scalable-languages-container {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.scalable-languages-container:not(:has(> :nth-child(2))) {
|
||||
grid-template-columns: repeat(var(--count), 1fr) !important;
|
||||
}
|
||||
|
||||
.scalable-languages-container .lang-dropdown-item-wrapper:nth-child(2n) {
|
||||
border: 0px
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 601px) and (max-width: 900px) {
|
||||
.scalable-languages-container {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.scalable-languages-container:not(:has(> :nth-child(3))) {
|
||||
grid-template-columns: repeat(var(--count), 1fr) !important;
|
||||
}
|
||||
|
||||
.scalable-languages-container .lang-dropdown-item-wrapper:nth-child(3n) {
|
||||
border: 0px
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 901px) {
|
||||
.scalable-languages-container {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.scalable-languages-container:not(:has(> :nth-child(4))) {
|
||||
grid-template-columns: repeat(var(--count), 1fr) !important;
|
||||
}
|
||||
|
||||
.scalable-languages-container .lang-dropdown-item-wrapper:nth-child(4n) {
|
||||
border: 0px
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item .icon-text {
|
||||
text-wrap: wrap;
|
||||
word-break: break-word;
|
||||
width: 80%;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
color: var(--md-sys-color-secondary);
|
||||
}
|
||||
|
||||
.close-icon:hover {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
span.icon-text::after {
|
||||
content: attr(data-text);
|
||||
content: attr(data-text) / "";
|
||||
font-weight: 600;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nav-item-separator {
|
||||
position: relative;
|
||||
margin: 0 4px;
|
||||
/* Adjust the margin as needed */
|
||||
}
|
||||
|
||||
.nav-item-separator::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10%;
|
||||
/* Adjust the top and bottom margins as needed */
|
||||
bottom: 10%;
|
||||
width: 1px;
|
||||
background-color: #ccc;
|
||||
/* Adjust the color as needed */
|
||||
}
|
||||
|
||||
.navbar-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* .tooltip-text {
|
||||
visibility: hidden;
|
||||
background-color: rgb(71 67 67 / 80%);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.nav-item:hover .tooltip-text {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
} */
|
||||
|
||||
.dropdown-menu.scrollable-y {
|
||||
overflow-y: scroll;
|
||||
max-height: 360px;
|
||||
}
|
||||
|
||||
/* Dropdown Scrollbar*/
|
||||
.scrollable-y {
|
||||
overflow-y: scroll;
|
||||
max-height: 190px;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.scrollable-y::-webkit-scrollbar {
|
||||
background: transparent;
|
||||
width: 0.7rem;
|
||||
}
|
||||
|
||||
.scrollable-y::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.scrollable-y::-webkit-scrollbar-thumb {
|
||||
border-radius: 2rem;
|
||||
background-color: var(--md-sys-color-surface-5);
|
||||
border: 3px solid var(--md-sys-color-surface-5);
|
||||
}
|
||||
|
||||
/* Mega Menu */
|
||||
.dropdown-mega .dropdown-menu {
|
||||
width: 100%;
|
||||
left: 0 !important;
|
||||
right: auto !important;
|
||||
}
|
||||
|
||||
.dropdown-mega .title {
|
||||
padding-bottom: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu .list-group {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.mega-content .dropdown-item:focus .nav-icon,
|
||||
.mega-content .dropdown-item:hover .nav-icon,
|
||||
.mega-content .dropdown-item.active .nav-icon {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.dropdown-item:focus.sign,
|
||||
.dropdown-item:hover.sign,
|
||||
.dropdown-item.active.sign {
|
||||
color: var(--md-nav-on-section-color-sign);
|
||||
background-color: var(--md-nav-section-color-sign);
|
||||
}
|
||||
|
||||
.dropdown-item:focus.organize,
|
||||
.dropdown-item:hover.organize,
|
||||
.dropdown-item.active.organize {
|
||||
color: var(--md-nav-on-section-color-organize);
|
||||
background-color: var(--md-nav-section-color-organize);
|
||||
}
|
||||
|
||||
.dropdown-item:focus.convert,
|
||||
.dropdown-item:hover.convert,
|
||||
.dropdown-item.active.convert {
|
||||
color: var(--md-nav-on-section-color-convert);
|
||||
background-color: var(--md-nav-section-color-convert);
|
||||
}
|
||||
|
||||
.dropdown-item:focus.convertto,
|
||||
.dropdown-item:hover.convertto,
|
||||
.dropdown-item.active.convertto {
|
||||
color: var(--md-nav-on-section-color-convertto);
|
||||
background-color: var(--md-nav-section-color-convertto);
|
||||
}
|
||||
|
||||
.dropdown-item:focus.image,
|
||||
.dropdown-item:hover.image,
|
||||
.dropdown-item.active.image {
|
||||
color: var(--md-nav-on-section-color-image);
|
||||
background-color: var(--md-nav-section-color-image);
|
||||
}
|
||||
|
||||
.dropdown-item:focus.word,
|
||||
.dropdown-item:hover.word,
|
||||
.dropdown-item.active.word {
|
||||
color: var(--md-nav-on-section-color-word);
|
||||
background-color: var(--md-nav-section-color-word);
|
||||
}
|
||||
|
||||
.dropdown-item:focus.ppt,
|
||||
.dropdown-item:hover.ppt,
|
||||
.dropdown-item.active.ppt {
|
||||
color: var(--md-nav-on-section-color-ppt);
|
||||
background-color: var(--md-nav-section-color-ppt);
|
||||
}
|
||||
|
||||
.dropdown-item:focus.security,
|
||||
.dropdown-item:hover.security,
|
||||
.dropdown-item.active.security {
|
||||
color: var(--md-nav-on-section-color-security);
|
||||
background-color: var(--md-nav-section-color-security);
|
||||
}
|
||||
|
||||
.dropdown-item:focus.other,
|
||||
.dropdown-item:hover.other,
|
||||
.dropdown-item.active.other {
|
||||
color: var(--md-nav-on-section-color-other);
|
||||
background-color: var(--md-nav-section-color-other);
|
||||
}
|
||||
|
||||
.dropdown-item:focus.advance,
|
||||
.dropdown-item:hover.advance,
|
||||
.dropdown-item.active.advance {
|
||||
color: var(--md-nav-on-section-color-advance);
|
||||
background-color: var(--md-nav-section-color-advance);
|
||||
}
|
||||
|
||||
/* Dropdown min-width */
|
||||
.dropdown-mw-28 {
|
||||
min-width: 280px;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.dropdown-mw-20 {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
/* Dropdown open on hover */
|
||||
html[dir="ltr"] .dropdown-menu {
|
||||
padding-top: 0.5rem;
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .dropdown-menu {
|
||||
padding-top: 0.5rem;
|
||||
top: auto;
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
/* Bootstrap Popper positioning overrides removed - dropdowns now position naturally relative to their buttons */
|
||||
|
||||
.dropdown-menu-wrapper {
|
||||
padding: 1.5rem 0;
|
||||
border-radius: 1rem;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
background-color: var(--md-sys-color-surface);
|
||||
border: 1px solid var(--md-sys-color-surface-5);
|
||||
box-shadow: var(--md-sys-elevation-2);
|
||||
}
|
||||
|
||||
.dropdown-menu-tp {
|
||||
color: transparent;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.icon-hide {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
@media (min-width:992px) {
|
||||
.dropdown:hover .dropdown-menu {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* .icon-hide {
|
||||
display: none;
|
||||
} */
|
||||
}
|
||||
|
||||
@media (max-width:1199px) {
|
||||
.icon-hide {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:1200px) {
|
||||
.icon-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.go-pro-link {
|
||||
position: relative;
|
||||
padding: 0.5rem 1rem;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.go-pro-badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
background-color: #007bff;
|
||||
border-radius: 0.25rem;
|
||||
text-transform: uppercase;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.go-pro-link:hover .go-pro-badge {
|
||||
background-color: #0056b3;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
#stacked {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
#stacked>.navbar-item {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.features-container {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.feature-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 14rem;
|
||||
max-width: 18rem;
|
||||
flex: 1 1 min(14rem, 100%);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.feature-rows {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 1rem;
|
||||
padding: 0 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.feature-rows.single-column {
|
||||
justify-content: center;
|
||||
/* Center-align a single column */
|
||||
}
|
||||
|
||||
.feature-group-header {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
margin-top: 15px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.nav-group-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card-title.text-primary {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.home-card-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.favorite-icon {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
color: var(--md-sys-color-secondary);
|
||||
}
|
||||
|
||||
.favorite-icon img {
|
||||
filter: brightness(0) invert(var(--md-theme-filter-color));
|
||||
}
|
||||
|
||||
.favorite-icon:hover .material-symbols-rounded {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.favorite-icon .material-symbols-rounded.fill {
|
||||
color: #f5c000;
|
||||
}
|
||||
|
||||
|
||||
@keyframes Pulse {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.update-notice {
|
||||
animation: scale 1s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes scale {
|
||||
0% {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
.pdf-actions_button-container {
|
||||
z-index: 4;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s linear;
|
||||
|
||||
position: absolute !important;
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0%);
|
||||
}
|
||||
|
||||
.pdf-actions_container:hover .pdf-actions_button-container {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pdf-actions_button-container>* {
|
||||
padding: 0.25rem 0.5rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pdf-actions_button-container>*:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.pdf-actions_button-container .btn {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.pdf-actions_button-container> :first-child,
|
||||
.pdf-actions_container:first-child>.pdf-actions_button-container> :first-child+* {
|
||||
border-radius: 12px 0px 0px 12px;
|
||||
}
|
||||
|
||||
.pdf-actions_container svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.pdf-actions_container:nth-child(1) .pdf-actions_move-left-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pdf-actions_container:last-child .pdf-actions_move-right-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* "insert pdf" buttons that appear on the right when hover */
|
||||
.pdf-actions_insert-file-button-container {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
translate: 0 -50%;
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
padding-left: 30px;
|
||||
padding-right:30px;
|
||||
justify-content: center;
|
||||
z-index: 3;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s;
|
||||
|
||||
}
|
||||
|
||||
.pdf-actions_insert-file-button-container.left {
|
||||
left: -50px;
|
||||
}
|
||||
|
||||
.pdf-actions_insert-file-button-container.right {
|
||||
right: -50px;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .pdf-actions_insert-file-button-container.right {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .pdf-actions_insert-file-button-container.left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html[dir="ltr"] .pdf-actions_container:last-child>.pdf-actions_insert-file-button-container.right {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .pdf-actions_container:last-child>.pdf-actions_insert-file-button-container.left {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pdf-actions_insert-file-button-container.left button,
|
||||
.pdf-actions_insert-file-button-container.right button {
|
||||
padding: 0.45rem;
|
||||
}
|
||||
|
||||
.pdf-actions_button-container button .material-symbols-rounded {
|
||||
font-size: 1.25rem;
|
||||
vertical-align: sub;
|
||||
}
|
||||
|
||||
.pdf-actions_insert-file-button-container:hover {
|
||||
opacity: 1;
|
||||
transition: opacity 0.05s;
|
||||
}
|
||||
|
||||
.pdf-actions_checkbox {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 3px;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
background-color: var(--md-sys-color-surface-5);
|
||||
padding: 6px 8px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
.btn-margin {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.bordered-box {
|
||||
border: 1px solid #ddd;
|
||||
padding: 2rem;
|
||||
margin: 2rem;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.center-element {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.element-margin {
|
||||
margin: 1rem 0;
|
||||
/* Adjust this value to increase/decrease the margin as needed */
|
||||
}
|
||||
|
||||
#pipelineList {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
/* PrismJS 1.29.0
|
||||
https://prismjs.com/download.html#themes=prism-coy&languages=clike+javascript */
|
||||
code[class*=language-],pre[class*=language-]{color:#000;background:0 0;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{position:relative;margin:.5em 0;overflow:visible;padding:1px}pre[class*=language-]>code{position:relative;z-index:1;border-left:10px solid #358ccb;box-shadow:-1px 0 0 0 #358ccb,0 0 0 1px #dfdfdf;background-color:#fdfdfd;background-image:linear-gradient(transparent 50%,rgba(69,142,209,.04) 50%);background-size:3em 3em;background-origin:content-box;background-attachment:local}code[class*=language-]{max-height:inherit;height:inherit;padding:0 1em;display:block;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background-color:#fdfdfd;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:1em}:not(pre)>code[class*=language-]{position:relative;padding:.2em;border-radius:.3em;color:#c92c2c;border:1px solid rgba(0,0,0,.1);display:inline;white-space:normal}pre[class*=language-]:after,pre[class*=language-]:before{content:'';display:block;position:absolute;bottom:.75em;left:.18em;width:40%;height:20%;max-height:13em;box-shadow:0 13px 8px #979797;-webkit-transform:rotate(-2deg);-moz-transform:rotate(-2deg);-ms-transform:rotate(-2deg);-o-transform:rotate(-2deg);transform:rotate(-2deg)}pre[class*=language-]:after{right:.75em;left:auto;-webkit-transform:rotate(2deg);-moz-transform:rotate(2deg);-ms-transform:rotate(2deg);-o-transform:rotate(2deg);transform:rotate(2deg)}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#7d8b99}.token.punctuation{color:#5f6364}.token.boolean,.token.constant,.token.deleted,.token.function-name,.token.number,.token.property,.token.symbol,.token.tag{color:#c92c2c}.token.attr-name,.token.builtin,.token.char,.token.function,.token.inserted,.token.selector,.token.string{color:#2f9c0a}.token.entity,.token.operator,.token.url,.token.variable{color:#a67f59;background:rgba(255,255,255,.5)}.token.atrule,.token.attr-value,.token.class-name,.token.keyword{color:#1990b8}.token.important,.token.regex{color:#e90}.language-css .token.string,.style .token.string{color:#a67f59;background:rgba(255,255,255,.5)}.token.important{font-weight:400}.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.namespace{opacity:.7}@media screen and (max-width:767px){pre[class*=language-]:after,pre[class*=language-]:before{bottom:14px;box-shadow:none}}pre[class*=language-].line-numbers.line-numbers{padding-left:0}pre[class*=language-].line-numbers.line-numbers code{padding-left:3.8em}pre[class*=language-].line-numbers.line-numbers .line-numbers-rows{left:0}pre[class*=language-][data-line]{padding-top:0;padding-bottom:0;padding-left:0}pre[data-line] code{position:relative;padding-left:4em}pre .line-highlight{margin-top:0}
|
||||
@@ -0,0 +1,113 @@
|
||||
/* Rainbow Mode Styles */
|
||||
body {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 0, 0, 1) 0%,
|
||||
rgba(255, 154, 0, 1) 10%,
|
||||
rgba(208, 222, 33, 1) 20%,
|
||||
rgba(79, 220, 74, 1) 30%,
|
||||
rgba(63, 218, 216, 1) 40%,
|
||||
rgba(47, 201, 226, 1) 50%,
|
||||
rgba(28, 127, 238, 1) 60%,
|
||||
rgba(95, 21, 242, 1) 70%,
|
||||
rgba(186, 12, 248, 1) 80%,
|
||||
rgba(251, 7, 217, 1) 90%,
|
||||
rgba(255, 0, 0, 1) 100%
|
||||
);
|
||||
color: #fff !important;
|
||||
--body-background-color: 255, 255, 255;
|
||||
--base-font-color: 33, 37, 41;
|
||||
}
|
||||
|
||||
.dark-card {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 0, 0, 1) 0%,
|
||||
rgba(255, 154, 0, 1) 10%,
|
||||
rgba(208, 222, 33, 1) 20%,
|
||||
rgba(79, 220, 74, 1) 30%,
|
||||
rgba(63, 218, 216, 1) 40%,
|
||||
rgba(47, 201, 226, 1) 50%,
|
||||
rgba(28, 127, 238, 1) 60%,
|
||||
rgba(95, 21, 242, 1) 70%,
|
||||
rgba(186, 12, 248, 1) 80%,
|
||||
rgba(251, 7, 217, 1) 90%,
|
||||
rgba(255, 0, 0, 1) 100%
|
||||
) !important;
|
||||
color: white !important;
|
||||
}
|
||||
.jumbotron {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 0, 0, 1) 0%,
|
||||
rgba(255, 154, 0, 1) 10%,
|
||||
rgba(208, 222, 33, 1) 20%,
|
||||
rgba(79, 220, 74, 1) 30%,
|
||||
rgba(63, 218, 216, 1) 40%,
|
||||
rgba(47, 201, 226, 1) 50%,
|
||||
rgba(28, 127, 238, 1) 60%,
|
||||
rgba(95, 21, 242, 1) 70%,
|
||||
rgba(186, 12, 248, 1) 80%,
|
||||
rgba(251, 7, 217, 1) 90%,
|
||||
rgba(255, 0, 0, 1) 100%
|
||||
);
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.list-group {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 0, 0, 1) 0%,
|
||||
rgba(255, 154, 0, 1) 10%,
|
||||
rgba(208, 222, 33, 1) 20%,
|
||||
rgba(79, 220, 74, 1) 30%,
|
||||
rgba(63, 218, 216, 1) 40%,
|
||||
rgba(47, 201, 226, 1) 50%,
|
||||
rgba(28, 127, 238, 1) 60%,
|
||||
rgba(95, 21, 242, 1) 70%,
|
||||
rgba(186, 12, 248, 1) 80%,
|
||||
rgba(251, 7, 217, 1) 90%,
|
||||
rgba(255, 0, 0, 1) 100%
|
||||
) !important;
|
||||
color: fff !important;
|
||||
}
|
||||
.list-group-item {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 0, 0, 1) 0%,
|
||||
rgba(255, 154, 0, 1) 10%,
|
||||
rgba(208, 222, 33, 1) 20%,
|
||||
rgba(79, 220, 74, 1) 30%,
|
||||
rgba(63, 218, 216, 1) 40%,
|
||||
rgba(47, 201, 226, 1) 50%,
|
||||
rgba(28, 127, 238, 1) 60%,
|
||||
rgba(95, 21, 242, 1) 70%,
|
||||
rgba(186, 12, 248, 1) 80%,
|
||||
rgba(251, 7, 217, 1) 90%,
|
||||
rgba(255, 0, 0, 1) 100%
|
||||
) !important;
|
||||
color: fff !important;
|
||||
}
|
||||
#support-section {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 0, 0, 1) 0%,
|
||||
rgba(255, 154, 0, 1) 10%,
|
||||
rgba(208, 222, 33, 1) 20%,
|
||||
rgba(79, 220, 74, 1) 30%,
|
||||
rgba(63, 218, 216, 1) 40%,
|
||||
rgba(47, 201, 226, 1) 50%,
|
||||
rgba(28, 127, 238, 1) 60%,
|
||||
rgba(95, 21, 242, 1) 70%,
|
||||
rgba(186, 12, 248, 1) 80%,
|
||||
rgba(251, 7, 217, 1) 90%,
|
||||
rgba(255, 0, 0, 1) 100%
|
||||
) !important;
|
||||
}
|
||||
|
||||
#pages-container-wrapper {
|
||||
--background-color: rgba(255, 255, 255, 0.046) !important;
|
||||
--scroll-bar-color: #4c4c4c !important;
|
||||
--scroll-bar-thumb: #d3d3d3 !important;
|
||||
--scroll-bar-thumb-hover: #ffffff !important;
|
||||
}
|
||||
@@ -0,0 +1,303 @@
|
||||
:root {
|
||||
--page-redaction-color: #000000;
|
||||
}
|
||||
|
||||
.textLayer span::selection,
|
||||
.textLayer span::-moz-selection {
|
||||
background-color: rgba(0, 100, 0, 0.26);
|
||||
}
|
||||
|
||||
.selected-wrapper {
|
||||
position: absolute;
|
||||
outline: 2px solid darkgreen;
|
||||
outline-offset: -2px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.selected-wrapper:hover:not(:has(.redaction-overlay:hover)) {
|
||||
outline-color: var(--palette-color, #000000);
|
||||
background-color: var(--palette-color, #000000);
|
||||
z-index: 10;
|
||||
transition: background-color 0.065s linear;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.redaction-overlay {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
|
||||
left: 50%;
|
||||
top: 100%;
|
||||
|
||||
min-width: 25px;
|
||||
max-width: 90px;
|
||||
|
||||
min-height: 25px;
|
||||
|
||||
flex-wrap: nowrap;
|
||||
|
||||
column-gap: 5px;
|
||||
row-gap: 2px;
|
||||
|
||||
border-radius: 2px;
|
||||
padding: 2px;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
background-color: rgb(0 96 170);
|
||||
outline: 1px solid gray;
|
||||
translate: -50% -100%;
|
||||
}
|
||||
|
||||
.redaction-overlay svg {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
|
||||
max-width: 35px;
|
||||
max-height: 35px;
|
||||
|
||||
fill: rgba(255, 255, 255, 0.904);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.redaction-overlay svg:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgb(3, 63, 109);
|
||||
fill: rgba(226, 226, 226, 0.904);
|
||||
}
|
||||
|
||||
.textLayer div,
|
||||
.textLayer div > * {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.rectangle {
|
||||
border: 2px solid #ff0000;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
html {
|
||||
--textLayer-pointer-events: auto;
|
||||
--textLayer-user-select: auto;
|
||||
}
|
||||
|
||||
.textLayer * {
|
||||
pointer-events: var(--textLayer-pointer-events);
|
||||
user-select: var(--textLayer-user-select);
|
||||
}
|
||||
|
||||
#showMoreBtnIcon::before {
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
#showMoreBtn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#man-text-select-redact, #man-shape-redact, #downloadBtn, #uploadBtn, #pageBasedRedactionBtn, #pdfToImageBtn, #showMoreBtn {
|
||||
height: var(--toolButton-height);
|
||||
width: var(--toolButton-width);
|
||||
|
||||
border-radius: var(--toolButton-border-radius);
|
||||
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#text-selection, #shape-selection, #downloadBtnIcon, #uploadBtnIcon, #pageBasedRedactionBtnIcon, #pdfToImageBtnIcon, #showMoreBtnIcon {
|
||||
position: relative;
|
||||
font-size: var(--toolButton-icon-font-size);
|
||||
}
|
||||
|
||||
:is(#man-shape-redact, #man-text-select-redact, #sidebarToggle, #viewThumbnail, #viewOutline, #showMoreBtn).toggled {
|
||||
background-color: rgb(50, 159, 243);
|
||||
color: rgb(255 255 255);
|
||||
outline:rgb(50, 159, 243) !important;
|
||||
border-color: rgb(50, 159, 243) !important;
|
||||
}
|
||||
|
||||
:is(#man-shape-redact, #man-text-select-redact, #redactionsPaletteContainer, #downloadBtn, #uploadBtn, #pageBasedRedactionBtn, #pdfToImageBtn, #showMoreBtn):hover {
|
||||
background-color: rgba(6, 114, 197, 0.82);
|
||||
color: rgb(255 255 255);
|
||||
outline:rgba(6, 114, 197, 0.82) !important;
|
||||
border-color: rgba(6, 114, 197, 0.82) !important;
|
||||
}
|
||||
|
||||
#pdfToImageBtn:hover .btn-tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#redactionsPaletteContainer {
|
||||
height: var(--toolButton-height);
|
||||
width: var(--toolButton-width);
|
||||
|
||||
border-radius: var(--toolButton-border-radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#redactionsPaletteContainer *, #showMoreBtn * {
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#redactions-palette {
|
||||
display: inline;
|
||||
position: relative;
|
||||
|
||||
border-bottom: 8px solid var(--palette-color);
|
||||
border-radius: inherit;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
font-size: var(--toolButton-icon-font-size);
|
||||
}
|
||||
|
||||
#redactions-palette::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 6px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 0px;
|
||||
background-color: var(--palette-color);
|
||||
}
|
||||
|
||||
#redactions-palette > input[type=color] {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: var(--toolButton-height);
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.toolbar-btn-hover:hover {
|
||||
cursor: pointer;
|
||||
background-color: rgba(6, 114, 197, 0.82) !important;
|
||||
color: rgb(255 255 255) !important;
|
||||
outline:rgba(6, 114, 197, 0.82) !important;
|
||||
border-color: rgba(6, 114, 197, 0.82) !important;
|
||||
}
|
||||
|
||||
#pageRedactColor, input[data-for=pageRedactColor] {
|
||||
flex: 1;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
#pageRedactColor:is(:hover, :focus-within), input[data-for=pageRedactColor]:is(:hover, :focus-within) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.palette-color {
|
||||
border-bottom: 3px solid var(--palette-color);
|
||||
}
|
||||
|
||||
.palette-color:is(:hover, :focus-within) {
|
||||
cursor: pointer;
|
||||
background-color: var(--button-hover-color);
|
||||
}
|
||||
|
||||
.splitToolbarButton > .btn-primary, .splitToolbarButton > .btn-secondary, .splitToolbarButton > .toolbarButton {
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
border:none
|
||||
}
|
||||
|
||||
.splitToolbarButton > .btn-success, .splitToolbarButton > .btn-secondary, .splitToolbarButton > .toolbarButton {
|
||||
border:none
|
||||
}
|
||||
|
||||
|
||||
.spin-animation {
|
||||
-webkit-animation: spin 2s linear infinite; /* Safari */
|
||||
-moz-animation: spin 2s linear infinite;
|
||||
-o-animation: spin 2s linear infinite;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@-moz-keyframes spin {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@-o-keyframes spin {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.active-redaction {
|
||||
z-index: 30 !important;
|
||||
}
|
||||
|
||||
#pageBasedRedactionOverlay {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
background-color: var(--md-sys-color-surface);
|
||||
color: var(--md-sys-color-on-surface);
|
||||
border-radius: 3rem;
|
||||
z-index: 100;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.list-styling {
|
||||
display: list-item !important;
|
||||
margin-left: 15px;
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.redacted-page {
|
||||
--page-redaction-color: none;
|
||||
}
|
||||
|
||||
.redacted-page-preview {
|
||||
border: 2px solid blue;
|
||||
}
|
||||
|
||||
.redacted-page-preview:hover {
|
||||
background-color: var(--page-redaction-color) !important;
|
||||
}
|
||||
|
||||
.redacted-page-preview * {
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.overlay-colorpicker-window {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 24px;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.redacted-thumbnail-image-preview {
|
||||
border: 2px solid blue;
|
||||
}
|
||||
|
||||
.redacted-thumbnail-preview {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.redacted-thumbnail-preview:hover::after {
|
||||
content: '';
|
||||
background-color: var(--page-redaction-color);
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
height: var(--thumbnail-height);
|
||||
width: var(--thumbnail-width);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
.filename {
|
||||
flex-grow: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.arrows {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.arrows .btn {
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
.move-up span,
|
||||
.move-down span {
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
#pdf-preview {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
max-width: calc(100% - 30px);
|
||||
max-height: calc(100% - 30px);
|
||||
box-shadow: 0 0 4px rgba(100, 100, 100, 0.25);
|
||||
transition: rotate 0.3s;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
translate: -50% -50%;
|
||||
}
|
||||
|
||||
#previewContainer {
|
||||
aspect-ratio: 1;
|
||||
width: 100%;
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
border-radius: 0.25rem;
|
||||
margin: 1rem 0;
|
||||
padding: 15px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.buttonContainer {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
#pdf-preview-large {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
max-width: calc(100% - 30px);
|
||||
max-height: calc(100% - 30px);
|
||||
box-shadow: 0 0 4px rgba(100, 100, 100, 0.25);
|
||||
transition: rotate 0.3s;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
translate: -50% -50%;
|
||||
}
|
||||
@@ -0,0 +1,237 @@
|
||||
select#font-select,
|
||||
select#font-select option {
|
||||
height: 60px;
|
||||
/* Adjust as needed */
|
||||
font-size: 30px;
|
||||
/* Adjust as needed */
|
||||
}
|
||||
|
||||
.drawing-pad-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#drawing-pad-canvas {
|
||||
background: rgba(125, 125, 125, 0.2);
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
#box-drag-container {
|
||||
position: relative;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.draggable-buttons-box {
|
||||
position: relative;
|
||||
top: 0;
|
||||
padding: 10px;
|
||||
width: calc(100% + 4.4rem);
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
z-index: 5;
|
||||
margin-left: -2.2rem;
|
||||
}
|
||||
|
||||
.draggable-buttons-box > button {
|
||||
z-index: 4;
|
||||
background-color: rgba(13, 110, 253, 0.1);
|
||||
flex: 1 1 auto;
|
||||
min-width: 2.5rem;
|
||||
max-width: 4rem;
|
||||
}
|
||||
|
||||
.rotation-handle {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #3498db;
|
||||
background-color: rgba(52, 152, 219, 0.1);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
position: absolute;
|
||||
cursor: grab;
|
||||
top: -30px;
|
||||
left: calc(50% - 10px);
|
||||
}
|
||||
|
||||
.draggable-canvas {
|
||||
border: 2px solid #3498db;
|
||||
position: absolute;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
cursor: grab;
|
||||
transition: transform 0.1s ease-out;
|
||||
background-color: rgba(52, 152, 219, 0.1);
|
||||
/* Light blue background */
|
||||
}
|
||||
|
||||
.draggable-canvas:active {
|
||||
cursor: grabbing;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||
/* Shadow on active drag */
|
||||
}
|
||||
|
||||
.draggable-canvas:hover {
|
||||
border: 2px solid #2980b9;
|
||||
/* Darker border on hover */
|
||||
background-color: rgba(52, 152, 219, 0.2);
|
||||
/* Darken background on hover */
|
||||
}
|
||||
|
||||
.signature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.signature-list {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.signature-list-item {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 0.5rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.signature-list-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.signature-list-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.signature-list-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.signature-list-details {
|
||||
color: #6c757d;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.signature-list-details small:not(:last-child) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
text-align: right;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.input-with-icon {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-with-icon .icon {
|
||||
position: absolute;
|
||||
left: 0.5rem;
|
||||
pointer-events: none;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.input-with-icon input {
|
||||
padding-left: 2.2rem;
|
||||
}
|
||||
|
||||
.small-file-container-saved {
|
||||
padding-top: 1px;
|
||||
position: relative;
|
||||
row-gap: 1px;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.small-file-container-saved:hover .drag-icon {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* The container must be positioned relative: */
|
||||
.custom-select {
|
||||
position: relative;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.custom-select select {
|
||||
display: none; /*hide original SELECT element: */
|
||||
}
|
||||
|
||||
.select-selected {
|
||||
background-color: inherit;
|
||||
line-height: 30px;
|
||||
font-size: 30px;
|
||||
border-radius: 3rem !important;
|
||||
}
|
||||
|
||||
/* Style the arrow inside the select element: */
|
||||
.select-selected:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
translate: 0 -50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 6px solid transparent;
|
||||
border-color: #fff transparent transparent transparent;
|
||||
}
|
||||
|
||||
/* Point the arrow upwards when the select box is open (active): */
|
||||
.select-selected.select-arrow-active:after {
|
||||
border-color: transparent transparent #fff transparent;
|
||||
translate: 0 -75%;
|
||||
}
|
||||
|
||||
/* style the items (options), including the selected item: */
|
||||
.select-items div,
|
||||
.select-selected {
|
||||
color: inherit;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select-items div {
|
||||
border: 1px solid transparent;
|
||||
border-color: transparent transparent transparent transparent;
|
||||
|
||||
line-height: 30px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
/* Style items (options): */
|
||||
.select-items {
|
||||
position: absolute;
|
||||
background-color: inherit;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 101;
|
||||
border: inherit;
|
||||
}
|
||||
|
||||
/* Hide the items when the select box is closed: */
|
||||
.select-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.select-items div:hover,
|
||||
.same-as-selected {
|
||||
background-color: rgba(54, 54, 54, 0.1);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
.pdf-visual-aid {
|
||||
width: 150px; /* Adjust as needed */
|
||||
height: 200px; /* Adjust as needed */
|
||||
border: 1px solid black; /* Represents the PDF page */
|
||||
position: relative;
|
||||
}
|
||||
.line {
|
||||
position: absolute;
|
||||
background-color: red; /* Line color */
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
.a4container {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
aspect-ratio: 0.707;
|
||||
border: 1px solid #ddd;
|
||||
box-sizing: border-box;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.pageNumber {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1em;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
background-color: #ccc;
|
||||
width: 15%;
|
||||
height: 15%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.pageNumber:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
#myForm {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.selectedPosition {
|
||||
background-color: #0a0;
|
||||
}
|
||||
|
||||
.selectedPosition.selectedHovered {
|
||||
background-color: #006600;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
.tab-group {
|
||||
}
|
||||
|
||||
.tab-container {
|
||||
display: none;
|
||||
}
|
||||
.tab-container.active {
|
||||
display: block;
|
||||
border: 1px solid rgba(var(--base-font-color), 0.25);
|
||||
padding: 15px;
|
||||
}
|
||||
.tab-buttons > button {
|
||||
margin-bottom: -1px;
|
||||
background: 0 0;
|
||||
border: 1px solid transparent;
|
||||
color: rgb(var(--base-font-color));
|
||||
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-top-right-radius: 0.25rem;
|
||||
}
|
||||
.tab-buttons > button.active {
|
||||
background-color: rgb(var(--body-background-color));
|
||||
border-color: rgba(var(--base-font-color), 0.25) rgba(var(--base-font-color), 0.25) rgb(var(--body-background-color));
|
||||
}
|
||||
@@ -0,0 +1,970 @@
|
||||
/* Dark Mode Styles */
|
||||
body,
|
||||
select,
|
||||
textarea {
|
||||
background-color: var(--md-sys-color-surface);
|
||||
color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
|
||||
.transition-theme {
|
||||
transition: background 0.5s ease, color 0.5s ease, border 0.5s ease;
|
||||
}
|
||||
|
||||
|
||||
/*.global-buttons-container input:disabled::-webkit-input-placeholder { !* WebKit browsers *!*/
|
||||
/* color: #98A0AB;*/
|
||||
/*}*/
|
||||
/*.global-buttons-container input:disabled:-moz-placeholder { !* Mozilla Firefox 4 to 18 *!*/
|
||||
/* color: #98A0AB;*/
|
||||
/*}*/
|
||||
/*.global-buttons-container input:disabled::-moz-placeholder { !* Mozilla Firefox 19+ *!*/
|
||||
/* color: #98A0AB;*/
|
||||
/*}*/
|
||||
/*.global-buttons-container input:disabled:-ms-input-placeholder { !* Internet Explorer 10+ *!*/
|
||||
/* color: #98A0AB;*/
|
||||
/*}*/
|
||||
/* Scrollbar */
|
||||
*::-webkit-scrollbar {
|
||||
background: var(--md-sys-color-surface);
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: var(--md-sys-color-surface);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
border-radius: 2rem;
|
||||
background-color: var(--md-sys-color-surface-5);
|
||||
border: 5px solid var(--md-sys-color-surface-5);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-corner {
|
||||
background-color: var(--md-sys-color-surface);
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
.alert {
|
||||
border-radius: 3rem;
|
||||
}
|
||||
|
||||
/* Table */
|
||||
td {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.input-group-append {
|
||||
margin: 0rem 0.5rem !important;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: transparent;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.bg-card {
|
||||
background-color: var(--md-sys-color-surface-5);
|
||||
border-radius: 3rem;
|
||||
padding: 2.5rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1.25rem;
|
||||
border-radius: 2rem;
|
||||
background-color: var(--md-sys-color-surface-5);
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-content {
|
||||
background-color: var(--md-sys-color-surface);
|
||||
border-radius: 2rem;
|
||||
border: transparent;
|
||||
}
|
||||
|
||||
.modal-header,
|
||||
.modal-body,
|
||||
.modal-footer {
|
||||
background-color: var(--md-sys-color-surface-5);
|
||||
|
||||
border: none;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border-radius: 2rem 2rem 0rem 0rem;
|
||||
padding: 1.5rem 2rem 0.5rem;
|
||||
}
|
||||
|
||||
.modal-body{
|
||||
padding: 0.5rem 2rem;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-radius: 0rem 0rem 2rem 2rem;
|
||||
padding: 0.5rem 2rem 1.5rem;
|
||||
}
|
||||
|
||||
/* Icon fill */
|
||||
.material-symbols-rounded {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
/* Navbar Icon*/
|
||||
.nav-icon {
|
||||
color: var(--md-sys-color-surface);
|
||||
}
|
||||
|
||||
.sign .nav-icon,
|
||||
.sign.tool-header-icon {
|
||||
color: var(--md-nav-on-section-color-sign);
|
||||
background-color: var(--md-nav-section-color-sign);
|
||||
}
|
||||
|
||||
.organize .nav-icon,
|
||||
.organize.tool-header-icon {
|
||||
color: var(--md-nav-on-section-color-organize);
|
||||
background-color: var(--md-nav-section-color-organize);
|
||||
}
|
||||
|
||||
.convert .nav-icon,
|
||||
.convert.tool-header-icon {
|
||||
color: var(--md-nav-on-section-color-convert);
|
||||
background-color: var(--md-nav-section-color-convert);
|
||||
}
|
||||
|
||||
.convertto .nav-icon,
|
||||
.convertto.tool-header-icon {
|
||||
color: var(--md-nav-on-section-color-convertto);
|
||||
background-color: var(--md-nav-section-color-convertto);
|
||||
}
|
||||
|
||||
|
||||
.security .nav-icon,
|
||||
.security.tool-header-icon {
|
||||
color: var(--md-nav-on-section-color-security);
|
||||
background-color: var(--md-nav-section-color-security);
|
||||
}
|
||||
|
||||
.other .nav-icon,
|
||||
.other.tool-header-icon {
|
||||
color: var(--md-nav-on-section-color-other);
|
||||
background-color: var(--md-nav-section-color-other);
|
||||
}
|
||||
|
||||
.advance .nav-icon,
|
||||
.advance.tool-header-icon {
|
||||
color: var(--md-nav-on-section-color-advance);
|
||||
background-color: var(--md-nav-section-color-advance);
|
||||
}
|
||||
|
||||
.image .nav-icon,
|
||||
.image.tool-header-icon {
|
||||
color: var(--md-nav-on-section-color-image);
|
||||
background-color: var(--md-nav-section-color-image);
|
||||
}
|
||||
|
||||
.word .nav-icon,
|
||||
.word.tool-header-icon {
|
||||
color: var(--md-nav-on-section-color-word);
|
||||
background-color: var(--md-nav-section-color-word);
|
||||
}
|
||||
|
||||
.ppt .nav-icon,
|
||||
.ppt.tool-header-icon {
|
||||
color: var(--md-nav-on-section-color-ppt);
|
||||
background-color: var(--md-nav-section-color-ppt);
|
||||
}
|
||||
|
||||
/* Tool Page Header*/
|
||||
.tool-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.tool-header .tool-header-icon {
|
||||
margin: 0px 1rem;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
border-radius: 25px;
|
||||
font-size: 3rem;
|
||||
padding: 0.5rem;
|
||||
vertical-align: middle;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-tap-highlight-color: rgb(0 0 0 / 0%);
|
||||
}
|
||||
|
||||
.tool-header .tool-header-text {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 400;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Home Card Colors*/
|
||||
.feature-card .nav-icon {
|
||||
vertical-align: middle;
|
||||
font-size: 2rem !important;
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.9rem;
|
||||
color: var(--md-sys-color-surface);
|
||||
}
|
||||
|
||||
.feature-card .sign .nav-icon {
|
||||
color: var(--md-nav-on-section-color-sign);
|
||||
background-color: var(--md-nav-section-color-sign);
|
||||
}
|
||||
|
||||
.feature-card .organize .nav-icon {
|
||||
color: var(--md-nav-on-section-color-organize);
|
||||
background-color: var(--md-nav-section-color-organize);
|
||||
}
|
||||
|
||||
.feature-card .convert .nav-icon {
|
||||
color: var(--md-nav-on-section-color-convert);
|
||||
background-color: var(--md-nav-section-color-convert);
|
||||
}
|
||||
|
||||
.feature-card .convertto .nav-icon {
|
||||
color: var(--md-nav-on-section-color-convertto);
|
||||
background-color: var(--md-nav-section-color-convertto);
|
||||
}
|
||||
|
||||
.feature-card .security .nav-icon {
|
||||
color: var(--md-nav-on-section-color-security);
|
||||
background-color: var(--md-nav-section-color-security);
|
||||
}
|
||||
|
||||
.feature-card .other .nav-icon {
|
||||
color: var(--md-nav-on-section-color-other);
|
||||
background-color: var(--md-nav-section-color-other);
|
||||
}
|
||||
|
||||
.feature-card .advance .nav-icon {
|
||||
color: var(--md-nav-on-section-color-advance);
|
||||
background-color: var(--md-nav-section-color-advance);
|
||||
}
|
||||
|
||||
.feature-card .image .nav-icon {
|
||||
color: var(--md-nav-on-section-color-image);
|
||||
background-color: var(--md-nav-section-color-image);
|
||||
}
|
||||
|
||||
.feature-card .word .nav-icon {
|
||||
color: var(--md-nav-on-section-color-word);
|
||||
background-color: var(--md-nav-section-color-word);
|
||||
}
|
||||
|
||||
.feature-card .ppt .nav-icon {
|
||||
color: var(--md-nav-on-section-color-ppt);
|
||||
background-color: var(--md-nav-section-color-ppt);
|
||||
}
|
||||
|
||||
/* Buttons Components */
|
||||
.btn {
|
||||
border-radius: 1.25rem;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
width: auto;
|
||||
height: auto;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.btn-close:hover {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
}
|
||||
|
||||
.modal-header .btn-close {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Primary btn */
|
||||
.btn-primary {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
border-color: var(--md-sys-color-primary);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.btn-primary.disabled,
|
||||
.btn-primary:disabled {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
border-color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
border-color: var(--md-sys-color-primary);
|
||||
box-shadow: var(--md-sys-elevation-3) !important;
|
||||
}
|
||||
|
||||
.btn-check:active+.btn-primary,
|
||||
.btn-check:checked+.btn-primary,
|
||||
.btn-primary.active,
|
||||
.btn-primary:active,
|
||||
.show>.btn-primary.dropdown-toggle {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
border-color: var(--md-sys-color-primary);
|
||||
box-shadow: var(--md-sys-elevation-3) !important;
|
||||
}
|
||||
|
||||
.btn-check:focus+.btn-primary,
|
||||
.btn-primary:focus {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
border-color: var(--md-sys-color-primary);
|
||||
box-shadow: var(--md-sys-elevation-3) !important;
|
||||
}
|
||||
|
||||
/* Secondary btn */
|
||||
.btn-secondary {
|
||||
color: var(--md-sys-color-on-secondary);
|
||||
background-color: var(--md-sys-color-secondary);
|
||||
border-color: var(--md-sys-color-secondary);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.btn-secondary.disabled,
|
||||
.btn-secondary:disabled {
|
||||
color: var(--md-sys-color-on-secondary);
|
||||
background-color: var(--md-sys-color-secondary);
|
||||
border-color: var(--md-sys-color-secondary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
color: var(--md-sys-color-on-secondary);
|
||||
background-color: var(--md-sys-color-secondary);
|
||||
border-color: var(--md-sys-color-secondary);
|
||||
box-shadow: var(--md-sys-elevation-3) !important;
|
||||
}
|
||||
|
||||
.btn-check:active+.btn-secondary,
|
||||
.btn-check:checked+.btn-secondary,
|
||||
.btn-secondary.active,
|
||||
.btn-secondary:active,
|
||||
.show>.btn-secondary.dropdown-toggle {
|
||||
color: var(--md-sys-color-on-secondary);
|
||||
background-color: var(--md-sys-color-secondary);
|
||||
border-color: var(--md-sys-color-secondary);
|
||||
box-shadow: var(--md-sys-elevation-3) !important;
|
||||
}
|
||||
|
||||
.btn-check:focus+.btn-secondary,
|
||||
.btn-secondary:focus {
|
||||
color: var(--md-sys-color-on-secondary);
|
||||
background-color: var(--md-sys-color-secondary);
|
||||
border-color: var(--md-sys-color-secondary);
|
||||
box-shadow: var(--md-sys-elevation-3) !important;
|
||||
}
|
||||
|
||||
/* Danger btn */
|
||||
.btn-danger {
|
||||
color: var(--md-sys-color-on-error);
|
||||
background-color: var(--md-sys-color-error);
|
||||
border-color: var(--md-sys-color-error);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.btn-danger.disabled,
|
||||
.btn-danger:disabled {
|
||||
color: var(--md-sys-color-on-error);
|
||||
background-color: var(--md-sys-color-error);
|
||||
border-color: var(--md-sys-color-error);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
color: var(--md-sys-color-on-error);
|
||||
background-color: var(--md-sys-color-error);
|
||||
border-color: var(--md-sys-color-error);
|
||||
box-shadow: var(--md-sys-elevation-3) !important;
|
||||
}
|
||||
|
||||
.btn-check:active+.btn-danger,
|
||||
.btn-check:checked+.btn-danger,
|
||||
.btn-danger.active,
|
||||
.btn-danger:active,
|
||||
.show>.btn-danger.dropdown-toggle {
|
||||
color: var(--md-sys-color-on-error);
|
||||
background-color: var(--md-sys-color-error);
|
||||
border-color: var(--md-sys-color-error);
|
||||
box-shadow: var(--md-sys-elevation-3) !important;
|
||||
}
|
||||
|
||||
.btn-check:focus+.btn-danger,
|
||||
.btn-danger:focus {
|
||||
color: var(--md-sys-color-on-error);
|
||||
background-color: var(--md-sys-color-error);
|
||||
border-color: var(--md-sys-color-error);
|
||||
box-shadow: var(--md-sys-elevation-3) !important;
|
||||
}
|
||||
|
||||
/* Info btn */
|
||||
.btn-info {
|
||||
color: var(--md-sys-color-on-tertiary);
|
||||
background-color: var(--md-sys-color-tertiary);
|
||||
border-color: var(--md-sys-color-tertiary);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.btn-info .disabled,
|
||||
.btn-info:disabled {
|
||||
color: var(--md-sys-color-on-tertiary);
|
||||
background-color: var(--md-sys-color-tertiary);
|
||||
border-color: var(--md-sys-color-tertiary);
|
||||
}
|
||||
|
||||
.btn-info:hover {
|
||||
color: var(--md-sys-color-on-tertiary);
|
||||
background-color: var(--md-sys-color-tertiary);
|
||||
border-color: var(--md-sys-color-tertiary);
|
||||
box-shadow: var(--md-sys-elevation-3) !important;
|
||||
}
|
||||
|
||||
.btn-check:active+.btn-info,
|
||||
.btn-check:checked+.btn-info,
|
||||
.btn-info .active,
|
||||
.btn-info:active,
|
||||
.show>.btn-info.dropdown-toggle {
|
||||
color: var(--md-sys-color-on-tertiary);
|
||||
background-color: var(--md-sys-color-tertiary);
|
||||
border-color: var(--md-sys-color-tertiary);
|
||||
box-shadow: var(--md-sys-elevation-3) !important;
|
||||
}
|
||||
|
||||
.btn-check:focus+.btn-info,
|
||||
.btn-info:focus {
|
||||
color: var(--md-sys-color-on-tertiary);
|
||||
background-color: var(--md-sys-color-tertiary);
|
||||
border-color: var(--md-sys-color-tertiary);
|
||||
box-shadow: var(--md-sys-elevation-3) !important;
|
||||
}
|
||||
|
||||
/* Info btn */
|
||||
.btn-success {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.btn-success:hover,
|
||||
.btn-check:active+.btn-success,
|
||||
.btn-check:checked+.btn-success,
|
||||
.btn-success .active,
|
||||
.btn-success:active,
|
||||
.show>.btn-success.dropdown-toggle,
|
||||
.btn-check:focus+.btn-success,
|
||||
.btn-success:focus {
|
||||
box-shadow: var(--md-sys-elevation-3) !important;
|
||||
}
|
||||
|
||||
/* Warning btn */
|
||||
.btn-warning {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.btn-warning:hover,
|
||||
.btn-check:active+.btn-warning,
|
||||
.btn-check:checked+.btn-warning,
|
||||
.btn-warning .active,
|
||||
.btn-warning:active,
|
||||
.show>.btn-warning.dropdown-toggle,
|
||||
.btn-check:focus+.btn-warning,
|
||||
.btn-warning:focus {
|
||||
box-shadow: var(--md-sys-elevation-3) !important;
|
||||
}
|
||||
|
||||
/* Outline Primary btn */
|
||||
.btn-outline-primary {
|
||||
color: var(--md-sys-color-primary);
|
||||
background-color: transparent;
|
||||
border-color: var(--md-sys-color-primary);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.btn-outline-primary .disabled,
|
||||
.btn-outline-primary:disabled {
|
||||
color: var(--md-sys-color-primary);
|
||||
background-color: transparent;
|
||||
border-color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
border-color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
.btn-check:active+.btn-outline-primary,
|
||||
.btn-check:checked+.btn-outline-primary,
|
||||
.btn-outline-primary .active,
|
||||
.btn-outline-primary:active,
|
||||
.show>.btn-outline-primary.dropdown-toggle {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
border-color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
.btn-check:focus+.btn-outline-primary,
|
||||
.btn-outline-primary:focus {
|
||||
color: var(--md-sys-color-on-primary);
|
||||
background-color: var(--md-sys-color-primary);
|
||||
border-color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
/* Outline Secondary btn */
|
||||
.btn-outline-secondary {
|
||||
color: var(--md-sys-color-secondary);
|
||||
background-color: transparent;
|
||||
border-color: var(--md-sys-color-secondary);
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.btn-outline-secondary .disabled,
|
||||
.btn-outline-secondary:disabled {
|
||||
color: var(--md-sys-color-secondary);
|
||||
background-color: transparent;
|
||||
border-color: var(--md-sys-color-secondary);
|
||||
}
|
||||
|
||||
.btn-outline-secondary:hover {
|
||||
color: var(--md-sys-color-on-secondary);
|
||||
background-color: var(--md-sys-color-secondary);
|
||||
border-color: var(--md-sys-color-secondary);
|
||||
}
|
||||
|
||||
.btn-check:active+.btn-outline-secondary,
|
||||
.btn-check:checked+.btn-outline-secondary,
|
||||
.btn-outline-secondary .active,
|
||||
.btn-outline-secondary:active,
|
||||
.show>.btn-outline-secondary.dropdown-toggle {
|
||||
color: var(--md-sys-color-on-secondary);
|
||||
background-color: var(--md-sys-color-secondary);
|
||||
border-color: var(--md-sys-color-secondary);
|
||||
}
|
||||
|
||||
.btn-check:focus+.btn-outline-secondary,
|
||||
.btn-outline-secondary:focus {
|
||||
color: var(--md-sys-color-on-secondary);
|
||||
background-color: var(--md-sys-color-secondary);
|
||||
border-color: var(--md-sys-color-secondary);
|
||||
}
|
||||
|
||||
/* Disabled btn */
|
||||
.btn.disabled,
|
||||
.btn:disabled,
|
||||
fieldset:disabled .btn {
|
||||
pointer-events: none;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
/* Range Slider */
|
||||
.form-range{
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.form-range:focus::-webkit-slider-thumb {
|
||||
box-shadow: 0 0 0 1px var(--md-sys-color-surface), 0 0 0 .25rem var(--md-sys-color-primary)
|
||||
}
|
||||
|
||||
.form-range:focus::-moz-range-thumb {
|
||||
box-shadow: 0 0 0 1px var(--md-sys-color-surface), 0 0 0 .25rem var(--md-sys-color-primary)
|
||||
}
|
||||
|
||||
.form-range::-webkit-slider-thumb {
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
|
||||
.form-range::-webkit-slider-thumb:active {
|
||||
background-color: var(--md-sys-color-primary)
|
||||
}
|
||||
|
||||
.form-range::-webkit-slider-runnable-track {
|
||||
background-color: var(--md-sys-color-on-primary)
|
||||
}
|
||||
|
||||
.form-range::-moz-range-thumb {
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
|
||||
/* checkbox */
|
||||
.form-check {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin: 0;
|
||||
background-color: var(--md-sys-color-surface);
|
||||
border: 2px solid var(--md-sys-color-outline-variant);
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: var(--md-sys-color-primary);
|
||||
border-color: var(--md-sys-color-outline-variant);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.form-check-input:focus {
|
||||
border-color: var(--md-sys-color-outline-variant);
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 .25rem var(--md-sys-color-outline-variant);
|
||||
}
|
||||
|
||||
.form-check-input:checked[type=checkbox] {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.form-check input[type="checkbox"]:checked+span.material-symbols-rounded {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-check span.material-symbols-rounded {
|
||||
display: none;
|
||||
color: var(--md-sys-color-surface);
|
||||
position: absolute;
|
||||
margin-left: -1.5rem;
|
||||
margin-right: -1.5rem;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-tap-highlight-color: rgb(0 0 0 / 0%);
|
||||
}
|
||||
|
||||
.form-check {
|
||||
min-height: 22px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.form-check > label {
|
||||
padding-left: 29px !important;
|
||||
min-height: 22px;
|
||||
line-height: 22px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
margin-bottom: 0;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
padding-right: 29px !important;
|
||||
}
|
||||
|
||||
.form-check > input:first-child {
|
||||
position: absolute !important;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
background-color: var(--md-sys-state-hover-opacity);
|
||||
border-radius: 50%;
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-ms-appearance: none;
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
outline: none;
|
||||
transform: scale(1.65);
|
||||
-ms-transform: scale(1.65);
|
||||
transition: opacity .3s;
|
||||
}
|
||||
|
||||
.form-check > input:first-child:hover {
|
||||
opacity: 1;
|
||||
transform: scale(1.65);
|
||||
-ms-transform: scale(1.65);
|
||||
}
|
||||
|
||||
.form-check > input:first-child:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.form-check > input:first-child:disabled + label,
|
||||
.form-check > input:first-child:disabled + input[type="hidden"] + label,
|
||||
.form-check > input:first-child:disabled + label::before,
|
||||
.form-check > input:first-child:disabled + input[type="hidden"] + label::before {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
filter: alpha(opacity=65);
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
opacity: .65;
|
||||
}
|
||||
|
||||
.form-check > input:first-child + label::before,
|
||||
.form-check > input:first-child + input[type="hidden"] + label::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid var(--md-sys-color-on-surface-variant);
|
||||
border-radius: 3px;
|
||||
margin-left: -29px;
|
||||
box-sizing: border-box;
|
||||
margin-right: -29px;
|
||||
}
|
||||
|
||||
.form-check > input:first-child:checked + label::after,
|
||||
.form-check > input:first-child:checked + input[type="hidden"] + label::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 7px;
|
||||
height: 10px;
|
||||
border: solid 2px;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
transform: translate(7.75px, 4.5px) rotate(45deg);
|
||||
-ms-transform: translate(7.75px, 4.5px) rotate(45deg);
|
||||
box-sizing: border-box;
|
||||
right: 0;
|
||||
margin-right: 14px;
|
||||
border-bottom-color: var(--md-sys-color-on-primary);
|
||||
border-right-color: var(--md-sys-color-on-primary);
|
||||
}
|
||||
|
||||
.form-check > input:first-child::-ms-check {
|
||||
opacity: 0;
|
||||
border-radius: 50%;
|
||||
background-color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
.form-check > input:first-child:active {
|
||||
transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
opacity: 1;
|
||||
transition: opacity 0s, transform 0s;
|
||||
}
|
||||
|
||||
.form-check > input[type="radio"]:first-child + label::before,
|
||||
.form-check > input[type="radio"]:first-child + input[type="hidden"] + label::before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.form-check > input[type="radio"]:first-child:checked + label::before,
|
||||
.form-check > input[type="radio"]:first-child:checked + input[type="hidden"] + label::before {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.form-check > input[type="radio"]:first-child:checked + label::after,
|
||||
.form-check > input[type="radio"]:first-child:checked + input[type="hidden"] + label::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
transform: none;
|
||||
-ms-transform: none;
|
||||
}
|
||||
|
||||
.form-check > input[type="checkbox"]:first-child:checked + label::after,
|
||||
.form-check > input[type="checkbox"]:first-child:checked + input[type="hidden"] + label::after {
|
||||
width: 8px;
|
||||
height: 14px;
|
||||
transform: translate(7px, 2px) rotate(45deg);
|
||||
-ms-transform: translate(7px, 2px) rotate(45deg);
|
||||
}
|
||||
|
||||
.form-check-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.form-check-inline + .form-check-inline {
|
||||
margin-left: .75rem;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.form-check > input:first-child:checked + label::before,
|
||||
.form-check > input:first-child:checked + input[type="hidden"] + label::before {
|
||||
background-color: var(--md-sys-color-primary);
|
||||
border-color: var(--md-sys-color-primary);
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
textarea.form-control {
|
||||
border-radius: 1.5rem !important;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.form-select,
|
||||
.form-control:disabled,
|
||||
.form-control[readonly] {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
background-color: var(--md-sys-color-surface-container-low);
|
||||
border-color: var(--md-sys-color-outline-variant);
|
||||
border-radius: 3rem !important;
|
||||
}
|
||||
|
||||
.form-control:focus,
|
||||
.form-select:focus {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
background-color: var(--md-sys-color-surface-container-lowest);
|
||||
border-color: var(--md-sys-color-outline-variant);
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 0.25rem var(--md-sys-color-outline-variant);
|
||||
}
|
||||
|
||||
.form-control-color {
|
||||
padding: 0;
|
||||
height: 2.4rem;
|
||||
width: 2.4rem;
|
||||
}
|
||||
|
||||
.form-control input[type="color"] {
|
||||
opacity: 0;
|
||||
height: 2.4rem;
|
||||
width: 2.4rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-control input[type="color"]:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Navbar Components */
|
||||
.navbar-brand {
|
||||
color: var(--md-sys-color-on-surface) !important;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: none !important;
|
||||
padding: 0.5rem 1rem !important;
|
||||
border: 1px transparent;
|
||||
}
|
||||
|
||||
.navbar-nav li {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
color: var(--md-sys-color-on-surface-variant);
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link:focus,
|
||||
.navbar-nav .nav-link:hover {
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
background-color: var(--md-sys-color-surface-3);
|
||||
border-radius: 3rem;
|
||||
font-weight: 500;
|
||||
font-variation-settings: var(--md-sys-icon-fill-1);
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link.active,
|
||||
.navbar-nav .show>.nav-link {
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
background-color: var(--md-sys-color-surface-5);
|
||||
border-radius: 3rem;
|
||||
font-weight: 500;
|
||||
font-variation-settings: var(--md-sys-icon-fill-1);
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
margin: 0 1%;
|
||||
padding: 1.5rem 0;
|
||||
border-radius: 1rem;
|
||||
min-width: 20rem;
|
||||
color: var(--md-sys-color-on-surface);
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
border: 1px solid var(--md-sys-color-surface-5);
|
||||
box-shadow: var(--md-sys-elevation-2);
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
padding: 0.25rem 1rem;
|
||||
border-radius: 3rem;
|
||||
|
||||
}
|
||||
|
||||
.dropdown-item:focus,
|
||||
.dropdown-item:hover {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
background-color: var(--md-sys-color-surface-5);
|
||||
border-radius: 3rem;
|
||||
font-variation-settings: var(--md-sys-icon-fill-1);
|
||||
}
|
||||
.dropdown-item.no-hover:hover,
|
||||
.dropdown-item.no-hover:focus {
|
||||
color: var(--md-sys-color-on-surface) !important;
|
||||
background-color: transparent !important;
|
||||
border-radius: 3rem !important;
|
||||
font-variation-settings: initial !important;
|
||||
}
|
||||
|
||||
.dropdown-item.active,
|
||||
.dropdown-item:active {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
background-color: var(--md-sys-color-surface-5);
|
||||
border-radius: 3rem;
|
||||
font-weight: 500;
|
||||
font-variation-settings: var(--md-sys-icon-fill-1);
|
||||
}
|
||||
|
||||
/* list-group-item */
|
||||
.list-group-item {
|
||||
color: var(--md-sys-color-on-surface);
|
||||
background-color: var(--md-sys-color-surface-5);
|
||||
border: 1px solid var(--md-sys-color-outline-variant);
|
||||
}
|
||||
|
||||
.list-group-item:first-child {
|
||||
border-radius: 1rem 1rem 0rem 0rem;
|
||||
}
|
||||
|
||||
.list-group-item:last-child {
|
||||
border-radius: 0rem 0rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.list-group-item:only-child {
|
||||
border-radius: 1rem 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.list-group-item .btn {
|
||||
padding: .375rem .5rem;
|
||||
}
|
||||
|
||||
/*Alert */
|
||||
.alert-container {
|
||||
padding: 2rem 3rem;
|
||||
border-radius: 3rem;
|
||||
margin: 1rem 0rem 2rem;
|
||||
}
|
||||
|
||||
.alert-header {
|
||||
display: flex !important;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.alert-heading {
|
||||
font-size: calc(1.275rem + .3vw);
|
||||
}
|
||||
|
||||
.alert-dismissible .btn-close {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
color: var(--md-sys-color-on-error-container);
|
||||
background-color: var(--md-sys-color-error-container);
|
||||
border-color: transparent;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
@font-face {
|
||||
font-family: 'Material Symbols Rounded';
|
||||
font-style: normal;
|
||||
font-weight: 100 700;
|
||||
src: url(../../fonts/google-symbol.woff2) format('woff2');
|
||||
}
|
||||
|
||||
|
||||
|
||||
.material-symbols-rounded {
|
||||
font-family: 'Material Symbols Rounded';
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
:where(html, .light-theme, .dark-theme),
|
||||
.tokens,
|
||||
:host {
|
||||
/* Define surface colors based on primary color */
|
||||
--md-sys-color-surface-1: color-mix(in srgb, var(--md-sys-color-primary) 13%, rgba(0, 0, 100, 0.05) 5%);
|
||||
--md-sys-color-surface-2: color-mix(in srgb, var(--md-sys-color-primary) 13%, rgba(0, 0, 255, 0.08) 5%);
|
||||
--md-sys-color-surface-3: color-mix(in srgb, var(--md-sys-color-primary) 13%, rgba(0, 0, 255, 0.11) 5%);
|
||||
--md-sys-color-surface-4: color-mix(in srgb, var(--md-sys-color-primary) 13%, rgba(0, 0, 255, 0.12) 5%);
|
||||
--md-sys-color-surface-5: color-mix(in srgb, var(--md-sys-color-primary) 13%, rgba(0, 0, 255, 0.14) 5%);
|
||||
/* Icon fill */
|
||||
--md-sys-icon-fill-0: 'FILL' 0, 'wght' 500;
|
||||
--md-sys-icon-fill-1: 'FILL' 1, 'wght' 500;
|
||||
/* Hover Color */
|
||||
--md-sys-state-hover-opacity: color-mix(in srgb, var(--md-sys-color-primary), rgba(0, 0, 0, 0) 80%);
|
||||
/* Shadow */
|
||||
--md-sys-color-shadow: #000000;
|
||||
--md-elevation-shadow-color-rgb: 0, 0, 0;
|
||||
--md-elevation-shadow-color: var(--md-elevation-shadow-color-rgb);
|
||||
/* Shadow Elevation*/
|
||||
--md-sys-elevation-0: 0px 0px 0px 0px rgb(var(--md-elevation-shadow-color), 0.2), 0px 0px 0px 0px rgb(var(--md-elevation-shadow-color), 0.14), 0px 0px 0px 0px rgb(var(--md-elevation-shadow-color), 0.12);
|
||||
--md-sys-elevation-1: 0px 3px 1px -2px rgb(var(--md-elevation-shadow-color), 0.2), 0px 2px 2px 0px rgb(var(--md-elevation-shadow-color), 0.14), 0px 1px 5px 0px rgb(var(--md-elevation-shadow-color), 0.12);
|
||||
--md-sys-elevation-2: 0px 2px 4px -1px rgb(var(--md-elevation-shadow-color), 0.2), 0px 4px 5px 0px rgb(var(--md-elevation-shadow-color), 0.14), 0px 1px 10px 0px rgb(var(--md-elevation-shadow-color), 0.12);
|
||||
--md-sys-elevation-3: 0px 5px 5px -3px rgb(var(--md-elevation-shadow-color), 0.2), 0px 8px 10px 1px rgb(var(--md-elevation-shadow-color), 0.14), 0px 3px 14px 2px rgb(var(--md-elevation-shadow-color), 0.12);
|
||||
--md-sys-elevation-4: 0px 5px 5px -3px rgb(var(--md-elevation-shadow-color) / 0.2), 0px 8px 10px 1px rgb(var(--md-elevation-shadow-color), 0.14), 0px 3px 14px 2px rgb(var(--md-elevation-shadow-color), 0.12);
|
||||
--md-sys-elevation-5: 0px 8px 10px -6px rgb(var(--md-elevation-shadow-color), 0.2), 0px 16px 24px 2px rgb(var(--md-elevation-shadow-color), 0.14), 0px 6px 30px 5px rgb(var(--md-elevation-shadow-color), 0.12);
|
||||
}
|
||||
|
||||
.fill {
|
||||
font-variation-settings: var(--md-sys-icon-fill-1);
|
||||
}
|
||||
|
||||
.no-fill {
|
||||
/* font-variation-settings: var(--md-sys-icon-fill-0); */
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
:root {
|
||||
/* Colors */
|
||||
--md-sys-color-primary: rgb(162 201 255);
|
||||
--md-sys-color-surface-tint: rgb(162 201 255);
|
||||
--md-sys-color-on-primary: rgb(0 49 92);
|
||||
--md-sys-color-primary-container: rgb(0 118 208);
|
||||
--md-sys-color-on-primary-container: rgb(255 255 255);
|
||||
--md-sys-color-secondary: rgb(169 201 246);
|
||||
--md-sys-color-on-secondary: rgb(12 49 87);
|
||||
--md-sys-color-secondary-container: rgb(29 62 100);
|
||||
--md-sys-color-on-secondary-container: rgb(180 210 255);
|
||||
--md-sys-color-tertiary: rgb(193 194 248);
|
||||
--md-sys-color-on-tertiary: rgb(42 44 88);
|
||||
--md-sys-color-tertiary-container: rgb(110 112 161);
|
||||
--md-sys-color-on-tertiary-container: rgb(255 255 255);
|
||||
--md-sys-color-error: rgb(255 180 171);
|
||||
--md-sys-color-on-error: rgb(105 0 5);
|
||||
--md-sys-color-error-container: rgb(147 0 10);
|
||||
--md-sys-color-on-error-container: rgb(255 218 214);
|
||||
--md-sys-color-background: rgb(15 20 26);
|
||||
--md-sys-color-on-background: rgb(223 226 235);
|
||||
--md-sys-color-surface: rgb(15 20 26);
|
||||
--md-sys-color-on-surface: rgb(223 226 235);
|
||||
--md-sys-color-surface-variant: rgb(64 71 83);
|
||||
--md-sys-color-on-surface-variant: rgb(192 199 213);
|
||||
--md-sys-color-outline: rgb(138 145 158);
|
||||
--md-sys-color-outline-variant: rgb(64 71 83);
|
||||
--md-sys-color-shadow: rgb(0 0 0);
|
||||
--md-sys-color-scrim: rgb(0 0 0);
|
||||
--md-sys-color-inverse-surface: rgb(223 226 235);
|
||||
--md-sys-color-inverse-on-surface: rgb(45 49 55);
|
||||
--md-sys-color-inverse-primary: rgb(0 96 170);
|
||||
--md-sys-color-primary-fixed: rgb(211 228 255);
|
||||
--md-sys-color-on-primary-fixed: rgb(0 28 56);
|
||||
--md-sys-color-primary-fixed-dim: rgb(162 201 255);
|
||||
--md-sys-color-on-primary-fixed-variant: rgb(0 72 130);
|
||||
--md-sys-color-secondary-fixed: rgb(211 228 255);
|
||||
--md-sys-color-on-secondary-fixed: rgb(0 28 56);
|
||||
--md-sys-color-secondary-fixed-dim: rgb(169 201 246);
|
||||
--md-sys-color-on-secondary-fixed-variant: rgb(40 72 111);
|
||||
--md-sys-color-tertiary-fixed: rgb(225 224 255);
|
||||
--md-sys-color-on-tertiary-fixed: rgb(20 22 66);
|
||||
--md-sys-color-tertiary-fixed-dim: rgb(193 194 248);
|
||||
--md-sys-color-on-tertiary-fixed-variant: rgb(64 67 112);
|
||||
--md-sys-color-surface-dim: rgb(15 20 26);
|
||||
--md-sys-color-surface-bright: rgb(53 57 64);
|
||||
--md-sys-color-surface-container-lowest: rgb(10 14 20);
|
||||
--md-sys-color-surface-container-low: rgb(24 28 34);
|
||||
--md-sys-color-surface-container: rgb(28 32 38);
|
||||
--md-sys-color-surface-container-high: rgb(38 42 49);
|
||||
--md-sys-color-surface-container-highest: rgb(49 53 60);
|
||||
/* Tools Color */
|
||||
--md-nav-section-color-opacity: 1;
|
||||
--md-nav-on-section-color-opacity: 1;
|
||||
--md-nav-section-color-sign: rgba(25, 101, 212, var(--md-nav-section-color-opacity));
|
||||
--md-nav-on-section-color-sign: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
|
||||
--md-nav-section-color-organize: rgba(120, 130, 255, var(--md-nav-section-color-opacity));
|
||||
--md-nav-on-section-color-organize: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
|
||||
--md-nav-section-color-convert: rgba(25, 177, 212, var(--md-nav-section-color-opacity));
|
||||
--md-nav-on-section-color-convert: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
|
||||
--md-nav-section-color-convertto: rgba(104, 220, 149, var(--md-nav-section-color-opacity));
|
||||
--md-nav-on-section-color-convertto: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
|
||||
--md-nav-section-color-security: rgba(255, 120, 146, var(--md-nav-section-color-opacity));
|
||||
--md-nav-on-section-color-security: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
|
||||
--md-nav-section-color-other: rgba(72, 189, 84, var(--md-nav-section-color-opacity));
|
||||
--md-nav-on-section-color-other: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
|
||||
--md-nav-section-color-advance: rgba(245, 84, 84, var(--md-nav-section-color-opacity));
|
||||
--md-nav-on-section-color-advance: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
|
||||
--md-nav-section-color-image: rgba(212, 172, 25, var(--md-nav-section-color-opacity));
|
||||
--md-nav-on-section-color-image: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
|
||||
--md-nav-section-color-word: rgba(61, 153, 245, var(--md-nav-section-color-opacity));
|
||||
--md-nav-on-section-color-word: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
|
||||
--md-nav-section-color-ppt: rgba(255, 128, 0, var(--md-nav-section-color-opacity));
|
||||
--md-nav-on-section-color-ppt: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity));
|
||||
--md-nav-color-on-separator: rgb(24 28 34);
|
||||
--md-nav-background: rgb(15 20 26);
|
||||
--favourite-add: #9ed18c;
|
||||
--favourite-remove: palevioletred;
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
:root {
|
||||
/* Colors */
|
||||
--md-sys-color-primary: rgb(0 96 170);
|
||||
--md-sys-color-surface-tint: rgb(0 96 170);
|
||||
--md-sys-color-on-primary: rgb(255 255 255);
|
||||
--md-sys-color-primary-container: rgb(80 163 255);
|
||||
--md-sys-color-on-primary-container: rgb(0 20 43);
|
||||
--md-sys-color-secondary: rgb(65 96 136);
|
||||
--md-sys-color-on-secondary: rgb(255 255 255);
|
||||
--md-sys-color-secondary-container: rgb(188 215 255);
|
||||
--md-sys-color-on-secondary-container: rgb(32 65 103);
|
||||
--md-sys-color-tertiary: rgb(88 90 138);
|
||||
--md-sys-color-on-tertiary: rgb(255 255 255);
|
||||
--md-sys-color-tertiary-container: rgb(151 153 205);
|
||||
--md-sys-color-on-tertiary-container: rgb(7 9 55);
|
||||
--md-sys-color-error: rgb(186 26 26);
|
||||
--md-sys-color-on-error: rgb(255 255 255);
|
||||
--md-sys-color-error-container: rgb(255 218 214);
|
||||
--md-sys-color-on-error-container: rgb(65 0 2);
|
||||
--md-sys-color-background: rgb(248 249 255);
|
||||
--md-sys-color-on-background: rgb(24 28 34);
|
||||
--md-sys-color-surface: rgb(237, 240, 245);
|
||||
--md-sys-color-on-surface: rgb(0, 1, 1);
|
||||
--md-sys-color-surface-variant: rgb(220 227 241);
|
||||
--md-sys-color-on-surface-variant: rgb(64 71 83);
|
||||
--md-sys-color-outline: rgb(112 119 132);
|
||||
--md-sys-color-outline-variant: rgb(192 199 213);
|
||||
--md-sys-color-shadow: rgb(0 0 0);
|
||||
--md-sys-color-scrim: rgb(0 0 0);
|
||||
--md-sys-color-inverse-surface: rgb(45 49 55);
|
||||
--md-sys-color-inverse-on-surface: rgb(238 241 250);
|
||||
--md-sys-color-inverse-primary: rgb(162 201 255);
|
||||
--md-sys-color-primary-fixed: rgb(211 228 255);
|
||||
--md-sys-color-on-primary-fixed: rgb(0 28 56);
|
||||
--md-sys-color-primary-fixed-dim: rgb(162 201 255);
|
||||
--md-sys-color-on-primary-fixed-variant: rgb(0 72 130);
|
||||
--md-sys-color-secondary-fixed: rgb(211 228 255);
|
||||
--md-sys-color-on-secondary-fixed: rgb(0 28 56);
|
||||
--md-sys-color-secondary-fixed-dim: rgb(169 201 246);
|
||||
--md-sys-color-on-secondary-fixed-variant: rgb(40 72 111);
|
||||
--md-sys-color-tertiary-fixed: rgb(225 224 255);
|
||||
--md-sys-color-on-tertiary-fixed: rgb(20 22 66);
|
||||
--md-sys-color-tertiary-fixed-dim: rgb(193 194 248);
|
||||
--md-sys-color-on-tertiary-fixed-variant: rgb(64 67 112);
|
||||
--md-sys-color-surface-dim: rgb(215 218 227);
|
||||
--md-sys-color-surface-bright: rgb(248 249 255);
|
||||
--md-sys-color-surface-container-lowest: rgb(255 255 255);
|
||||
--md-sys-color-surface-container-low: rgb(241 243 253);
|
||||
--md-sys-color-surface-container: rgb(235 238 247);
|
||||
--md-sys-color-surface-container-high: rgb(229 232 241);
|
||||
--md-sys-color-surface-container-highest: rgb(223 226 235);
|
||||
/* Tools Color */
|
||||
--md-nav-section-color-opacity: 1;
|
||||
--md-nav-on-section-color-opacity: 1;
|
||||
--md-nav-section-color-sign: rgba(25, 101, 212, var(--md-nav-section-color-opacity));
|
||||
--md-nav-on-section-color-sign: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
|
||||
--md-nav-section-color-organize: rgba(120, 130, 255, var(--md-nav-section-color-opacity));
|
||||
--md-nav-on-section-color-organize: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
|
||||
--md-nav-section-color-convert: rgba(25, 177, 212, var(--md-nav-section-color-opacity));
|
||||
--md-nav-on-section-color-convert: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
|
||||
--md-nav-section-color-convertto: rgba(104, 220, 149, var(--md-nav-section-color-opacity));
|
||||
--md-nav-on-section-color-convertto: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
|
||||
--md-nav-section-color-security: rgba(255, 120, 146, var(--md-nav-section-color-opacity));
|
||||
--md-nav-on-section-color-security: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
|
||||
--md-nav-section-color-other: rgba(72, 189, 84, var(--md-nav-section-color-opacity));
|
||||
--md-nav-on-section-color-other: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
|
||||
--md-nav-section-color-advance: rgba(245, 84, 84, var(--md-nav-section-color-opacity));
|
||||
--md-nav-on-section-color-advance: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
|
||||
--md-nav-section-color-image: rgba(212, 172, 25, var(--md-nav-section-color-opacity));
|
||||
--md-nav-on-section-color-image: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
|
||||
--md-nav-section-color-word: rgba(61, 153, 245, var(--md-nav-section-color-opacity));
|
||||
--md-nav-on-section-color-word: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
|
||||
--md-nav-section-color-ppt: rgba(255, 128, 0, var(--md-nav-section-color-opacity));
|
||||
--md-nav-on-section-color-ppt: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity));
|
||||
--md-nav-color-on-separator: rgb(174, 178, 179);
|
||||
--md-nav-background: rgb(248 249 255);
|
||||
--favourite-add: #25ab6c;
|
||||
--favourite-remove: rgb(222, 94, 137);
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
.active-user {
|
||||
color: green;
|
||||
text-shadow: 0 0 5px green;
|
||||
}
|
||||
|
||||
.text-overflow {
|
||||
max-width: 100px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stats-box {
|
||||
background: var(--md-sys-color-outline-variant);
|
||||
padding: .8rem;
|
||||
margin: 10px 0;
|
||||
border-radius: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.chart-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
margin-top: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.filter-checkbox input {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
html[data-bs-theme="light"] .loading {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .loading {
|
||||
background-color: rgba(15, 20, 26, 0.7);
|
||||
}
|
||||
|
||||
/* Add some animation to the refresh button */
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.refreshing .material-symbols-rounded {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 829 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user