Last active
December 5, 2017 14:16
-
-
Save benjamingwynn/21b697b5299ee95292f9829f848269d1 to your computer and use it in GitHub Desktop.
ProtonMail Modern Theme
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| White modern theme for ProtonMail | |
| Work-in-progress (v2) - Copyright Benjamin Gwynn, 2017 (http://benj.pw) | |
| */ | |
| body { | |
| --font: "Roboto", "Cantarell", "Segoe UI", "Ubuntu", sans-serif; | |
| font-family: var(--font); | |
| } | |
| .secure:not(.light), .secure { | |
| background: white; | |
| height: 100vh !important; | |
| } | |
| /* welcome*/ | |
| .conversationPlaceholder header { | |
| border-bottom: none; | |
| padding: 1.4ex 1.2rem; | |
| font-weight: 300; | |
| } | |
| .conversationPlaceholder header::after { | |
| content: " back, Benjamin"; | |
| } | |
| /* header */ | |
| .headerSecuredDesktop-logo { | |
| display:none; | |
| } | |
| .headerSecuredDesktop-container, .headerSecuredMobile-container { | |
| width: 100%; | |
| } | |
| .headerSecured-container { | |
| background: rgba(255,255,255,0.9); | |
| color: grey; | |
| height: 4rem; | |
| position: fixed; | |
| top: 0; | |
| left: auto; | |
| right: 0; | |
| width: 40rem; | |
| clear: both; | |
| float: none; | |
| } | |
| .navigation > li.active, .navigation > li:hover { | |
| box-shadow: none; | |
| } | |
| .navigation-link { | |
| display: flex; | |
| flex-flow: column nowrap; | |
| justify-content: center; | |
| align-items: center; | |
| width: 5em; | |
| } | |
| .navigation { | |
| flex: auto 0 0; | |
| margin: auto; | |
| } | |
| .navigation-title { | |
| display: none; | |
| } | |
| .navigationItem-title { | |
| display: none; | |
| } | |
| .searchForm-container { | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| /* tooltips */ | |
| *[pt-tooltip]::after, .sidebar *[data-label]::after { | |
| font-family: var(--font); | |
| font-weight: normal; | |
| background: white; | |
| padding: 0.25em 0.6em; | |
| border-radius: 0.25em; | |
| color: black; | |
| transition: all 0.15s; | |
| border: solid thin silver; | |
| overflow: hidden; | |
| font-size: 0.9rem; | |
| box-shadow: 0 0.05rem 0.1rem 0.01rem rgba(0,0,0,0.2); | |
| } | |
| /* generic tooltips */ | |
| *[pt-tooltip]::after { | |
| content: attr(pt-tooltip); | |
| position: absolute; | |
| text-align: center; | |
| transform: translateX(-50%) translateY(1.5rem); | |
| overflow-wrap: break-word; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| z-index: 9999; | |
| top: -100px; | |
| opacity: 0; | |
| } | |
| *[pt-tooltip]:hover::after { | |
| opacity: 1; | |
| top: initial; | |
| } | |
| .tooltip { | |
| display: none !important; | |
| } | |
| /* sidebar tooltips */ | |
| .sidebar *[data-label]::after { | |
| content: attr(data-label); | |
| position: fixed; | |
| left: 3rem; | |
| z-index: -1; | |
| opacity: 0; | |
| text-align: left; | |
| } | |
| .sidebar *[data-label]:hover::after { | |
| z-index: 999; | |
| opacity: 1; | |
| } | |
| /* sidebar */ | |
| #labelSettings { | |
| order: 2; | |
| margin-top: 0.5rem; | |
| } | |
| #sidebarLabels { | |
| display: flex; | |
| flex-flow: column nowrap; | |
| height: auto; | |
| flex: auto 0 1; | |
| margin-top: auto; | |
| } | |
| #sidebarLabels .mCSB_container_wrapper { | |
| position: static; | |
| } | |
| .menuLabel-item { | |
| height: 2em; | |
| } | |
| .sidebar *[data-label]:hover::after { | |
| z-index: 999; | |
| opacity: 1; | |
| } | |
| .sidebarApp-menu { | |
| margin: 0; | |
| } | |
| .sidebarApp-container { | |
| background: white; | |
| height: 100%; | |
| margin-top: 4rem; | |
| min-width: inherit; | |
| width: auto; | |
| flex: 3rem; | |
| padding: 0; | |
| } | |
| .sidebarApp-container .sidebar-btn-back { | |
| border: none; | |
| color: black; | |
| opacity: 0.7; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 12em; | |
| padding: 1.7em 0; | |
| } | |
| .sidebarApp-item, | |
| .sidebarApp-menu li { | |
| padding: 0.15em 0; | |
| } | |
| .sidebarApp-item .navigationItem-title, | |
| .sidebarApp-item .sidebarApp-title, | |
| .sidebarApp-menu .menuLabel-title { | |
| display: none; | |
| } | |
| .sidebarApp-item .navigationItem-icon, | |
| .sidebarApp-item .sidebarApp-icon, | |
| .sidebarApp-menu .menuLabel-icon { | |
| color: black; | |
| opacity: 0.7; | |
| transition: all 0.15s; | |
| padding: 0; | |
| } | |
| .sidebarApp-container .version { | |
| color: black; | |
| } | |
| .sidebarApp-item.active { | |
| background: #eaeaea; | |
| border-bottom-right-radius: 0.4em; | |
| border-top-right-radius: 0.4em; | |
| opacity: 1; | |
| } | |
| .sidebarApp-item .navigationItem-item, .sidebarApp-item .sidebarApp-link, .sidebarApp-menu .menuLabel-link { | |
| padding: 0; | |
| } | |
| #tour-label-settings { | |
| display:none; | |
| } | |
| .menuLabel-item .menuLabel-counter, .sidebarApp-item .navigationItem-counter { | |
| color: #555; | |
| font-size: 0.66em; | |
| display: block; | |
| text-align: left; | |
| position: fixed; | |
| margin-top: 2.5em; | |
| background: transparent; | |
| font-weight: 600; | |
| left: 2.4em; | |
| z-index: 10000000; | |
| overflow: visible; | |
| } | |
| .sidebarApp-container .footer { | |
| display: none; /* TODO */ | |
| } | |
| .sidebarApp-item .navigationItem-item { | |
| display: flex; | |
| align-items: center; | |
| align-content: center; | |
| justify-content: center; | |
| } | |
| .sidebarApp-icon { | |
| margin: auto !important; | |
| } | |
| .navigationItem-aside { | |
| position: absolute !important; | |
| } | |
| /* labels */ | |
| [id="sidebarLabels"] { | |
| margin: 0; | |
| } | |
| .sidebarApp-menu .menuLabel-link { | |
| justify-content: center; | |
| } | |
| .sidebarApp-item .navigationItem-icon, | |
| .sidebarApp-item .sidebarApp-icon, | |
| .sidebarApp-menu .menuLabel-icon { | |
| margin: 0; | |
| } | |
| .settingsMenu-container { | |
| flex: 10rem 1 0; | |
| } | |
| .sidebarApp-item::after { | |
| background: none !important; | |
| } | |
| .settingsMenu-container * { | |
| color: black; | |
| } | |
| .settingsMenu-container .sidebarApp-link { | |
| flex-flow: row nowrap; | |
| display: flex; | |
| padding: 1em 0; | |
| line-height: 1.7; | |
| } | |
| .settingsMenu-container .sidebarApp-link * { | |
| margin: auto 0; | |
| display: block; | |
| text-align: center; | |
| font-weight: normal; | |
| } | |
| .settingsMenu-item-donate { | |
| display: none !important; | |
| } | |
| /* refresh button */ | |
| .sidebarApp-item .navigationItem-btn-refresh { | |
| position: absolute; | |
| font-size: 1.3em; | |
| right: -3rem; | |
| background: #656565; | |
| color: white; | |
| padding: 2rem; | |
| border-radius: 0; | |
| line-height: 0.9; | |
| z-index: 99999; | |
| transition: opacity 0.2s; | |
| opacity: 0; | |
| } | |
| .sidebarApp-item .navigationItem-btn-refresh.spinMe { | |
| opacity: 1; | |
| } | |
| /* fix settings sidebar */ | |
| .navigationSettings-link { | |
| display: block !important; | |
| } | |
| /* add all mail icon */ | |
| .navigationItem-item[data-state="allmail"] .sidebarApp-icon::after { | |
| content: "\f003"; | |
| } | |
| .sidebarApp-item.active .navigationItem-icon { | |
| color: black; | |
| opacity: 1; | |
| } | |
| /* main area */ | |
| #body { | |
| display: flex; | |
| flex-flow: row nowrap; | |
| padding-top: 0rem; | |
| } | |
| #body #wrapper { | |
| height:100%; | |
| } | |
| #body #pm_main { | |
| height: 100%; | |
| width: 100%; | |
| float: none; | |
| margin-top: 0; | |
| flex: 100% 1 1; | |
| display: flex; | |
| flex-flow: column; | |
| clear: both; | |
| } | |
| #pm_settings { | |
| margin-top: 2rem; | |
| } | |
| #pm_sidebar { | |
| margin-right: 0.3em; | |
| float: none; | |
| margin-top: 0; | |
| padding-top: 0.7em; | |
| } | |
| /* conversations */ | |
| #conversation-list-rows .conversation.read { | |
| background: inherit; | |
| opacity: 0.5; | |
| } | |
| .conversion-wrapper { | |
| padding: 0 0.3em; | |
| } | |
| .conversation { | |
| border-bottom: none; | |
| padding: 0.3em 0; | |
| border-radius: 0.2em; | |
| } | |
| .conversation.marked::before { | |
| background-color: #bcbcbc; | |
| } | |
| .conversation.read { | |
| background: none; | |
| opacity: 0.7; | |
| } | |
| .conversation.active { | |
| background: whitesmoke !important; | |
| color: black; | |
| border-bottom-color: default; | |
| box-shadow: none; | |
| opacity: 0.9 !important; | |
| } | |
| .conversation .conversation-meta { | |
| padding-left: 1em; | |
| } | |
| .conversation .ptSelectConversation-container { | |
| order: 1; | |
| width: auto; | |
| min-width: inherit; | |
| flex: 2em 0 1; | |
| } | |
| .conversation .row .labelsElement-container { | |
| right: 27px; | |
| height: 20px; | |
| } | |
| .conversation .row { | |
| padding-right: 0; | |
| } | |
| body #conversation-list-columns { | |
| border-right: none; | |
| } | |
| /* conversation view */ | |
| #conversation-view .message .frame { | |
| } | |
| /* toolbar above conversations */ | |
| .toolbarDesktop-container { | |
| width: 41%; | |
| box-shadow: none; | |
| height: auto; | |
| flex: 4rem 1 1; | |
| } | |
| #tour-layout { | |
| display: none; | |
| } | |
| .elements-selector { | |
| order: 1; | |
| } | |
| .toolbarDesktop-container .pm_buttons { | |
| margin: 0 0.2em 0 0; | |
| } | |
| /* compose button */ | |
| .sidebarApp-container .sidebar-btn-compose { | |
| position: fixed; | |
| right: 0; | |
| bottom: 0; | |
| width: 4rem; | |
| height: 4rem; | |
| margin: 3rem; | |
| font-size: 0; | |
| border-radius: 50%; | |
| opacity: 0.9; | |
| background: #595959; | |
| border-color: #535353; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| transition: all 0.15s; | |
| } | |
| .sidebarApp-container .sidebar-btn-compose::before { | |
| font-family: "FontAwesome"; | |
| content: "\f040"; | |
| text-align: center; | |
| color: white !important; | |
| margin: auto; | |
| font-size: 2rem !important; | |
| margin-left: 1.1rem; | |
| margin-bottom: 0.1rem; | |
| transition: all 0.3s; | |
| transform: none; | |
| } | |
| .sidebarApp-container .sidebar-btn-compose:hover { | |
| opacity: 1; | |
| background: #595959; | |
| border-color: #535353; | |
| color: transparent; | |
| } | |
| .sidebarApp-container .sidebar-btn-compose:hover::before { | |
| transform: rotate(-47deg); | |
| } | |
| /* code area */ | |
| .pm_form textarea.code { | |
| height: 80vh; | |
| background: black; | |
| color: whitesmoke; | |
| border: solid thin; | |
| resize: both; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment