diff --git a/bookface_dark/bookfacedark.css b/bookface_dark/bookfacedark.css index 222fa4c..702c592 100644 --- a/bookface_dark/bookfacedark.css +++ b/bookface_dark/bookfacedark.css @@ -1,94 +1,57 @@ - :root { --global-font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif, Noto Color Emoji; - --nav-bg: #252728; - --link-color: #0866ff; - --nav-icon-color: #B0B3B8; - --background-color: #1C1C1D; - --contentbg-transp: 100; - --font-color: #B0B3B8; - --font-color-darker: #333; - --background-image: ''; - --menu-background-hover-color: rgba(255,255,255,.1); - --border-color: #333; + --nav-bg: $nav_bg; + --link-color: $link_color; + --nav-icon-color: $nav-icon-color; + --background-color: $background_color; + --contentbg-transp: $contentbg_transp; + --font-color: $font_color; + --font-color-darker: $font_color_darker; + --background-image: $background_image; + --menu-background-hover-color: $menu_background_hover_color; + --border-color: $border_color; } body { - background-color: #1C1C1D !important; - font-size: 15px !important; - padding-top: 125px !important; - font-family: var(--global-font-family); + background-color: var(--background-color) !important; + font-size: 15px !important; + padding-top: 125px !important; } -#topbar-first .nav > li > a, #topbar-first .nav > li > button, nav.navbar .nav > li > a, nav.navbar .nav > li > button { - color: #b0b3bb0 !important; +#topbar-first .nav > li > a, +#topbar-first .nav > li > button, +nav.navbar .nav > li > a, +nav.navbar .nav > li > button{ + color: #B0B3B8 !important; } #topbar-first, nav.navbar { - background-color: #252728 !important; - top: 0; - z-index: 1030; - color: #0866ff !important; -} - -#topbar-first .topbar-nav .nav-segment > a { - display: inline-block; - text-decoration: none; - text-align: left; - margin-right: 10px; -} - -#topbar-first .topbar-nav .dropdown-menu { - width: 350px; - margin-left: -300px; + background-color: var(--nav-bg) !important; + color: #B0B3B8 !important; } #topbar-first .topbar-nav .nav-segment { - margin-right: 10px; + margin-right: 10px; } -#topbar-first #nav-notifications-menu { - border: 1px solid #1C1C1D !important; +#topbar-first .nav > li > a:hover:not(.selected) { + background-color: rgba(255,255,255,.1) !important; + border-radius: 8px !important; } -#topbar-first #nav-notifications-menu a { - color: #b0b3b8 -} - -#topbar-first #nav-notifications-menu li { - border-color: transparent !important; - box-sizing: border-box; - margin: 10px; - border-radius: 10px !important; - width: 94% !important; -} - -#topbar-first .notification-unseen { - background-color: rgba(56, 88, 152,.2) !important -} - -#topbar-first #nav-notifications-menu li.notif-entry:hover { - background-color:rgba(176,179,184,.2) !important; - border-color: transparent !important; -} - -#topbar-first #nav-notifications-menu li.notif-entry .media-object a img { - max-height: 400px; - height: 45px; - width: 45px; - border-radius: 50px; - border-bottom: 1px solid #c1c1c1; +.fa-lg { + font-size: 24px !important; } #topbar-first .nav > li > a:hover, -#topbar-first .nav > li > a:hover:not(.selected), #topbar-first .nav > li > a:focus, #topbar-first .nav > li > button:not(#main-menu):hover, #topbar-first .nav > li > button:not(#main-menu):focus, @@ -96,111 +59,131 @@ nav.navbar .nav > li > a:hover, nav.navbar .nav > li > a:focus, nav.navbar .nav > li > button:hover, nav.navbar .nav > li > button:focus { - background-color: rgba(255,255,255,.1) !important; - border-radius: 8px !important; -} - -.fa-lg { - font-size: 24px !important; + background-color: rgba(255,255,255,.1) !important; + border-radius: 8px !important; } #topbar-first .nav > li > a.selected { - border-bottom: 3px solid #0866ff !important; - color: #B0B3B8; !important; + border-bottom: 3px solid var(--link-color) !important; + color: var(--link-color) !important; } #topbar-first .nav > li > a.selected:hover, #topbar-first .nav > li > #main-menu:hover, #topbar-first .nav > li > #main-menu:focus { - background-color: transparent !important; - border-radius: 0 !important; -} - -.topbar { - position: fixed; - display: block; - height: 50px; - width: 100%; - padding-left: 15px; - padding-right: 15px; + background-color: transparent !important; + border-radius: 0 !important; } ul.tabs li { - font-size: 15px !important; - margin-left: 10px !important; + font-size: 15px !important; + margin-left: 10px !important; } ul.tabs li.active { - border-color: #0866FF !important; + border-color: var(--link-color) !important; } ul.tabs li a { - margin-top: 8px; - color: rgb(90, 167, 255) !important; + margin-top: 8px; + color: var(--link-color) !important; } ul.tabs li:hover:not(.active) { - border-bottom-width: 0px !important; + border-bottom-width: 0px !important; } ul.tabs li:hover:not(.active) a { - background-color: rgba(255,255,255,.1) !important; - border-radius: 8px !important; + background-color: rgba(255,255,255,.1) !important; + border-radius: 8px !important; } +.dropdown-menu { + padding-bottom: 15px !important; + background-color: var(--nav-bg) !important; + border: 1px solid var(--background-color) !important; +} + +.dropdown-menu li { + margin: 10px; + width: 92% !important; + border-radius: 8px; +} + +.dropdown-menu li:hover { + border-color: transparent !important; +} + +.form-control { + background: var(--nav-bg); + color: #fff; + border-radius: 10px; +} + +.form-control[readonly], +.form-control[disabled], +.fieldset[disabled] .form-control { + background-color: #666; + color: #fff; + opacity: .5; +} +.table-striped > tbody > tr:nth-of-type(2n+1) { +background-color: var(--nav-bg); +} header #banner { - left: 0 !important; - right: auto !important; + left: 0 !important; + right: auto !important; } -header #banner #logo-img, .navbar-brand #logo-img { - background-color: #0866FF !important; - height: 38px !important; - width: 38px !important; +header #banner #logo-img, +.navbar-brand #logo-img { + background-color: var(--link-color) !important; + height: 40px !important; + width: 40px !important; } .topbar ul.nav { - left: 50% !important; - margin-left: -25% !important; - position: relative; + left: 50% !important; + margin-left: -25% !important; + position: relative; } #topbar-first .nav > .account img { - border-radius: 100% !important; - box-shadow: 0 0 1px rgba(255,255,255,.1) !important; - height: 40px !important; - width: 40px !important; + border-radius: 100% !important; + box-shadow: 0 0 1px rgba(255,255,255,.1) !important; + height: 40px !important; + width: 40px !important; } #search-box { - position: fixed !important; - left: 100px; + position: fixed !important; + left: 100px; } #topbar-first #search-box .form-search { - height: 40px !important; - font-size: 15px; - background-position: unset; - box-shadow: none !important; + height: 40px !important; + font-size: 15px; + background-position: unset; + box-shadow: none !important; } #search-box form > div { - background-color: #474748; - border-radius: 50px; + background-color: #333334; + border-radius: 50px; } #search-box form > div::before { - content: '\f002'; - font-family: ForkAwesome; - position: absolute; - left: 10px; - top: 8px; + content: '\f002'; + font-family: ForkAwesome; + position: absolute; + left: 10px; + top: 8px; } #search-box .form-control.form-search { - border-radius: 50px !important; - background: transparent !important; - width: 100% !important; + border-radius: 50px !important; + background: transparent !important; + width: 100% !important; } #search-box .form-control::placeholder { @@ -208,139 +191,41 @@ header #banner #logo-img, .navbar-brand #logo-img { } #topbar-first #search-box .btn { - font-size: 0px !important; - height: 32px; - width: 32px; - top: 2px !important; - background-color: black !important; - margin-top: 2px !important; + font-size: 0px !important; + height: 32px; + width: 32px; + top: 2px !important; + background-color: black !important; + margin-top: 2px !important; } #topbar-first #search-box .btn::before { - content: '\f061'; - font-family: ForkAwesome; - font-size: 15px; - color: #B0B3B8; -} - -.form-control { - border-radius: 10px; - resize: vertical; - border: 1px solid #645f5f; - color: #b0b3b8; - background-color: #474748; - font-color: #B0B3B8; -} - -p.wall-item-announce, .media .time, .media .shared-time, .media .delivery, .media .location, .media .location a { - color: #b0b3b8; -} - -.media-list > li { - font-size: 15px; - border-color: #2d2c2c; -} - -.pagination .pager_next a, .pagination .pager_prev a { - border-top-left-radius: 10px; - border-bottom-left-radius: 10px; - border-top-right-radius: 10px; - border-bottom-right-radius: 10px; -} - -.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover { - background-color: #0866ff; - border-color: #0866ff; - border-radius: 10px; -} - -.pagination li.pager_n a { - border-radius: 10px; -} - -.pagination-sm > li:first-child > a, .pagination-sm > li:first-child, .pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span { - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; -} - -#search-box .form-control.form-search { - border-radius: 50px !important; - background: transparent !important; - width: 100% !important; -} - -#search-box .form-control::placeholder { - color: #B0B3B8 !important; -} - -#topbar-first #search-box .btn { - font-size: 0px !important; - height: 32px; - width: 32px; - top: 2px !important; - background-color: black !important; -} - -#topbar-first #search-box .btn::before { - content: '\f061'; - font-family: ForkAwesome; - font-size: 15px; - color: #B0B3B8; + content: '\f061'; + font-family: ForkAwesome; + font-size: 15px; + color: #B0B3B8; } #nav-user-menu, #nav-notifications-menu { - background-color: #252728 !important; - border: 1px solid #1C1C1D !important; + background-color: var(--nav-bg) !important; + border: 1px solid var(--background-color) !important; } #nav-user-menu { - background-color: #252728 !important; - min-width: 250px !important; + min-width: 250px !important; } -.dropdown-menu { - padding-bottom: 15px !important; +.nav-pills .dropdown-menu li a, +.nav-pills .dropdown-menu li .btn-link, +.nav-tabs .dropdown-menu li a, +.nav-tabs .dropdown-menu li .btn-link, +.account .dropdown-menu li a, +.account .dropdown-menu li .btn-link, +.contact-photo-wrapper .dropdown-menu li a, +.contact-photo-wrapper .dropdown-menu li .btn-link { + color: #B0B3B8 !important; + border-color: var(--nav-bg) !important; } - -.dropdown-menu li { - width: 92% !important; - border-radius: 8px; -} - -.dropdown-menu li:hover { - border-color: transparent !important; -} - -.topbar .dropdown-header { - font-size: 16px; - padding: 3px 10px; - margin-bottom: 10px; - font-weight: 300; - color: #B0B3B8; -} - -#topbar-first #nav-notifications-menu li.notif-entry { - color: #333; - padding: 10px; - border-bottom: 1px solid #eee; - position: relative; - border-left: 3px solid #0866ff; - font-size: 12px; -} - -blockquote { - border-left: 5px solid #717171; -} - -#topbar-first .nav > li > a:hover:not(.selected), #topbar-first .nav > li > a:focus, #topbar-first .nav > li > button:not(#main-menu):hover, #topbar-first .nav > li > button:not(#main-menu):focus, nav.navbar .nav > li > a:hover, nav.navbar .nav > li > a:focus, nav.navbar .nav > li > button:hover, nav.navbar .nav > li > button:focus { -border-radius: 1px !important; -} - -.nav-pills .dropdown-menu li a, .nav-pills .dropdown-menu li .btn-link, .nav-tabs .dropdown-menu li a, .nav-tabs .dropdown-menu li .btn-link, .account .dropdown-menu li a, .account .dropdown-menu li .btn-link, .contact-photo-wrapper .dropdown-menu li a, .contact-photo-wrapper .dropdown-menu li .btn-link { - color: #B0B3B8 !important; - border-color: #252728 !important; -} - .nav-pills .dropdown-menu li > a:hover, .nav-tabs .dropdown-menu li > a:hover, .account .dropdown-menu li > a:hover, @@ -349,26 +234,20 @@ border-radius: 1px !important; .nav-tabs .dropdown-menu li.selected a, .account .dropdown-menu li.selected a, .contact-photo-wrapper .dropdown-menu li.selected a { - color: #333 !important; - background: #f2f2f2 !important; - border-radius: 8px; + color: #333 !important; + background: #f2f2f2 !important; + border-radius: 8px; } -.nav-pills .dropdown-menu li.divider, .nav-tabs .dropdown-menu li.divider, .account .dropdown-menu li.divider, .contact-photo-wrapper .dropdown-menu li.divider { - background-color: #252728 !important; +.nav-pills .dropdown-menu li.divider, +.nav-tabs .dropdown-menu li.divider, +.account .dropdown-menu li.divider, +.contact-photo-wrapper .dropdown-menu li.divider { + background-color: var(--nav-bg) !important; } -#topbar-second { - height: 57px !important; - top: 50px; - background-color: #252728; - z-index: 1029; - background-image: none; - -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); - box-shadow: 0 1px 10px rgba(255, 255, 255, 0.1); - border-bottom: 1px solid #535252; - border-color: #333 !important; +.contact-entry-desc { + color: #b0b3b8; } .btn { @@ -376,40 +255,66 @@ border-radius: 1px !important; background-color: #575757; } -.btn.btn-primary { - background: #0866ff; - color: #e6e9ec; +#topbar-first #nav-notifications-menu { + border: 1px solid var(--background-color) !important; +} + +#topbar-first #nav-notifications-menu a { + color: #b0b3b8; +} + +#topbar-first #nav-notifications-menu li { + border-color: transparent !important; + box-sizing: border-box; + margin: 10px; + border-radius: 10px !important; + width: 94% !important; +} + +#topbar-first .notification-unseen { + background-color: rgba(255,255,255,.2) !important; +} + +#topbar-first #nav-notifications-menu li.notif-entry:hover{ + background-color:rgba(128,128,128,.2) !important; + border-color: transparent !important; +} + +#topbar-second { + height: 60px !important; + background-color: var(--nav-bg) !important; + border-color: #333 !important; } .btn.btn-primary:hover, .btn.btn-primary:focus { - border-radius: 8px !important; + border-radius: 8px !important; } #dropdownMenuTools { - height: 40px; - width: 40px; - background-color: rgba(255,255,255,.1) !important; - border-radius: 100% !important; - margin-top: 5px !important; - margin-right: 10px !important; + height: 40px; + width: 40px; + background-color: rgba(255,255,255,.1) !important; + border-radius: 100% !important; + margin-top: 5px !important; + margin-right: 10px !important; } #dropdownMenuTools:hover, #dropdownMenuTools:focus { - background-color: rgba(0,0,0,.1) !important; + background-color: rgba(0,0,0,.1) !important; } #jotOpen { - border-radius: 10px !important; - background-color: #0866FF !important; - color: #ffffff !important; - border-color: #000 !important; - box-shadow: none !important; + border-radius: 8px !important; + background-color: var(--link-color) !important; + color: #ffffff !important; + border-color: #000 !important; + box-shadow: none !important; } #jotOpen:hover, #jotOpen:focus { - box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important; + box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important; } #jotOpen::before { @@ -423,78 +328,62 @@ border-radius: 1px !important; } #jotOpen .fa-pencil-square-o { - font-size: 32px !important; - position: relative; - margin-right: 10px; - line-height: 32px; - display: inline; - top: 4px; -} - -.panel-footer button[type="submit"]{ - float: right !important; -} -.panel-footer::after{ - content: ''; - display: block; - clear: both; -} - -.fbswitcher [data-mode="attachment"] { - display: none !important; + font-size: 32px !important; + position: relative; + top: 4px; } #topbar-second #nav-short-info { - margin-top: 10px; + margin-top: 10px; } -#back-to-top { - color: #d6d7d6; - border-radius: 10px; - background-color: #7d7d7d; +.settings-submit, +button[type="submit"]{ + background-color: var(--link-color) !important; + color: white !important; + border-radius: 8px !important; + border: none !important; + box-shadow: none !important; } -.dropzone, .dropzone .dz-default * { - box-sizing: border-box; - overflow: auto; - cursor: default; - border-radius: 10px; - border: 1px solid #fdfdfd; +.settings-submit.form-button-search, +button[type="submit"].form-button-search { + border-radius:50px !important; + margin-top:-.5px !important; } -.dropzone.dz-clickable { - cursor: pointer; - border-radius: 10px; - background-color: #606060; - margin-bottom: 10px; +.settings-submit:hover, +.settings-submit:focus, +button[type="submit"]:hover, +button[type="submit"]:focus{ + box-shadow: inset 0 0 100px rgba(255,255,255,.1) !important; } -.dropzone:not(textarea) { - border: 1px solid rgb(85, 85, 85); +#delegate-parent .submit button { + float: right; + padding: 8px; + appearance: none; + border: none; } -.faded-icon { - color: #b0b3b8; +#delegate-parent .submit::after { + content: ''; + display: block; + clear: both; } .panel-footer { - background-color: #333; + background-color: var(--nav-bg) !important; } -.help-block { - color: #b7b7b7; +.panel-footer button[type="submit"]{ + float: right !important; } -aside .widget, -.nav-container .widget { - background-color: var(--background-color) !important; - -webkit-box-shadow: none !important; - -moz-box-shadow: none !important; - box-shadow: none !important; -} - -aside .widget li a, aside .widget li a:hover { - color: #b0b3b8; +.panel-footer::after{ + content: ''; + display: block; + clear: both; } .panel { @@ -507,483 +396,503 @@ aside .widget li a, aside .widget li a:hover { position: relative; } -.hide-comments-outer { - background-color: rgba(45, 45, 45, 0.57); -} - -.tread-wrapper { - background-color: rgb(37, 39, 40) !important; - box-shadow: 0 0px 1px rgba(0,0,0,.5) !important; - border-radius: 10px !important; -} - -.wall-item-container .media { - background-color: #333 !important; - background-color: rgb(37, 39, 40) !important; - border-radius: 10px !important; -} - -.wall-item-container { - border-top: 1px solid rgb(62, 63, 64); -} - -.wall-item-actions-row button, -.wall-item-actions-right button { - display: block; - white-space: normal !important; - margin: 0 auto !important; - text-decoration: none; -} - -.wall-item-actions-row button::after, -.wall-item-actions-right button::after { - font-size: 12px; - font-family: var(--global-font-family); - display: block; - margin-top: 2px; - text-decoration: none; -} - -.wall-item-container .wall-item-content .type-link img.attachment-image, .type-link img.attachment-image, .type-video img.attachment-image { - border-radius: 3px; -} - -figure.img-allocated-height img { - border-radius: 3px; -} - -audio, canvas, progress, video { - border-radius: 3px; -} - -.button-comments::after { - content: 'Comment'; - text-decoration: none; -} - -.button-announces::after { - content: 'Share'; - text-decoration: none; -} - -.button-votes::after { - content: 'Quote'; - text-decoration: none; -} - -.button-likes::after { - content: 'Like'; - text-decoration: none; -} - -[id^="dislike-"]::after{ - content: 'Dislike'; - text-decoration: none; -} - -.wall-item-actions-right .dropdown-toggle::after -.more-links .dropdown-toggle::after { - content: 'More'; - text-decoration: none; -} - -.vote-event:not(:has(.wall-item-response:empty)) { - padding-bottom: 135px; -} - -.vote-event .wall-item-response { - position: absolute; - top: 63px; -} - -.vote-event .wall-item-response:empty{ - display: none; -} - -.vote-event .wall-item-response:nth-of-type(1){ - left: 15px; -} - -.vote-event .wall-item-response:nth-of-type(1) .button-event::after, - [id^="attendyes"]::after{ - content: 'Going'; -} - -.vote-event .wall-item-response:nth-of-type(2){ - left: 105px; -} - -.vote-event .wall-item-response:nth-of-type(2) .button-event::after, - [id^="attendno"]::after{ - content: 'Can\'t Go'; - position: relative; - height: 20px; - overflow: hidden; /* or skews mobile button layout */ -} - -.vote-event .wall-item-response:nth-of-type(3){ - left: 204px; -} - -.vote-event .wall-item-response:nth-of-type(3) .button-event::after, - [id^="attendmaybe"]::after{ - content: 'Maybe'; -} - -.wall-item-actions-row > button span, -.wall-item-response span { - position: absolute; - text-align: center; - display: block; - background-color: #0866FF; - box-shadow: -1px 1px 1px #000; - border-radius: 4px; - color: #fff; - font-size: 12px; - font-weight: 700; - width: fit-content; - padding: 0px 7px; - left: 55%; - top: 0px; - z-index: 1; -} - -.wall-item-response { - position: relative; - padding-top: 4px; -} - -.wall-item-response span { - text-align: center; - display: block; - text-decoration: none; -} - -.well { - -webkit-box-shadow: none !important; - box-shadow: none !important; - border-color: #535151; - background-color: #333; - border: 1px solid #252728; - border-top-color: rgb(53, 53, 53); - border-right-color: rgb(53, 53, 53); - border-bottom-color: rgb(53, 53, 53); - border-left-color: rgb(53, 53, 53); - border-radius: 10px; - background-image: linear-gradient(to bottom,#252728 0,#252728 100%); -} - -.contact-photo, -.contact-photo-xs { - border-radius: 100% !important; - border: 1px solid var(--border-color) !important; -} - -.hover-card-pic img.thumbnail { - border-radius: 100% !important; -} - -#vcard-short-photo-wrapper img, #nav-short-info .contact-wrapper img { - border-radius: 50px; -} - -.contact-wrapper .contact-action-link, .contact-wrapper .contact-action-link:hover, .textcomplete-item .contact-wrapper .contact-action-link { - color: #fff; -} - -section > .generic-page-wrapper, .videos-content-wrapper, .suggest-content-wrapper, .help-content-wrapper, .match-content-wrapper, .dirfind-content-wrapper, .delegation-content-wrapper, .notes-content-wrapper, .message-content-wrapper, .apps-content-wrapper, #adminpage, .delegate-content-wrapper, .uexport-content-wrapper, .dfrn_request-content-wrapper, .friendica-content-wrapper, .credits-content-wrapper, .nocircle-content-wrapper, .profperm-content-wrapper, .invite-content-wrapper, .tos-content-wrapper, .fsuggest-content-wrapper { - border-radius: 10px; - box-shadow: 0 0 1px rgba(255,255,255,.1) !important; - background-color: rgb(37, 39, 40); - color: #b0b3b8; -} - -.contact-entry-desc { - color: #b0b3b8; -} - -.mail-list-outside-wrapper .contact-photo-wrapper img { - height: 70px; - width: 70px; - border-radius: 50%; - border-bottom: 1px solid rgb(77, 77, 77); -} - -.mail-list-outside-wrapper { - border-bottom: 1px solid rgb(77, 77, 77); -} - -.mail-conv-wrapper .media .contact-photo-wrapper img { - height: 48px; - width: 48px; - border-radius: 50%; -} - -p.wall-item-announce, -.media .time, .media .shared-time, -.media .delivery, .media .location, -.media .location a { - font-size: 13px !important; -} - -.media .media-body h4.media-heading { - font-size: 14px; - font-weight: 500; - color: #8e8787; -} - -.type-link, .type-video { - padding: 0 !important; - margin: 0 !important; - background-color: rgb(37, 39, 40) !important; - border: 1px solid rgb(53, 53, 53) !important; - border-radius: 10px; -} - -.type-link h4, .type-link blockquote, .type-link sup, -.type-video h4, .type-video blockquote, .type-video sup { - padding-left: 10px !important; - padding-right: 10px !important; -} - #upload-photo { - background-color: #0866FF !important; - color: white !important; - border-radius: 8px !important; -} - -.hovercard { - background-color: #252728 !important; - border: 1px solid #1C1C1D !important; -} - -.hover-card-pic img.thumbnail { - border-radius: 100% !important; - background-color: #1C1C1D !important; - border-color: black !important; -} - -p.wall-item-announce, -.media .time, .media .shared-time, -.media .delivery, .media .location, -.media .location a { - font-size: 13px !important; -} - -.type-link h4, .type-link blockquote, .type-link sup, -.type-video h4, .type-video blockquote, .type-video sup { - padding-left: 10px !important; - padding-right: 10px !important; + background-color: var(--link-color) !important; + color: white !important; + border-radius: 8px !important; } #upload-photo:hover, #upload-photo:focus { - background-color: darkblue !important; + background-color: darkblue !important; } - .fbswitcher [data-mode="attachment"] { - display: none !important; + display: none !important; +} + +#mention-link { + border-radius: 8px !important; + background-color: var(--link-color) !important; + color: #ffffff !important; + border-color: #000 !important; + box-shadow: none !important; + padding: 0 16px !important; +} + +#mention-link:hover, +#mention-link:focus { + box-shadow: inset 0 0 100px rgba(0,0,0,.1) !important; +} + +#mention-link span:first-of-type { + float: right; + font-size: 32px; + line-height: 45px; + top: 4px; +} + +#mention-link span:first-of-type .fa-2x { + font-size: inherit !important; +} + +#mention-link span:last-of-type { + font-size: 15px; + margin-right: 10px; + line-height: 32px; + top: 6px; + position:relative; +} + +#contact-edit-status-wrapper { + margin: 15px 0px !important; + border-radius: 10px; +} + +#profile-extra-links .btn { + border-radius: 8px !important; + margin-bottom: 10px !important; +} + +aside .widget, +.nav-container .widget { + background-color: var(--background-color) !important; + -webkit-box-shadow: none !important; + -moz-box-shadow: none !important; + box-shadow: none !important; +} + +.tread-wrapper { + background-color: rgb(37, 39, 40) !important; + box-shadow: 0 0px 1px rgba(0,0,0,.5) !important; + border-radius: 10px !important; +} + +.wall-item-container .media { + background-color: rgb(37, 39, 40) !important; + border-radius: 10px !important; +} + +.well { + -webkit-box-shadow: none !important; + box-shadow: none !important; + border-color: #535151; + background-color: #333; + border: 1px solid #252728; + border-top-color: rgb(53, 53, 53); + border-right-color: rgb(53, 53, 53); + border-bottom-color: rgb(53, 53, 53); + border-left-color: rgb(53, 53, 53); + border-radius: 10px; + background-image: linear-gradient(to bottom,#252728 0,#252728 100%); +} +.contact-photo, +.contact-photo-xs { + border-radius: 100% !important; + border: 1px solid var(--nav-bg) !important; +} + +.hovercard { + background-color: var(--nav-bg) !important; + border: 1px solid var(--background-color) !important; +} + +.hover-card-pic img.thumbnail { + border-radius: 100% !important; + background-color: var(--background-color) !important; + border-color: black !important; +} + +p.wall-item-announce, +.media .time, .media .shared-time, +.media .delivery, .media .location, +.media .location a { + font-size: 13px !important; + color: #b0b3b8; +} + +.type-link, .type-video { + padding: 0 !important; + margin: 0 !important; + background-color: rgb(46, 46, 47) !important; + border: 1px solid rgb(37, 39, 40) !important; +} + +.type-link h4, .type-link blockquote, .type-link sup, +.type-video h4, .type-video blockquote, .type-video sup { + padding-left: 10px !important; + padding-right: 10px !important; +} + +.wall-item-actions-row button, +.wall-item-actions-right button { + position: relative; + display: block; + white-space: normal !important; + margin: 0 auto !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; +} + +.wall-item-actions-row button::after, +.wall-item-actions-right button::after { + font-size: 12px; + font-family: sans-serif; + display: block; + margin-top: 2px; + text-decoration: none; +} + +.wall-item-response { + position: relative; + padding-top: 4px; +} + +.button-comments::after { + content: 'Comment'; + text-decoration: none; +} + +.button-announces::after { + content: 'Share'; + text-decoration: none; +} + +.share-links .dropdown-toggle::after { + content: 'Share'; + text-decoration: none; +} + +.button-votes::after { + content: 'Quote'; + text-decoration: none; +} + +.button-likes::after { + content: 'Like'; + text-decoration: none; +} + +[id^="dislike-"]::after{ + content: 'Dislike'; + text-decoration: none; +} + +.wall-item-actions-right .dropdown-toggle::after, +.more-links .dropdown-toggle::after { + content: 'More'; + text-decoration: none; +} + +.wall-item-actions-row > button span, +.wall-item-response span { + position: absolute; + text-align: center; + display: block; + background-color: #65686c; + box-shadow: -1px 1px 1px #000; + border-radius: 4px; + color: #fff; + font-size: 12px; + font-weight: 700; + width: fit-content; + padding: 0px 7px; + left: 55%; + top: 0px; + z-index: 1; +} + +.vote-event:not(:has(.wall-item-response:empty)) { + padding-bottom: 135px; +} + +.vote-event .wall-item-response { + position: absolute; + top: 63px; +} + +.vote-event .wall-item-response:empty{ + display: none; +} + +.vote-event .wall-item-response:nth-of-type(1){ + left: 15px; +} + +.vote-event .wall-item-response:nth-of-type(1) .button-event::after, + [id^="attendyes"]::after{ + content: 'Going'; +} + +.vote-event .wall-item-response:nth-of-type(2){ + left: 105px; +} + +.vote-event .wall-item-response:nth-of-type(2) .button-event::after, + [id^="attendno"]::after{ + content: 'Can\'t Go'; + position: relative; + height: 20px; + overflow: hidden; /* or skews mobile button layout */ +} + +.vote-event .wall-item-response:nth-of-type(3){ + left: 204px; +} + +.vote-event .wall-item-response:nth-of-type(3) .button-event::after, + [id^="attendmaybe"]::after{ + content: 'Maybe'; +} + +#jot-modal-content, +.wall-item-comment-wrapper { + background-color: rgb(37,39,40) !important; + border-radius: 15px !important; +} + +#jot-modal-content input, +#jot-modal-content .friendica-tagsinput { + background-color: var(--background-color) !important; +} +#jot-modal-content .fbrowser .folders button { + background-color: rgba(255,255,255,.1) !important; + color: rgba(255,255,255,.1) !important; + appearance: none; + border: none; + border-radius: 8px; + width: 100%; + margin-bottom: 5px; +} + +#jot-modal-content .fbrowser .folders button:hover, +#jot-modal-content .fbrowser .folders button:focus { + background-color: rgba(255,255,255,.2) !important; +} + +#jot-modal-content .fbrowser .folders li:hover, +#jot-modal-content .fbrowser .folders li:focus { + border-color: transparent !important; + background-color: transparent !important; +} + +#jot-modal .modal-header a { + color: #ccc; +} + +.modal-content { + background-color: #252728; +} + +#jot-title, +#jot-category { + background-color: rgb(51,51,52) !important; +} + +#profile-jot-text, #profile-jot-wrapper textarea, +#jot-location, +.wall-item-comment-wrapper textarea { + background-color: rgb(51, 51, 52) !important; +} + +#jot-text-wrap, #profile-jot-wrapper .dropzone.dz-clickable, +.wall-item-comment-wrapper .dropzone.dz-clickable { + background-color: var(--background-color) !important; +} + +.jot-nav { + border: none !important; +} + +.jot-nav a { + border: none !important; + border-radius: 8px !important; + margin-right: 5px; +} + +.jot-nav a:hover, .jot-nav a:focus { + background-color: rgba(255,255,255,.2) !important; +} + +.jot-nav .active a { + background-color: transparent !important; + border-radius: 0 !important; + border-bottom: 3px solid var(--link-color) !important; +} + +.jot-nav .active a:hover, .jot-nav .active a:focus { + background-color: transparent !important; +} + +[id^="comment-edit-preview"], +.comment-edit-preview { + border-radius: 8px !important; + box-shadow: none !important; + background-color: rgba(255,255,255,.1); +} + +[id^="comment-edit-preview"]:hover, +[id^="comment-edit-preview"]:focus, +.comment-edit-preview:hover, +.comment-edit-preview:focus { + background-color: rgba(255,255,255,.2) !important; +} + +#profile-jot-wrapper .wall-item-container.panel-body.preview { + border: 1px solid #666 !important; + margin-top:20px !important; + border-radius: 8px !important; } #profile-photo-wrapper { - overflow: visible !important; - padding: 5px; - background-color: var(--nav-bg); - border-radius: 100%; + overflow: visible !important; + padding: 5px; + background-color: var(--background-color); + border-radius: 100%; +} + +aside .widget li { + margin-bottom: 8px; +} + +aside .widget li a, aside .widget li a:hover { + color: #b0b3b8; } aside .vcard img.u-photo, aside img.vcard-photo { - border-radius: 100% !important; - box-shadow: 0 0 1px rgba(0,0,0,.3); - border: 3px solid white; + border-radius: 100% !important; + box-shadow: 0 0 1px rgba(0,0,0,.3); + border: 3px solid var(--background-color); } aside .widget h3.p-name { - font-size: 32px !important; - text-align: center; - word-break: break-word; + font-size: 32px !important; + text-align: center; + word-break: break-word; } aside .vcard .p-addr { - font-weight: 600; - text-align: center; - white-space: break-spaces !important; + font-weight: 600; + text-align: center; + white-space: break-spaces !important; } aside .widget li.selected { - background-color: var(--menu-background-hover-color) !important; - border-color: transparent !important; - border-radius: 8px; + background-color:rgba(56, 88, 152,.2) !important; + border-color: transparent !important; + border-radius: 8px; } - aside .widget li.selected a { - font-weight: bold; + font-weight: bold; } aside .widget li:hover { - background-color: var(--nav-bg) !important; - border-color: transparent !important; - border-radius: 8px; -} - -aside hr, section hr { - border-color: rgb(53, 53, 53); + background-color:rgba(128,128,128,.2) !important; + border-color: transparent !important; + border-radius: 8px; } #widget-contacts { - background-color: var(--nav-bg) !important; - border-radius: 8px !important; - box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2) !important; + background-color: rgb(37, 39, 40) !important; + border-radius: 8px !important; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2) !important; } .contact-block-img { - height: 100px !important; - width: 100px !important; - border-radius: 8px !important; - box-shadow: 0 0 1px rgba(0, 0, 0, .2); - margin: 5px; -} - -.contact-block-img { - height: 65px !important; - width: 65px !important; - border-radius: 50px !important; - box-shadow: 0 0 1px rgba(0, 0, 0, .2); - margin: 5px; + height: 45px !important; + width: 45px !important; + border-radius: 50% !important; + box-shadow: 0 0 1px rgba(0, 0, 0, .2); + margin: 5px; } .comment-fake-form { - border: none !important; - background-color: transparent !important; + border: none !important; + background-color: transparent !important; } .comment-fake-form textarea { - border-radius: 50px !important; - border-radius: 50px !important; - background-color: rgb(51, 51, 52) !important; - box-shadow: none !important; - -webkit-box-shadow: none !important; + border-radius: 50px !important; + background-color: rgb(51, 51, 52) !important; + box-shadow: none !important; + -webkit-box-shadow: none !important; } .wall-item-actions button { - font-size: 20px !important; - color: #B0B3B8 !important; + font-size: 20px !important; + color: #B0B3B8 !important; } .wall-item-actions button:hover { - color: #0866FF !important; + color: var(--link-color) !important; } - .wall-item-actions .checkbox { - padding-top: 6px !important; + padding-top: 6px !important; } - .comment .media-body { - padding: 10px; - background-color: rgb(37, 39, 40); - border-radius: 20px; + padding: 10px; + background-color: rgb(37, 39, 40); + border-radius: 20px; } - -.photo-album-actions .icon-padding, -.photo-edit-link-wrap .icon-padding { - margin-left: 10px !important; -} - -.photos-upload-link { - font-size: 28px; - color: #0866FF !important; - opacity: 1 !important; - border-radius: 8px; - padding: 0px 8px; -} - -#photo-album-link { - opacity: 1 !important; -} - -.photos-upload-link i, -#photo-album-link i, -#photo-edit-link i, -#photo-toprofile-link i, -#album-edit-link i, -#album-drop-link i, -.photos-order-link i { - font-size: 24px !important; - color: #0866FF !important; - opacity: 1 !important; - border-radius: 100% !important; - padding: 8px 11px !important; - height: 40px; - width: 40px; -} - -#photo-edit-link i.fa-image { - padding: 6px 7px !important; -} - -.photos-order-link { - margin-top: 5px !important; -} - -.photos-upload-link:hover i, -.photos-upload-link:focus i, -#photo-album-link:hover i, -#photo-album-link:focus i, -#photo-edit-link:hover i, -#photo-toprofile-link:hover i, -#photo-toprofile-link:focus i, -#album-edit-link:hover i, -#album-edit-link:focus i, -#album-drop-link:hover i, -#album-drop-link:focus i, -.photos-order-link:hover i, -.photos-upload-link:hover i, -.photos-upload-link:focus i { - background-color: rgba(255,255,255,.1) !important; -} - -.photos-content-wrapper .photos-upload-link::before { - content: 'Add Photos'; - font-size: 15px; - vertical-align: middle; - margin-top: -10px; - display: inline-block; -} - -#photo-photo { - margin: 0 auto !important; -} - -.img-allocated-max-width { - margin: 20px auto; -} - .wall-item-actions-row .wall-item-emoji { - font-size: 18px; - line-height: 40px; + font-size: 18px; + line-height: 40px; } - .navicon { - font-size: 20px; - position: relative; - top: 1px; + font-size: 20px; + position: relative; + top: 1px; } -.img-allocated-max-width { - margin: 20px auto; +section > .generic-page-wrapper, .videos-content-wrapper, .suggest-content-wrapper, .help-content-wrapper, .match-content-wrapper, .dirfind-content-wrapper, .delegation-content-wrapper, .notes-content-wrapper, .message-content-wrapper, .apps-content-wrapper, #adminpage, .delegate-content-wrapper, .uexport-content-wrapper, .dfrn_request-content-wrapper, .friendica-content-wrapper, .credits-content-wrapper, .nocircle-content-wrapper, .profperm-content-wrapper, .invite-content-wrapper, .tos-content-wrapper, .fsuggest-content-wrapper { + background-color: #252728; + color: #b0b3b8; + box-shadow: 0 0 3px #dadada; + -webkit-box-shadow: 0 0 3px #2d2d2d; + -moz-box-shadow: 0 0 3px #dadada; + border-radius: 10px; } -.fc .fc-month-view .fc-content .fc-title .item-desc { - font-size: 15px; +.fc-unthemed td.fc-today { + background: #434344; +} + +.fc .fc-event { + background-color: #abacac; + border: 1px solid #c1c1c1; + color: #090909; +} + +.mail-list-outside-wrapper .contact-photo-wrapper img { + height: 70px; + width: 70px; + border-radius: 50%; +} + +.mail-conv-wrapper .media .contact-photo-wrapper img { + height: 48px; + width: 48px; + border-radius: 50%; +} + +.wall-item-container .wall-item-content .type-link img.attachment-image, .type-link img.attachment-image, .type-video img.attachment-image { + border-radius: 3px; +} + +figure.img-allocated-height img { + border-radius: 3px; +} + +audio, canvas, progress, video { + border-radius: 3px; } .breadcrumb { - background-color: #333; + background-color: #333; } -.table-striped > tbody > tr:nth-of-type(2n+1) { - background-color: #464646; +.img-allocated-max-width { + margin: 20px auto; } @media screen and (max-width: 1280px) { @@ -991,7 +900,6 @@ aside hr, section hr { width: 18% !important; } } - @media screen and (max-width: 991px){ #search-box { left: 15%; @@ -1000,8 +908,10 @@ aside hr, section hr { content: ''; margin: 0; } + #mention-link span:last-of-type { + margin-right: 42px; + } } - @media screen and (max-width: 768px){ #topbar-first .navbar-toggle[data-target="#search-mobile"]{ position: fixed !important; @@ -1011,205 +921,13 @@ aside hr, section hr { top: 110px !important; } } - -/* Modal Styles */ -#jot-modal-content, .wall-item-comment-wrapper { - background-color: rgb(37,39,40) !important; - border-radius: 15px !important; -} - -#jot-modal-content input, -#jot-modal-content .friendica-tagsinput { - background-color: #1C1C1D !important; -} - -#jot-modal-content .fbrowser .folders button { - background-color: rgba(255,255,255,.1) !important; - color: black !important; -/*! box-shadow: none !important; */ -} - -#jot-modal-content .fbrowser .folders li:hover, -#jot-modal-content .fbraower .folders li:focus { - border-color: transparent !important; - background-color: transparent !important; -} - -#jot-title { - border-radius: 50px !important; - background-color: rgb(51,51,52) !important; -} - -#profile-jot-text, #profile-jot-wrapper textarea, -#jot-location, .wall-item-comment-wrapper textarea { - background-color: rgb(51, 51, 52) !important; -} - -#jot-text-wrap, #profile-jot-wrapper .dropzone.dz-clickable, .wall-item-comment-wrapper .dropzone.dz-clickable { - background-color: #2d2d2d !important; -} -.jot-nav { - border: none !important; -} - -.jot-nav a { - border: none !important; - border-radius: 8px !important; - margin-right: 5px; -} - -.jot-nav a:hover, .jot-nav a:focus { - background-color: rgba(255,255,255,.2) !important; -} - -.jot-nav .active a { - background-color: transparent !important; - border-radius: 0 !important; - border-bottom: 3px solid #0866FF !important; -} - -.jot-nav .active a:hover, .jot-nav .active a:focus { - background-color: transparent !important; -} -[id^="comment-edit-preview"], .comment-edit-preview { - border-radius: 8px !important; - box-shadow: none !important; - background-color: rgba(255,255,255,.1); -} - -[id^="comment-edit-preview"]:hover, -[id^="comment-edit-preview"]:focus, -.comment-edit-preview:hover, -.comment-edit-preview:focus { - background-color: rgba(255,255,255,.2) !important; -} - -#profile-jot-wrapper .wall-item-container.panel-body.preview { - border: 1px solid #666 !important; - margin-top:20px !important; - border-radius: 8px !important; -} - -/* Profile */ -#profile-photo-wrapper { - overflow: visible !important; - padding: 5px; - background-color: #1C1C1D; - border-radius: 100% -} - -aside .widget li { - margin-bottom: 8px; -} - -aside .vcard img.u-photo, aside img.vcard-photo { - border-radius: 100% !important; - box-shadow: 0 0 1px rgba(0,0,0,.3); - border: 3px solid #1C1C1D; -} - -aside .widget h3.p-name { - font-size: 32px !important; - text-align: center; - word-break: break-word; -} - -aside .vcard .p-addr { - font-weight: 600; - text-align: center; - white-space: break-spaces !important; -} - -aside .widget li.selected { - background-color:rgba(56, 88, 152,.2) !important; - border-color: transparent !important; - border-radius: 8px; -} - -aside .widget li.selected a { - font-weight: bold; -} - -aside .widget li:hover { - background-color:rgba(128,128,128,.2) !important; - border-color: transparent !important; - border-radius: 8px; -} - -.panel-group .panel-heading + .panel-collapse > .list-group, .panel-group .panel-heading + .panel-collapse > .panel-body { - border-top: 1px solid #464444; -} - -#widget-contacts { - background-color: rgb(37, 39, 40) !important; - border-radius: 8px !important; - box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2) !important; -} -.contact-block-img { - height: 100px !important; - width: 100px !important; - border-radius: 8px !important; - box-shadow: 0 0 1px rgba(0, 0, 0, .2); - margin: 5px; - -} -.comment-fake-form { - border: none !important; - background-color: transparent !important; -} - -.comment-fake-form textarea { - border-radius: 50px !important; - background-color: rgb(51, 51, 52) !important; - box-shadow: none !important; - -webkit-box-shadow: none !important; -} - -.wall-item-actions button { - font-size: 24px !important; - color: #B0B3B8 !important; -} - -.wall-item-actions button:hover { - color: #0866FF !important; -} -.wall-item-actions .checkbox { - padding-top: 6px !important; -} -.comment .media-body { - padding: 10px; - background-color: rgb(37, 39, 40); - border-radius: 20px; -} -.wall-item-actions-row .wall-item-emoji { - font-size: 18px; - line-height: 40px; -} -.navicon { - font-size: 20px; - position: relative; - top: 1px; -} - -#jot-modal .modal-header a, #jot-modal .modal-header .btn-link, #profile-jot-submit-wrapper a, #profile-jot-submit-wrapper .btn-link { - color: #888787; -} - -/* Composer Styles */ -.composer { - background-color: #252728; - color: #B0B3B8; - border: 1px solid #333; -} - -.composer-header { - background-color: #252728; - color: #B0B3B8; - border-bottom: 1px solid #333; -} - -.composer-footer { - background-color: #252728; - color: #B0B3B8; - border-top: 1px solid #333; +@media screen and (max-width: 480px){ + #topbar-first .navbar-toggle[data-target="#search-mobile"]{ + left: 10%; + } + .topbar ul.nav { + position: relative !important; + left: 10% !important; + margin-left: 0!important; + } } diff --git a/bookface_dark/bookfacedark.php b/bookface_dark/bookfacedark.php index ecadcbb..684cf11 100644 --- a/bookface_dark/bookfacedark.php +++ b/bookface_dark/bookfacedark.php @@ -1,28 +1,33 @@ -darken(45); $nav_bg = '#252728'; +$link_color = '#' . $accentColor->lighten(10); + // override ugly blue accent color + if ( $link_color == "#33a2e0" ){ + $link_color = "#0066ff"; + } $nav_icon_color = '#B0B3B8'; -$link_color = '#0866ff'; $background_color = '#1C1C1D'; +$contentbg_transp = '0'; +$font_color = '#cccccc'; +$font_color_darker = '#acacac'; +$font_color_lighter = '#444444'; $background_image = ''; -$contentbg_transp = 100; -$menu_background_hover_color = 'rgba(255,255,255,.1)'; // rgba(255,255,255,.1) -$font_color = '#B0B3B8'; -$font_color_darker = '#333'; -$border_color = '#333';