Skocz do zawartości

Wykryliśmy, że używasz AdBlocka  :emo_im_sad:

Proszę, dodaj nas do wyjątków:) Wyświetlamy jedynie ładne, idealnie dopasowane reklamy - żadnych wyskakujących okienek czy wideo! Reklamy to jedyne źródło utrzymania naszej społeczności.

Kliknij tutaj, aby dowiedzieć się jak to zrobić. Dziękujemy!

Wynegocjowaliśmy najlepszą ofertę tylko dla użytkowników Forum Android.com.pl! Czytaj więcej.. ×
Baron Rafau

Ciemny motyw dla forum.android.com.pl

    Rekomendowane odpowiedzi

    Napisano (edytowane)

    @DawPi Zawsze aktualny jest na stronie z motywem:

    https://userstyles.org/styles/158812/dark-blue-grey-forum-android-com-pl

    Trochę ciężko się w nim połapać, gdyż pisałem tak, aby było jak najmniej kodu.

     

    Kod obecnej wersji:

    Spoiler
    
    :root {
        --main-bg-color: #37474F;
        --secondary-bg-color: #263238;
        --third-bg-color: #455A64;
        --fourth-bg-color: #212a2f;
        
        --main-text-color: #ECEFF1;
        --link-color: #039BE5;
        --link-hover-color: #B0BEC5;
    }
    body,
    .cPastLeaders_cell,
    .cPastLeaders_cell div{
        background: var(--main-bg-color) !important;
        color: var(--main-text-color) !important;
    }
    a {
        color: var(--link-color);
    }
    #ipsLayout_header header,
    #elMobileNav,
    .ipsBox,
    .ipsAreaBackground_reset,
    .ipsPad_half,
    .ipsApp ul.ipsPad_half,
    .ipsApp ol.ipsPad_half,
    .ipsBox:not( .ipsBox_transparent):not( .ipsModerated),
    .ipsMenu_title,
    .ipsPagination_active,
    .ipsHovercard,
    .ipsAreaBackground,
    .ipsPad,
    .ipsPagination .ipsPagination_page.ipsPagination_active a,
    .ipsApp .ipsButton_primary,
    .ipsDialog_title,
    .ipsDialog_title ~ .ipsHr,
    .ipsDialog > div,
    .ipsTabs_panel,
    .ipsTabs,
    .ipsMenu,
    .ipsMenu_innerContent,
    .cAuthorPane_mobile {
        background: var(--secondary-bg-color) !important;
        border: none;
    }
    #ipsLayout_header nav,
    .ipsNavBar_secondary,
    .ipsNavBar_primary:not( .ipsNavBar_noSubBars) > ul:before,
    .ipsNavBar_secondary > li > a,
    .ipsNavBar_primary > ul > li.ipsNavBar_active > a,
    .ipsNavBar_secondary > li.ipsNavBar_active a,
    ul:not( .ipsMenu_keyNav) .ipsMenu_item:not( .ipsMenu_itemClicked):not( .ipsMenu_itemDisabled) a:not( .ipsMenu_itemInline):hover,
    .ipsMenu_item[data-selected] a,
    .ipsMenu_item[data-selected] span,
    .ipsMenu_item.ipsMenu_hover,
    .ipsPagination .ipsPagination_page a,
    .ipsPagination .ipsPagination_next a,
    .ipsPagination .ipsPagination_prev a,
    .ipsPagination .ipsPagination_first a,
    .ipsPagination .ipsPagination_last a,
    .ipsApp .ipsButton_important,
    .ipsFollow,
    .ipsButtonBar .ipsButtonRow li > a,
    .ipsButtonBar .ipsButtonRow li > button,
    .ipsButtonBar .ipsButtonRow li > span,
    .ipsQuote_citation,
    .ipsSpoiler_header,
    .ipsMenu_headerBar,
    .ipsMenu_footerBar,
    .ipsReact_reactCount,
    .ipsReact_reactCount span,
    .ipsApp .ipsField_autocomplete, .ipsApp textarea, .ipsApp input[type="text"], .ipsApp input[type="password"], .ipsApp input[type="datetime"], .ipsApp input[type="datetime-local"], .ipsApp input[type="date"], .ipsApp input[type="month"], .ipsApp input[type="time"], .ipsApp input[type="week"], .ipsApp input[type="number"], .ipsApp input[type="email"], .ipsApp input[type="url"], .ipsApp input[type="search"]:not(#elSearchField), .ipsApp input[type="tel"], .ipsApp .ipsField_dummy,
    .ipsSelectTree_nodes [data-role="nodeList"] li .ipsSelectTree_item:not( .ipsSelectTree_itemDisabled ):hover,
    .ipsSelectTree{
        background: var(--third-bg-color) !important;
        color: var(--main-text-color) !important;
    }
    .ipsDataList_readStatus .ipsDataItem:not( .ipsDataItem_unread):not( .ipsDataItem_selected):not( .ipsModerated),
    .ipsDialog_loading,
    #elSearchExpanded .ipsSideMenu_list,
    .ipsQuote,
    .ipsSpoiler,
    #elInput_messenger_title,
    .ipsField_autocomplete,
    #elInput_messenger_to_dummyInput,
    #elInput_topic_title {
        background: var(--main-bg-color) !important;
        border: none;
    }
    .ipsMenu,
    .ipsHovercard {
        box-shadow: 0px 0px 30px -10px rgba(0, 0, 0, 1);
        border-radius: 10px;
    }
    #elFlashMessage{
        background: var(--main-bg-color) !important;
        box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
    }
    
    .ipsNavBar_secondary > li > a:hover {
        color: var(--link-hover-color);
    }
    .ipsBreadcrumb,
    .ipsBreadcrumb a,
    .ipsType_pageTitle,
    .ipsWidget_title,
    .ipsType_sectionHead,
    .ipsType_light,
    .ipsBreadcrumb > ul > li,
    .ipsType_richText,
    .ipsDataItem_main a,
    .ipsDataItem_lastPoster li a,
    .ipsDataItem_withPhoto li a,
    .ipsWidget .ipsTabs_small .ipsTabs_item:not( .ipsTabs_activeItem),
    .ipsMenu a,
    .ipsLoading:before,
    .ipsPagination_pageJump a,
    .ipsPager_type,
    html[dir="ltr"] .ipsPager .ipsPager_prev a:after,
    html[dir="rtl"] .ipsPager .ipsPager_next a:after,
    .ipsDialog_title,
    #ipsLayout_footer a,
    #ipsLayout_footer p,
    .fa.fa-search,
    ::placeholder,
    .ipsButton_light,
    .ipsComposeArea_dummy.ipsJS_show,
    .ipsType_veryLarge,
    .ipsType_minorHeading,
    input[type="text"],
    .ipsPager .ipsPager_next a:after,
    .ipsPager .ipsPager_prev a:after,
    .ipsRichEmbed_itemTitle {
        color: var(--main-text-color) !important;
    }
    .ipsDataList.ipsDataList_zebra .ipsDataItem:not( .ipsDataItem_selected):not( .ipsModerated):not( .ipsDataItem_new):not( .ipsDataItem_success):not( .ipsDataItem_warning):not( .ipsDataItem_error):not( .ipsDataItem_info):not( .ipsDataItem_status):nth-child(even) {
        background: var(--fourth-bg-color);
    }
    .ipsDataItem_subList .ipsDataItem_unread a,
    .ipsDataItem_unread .ipsDataItem_title a {
        color: var(--link-color) !important;
    }
    .ipsComment_highlighted {
        background: var(--secondary-bg-color)!important;
        box-shadow: 0px 0px 20px 0px rgb(183, 28, 28) !important;
        border: none !important;
    }
    .ipsMenu.ipsMenu_bottomCenter:after {
        border-color: transparent transparent var(--secondary-bg-color) transparent;
    }
    li #elTopicActions,
    li #elTopicActionsBottom,
    .ipsApp .ipsDataItem_new {
        background: #B71C1C !important;
        color: #fff;
    }
    .ipsApp .ipsDataItem_warning {
        background: #FF6F00;
    }
    .ipsDialog_close {
        color: #C62828;
    }
    .cForumRow[data-categoryid="839"] .ipsType_sectionTitle{
        background: #FF6F00 !important;
    }
    .ipsBox .ipsModerated,
    .cPost.ipsModerated .cAuthorPane,
    .ipsModerated .ipsPad,
    .ipsModerated .ipsColumn,
    .ipsModerated .ipsType_sectionHead {
        background: #070707 !important;
    }
    .cke_wysiwyg_frame,
    .cke_wysiwyg_div,
    .ipsSideMenu_item:not( .ipsSideMenu_itemActive) a:hover,
    a.ipsSideMenu_item:not( .ipsSideMenu_itemActive):hover,
    span.ipsSideMenu_item:not( .ipsSideMenu_itemActive):hover,
    .ipsStreamItem_contentType,
    .ipsComment_header,
    .ipsPhotoPanel_mini,
    .ipsComment:not( .ipsModerated) .ipsComment_header,
    input[type="text"],
    .ipsAttachment_dropZone.ipsDragging,
    .ipsComposeArea_dropZone.ipsDragging,
    .ipsAutocompleteMenu_item,
    .ipsAlert {
        background: var(--secondary-bg-color) !important;
    }
    .ipsReact_button {
        filter: none !important;
    }
    .cke_top,
    .ipsAreaBackground_light,
    #elSearchExpanded,
    #elSearch,
    .ipsApp .ipsDataItem_selected,
    .ipsButton_light,
    .ipsComposeArea_dummy.ipsJS_show,
    .ipsTabs_activeItem,
    .ipsWidget.ipsWidget_vertical .ipsWidget_title,
    .ipsWidget.ipsWidget_horizontal .ipsWidget_title,
    .ipsAutocompleteMenu_item[data-selected],
    #elInput_comment_edit_reason,
    .ipsType_sectionTitle{
        background: var(--third-bg-color) !important;
    }
    #elSearch input[type="search"],
    #elSearchExpanded,
    #elSearchExpanded .ipsMenu_title,
    .ipsTabs_activeItem {
        border: none !important;
        color: var(--main-text-color);
    }
    a.cke_button{
        filter: invert(1);
    }
    
    button[type="submit"].ipsButton_primary,
    button[data-action="ok"].ipsButton.ipsButton_fullWidth.ipsButton_primary{
        background: #4CAF50 !important;
    }
    
    /*przyciski moderacyjne w cke*/
    .cke_button[title*="warn"],
    .cke_button[title*="WARN"],
    .cke_button[title*="Notka"]
    {
        filter: none !important;
    }
    
    /*Wybór czcionki i jej rozmiaru*/
    .cke_panel_grouptitle {
        background: #263238;
        color: #fff;
        text-shadow: none;
        box-shadow: none;
    }
    .cke_panel_listItem a {
        background: #37474F;
        border: 1px solid #263238;
    }
    .cke_panel_listItem a:hover,
    .cke_panel_listItem a:focus,
    .cke_panel_listItem a:active {
        background: #546E7A;
    }
    a.cke_combo_button,
    .cke_combo_on a.cke_combo_button {
        background: #455A64;
        box-shadow: none;
        border: none;
    }
    .cke_combo_off a.cke_combo_button:hover {
        background: #546E7A;
    }
    .cke_combo_text {
        color: #fff;
        text-shadow: none;
    }
    .cke_combo_on a.cke_combo_button {
        background: #263238;
    }
    #elFullReports_menu .ipsDataItem.ipsDataItem_unread a,
    .fa-flag {
        color: red !important;
    }
    .fa-exclamation-triangle{
        color: #FFA726;    
    }
    .fa-check-circle{
        color: #4CAF50;    
    }
    
    .ipsMessage_error{
        background: #cc5353 !important;
    }
    .ipsMessage_warning{
        background: #d87c4f !important;
    }
    
    .ipsDataItem{
        border-color: var(--third-bg-color);
    }
    .nbPinned{
        background: var(--third-bg-color) !important;
    }
    .cIPInfo_map,
    .cPastLeaders_title span,
    .ipsStreamItem.ipsStreamItem_actionBlock {
        background: transparent !important
    }
    
    .ipsColumn_medium img {
        max-width: 100%;
    }
    
    /*animacja ładowania embed*/
    #ipsEmbedLoading{
        background: var(--main-bg-color) !important;
    }
    @keyframes dummy_anim {
        0% {
            background-color: var(--main-bg-color);
        }
        80% {
            background-color: var(--secondary-bg-color);
        }
        100% {
            background-color: var(--third-bg-color);
        }
    }
    
    
    .ipsCode{
        background: var(--fourth-bg-color) !important;
        border-left-color: var(--third-bg-color) !important;
    }
    
    .ipsCode span{
        filter: invert(100%);
    }
    
    /*member*/
    [style*="color: #111111;"] {
        color: #9E9E9E !important;
    }
    
    /*Super Member*/
    [style*="color: #333425"] {
        color: #90a4ae !important;
    }
    
    /*Weteran*/
    [style*="color: #3f3f3f;"] {
        color: #78909c !important;
    }
    
    /*często używane kolory tekstu na forum zlewające się z tłem*/
    [style*="color:#000"],
    [style*="color:#252525"],
    [style*="background-color:#ffffff"],
    [style*="color: rgb(51, 51, 51)"],
    [style*="color:#272a34"],
    [style*="color:#333333"],
    [style*="color:#2b2b2c"],
    [color*="#2b2b2c"],
    [style*="background-color:#fffefa"],
    [style*="color:#000000"],
    [style*="color: #000000"],
    font[color*="000"],
    [style*="background-color:rgb(230,230,230)"],
    [style*="color:#222222;"],
    [style*="color: rgb(82, 82, 82)"],
    [style*="rgb(10,10,10)"],
    [style*="background-color:#fcfcfc"],
    [style*="rgb(51,51,51)"],
    [style*="rgb(39, 42, 52)"],
    [style*="background-color:#f9f9f9"],
    [style*="color:rgb(82,82,82)"],
    [style*="color:#263238"],
    [style*="rgb(237, 237, 237)"],
    span[style*="rgb(255, 255, 255)"] {
        color: var(--main-text-color) !important;
        background: transparent !important;
    }
    ::-webkit-scrollbar-track {
        background-color: var(--secondary-bg-color);
    }
    ::-webkit-scrollbar {
        width: 10px;
    }
    ::-webkit-scrollbar-thumb {
        background-color: var(--third-bg-color);
    }
    ::selection {
        background: #90A4AE;
        color: #fff;
    }

     

     

    Edytowane przez Baron Rafau
    Najnowsza wersja CSS

    Udostępnij tę odpowiedź


    Odnośnik do odpowiedzi
    Udostępnij na innych stronach
    DawPi

    Poddam dyskusji.

    Udostępnij tę odpowiedź


    Odnośnik do odpowiedzi
    Udostępnij na innych stronach
    rammiro

    Ciemny motyw to świetny pomysł, popieram.

    Tydzien temu zamówiłem stworzenie nowego skina dla naszego forum. Za tydzień powinny być już gotowe pierwsze makiety, a wdrożenie w czerwcu. Zaraz po tym moglibyśmy pracować nad ciemną wersją. 

    dodana zawartość

    Ciemny motyw to świetny pomysł, popieram.

    Tydzien temu zamówiłem stworzenie nowego skina dla naszego forum. Za tydzień powinny być już gotowe pierwsze makiety, a wdrożenie w czerwcu. Zaraz po tym moglibyśmy pracować nad ciemną wersją. 

    Udostępnij tę odpowiedź


    Odnośnik do odpowiedzi
    Udostępnij na innych stronach
    krzychy
    Godzinę temu, rammiro napisał:

    Ciemny motyw to świetny pomysł,

    @rammiro
    Były nawet dwa, jeden autorstwa @wisin drugi był dzieckiem @Seiko .
    Po ostatnich zawirowaniach technicznych, oba zniknęły  :)  

    Udostępnij tę odpowiedź


    Odnośnik do odpowiedzi
    Udostępnij na innych stronach
    Gwozdek

    @Baron Rafau Dobra robota, naprawdę! Właśnie zainstalowałem, do domyślnego motywu raczej nie wrócę ;)

    Udostępnij tę odpowiedź


    Odnośnik do odpowiedzi
    Udostępnij na innych stronach
    Seiko
    3 godziny temu, krzychy napisał:

    @rammiro
    Były nawet dwa, jeden autorstwa @wisin drugi był dzieckiem @Seiko .
    Po ostatnich zawirowaniach technicznych, oba zniknęły  :)  

    Oczywiście, mając gotowy motyw to wykonanie ciemnego na  podstawie jego wymaga trochę wiedzy, i pomysłu, nie koniecznie kasy, wszystko da się zrobić. Kod CSS przyjmie wszystko 👍😉

    Udostępnij tę odpowiedź


    Odnośnik do odpowiedzi
    Udostępnij na innych stronach
    Napisano (edytowane)

    Dla tęskniących za starymi ramkami - tymi z tłem, stworzyłem mały dodatek.

    Instalując ten styl będą wyglądać podobnie jak kiedyś 😛 

    https://userstyles.org/styles/160778/forum-android-com-pl-stare-ramki

    image.thumb.png.d536144b1a83969e10284b6d671d8fd0.png

    image.thumb.png.fca344cac6a9228fcb52806ff81bd433.png

     

    I dodatkowo wykrzyczniczki działają.

     

     

     

    @DawPi łap kod:

    .RAMKABCG,
    .RAMKABCGB{
        background: #F57F17 !important;
        color: #fff !important;
        border-radius: 5px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 5%;
    }
    
    .RAMKI img{
        content: url("https://forum.android.com.pl/public/style_images/wykrzyk.png");
    }
    
    .admnote{
        background: #01579B !important;
        color: #fff !important;
        border-radius: 5px;
        padding-bottom: 50px;
        padding-top: 50px;
        padding-left: 5%;
        display: flex;
        align-items: center;
        font-size: 0px; /*Urycie "Treść notatki"*/
    }
    
    .uwagi2 p{
        font-size: 15px;
    }
    
    
    .admnote:before{
        content: url("https://forum.android.com.pl/public/style_images/wykrzyk.png");
    }

     

    Edytowane przez Baron Rafau

    Udostępnij tę odpowiedź


    Odnośnik do odpowiedzi
    Udostępnij na innych stronach
    DawPi
    W dniu 31.05.2018 o 22:35, Baron Rafau napisał:

    łap kod:

    Dzięki! Wrzucony.

    Udostępnij tę odpowiedź


    Odnośnik do odpowiedzi
    Udostępnij na innych stronach
    piskorfa
    Napisano (edytowane)

    @Baron Rafau Jest szansa na małą modyfikację stylu? :)

    Przy przeglądaniu całej aktywności dla mnie trochę słabo wyróżniają się nieprzeczytane wątki od tych przeczytanych.

    Miałbym prośbę, aby tą kropkę oznaczającą nieprzeczytany wątek dać na biało / żółto lub (i) nazwę tematu wyróżnić jakimś innym kolorem, w każdym razie nie w odcieniu niebieskiego

    image.png.d3279e0ff9b937076db30a8ced13bbf5.png

    Edytowane przez piskorfa

    Udostępnij tę odpowiedź


    Odnośnik do odpowiedzi
    Udostępnij na innych stronach

    @piskorfa Który kolor lepszy?

    image.png.491149233bb87ce9cd0461904a0f2cf1.png

    image.png.220b6114cf75583b1af8806de0b1781f.png

    image.png.54c21001cedca61fabf14b67e079e399.png

    image.png.9eea3303b1cdac1d7b3389fbc52c69ec.png

    Niebieski by najbardziej pasował:

    image.png.7b39cb41beb6e101230fd18cfb629154.png

    Udostępnij tę odpowiedź


    Odnośnik do odpowiedzi
    Udostępnij na innych stronach

    Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

    Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

    Zarejestruj nowe konto

    Załóż nowe konto. To bardzo proste!

    Zarejestruj się

    Zaloguj się

    Posiadasz już konto? Zaloguj się poniżej.

    Zaloguj się

    • Przeglądający   0 użytkowników

      Brak zarejestrowanych użytkowników przeglądających tę stronę.

    ×