@phoenix-plugin-registry/brackets-markdown-preview/styles/extension.css

Markdown live preview incl. detached window, code syntax highlighting, output themes, adaptive preview width, graphical checkboxes, activation on start...

/********************************************************************
 * Preview Panel formating instructions
********************************************************************/

/* Toolbar icon */
#brackets-markdown-preview-icon {
    background-image: url(images/markdown-sprite.svg);
}

#brackets-markdown-preview-icon.active {
    background-position: 0 -24px !important;
}

/* Preview panel */
#brackets-markdown-preview-panel {
    position: relative;
}

/* Preview panel content iFrame */
#brackets-markdown-preview-frame {
    border: none;
}

/* Toggle configuration panel icon */
#brackets-markdown-preview-settings-icon {
    position: absolute;
    cursor: pointer;
    top: 8px;
    right: 31px;
    width: 20px;
    height: 20px;
    background-image: url(images/gear.svg);
    background-size: contain;
    padding: 0;
    opacity: 0.05;
    transition-property: opacity;
    transition-duration: .2s;
    -webkit-filter: drop-shadow(0 0 2px #fff);
    filter: drop-shadow(0 0 1px #fff);
}

#brackets-markdown-preview-panel:hover #brackets-markdown-preview-settings-icon {
    opacity: 0.8;
}

/* Spinner indicator displayed while a long convertion operation is lasting for a long time */
#brackets-markdown-preview-spinner {
    position: absolute;
    cursor: pointer;
    top: 8px;
    right: 180px;
    width: 20px;
    height: 20px;
    background-image: url(images/spinner.gif);
    background-size: contain;
    padding: 0;
    display: none;
}

/********************************************************************
 * User Settings (Dialog) formating instructions 
 * for the "brackets markdown preview" extension
 *
 * "bmdps" stands for "brackets-markdown-preview-settings",
 * hence all instructions starting with "bmdps" belong to the 
 * settings dialog
 * 
 * NOTE: Because of the way iFrame/brackets is managing some styles, 
 *       some style modifications are also applied on the settings 
 *       panel within the file 'ExPreviewPanel.js' in the 
 *       function '_showSettingsDialog(...)'.
********************************************************************/

#bmdps-panel {
    position: absolute;
    z-index: 20000;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 10px #ccc;
    width: 400px;
    height: 250px;
    overflow-y: visible;
}

#bmdps-panel .modal-header {
    padding: 0px;
}

#bmdps-panel .nav-tabs>.active>a {
    color: chocolate;
    background-color: rgba(255,255,255,0.4);
    border-bottom-color: transparent;
}

.dark #bmdps-panel .nav-tabs>.active>a {
    color: white;
    background-color: rgba(255,255,255,0.4);
    border-bottom-color: transparent;
}

#bmdps-panel .tab-content {
    padding-top: 10px;
    padding-bottom: 10px;
}

#bmdps-panel:before {
    border-top: 15px solid transparent;
    border-right: 15px solid rgba(255, 255, 255, 0.8);
    top: -8px;
    content: '';
    position: absolute;
    right: 10px;
    -webkit-transform:rotate(225deg);
}

#bmdps-panel:after {
    border-top: 15px solid transparent;
    border-right: 15px solid rgba(19, 19, 19, 0.2);
    top: -7px;
    content: '';
    position: absolute;
    right: 10px;
    -webkit-transform:rotate(225deg);
}

.bmdps-label {
    display: inline-block;
    text-align: right;
    width: 120px;
    height: 27px;
    padding-right: 10px;
    vertical-align: middle;
}

#bmdps-panel label {
    display: inline-block;
}