Custom Theme for MCGI Bible App
MCGI Bible App by arrowbrave
![Screenshot of MCGI Bible App](https://userstyles.world/preview/13940/0.jpeg)
Details
Authorarrowbrave
LicenseNo License
Categorybible.mcgi.app
Created
Updated
Size4.8 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name MCGI Bible App
@namespace https://bible.mcgi.app/
@version 1.0.0
@description Custom Theme for MCGI Bible App
@author arrowbrave
==/UserStyle== */
@-moz-document domain("bible.mcgi.app") {
@import url('https://fonts.googleapis.com/css?family=Kanit|Vollkorn|Open+Sans|Poppins|Rubik|Merriweather&display=swap');
:root {
--font: 'Rubik';
--bg: url('https://images.pexels.com/photos/8735584/pexels-photo-8735584.jpeg');
--primary: #071b4d;
--secondary: #FFC308;
--info: #6AB2FF;
--success: #ADE46C;
--warning: #FFC666;
--danger: #FF405D;
--white: #FFFFFF;
--greyLight-1: #F5F6FA;
--greyLight-2: #E4E8F1;
--greyLight-3: #D1D7E5;
--greyDark-1: #B1BACE;
--greyDark-2: #7C8493;
--greyDark-3: #484E5A;
--black: #373737;
}
.logomark {
position: fixed;
right: 0;
top: 0;
clip-path: circle(3vw at center);
width: 6vw;
margin: 3vw;
}
body {
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%), rgba(0, 0, 0, 0.7) var(--bg) no-repeat center center fixed;
background-blend-mode: multiply;
background-size: cover;
min-height: 100vh;
font-size: 3vw;
margin: 0;
}
/* Main Content Area */
#content {
text-align: left;
font-weight: bold;
font-size: 4vw;
color: var(--white);
}
/* Set style for verse display */
#versePlace {
margin-top: 10vw;
}
/* Title of the verse */
#title {
font-family: 'Kanit', 'Roboto', sans-serif;
text-align: left;
font-weight: bold;
font-size: 5vw;
letter-spacing: .5vw;
text-transform: uppercase;
text-shadow: 2px 2px 5px rgba(0, 0, 0, .5);
color: var(--secondary);
line-height: 2;
position: absolute;
top: 1vh;
--r: 1.5vw;
--c: var(--primary);
left: calc(.35*var(--r));
padding: 0 .5em calc(2*var(--r));
border-radius: var(--r) 0 0 var(--r);
background: radial-gradient(100% 50% at left, var(--c) 98%, #0000 100%) 100% 0/.5lh calc(100% - 2*var(--r)),
radial-gradient(100% 50% at right, #000 98%, #0000 101%) 0 100%/var(--r) calc(2*var(--r)),
conic-gradient(from 90deg at var(--r) calc(100% - 2*var(--r)), #0000 25%, var(--c) 0) 0 0/calc(101% - .5lh) 100%;
background-repeat: no-repeat;
}
/* Version being used */
#version {
font-family: var(--font), 'Roboto', Garamond, serif;
font-size: 1.2vw;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
font-style: oblique;
color: var(--info);
line-height: 1.1;
letter-spacing: .5vw;
position: absolute;
top: 2.5vh;
left: 3.5vw;
}
/* Verse */
#verse {
font-family: var(--font), 'Roboto', Garamond, serif;
font-size: 5vw;
letter-spacing: .3vw;
color: var(--maintxt);
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#AdvanceSearch,
#BibleSettings,
.btn-group {
display: none;
}
#footer_container,
.container,
#VersionMode,
#bookVersion,
#BibleBG,
#SafeMargin,
#bookOperator,
#txtverse,
#VerseLog {
background: var(--greyDark-3)10;
border: 0 !important;
color: var(--black);
font-size: .5vw;
text-transform: uppercase;
}
.input-group-text {
background: none;
border: 0;
color: var(--black);
font-size: .5vw !important;
text-transform: uppercase;
}
#txtverse:focus,
#bookVersion:focus,
#VerseLog:focus,
#BibleBG:focus,
#SafeMargin:focus,
#bookOperator:focus,
#VersionMode:focus {
color: var(--white);
background: var(--greyDark-3);
outline: transparent !important;
font-size: .7vw !important;
font-family: monospace;
font-weight: bold;
border-color: var(--black);
}
.text-right {
width: 600px !important;
position: fixed;
bottom: -1vw;
right: 0;
}
#VersionModeGroup {
width: 400px !important;
position: fixed;
bottom: -1vw;
left: 0;
}
footer_container {
display: none;
}
}