HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<main style="">
<h1>Free Accessibility OpenSource code</h1>
<p>if you want to upgrade this OSC project, please contact me at ben@benjo.co.il</p>
<p> :) have a nice day</p>
<p style="max-width: 550px; float: left; direction: rtl; text-align: right;">חברים לכבוד חוק הנגישות הכנתי לכם סקין לרכיב נגישות במתנה, אני יודע שלפעמים במהלך פרויקט אין הרבה זמן לבזבז על עבודת HTML CSS "שחורה" :) ו-עיצוב, אז לפעמים משקיעים יותר בתכנות JS ופחות בשאר, אני לא אומר שזה פאר היצירה אבל זה סקין פשוט שמאגד התחלה של אוסף של המנגונונים הבסיסיים כדי להתחיל לתכנת פונקציות ב-JS כדי לחבר אליו ולפרויקט, זה אמור לרצות בעיקר את הלקוח שלכם. העיצוב הוא נקי ובסיסי כדי גם להתאים לנגישות וגם כדי להישאר יחסית ניטרלי כי בכל זאת תוסף נגישות לרוב הוא תמיד "תוסף" תוספת של משהו שלא בטוח שתכננו להוסיף לפרויקט.
מקווה שיצא לכם להשתמש בו , בהמשך אני יכניס בו גם פונקציות פשוטות ב-JS כדי שיעבוד ומי שרוצה להצטרף שיעשה fork.</p>
<div class="freeAcc-component">
<button title="לפתיחת תפריט נגישות" class="freeAcc-openButton freeAcc-ButtonType-A freeAcc-RTL" aria-selected="true">
<svg version="1.1" id="freeAccEyeSVG" aria-hidden="true" class="freeAcc-openButton-img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<path d="M48.7,24.3C48.3,23.9,41,16.1,31,13.7L33,9c0.2-0.5,0-1.2-0.5-1.4c-0.5-0.2-1.2,0-1.4,0.6l-2.2,5.1C27.6,13.1,26.4,13,25,13 C12,13,1.7,23.9,1.3,24.3c-0.4,0.4-0.4,1.1,0,1.5C1.7,26.1,9,33.9,19,36.3L17,41c-0.2,0.5,0,1.2,0.5,1.4c0.1,0.1,0.3,0.1,0.4,0.1 c0.4,0,0.8-0.2,1-0.6l2.2-5.1c1.3,0.2,2.5,0.3,3.9,0.3c0.4,0,0.7,0,1.1,0l0,0l0,0c12.5-0.6,22.2-10.9,22.7-11.3 C49.1,25.3,49.1,24.7,48.7,24.3z M34.2,33l5.6-13.2c1,0.6,1.9,1.2,2.7,1.8l-3.9,9.2C37.2,31.7,35.8,32.4,34.2,33z M27.7,34.8 l7.4-17.4c1,0.4,1.9,0.9,2.8,1.4L31.5,34C30.3,34.3,29,34.6,27.7,34.8z M3.6,25c2.5-2.4,11.3-9.9,21.4-9.9c1,0,2,0.1,3,0.2l-0.8,1.9 c-0.7-0.2-1.4-0.3-2.2-0.3c-4.5,0-8.1,3.7-8.1,8.2c0,3,1.6,5.6,3.9,7l-1,2.3C12,32.5,5.7,27,3.6,25z M22,34.7l8.1-19.1 c1,0.2,2.1,0.6,3.1,0.9l-7.8,18.3c-0.1,0-0.2,0-0.4,0C24,34.9,23,34.9,22,34.7z M41.7,28.9l2.5-5.8c1,0.8,1.7,1.5,2.2,2 C45.6,25.8,43.9,27.3,41.7,28.9z"></path>
</svg><span>נגישות</span></button>
<div class="freeAcc-inner freeAccOpen" aria-expanded="true" aria-label="ברוכים הבאים לרכיב הנגישות" tabindex="0">
<div class="freeAcc-header-container freeAcc-bg-color">
<div class="freeAcc-welcomeYou">
<svg version="1.1" id="freeAccEyeSVG" aria-hidden="true" class="freeAcc-openButton-img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<path d="M48.7,24.3C48.3,23.9,41,16.1,31,13.7L33,9c0.2-0.5,0-1.2-0.5-1.4c-0.5-0.2-1.2,0-1.4,0.6l-2.2,5.1C27.6,13.1,26.4,13,25,13 C12,13,1.7,23.9,1.3,24.3c-0.4,0.4-0.4,1.1,0,1.5C1.7,26.1,9,33.9,19,36.3L17,41c-0.2,0.5,0,1.2,0.5,1.4c0.1,0.1,0.3,0.1,0.4,0.1 c0.4,0,0.8-0.2,1-0.6l2.2-5.1c1.3,0.2,2.5,0.3,3.9,0.3c0.4,0,0.7,0,1.1,0l0,0l0,0c12.5-0.6,22.2-10.9,22.7-11.3 C49.1,25.3,49.1,24.7,48.7,24.3z M34.2,33l5.6-13.2c1,0.6,1.9,1.2,2.7,1.8l-3.9,9.2C37.2,31.7,35.8,32.4,34.2,33z M27.7,34.8 l7.4-17.4c1,0.4,1.9,0.9,2.8,1.4L31.5,34C30.3,34.3,29,34.6,27.7,34.8z M3.6,25c2.5-2.4,11.3-9.9,21.4-9.9c1,0,2,0.1,3,0.2l-0.8,1.9 c-0.7-0.2-1.4-0.3-2.2-0.3c-4.5,0-8.1,3.7-8.1,8.2c0,3,1.6,5.6,3.9,7l-1,2.3C12,32.5,5.7,27,3.6,25z M22,34.7l8.1-19.1 c1,0.2,2.1,0.6,3.1,0.9l-7.8,18.3c-0.1,0-0.2,0-0.4,0C24,34.9,23,34.9,22,34.7z M41.7,28.9l2.5-5.8c1,0.8,1.7,1.5,2.2,2 C45.6,25.8,43.9,27.3,41.7,28.9z"></path>
</svg><span>נגישות אתרים</span></div>
<button class="freeAcc-closeButton freeAcc-ButtonType-B freeAcc-RTL" title="סוגר תפריט נגישות"><span aria-hidden="true">×</span> סגור</button>
</div>
<div class="freeAcc-menu" role="navigation">
<ul role="menu" aria-label="תפריט שינוי גודל גופן" class="freeAcc-menuTypeA">
<li role="menuitem">
<button class="freeAcc-bigText freeAcc-ButtonType-C" title="מגדיל את הטקסט בעמוד">
<svg version="1.1" id="freeAccBigTextSVG" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 34" enable-background="new 0 0 50 34" xml:space="preserve">
<g>
<polygon points="42.4,0.8 34.7,6.8 37,8.6 40.2,6 40.2,13 44.5,13 44.5,6 47.8,8.6 50,6.8 "></polygon>
<polygon points="42.4,33.2 50,27.3 47.8,25.6 44.5,28.1 44.5,21.2 40.2,21.2 40.2,28.1 37,25.6 34.7,27.3 "></polygon>
<path d="M30.1,33.2H23L10.7,15.8c-1.9,1-3,3.1-3.4,6.2L6,33.2H0L1.3,22c0.6-5.2,2.7-8.7,6.3-10.5L0.1,1h7.1l10.3,14.4 c1.3-0.8,2.1-1.8,2.6-2.8s0.9-2.8,1.2-5.1L22.1,1h6l-0.7,6.6c-0.3,2.8-1,5.2-1.9,7c-1,1.8-2.6,3.5-5,4.9L30.1,33.2z"></path>
</g>
</svg><span class="freeAcc-spanType-A">הגדלת טקסט</span></button>
</li>
<li role="menuitem" class="freeAcc-borderStyle">
<button class="freeAcc-smallText freeAcc-ButtonType-C" title="מקטין את הטקסט בעמוד">
<svg version="1.1" id="freeAccSmallTextSVG" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 34" enable-background="new 0 0 50 34" xml:space="preserve">
<g>
<polygon points="42.4,14.9 50,8.9 47.8,7.2 44.5,9.7 44.5,2.8 40.2,2.8 40.2,9.7 37,7.2 34.7,8.9 "></polygon>
<polygon points="42.4,19.1 34.7,25 37,26.7 40.2,24.2 40.2,31.1 44.5,31.1 44.5,24.2 47.8,26.7 50,25 "></polygon>
<path d="M30.1,33.1H23L10.7,15.7c-1.9,1-3,3.1-3.4,6.2L6,33.1H0L1.3,22c0.6-5.2,2.7-8.7,6.3-10.5L0.1,0.9h7.1l10.3,14.4 c1.3-0.8,2.1-1.8,2.6-2.8s0.9-2.8,1.2-5.1l0.8-6.5h6l-0.7,6.6c-0.3,2.8-1,5.2-1.9,7c-1,1.8-2.6,3.5-5,4.9L30.1,33.1z"></path>
</g>
</svg><span class="freeAcc-spanType-A">הקטנת טקסט</span></button>
</li>
<li role="menuitem">
<button class="freeAcc-disableText freeAcc-ButtonType-C" title="מאפס גודל טקסט לגודל המקורי">
<svg version="1.1" id="freeAccTextDefultSVG" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 34" enable-background="new 0 0 50 34" xml:space="preserve">
<g>
<polygon points="42.4,19.9 50,13.9 47.8,12.2 44.5,14.7 44.5,7.8 40.2,7.8 40.2,14.7 37,12.2 34.7,13.9 "></polygon>
<polygon points="42.4,14.1 34.7,20 37,21.7 40.2,19.2 40.2,26.1 44.5,26.1 44.5,19.2 47.8,21.7 50,20 "></polygon>
<path d="M30.1,33.1H23L10.7,15.7c-1.9,1-3,3.1-3.4,6.2L6,33.1H0L1.3,22c0.6-5.2,2.7-8.7,6.3-10.5L0.1,0.9h7.1l10.3,14.4 c1.3-0.8,2.1-1.8,2.6-2.8s0.9-2.8,1.2-5.1l0.8-6.5h6l-0.7,6.6c-0.3,2.8-1,5.2-1.9,7c-1,1.8-2.6,3.5-5,4.9L30.1,33.1z"></path>
</g>
</svg><span class="freeAcc-spanType-A">איפוס טקסט</span></button>
</li>
</ul>
<ul role="menu" aria-label="תפריט שינוי צבע רקע" class="freeAcc-menuTypeA">
<li role="menuitem">
<button class="freeAcc-darkContrast freeAcc-ButtonType-C" title="משנה את צבעי הרקע והטקסט לצורך התאמה לניגודיות כהה">
<svg version="1.1" id="freeAccDarkColorSVG" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<g id="_x31_4_3_">
<path d="M49,24.6c-0.1-0.2-2.7-3.8-7-7.4c-2.5-2.2-5.1-3.9-7.6-5.1C31.2,10.5,28,9.7,25,9.7c-3.1,0-6.2,0.8-9.4,2.4 c-2.5,1.2-5.1,3-7.6,5.1c-4.2,3.7-6.9,7.3-7,7.4c-0.2,0.2-0.2,0.5,0,0.8c0.1,0.2,2.7,3.8,7,7.4c2.5,2.2,5.1,3.9,7.6,5.1 c3.2,1.6,6.4,2.4,9.4,2.4c3.1,0,6.2-0.8,9.4-2.4c2.5-1.2,5.1-3,7.6-5.1c4.2-3.7,6.9-7.3,7-7.4C49.1,25.2,49.1,24.8,49,24.6z M25,16 c4.9,0,9,4,9,9s-4,9-9,9s-9-4-9-9S20.1,16,25,16z"></path>
<circle cx="25" cy="25" r="4"></circle>
</g>
</svg><span class="freeAcc-spanType-A">ניגודיות כהה</span></button>
</li>
<li role="menuitem" class="freeAcc-borderStyle">
<button class="freeAcc-brightContrast freeAcc-ButtonType-C" title="משנה את צבעי הרקע והטקסט לצורך התאמה לניגודיות בהירה">
<svg version="1.1" id="freeAccBrightColorSVG" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 34" enable-background="new 0 0 50 34" xml:space="preserve">
<g>
<path d="M49.4,16.4c-0.1-0.2-2.7-3.9-7.1-7.6C40,6.8,37.4,5,34.6,3.6c-3.3-1.6-6.5-2.5-9.6-2.5c-3.2,0-6.3,0.8-9.6,2.5 C12.6,5,10,6.8,7.7,8.8c-1.7,1.5-4.3,4-6.9,7.3l-0.1,0.1c-0.4,0.4-0.4,0.9-0.1,1.4c0.1,0.2,2.8,3.9,7.1,7.6c2.4,2.2,5,3.9,7.7,5.2 c3.3,1.6,6.5,2.5,9.6,2.5c3.2,0,6.3-0.8,9.6-2.4c2.4-1.2,5-2.9,7.7-5.2c1.7-1.5,4.3-4,6.9-7.3l0.2-0.2 C49.6,17.3,49.6,16.7,49.4,16.4z M48.6,17.1c0,0-0.1,0.1-0.1,0.1c-2.6,3.2-5.1,5.7-6.8,7.2c-2.6,2.2-5.2,3.9-7.5,5 C31,31,28,31.8,25,31.8c-3,0-6.1-0.8-9.2-2.4c-2.6-1.2-5.1-2.9-7.5-5c-4.1-3.4-6.7-6.9-6.9-7.3C1.4,17,1.3,17,1.4,17 c0,0,0.1-0.1,0.2-0.2c2.6-3.2,5.1-5.7,6.8-7.2c2.3-2,4.8-3.7,7.5-5.1C19,2.9,22,2.1,25,2.1c3,0,6.1,0.8,9.2,2.3 c2.7,1.4,5.2,3.1,7.5,5.1c4.1,3.4,6.6,6.8,6.9,7.2C48.6,16.9,48.6,17.1,48.6,17.1z"></path>
<path d="M25,7.5c-5.2,0-9.5,4.3-9.5,9.5s4.3,9.5,9.5,9.5s9.5-4.3,9.5-9.5S30.2,7.5,25,7.5z M25,25.5c-4.7,0-8.5-3.8-8.5-8.5 c0-4.7,3.8-8.5,8.5-8.5c4.7,0,8.5,3.8,8.5,8.5C33.5,21.7,29.7,25.5,25,25.5z"></path>
<path d="M25,12.5c-2.5,0-4.5,2-4.5,4.5s2,4.5,4.5,4.5s4.5-2,4.5-4.5S27.5,12.5,25,12.5z M25,20.5c-1.9,0-3.5-1.6-3.5-3.5 s1.6-3.5,3.5-3.5s3.5,1.6,3.5,3.5S26.9,20.5,25,20.5z"></path>
</g>
</svg><span class="freeAcc-spanType-A">ניגודיות בהירה</span></button>
</li>
<li role="menuitem">
<button class="freeAcc-bigText freeAcc-ButtonType-C" title="משנה את צבעי הרקע והטקסט לצבעי ברירת המחדל">
<svg version="1.1" id="freeAccDefultColorSVG" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<path d="M49.9,24.6c-0.1-0.2-2.8-3.9-7.2-7.7c-1.4-1.2-2.9-2.3-4.3-3.3l6.5-6.5l-2-2l-7,7c-0.4-0.2-0.7-0.4-1.1-0.6 c-3.3-1.6-6.6-2.4-9.8-2.4s-6.5,0.8-9.8,2.4c-2.6,1.3-5.3,3.1-7.9,5.3c-4.4,3.8-7.1,7.6-7.2,7.7c-0.2,0.2-0.2,0.6,0,0.8 c0.1,0.2,2.8,3.9,7.2,7.7c1.4,1.2,2.9,2.3,4.3,3.3l-6.5,6.5l2,2l7-7c0.4,0.2,0.7,0.4,1.1,0.6c3.3,1.6,6.6,2.4,9.8,2.4 s6.5-0.8,9.8-2.4c2.6-1.3,5.3-3.1,7.9-5.3c4.4-3.8,7.1-7.6,7.2-7.7C50,25.2,50,24.8,49.9,24.6z M15.7,25c0-5.1,4.2-9.3,9.3-9.3 c2.1,0,4,0.7,5.5,1.8l-3.8,3.8c-0.5-0.3-1.1-0.4-1.8-0.4c-2.3,0-4.1,1.8-4.1,4.1c0,0.6,0.2,1.2,0.4,1.8l-3.8,3.8 C16.4,29,15.7,27.1,15.7,25z M25,34.3c-2.1,0-4-0.7-5.5-1.8l3.8-3.8c0.5,0.3,1.1,0.4,1.8,0.4c2.3,0,4.1-1.8,4.1-4.1 c0-0.6-0.2-1.2-0.4-1.8l3.8-3.8c1.1,1.5,1.8,3.5,1.8,5.5C34.3,30.1,30.1,34.3,25,34.3z"></path>
</svg><span class="freeAcc-spanType-A">איפוס ניגודיות</span></button>
</li>
</ul>
<ul role="menu" aria-label="תפריט שינויים נוספים" class="freeAcc-menuTypeB">
<li role="menuitem">
<button class="freeAcc-boldHeadline freeAcc-ButtonType-D">הדגשת כותרות</button>
</li>
<li role="menuitem">
<button class="freeAcc-boldLinks freeAcc-ButtonType-D">הדגשת קישורים</button>
</li>
<li role="menuitem">
<button class="freeAcc-bigText freeAcc-ButtonType-D">שנה לגופן נגיש/קריא</button>
</li>
</ul>
<div class="freeAccCredit-container">
<ul role="menu" aria-label="תפריט משוב והצהרת נגישות" class="freeAcc-menuTypeC">
<li role="menuitem">
<button class="freeAcc-DisableAll freeAcc-ButtonType-F">בטל/אפס נגישות</button>
</li>
<li role="menuitem">
<button class="freeAcc-goToAccPage freeAcc-ButtonType-E">הצהרת נגישות<span class="freeAcc-iconFloat" aria-hidden="true">»</span></button>
</li>
<li role="menuitem">
<button class="freeAcc-reportProblem freeAcc-ButtonType-E">דווח על בעיית נגישות<span class="freeAcc-iconFloat" aria-hidden="true">»</span></button>
</li>
</ul><a href="https://codepen.io/benjokoren/pen/QqyYaR" class="freeAcc-credit">Accessibility OpenSource</a></div>
</div>
</div>
</div>
<main>
/* start of component style RTL */
main {
direction: rtl;
}
h1, p {
text-align: left;
font-family: arial;
}
.freeAcc-component a, .freeAcc-component button, .freeAcc-component a:hover, .freeAcc-component button:hover, .freeAcc-component a:focus, .freeAcc-component button:focus, button[class^="freeAcc"], button[class^="freeAcc"]:hover, button[class^="freeAcc"]:focus, span.freeAccBtnName, .freeAcc-component span, .freeAcc-component svg {
transition: all .3s ease-in;
}
.freeAcc-component button {
cursor: pointer;
border: none;
background-color: transparent;
margin: 0px;
padding: 0px;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
}
button.freeAcc-ButtonType-A {
background-color: #000;
}
.freeAcc-bg-color {
background-color: #000;
}
button.freeAcc-openButton {
font-size: 24px;
color: #fff;
padding: 3px 15px;
line-height: 100%;
position: fixed;
z-index: 2147483645;
right: 0;
top: 0;
}
button.freeAcc-openButton:focus {
outline: 2px solid red;
}
button.freeAcc-openButton svg {
width: 26px;
fill: #fff;
margin-left: 6px;
}
button.freeAcc-openButton:hover > span, button.freeAcc-openButton:hover > svg, button.freeAcc-openButton:focus > span, button.freeAcc-openButton:focus > svg {
color: #fff900;
fill: #fff900;
}
button.freeAcc-ButtonType-D {
background-color: #dedede;
font-size: 20px;
width: 100%;
padding: 5px;
margin: 0px 0px 5px 0px;
border: 1px solid #cecece;
border-radius: 3px;
box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.65);
}
button.freeAcc-closeButton {
color: #ffffff;
font-size: 18px;
padding: 1px 10px;
line-height: 27px;
float: left;
}
button.freeAcc-closeButton span {
font-size: 26px;
position: relative;
top: 4px;
}
.freeAcc-header-container {
width: 300px;
position: absolute;
left: 0px;
top: 0px;
min-height: 33px;
}
.freeAcc-menu {
width: 300px;
}
button.freeAcc-openButton span {
position: relative;
top: -5px;
}
img.freeAcc-openButton-img {
width: 30px;
}
.freeAcc-welcomeYou {
color: #ffffff;
font-size: 18px;
padding: 1px 10px;
line-height: 27px;
float: right;
}
.freeAcc-welcomeYou svg {
width: 26px;
fill: #fff;
position: relative;
margin-left: 5px;
top: 3px;
}
.freeAcc-welcomeYou span {
display: inline-block;
position: relative;
top: -4px;
}
.freeAcc-welcomeYou img {
position: relative;
top: -1px;
}
.freeAcc-inner {
width: 0px;
height: 100%;
padding: 45px 0px;
background-color: #f9f9f9;
border: 2px solid #000000;
text-align: center;
position: fixed;
right: 0;
top: 0;
box-sizing: border-box;
box-shadow: 5px 0px 15px 0px rgba(0,0,0,0.75);
z-index: 2147483647;
overflow: hidden;
opacity: 0;
transition: all 0.5s ease;
}
.freeAccOpen {
width: 300px;
opacity: 1;
}
.freeAcc-component {
font-family: arial;
}
ul.freeAcc-menuTypeA {
margin: 0px;
padding: 0px 0px 5px 0px;
list-style: none;
display: inline-block;
border-bottom: 1px solid #c0c0c0;
width: 90%;
}
ul.freeAcc-menuTypeB {
margin: 0px;
padding: 0px 0px 5px 0px;
list-style: none;
display: inline-block;
width: 90%;
}
ul.freeAcc-menuTypeA li {
padding: 5px 0px;
margin: 4px;
float: right;
}
button.freeAcc-ButtonType-C {
padding: 5px;
}
.freeAcc-ButtonType-C svg {
width: 50px;
height: 40px;
}
li.freeAcc-borderStyle {
border-right: 1px solid #c0c0c0;
border-left: 1px solid #c0c0c0;
}
img.freeAcc-img {
width: 40px;
}
span.freeAcc-spanType-A {
font-size: 12px;
display: block;
}
span.freeAcc-spanType-A {
font-size: 13px;
display: block;
}
.freeAcc-RTL {
text-align: right;
direction: rtl;
}
.freeAccCredit-container {
position: absolute;
bottom: 0;
width: 300px;
padding: 0px;
}
ul.freeAcc-menuTypeC {
margin: 0px;
padding: 0px;
list-style: none;
display: inline-block;
width: 100%;
}
button.freeAcc-DisableAll {
width: 100%;
background-color: #ff3737;
color: #fff;
font-size: 20px;
padding: 10px;
position: relative;
z-index: 1;
}
button.freeAcc-DisableAll:hover, button.freeAcc-DisableAll:focus {
outline: 3px solid #000;
background-color: #ba0000;
}
button.freeAcc-ButtonType-E {
text-align: right;
width: 100%;
padding: 10px 15px;
border-bottom: 2px solid #000;
font-size: 16px;
background-color: #fff;
position: relative;
}
button.freeAcc-ButtonType-E:hover, button.freeAcc-ButtonType-E:focus {
background-color: #353535;
color: #fff;
outline: 3px solid #000;
}
span.freeAcc-iconFloat {
position: absolute;
left: 10px;
top: 9px;
background-color: #000;
color: #fff;
width: 26px;
height: 26px;
text-align: center;
border-radius: 50px;
font-size: 24px;
line-height: 22px;
}
a.freeAcc-credit {
display: block;
width: 100%;
background-color: #000;
margin: 0px;
color: #ffffff;
padding: 5px 10px;
font-size: 14px;
}
a.freeAcc-credit:hover {
text-decoration: underline;
color: #fff900;
}
button.freeAcc-ButtonType-B:hover {
color: #fff900;
}
button.freeAcc-ButtonType-B:focus {
outline: 3px dotted #fff;
color: #fff900;
}
button.freeAcc-ButtonType-C:hover {
background-color: #eeeeee;
outline: 1px solid #cccccc;
}
button.freeAcc-ButtonType-C:focus {
outline: 3px dotted #000;
background-color: #eeeeee;
}
button.freeAcc-ButtonType-D:hover {
background-color: #fff;
}
button.freeAcc-ButtonType-D:focus {
outline: 3px solid #000;
background-color: #fff;
}
/* end of component style RTL */
/* start of costume elments add to site */
span.freeAccBtnName {
overflow: hidden;
width: 0px;
height: 20px;
display: block;
position: absolute;
padding: 0;
top: 6px;
left: 29px;
background-color: #000;
z-index: 0;
text-align: right;
font-size: 14px;
font-weight: 100;
line-height: 14px;
border-radius: 0px 10px 10px 0px;
opacity: 0;
}
span.freeAccBtnName.freeAccShow {
padding: 3px 10px;
width: 100px;
opacity: 1;
}
svg#freeAccShowSVG, svg#freeAccHideSVG {
width: 23px;
}
svg#freeAccStopSVG {
width: 12px;
}
svg#freeAccPlaySVG {
width: 12px;
left: 3px;
}
button.freeAccBtnStyle:hover > svg.freeAccSVG, button.freeAccBtnStyle:focus > svg.freeAccSVG{
fill: #fff900;
}
button.freeAccBtnStyle {
position: absolute;
z-index: 1;
background-color: #000;
border: 0px;
width: 32px;
height: 32px;
border-radius: 50px;
text-align: center;
color: #ffffff;
font-size: 16px;
line-height: 20px;
padding: 0px;
margin: 0px;
}
button.freeAccBtnStyle:hover, button.freeAccBtnStyle:focus {
color: #fff900;
}
button.freeAccVideo {
left: 15px;
bottom: 15px;
}
button.freeAccSlider {
left: 15px;
top: 0px;
}
button.freeAccLogoSlider {
left: 15px;
top: -75px;
}
button.freeAccTeamSlider {
left: 15px;
top: -76px;
}
svg.freeAccSVG {
fill: #fff;
transition: all 0.5s ease-in-out;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
/* this website spasific costum changes after acc mode */
ul.freeAccSliderReplace1, ul.freeAccLogoSliderReplace {
list-style: none;
padding: 0px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
max-width: 1120px;
margin: 0px auto;
}
ul.freeAccTeamSliderReplace {
list-style: none;
padding: 0px;
display: flex;
justify-content: center;
flex-wrap: wrap;
max-width: 1120px;
margin: 0px auto;
}
ul.freeAccSliderReplace1 li, ul.freeAccLogoSliderReplace li {
max-width: 280px;
padding: 0px 15px 15px 0px;
}
ul.freeAccSliderReplace1 li img {
width: 100%;
}
ul.freeAccSliderReplace1 li h3 {
margin: 5px 0px 0px 0px;
padding: 0px;
line-height: 30px;
color: #000;
font-size: 22px;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
}
ul.freeAccSliderReplace1 li p {
font-size: 14px;
line-height: 18px;
color: #000000;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
}
ul.freeAccTeamSliderReplace > li > .member h3, ul.freeAccTeamSliderReplace > li > .member > .bottomember, ul.freeAccTeamSliderReplace > li > .member h4 {
opacity: 1;
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
}
ul.freeAccTeamSliderReplace > li > .member h3 {
font-size: 18px;
}
ul.freeAccTeamSliderReplace > li > .member h4 {
font-size: 16px;
}
@media screen and (max-width: 670px) {
button.freeAccVideo {
display: none;
}
ul.freeAccSliderReplace1 {
width: 300px;
}
button.freeAccSlider {
left: 45px;
top: -50px;
z-index: 2;
}
button.freeAccLogoSlider {
left: -15px;
}
}
$(document).on('click', ".freeAcc-openButton", function() {
$(".freeAcc-inner").toggleClass("freeAccOpen").attr('aria-expanded', 'true').attr('tabindex', '0');;
$(this).attr('aria-selected', 'true');
});
$(document).on('click', ".freeAcc-closeButton", function() {
$(".freeAcc-inner").toggleClass("freeAccOpen").attr('aria-expanded', 'false').attr('tabindex', '-1');
$(".freeAcc-openButton").attr('aria-selected', 'false');
});
Also see: Tab Triggers