ViewerOverrideCssStyles.cs
//
// This code is part of GrapeCity Documents for PDF samples.
// Copyright (c) GrapeCity, Inc. All rights reserved.
//
using System.IO;
using GrapeCity.Documents.Pdf;

namespace GcPdfWeb.Samples
{

    // This sample shows how to override default GcPdfViewer's CSS Styles.
    //
    // You can add internal CSS to your HTML document by using a <style> element in the <head> section.
    // Here's an example:
    // <head>
    //   <style> 
    //     body .gc-menu__btn-container { background-color: #999999; }                                                         
    //     body .gc-btn--accent { background-color: #000000; }                                                                 
    //     body .gc-btn--accent:not([disabled]):not(.gc-btn--disabled):hover { background-color: #000000; }                    
    //     body .gc-viewer-host .gc-viewer .gcv-menu .gc-menu__panel-toggle--active .gc-btn { background-color: #999999; }     
    //     body .gc-btn[disabled]  { opacity: 0.7; }                                                                           
    //     body .gc-accent-color { color: #7914a2; }                                                                           
    //     body .gc-menu__panel-header { color: #999999; }                                                                     
    //     body .gc-pdfthumbnails-outer .gc-pdfthumbnails-inner .thumbnail .label { color: #999999; }                          
    //     body .gc-pdfthumbnails-outer .gc-pdfthumbnails-inner .thumbnail.selected .selectdecor { background-color: #000000; }
    //     body .gc-pdfthumbnails-outer .gc-pdfthumbnails-inner .thumbnail:hover .selectdecor { background-color: #7914a2; }   
    //     body .gcv-page-input__text { color: #7914a2; }";
    //   </style>
    //   <script type = "text/javascript" src="gcpdfviewer.js"></script></body>
    // </head>
    //
    // Or you can add an external style sheet to define the CSS styles for many HTML pages, 
    // in this case add your styles to an external stylesheet file and include stylesheet file as follow:
    // <head>
    //   <link rel = "stylesheet" href="custom_style.css">
    //   <script type = "text/javascript" src="gcpdfviewer.js"></script></body>
    // </head>
    public class ViewerOverrideCssStyles
    {
        public void CreatePDF(Stream stream)
        {
            GcPdfDocument doc = new GcPdfDocument();
            using (var fs = new FileStream(Path.Combine("Resources", "PDFs", "CompleteJavaScriptBook.pdf"), FileMode.Open, FileAccess.Read))
            {
                doc.Load(fs);
                doc.Save(stream);
            }
        }

        // don't put line breaks and commas here:
        private const string STYLE_CODE = @"body .gc-menu__btn-container { background-color: #999999; }" +
            "body .gc-btn--accent { background-color: #000000; } " +
            "body .gc-btn--accent:not([disabled]):not(.gc-btn--disabled):hover { background-color: #000000; }" +
            "body .gc-viewer-host .gc-viewer .gcv-menu .gc-menu__panel-toggle--active .gc-btn { background-color: #999999; }" +
            "body .gc-btn[disabled]  { opacity: 0.7; }" +
            "body .gc-accent-color { color: #7914a2; }" +
            "body .gc-menu__panel-header { color: #999999; }" +
            "body .gc-pdfthumbnails-outer .gc-pdfthumbnails-inner .thumbnail .label { color: #999999; }" +
            "body .gc-pdfthumbnails-outer .gc-pdfthumbnails-inner .thumbnail.selected .selectdecor { background-color: #000000; }" +
            "body .gc-pdfthumbnails-outer .gc-pdfthumbnails-inner .thumbnail:hover .selectdecor { background-color: #7914a2; }" +
            "body .gcv-page-input__text { color: #7914a2; }";
        
        public const string JS_CODE = @"

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '"+ STYLE_CODE + @"';
document.getElementsByTagName('head')[0].appendChild(style);

function createPdfViewer(selector, baseOptions) {
    var options = baseOptions || {};    
    var viewer = new GcPdfViewer(selector, options);
    viewer.addDefaultPanels();
    return viewer;
}
";
    }
}