[tt-rss.git] / css / tt-rss.less

body.ttrss_main {

        background : white;
        color : black;
        margin : 0px;
        padding : 0px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 14px;

        body#ttrssMain {
                overflow : hidden;
                max-height : 100%;
        }

        :focus {
                outline: none;
        }

        div.postReply {
                padding : 0px;

                div.postHeader {
                        padding : 5px;
                        margin-right : 4px;
                        color : #909090;
                        border: 0px solid #ddd;
                        border-bottom-width: 1px;

                        div.postDate {
                                text-align : right;
                                color : #909090;
                                float : right;
                        }

                        div {
                                padding-bottom : 3px;
                        }

                        span.author {
                                color : #555;
                                font-size : 11px;
                                font-weight : normal;
                        }
                }

                div.postTitle {
                        overflow : hidden;
                        text-overflow: ellipsis;
                        white-space : nowrap;
                        font-weight : 600;
                        text-rendering: optimizelegibility;
                        font-family : @fonts-ui-bold;
                }

                div.postDate {
                        padding-left : 10px;
                }

                div.postContent {
                        padding : 10px;
                        font-size : 16px;

                        img,
                        video {
                                border-width : 0px;
                                max-width : 98%;
                                height: auto;
                        }

                        h1 {
                                font-size : 16px;
                        }

                        h2,
                        h3,
                        h4 {
                                font-size : 15px;
                        }

                        p {
                                hyphens: auto;
                        }

                        iframe {
                                min-width : 50%;
                                max-width : 98%;
                        }
                }

                div.postEnclosures {
                        color : #555;
                }

                img.tagsPic {
                        width : 16px;
                        height : 16px;
                        margin-left : 4px;
                        vertical-align : middle;
                }

                span.author {
                        font-size : 12px;
                }
        }

        div.articleNote {
                background-color : #fff7d5;
                padding : 5px;
                margin : 5px;
                border: 1px solid #e7d796;
                color : #9a8c59;

                div.noteEdit {
                        float : right;
                        cursor : pointer;
                }
        }

        h1 {
                font-size : 18px;
                font-weight : 600;
                text-rendering: optimizelegibility;
                font-family : @fonts-ui;
        }

        h2 {
                font-size : 16px;
                font-weight : 600;
                border: 0px solid @color-accent-light;
                border-bottom-width: 1px;
                text-rendering: optimizelegibility;
                font-family : @fonts-ui;
        }

        h3 {
                font-size : 13px;
                border: 0px solid @color-accent-light;
                border-bottom-width: 1px;
                font-weight : 600;
                text-rendering: optimizelegibility;
                font-family : @fonts-ui;
        }

        h4 {
                font-size : 14px;
                font-weight : 600;
                text-rendering: optimizelegibility;
                font-family : @fonts-ui;
        }

        hr {
                border: 0px solid #ccc;
                border-bottom-width: 1px;
        }

        a {
                color: @color-link;
                text-decoration: none;
        }

        a:hover {
                color: darken(@color-link, 20%);
                text-decoration: underline;
        }

        #notify.visible {
                transform: translate(0, -35px);
        }

        #notify {
                bottom : -35px;
                right : 0px;
                height : 20px;
                left : 0px;
                border-width : 1px 0px 0px 0px;
                border-style : solid;
                position : fixed;
                font-size : 12px;
                z-index : 99;
                padding : 5px;
                box-shadow : 0px -2px 2px rgba(0,0,0,0.1);

                transition: all 0.5s ease-in-out;

                img {
                        vertical-align : middle;
                        max-height : 14px;
                }

                span.msg {
                        width : 100%;
                }

                img.close {
                        cursor : pointer;
                }

                span {
                        display : table-cell;
                        vertical-align : middle;
                        padding : 2px;
                }
        }

        .notify {
                border-color : #d7c47a;
                background-color : #fff7d5;
        }

        .notify.notify_progress {
                border-color : #d7c47a;
                background-color : #fff7d5;
        }

        .notify.notify_info {
                border-color : @color-accent;
                background-color : @color-accent-light;
        }

        .notify.notify_error {
                background-color : #ffcccc;
                border-color : #ff0000;
        }

        .hl {
                border: 0px solid #ddd;
                border-bottom-width: 1px;
                padding : 1px;

                div.hlTitle {
                        display : table-cell;
                        cursor : pointer;
                        width : 100%;
                        vertical-align : middle;
                        overflow : hidden;
                        white-space : nowrap;
                        max-width : 500px;
                        text-overflow : ellipsis;
                        padding: 4px 6px;
                }

                div.hlLeft {
                        display : table-cell;
                        vertical-align : middle;
                        white-space: nowrap;
                }

                div.hlRight {
                        display : table-cell;
                        white-space: nowrap;
                        text-align : right;
                        vertical-align : middle;
                }

                div.hlRight img {
                        max-width : 16px;
                        max-height : 16px;
                }

                span.hlFeed {
                        display : table-cell;
                        vertical-align : middle;
                        text-align : right;
                }

                span.hlFeed a {
                        border-radius : 4px;
                        display : inline-block;
                        padding : 1px 4px 1px 4px;
                        font-size : 11px;
                        font-style : italic;
                        font-weight : normal;
                        color : #555;
                        white-space : nowrap;
                }

                span.hlFeed a:hover {
                        color : @color-accent;
                }

                span.hlUpdated {
                        color : #555;
                        display : table-cell;
                        vertical-align : middle;
                        text-align : right;
                        font-size : 11px;
                        white-space : nowrap;
                        padding-left : 10px;
                }

                span.hlUpdated div {
                        display : inline-block;
                }

                div.hlLeft {
                        padding-left : 8px;
                }

                div.hlLeft input {
                        margin-left : 4px;
                        margin-right : 4px;
                }

                div.hlLeft img, div.hlRight img {
                        margin : 0px 4px;
                }

                div.hlLeft img {
                        width : 16px;
                        height : 16px;
                }

                div.hlTitle a {
                        font-weight : 600;
                        text-rendering: optimizelegibility;
                        font-family : @fonts-ui;
                        color : #777;
                }

                a.title.high, span.hlContent.high .contentPreview {
                        color : #00aa00;
                }
        }

        .hl.Unread a.title.high, .hl.Unread span.hlContent.high .contentPreview {
                color : #00dd00;
        }

        .hl a.title.low, span.hlContent.low .contentPreview,
        .hl.Unread a.title.low, .hl.Unread span.hlContent.low .contentPreview {
                color : #909090;
                text-decoration : line-through;
        }

        .hl.Unread div.hlTitle a {
                color : black;
        }

        .hl.active {
                background : @color-accent-light ! important;
        }

        .hl.active div.hlTitle a {
                color : @color-accent;
                /* text-shadow : 1px 1px 2px #fff; */
        }

        .hl.Selected {
                background : #f9fbff;
        }

        .hl.Grayed {
                color : #909090;
        }

        div.filterTestHolder {
                height : 300px;
                overflow : auto;
                border-color : #ddd;
                border-style : solid;
                margin : 0px 0px 5px 0px;
                border-width : 1px;
        }

        #content-insert blockquote,
        #headlines-frame blockquote,
        .dijitContentPane blockquote {
                margin : 5px 0px 5px 0px;
                color : #555;
                padding-left : 10px;
                border: 0px solid #ccc;
                border-left-width: 4px;
        }

        #content-insert code,
        #headlines-frame code,
        .dijitContentPane code {
                color : #009900;
                font-family : monospace;
                font-size : 12px;
        }

        #content-insert pre,
        #headlines-frame pre,
        .dijitContentPane pre {
                margin: 5px 0px 5px 0px;
                padding: 10px;
                color: #555;
                font-family: monospace;
                font-size: 12px;
                border: 0px solid #ccc;
                background: #f5f5f5;
                display: block;
                max-width: 98%;
                overflow: auto;
        }

        .alert {
                padding: 8px 35px 8px 14px;
                margin-bottom: 10px;
                text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
                background-color: #fcf8e3;
                border: 1px solid #fbeed5;
                border-radius: 4px;
        }

        .alert,
        .alert h4 {
                color: #c09853;
        }

        .alert h4 {
                margin: 0;
        }

        .alert .close {
                position: relative;
                top: -2px;
                right: -21px;
                line-height: 20px;
                cursor : pointer;
        }

        .alert-success {
                color: #468847;
                background-color: #dff0d8;
                border-color: #d6e9c6;
        }

        .alert-success h4 {
                color: #468847;
        }

        .alert-danger,
        .alert-error {
                color: #b94a48;
                background-color: #f2dede;
                border-color: #eed3d7;
        }

        .alert-danger h4,
        .alert-error h4 {
                color: #b94a48;
        }

        .alert-info {
                color: #3a87ad;
                background-color: #d9edf7;
                border-color: #bce8f1;
        }

        .alert-info h4 {
                color: #3a87ad;
        }

        ul.nomarks {
                list-style-type : none;
                margin : 0px;
                padding : 10px;
        }

        div.prefHelp {
                color : #555;
                padding : 5px;
        }

        .insensitive {
                color : #555;
        }

        .small {
                font-size : 11px;
        }

        #main-toolbar {

                > * {
                        white-space : nowrap;
                        display : table-cell;
                        color : #999;
                        overflow : hidden;
                }

                > *,
                table *,
                .actionChooser * {
                        text-rendering: optimizelegibility;
                        font-family : @fonts-ui;
                        font-size : 12px;

                }

                #headlines-toolbar {
                        padding-right : 4px;
                        width : 100%;

                        span.holder {
                                display : table;
                                width : 100%;
                        }

                        span.holder > * {
                                display : table-cell;
                        }

                        .main {
                                text-align : right;
                        }

                        .main,
                        .r {
                                line-height : 24px;
                        }

                        span.r img {
                                margin-right : 4px;
                                position : relative;
                                top : 3px;
                        }

                        span.r .error a {
                                color : red;
                        }

                }

                #selected_prompt {
                        font-style : italic;
                        text-align : right;
                        margin-right : 4px;
                }

                @media (max-width: 992px) {
                        #selected_prompt {
                                display : none;
                        }
                }
        }


        span.contentPreview {
                color : #999;
                font-weight : normal;
                font-size : 12px;
                padding-left : 4px;
        }

        span.hlLabelRef {
                background-color : #fff7d5;
                font-size : 8px;
                color : #063064;
                font-weight : normal;
                margin-left : 2px;
                padding : 1px 4px 1px 4px;
                display : inline-block;
                vertical-align : middle;
                white-space: nowrap;
                border-radius : 4px;
        }

        img.markedPic, img.pubPic {
                cursor : pointer;
                vertical-align : middle;
                opacity : 0.5;
                transition : opacity 0.25s;
        }

        img.markedPic:hover, img.pubPic:hover {
                opacity : 1;
        }

        img[src*='pub_set.png'], img[src*='mark_set.png'] {
                opacity : 1;
        }

        div.tagCloudContainer {
                border : 1px solid #ddd;
                margin : 5px 0px 5px 0px;
                padding : 5px;
                text-align : center;
        }

        div.errorExplained {
                border : 1px solid #ddd;
                margin : 5px 0px 5px 0px;
                padding : 5px;
        }

        ul.feedErrorsList {
                max-height : 300px;
                overflow : auto;
                list-style-type : none;
                border : 1px solid #ddd;
                margin : 0px 0px 5px 0px;
                padding : 5px;

                em {
                        color : #555;
                }
        }


        ul.browseFeedList {
                height : 300px;
                overflow : auto;
                border-width : 0px 1px 1px 1px;
                border-color : #ddd;
                border-style : solid;
                margin : 0px 0px 5px 0px;
                background-color : white;
                list-style-type : none;
                padding : 0px;

                li {
                        margin : 0px;
                        padding : 2px 4px 2px 4px;
                }
        }


        .browseFeedList span.subscribers {
                color : #808080;
        }

        ul.compact {
                list-style-type : none;
                margin : 0px;
                padding : 0px;

                li {
                        margin : 0px;
                        padding : 0px;
                }
        }

        .noborder {
                border-width : 0px;
        }

        #overlay {
                background : white;
                left : 0;
                top : 0;
                height : 100%;
                width : 100%;
                z-index : 100;
                position : absolute;
        }

        #overlay_inner {
                font-weight : bold;
                margin : 1em;
        }

        form {
                margin : 0px;
                padding : 0px;
        }

        div.loadingPrompt {
                padding : 1em;
                text-align : center;
                font-weight : bold;
        }

        div.whiteBox {
                margin-left : 1px;
                text-align : center;
                padding : 1em 1em 0px 1em;
                font-size : 11px;
                border: 0px solid #ddd;
                border-bottom-width: 1px;
        }

        div.autocomplete {
                position : absolute;
                width : 250px;
                background-color : white;
                border :1px solid #778899;
                margin : 0px;
                padding : 0px;

                ul {
                        list-style-type : none;
                        margin : 0px;
                        padding : 0px;
                }

                ul li.selected {
                        background-color : #fff7d5;
                }

                ul li {
                        list-style-type : none;
                        display : block;
                        margin : 0;
                        padding : 2px;
                        height : 32px;
                        cursor : pointer;
                }
        }


        div#headlines-frame.wide .hlTitle {
                max-width : none;
                overflow : visible;
                white-space : normal;
        }

        div#headlines-frame.wide .hl .hlFeed {
                display : none;
        }

        img.hlScorePic {
                vertical-align : middle;
                width : 16px;
                height : 16px;
        }

        div.dlgSec {
                font-size : 12px;
                color : #555;
                font-weight : bold;
                clear : both;
                height : 20px;
        }

        div.dlgSecCont {
                position : relative;
                left : 150px;
                top : -20px;
                float : left;
                font-size : 12px;
                font-weight : normal;

                > * {
                        position : relative;
                        top : -2px;
                }
        }

        div.dlgSecCont hr, div.dlgSecSimple hr {
                height : 0px;
                line-height : 0px;
                border : 0px solid transparent;
                margin : 2px;
        }

        div.dlgButtons {
                text-align : right;
                clear : both;
        }

        span.labelColorIndicator {
                height : 16px;
                width : 16px;
                border-radius : 4px;
                line-height : 14px;
                vertical-align : middle;
                font-size : 9px;
                display : inline-block;
                border : 1px solid #ccc;
                background-color : #fff7d5;
                color : #063064;
                text-align : center;
        }

        div#cmdline {
                position : absolute;
                left : 5px;
                bottom : 5px;
                font-size : 11px;
                color : #555;
                font-weight : bold;
                background-color : white;
                border : 1px solid @color-accent;
                padding : 3px 5px 3px 5px;
                z-index : 5;
        }

        #feed_browser_spinner {
                vertical-align : middle;
                height : 18px;
                width : 18px;
        }

        div.fatalError {
                margin-bottom : 10px;

                button {
                        margin-top : 5px;
                }

                textarea {
                        width : 565px;
                        height : 200px;
                }
        }

        #ttrssMain #main {
                border-width : 0px;
                margin : 0px;
                padding : 0px;
        }

        #header-wrap {
                border-width : 0px;
                margin : 0px;
                padding : 0px;
        }

        #content-wrap {
                padding : 0px;
                border-width : 0px;
                margin : 0px;
        }

        #feeds-holder {
                padding : 0px;
                border: 0px solid #ddd;
                overflow : hidden;
                background : #f5f5f5;
                box-shadow : inset -1px 0px 2px -1px rgba(0,0,0,0.1);
                -webkit-overflow-scrolling : touch;
        }

        #headlines-wrap-inner {
                padding : 0px;
                margin : 0px;
                border-width : 0px;
        }

        #headlines-frame {
                padding : 0px;
                border: 0px #ddd;
                margin-top : 0px;
                -webkit-overflow-scrolling : touch;
                -webkit-transform: translateZ(0);
                -webkit-backface-visibility: hidden;
        }

        #headlines-toolbar_splitter, #toolbar_splitter {
                display : none;
        }

        #toolbar {
                padding : 0px;
                margin : 0px;
                border-width : 0px;
                white-space: nowrap;
                font-size : 12px;
        }

        #main-toolbar {
                background : white;
                border: 0px solid #ddd;
                border-bottom-width: 1px;
                padding-left : 4px;
                height : 26px;

        }

        #header {
                border-width : 0px;
                text-align : right;
                color : #555;
                padding : 5px 5px 0px 0px;
                margin : 0px;
                position : absolute;
                right : 0px;
                top : 0px;
                z-index : 5;
        }

        #footer {
                text-align : center;
                color : #555;
                padding : 4px 4px 8px 4px;
                border-width : 0px;
        }

        #content-insert {
                padding : 0px;
                border-color : #ddd;
                border-width : 0px;
                line-height: 1.5;
                font-size : 15px;
                overflow : auto;
                -webkit-overflow-scrolling : touch;
        }

        #feedTree .dijitTreeRow .dijitTreeLabel.Unread {
                font-weight : bold;
        }

        #feedTree .dijitTreeRow.Error .dijitTreeLabel {
                color : red;
        }

        img.feedIcon, img.tinyFeedIcon {
                width : 16px;
                height : 16px;
                line-height : 16px;
                vertical-align : middle;
                display : inline-block;
        }

        .player {
                display : inline-block;
                color : #555;
                font-size : 11px;
                font-family : sans-serif;
                border : 1px solid #555;
                padding : 0px 4px 0px 4px;
                margin : 0px 2px 0px 2px;
                width : 50px;
                text-align : center;
                background : white;
        }

        .player.playing {
                color : #00c000;
                border-color : #00c000;
        }

        .player:hover {
                background : #f0f0f0;
                cursor : pointer;
        }

        #headlines-spacer {
                height : 100%;
                margin-left : 1px;
                text-align : center;
                color : #555;
                font-size : 11px;
                font-style : italic;

                a, span {
                        color : #555;
                        padding : 10px;
                        display : block;
                }

                a:hover {
                        color : @color-accent;
                }
        }

        ul#filterDlg_Matches, ul#filterDlg_Actions {
                max-height : 100px;
                overflow : auto;
                list-style-type : none;
                border-style : solid;
                border-color : #ddd;
                border-width : 0px 1px 1px 1px;
                background-color : white;
                margin : 0px 0px 5px 0px;
                padding : 0px;
        }

        ul#filterDlg_Matches li, ul#filterDlg_Actions li {
                cursor : pointer;
                padding : 0px 0px 0px 5px;
        }

        ul.helpKbList {
                max-height : 300px;
                overflow : auto;
                list-style-type : none;
                border : 1px solid #ddd;
                margin : 0px 0px 5px 0px;
                padding : 5px;

                span.hksequence {
                        width : 6em;
                        margin-left : 20px;
                        color : @color-accent;
                        font-weight : bold;
                        display : inline-block;
                }

                h2 {
                        margin-top : 0px;
                }
        }

        span.collapseBtn {
                cursor : pointer;

                img {
                        vertical-align : middle;
                }
        }

        select.attachments {
                display : block;
                margin-top : 10px;
                max-width : 120px;
        }

        #selected_prompt {
                margin-right : 25px;
                vertical-align  : middle;
        }

        body#ttrssMain.claro #feedTree.dijitTree .dijitTreeNode .dijitTreeRowSelected {
                box-shadow : -1px 0px 2px -1px rgba(0,0,0,0.1);
                border-right-color : white;
        }

        body#ttrssMain #feedTree.dijitTree .dijitTreeContainer {
                max-width : 100%;
        }

        body#ttrssMain #feedTree.dijitTree .dijitTreeRow {
                overflow: hidden;
                text-overflow: ellipsis;
        }

        body#ttrssMain #feedTree.dijitTree .dijitTreeNode .dijitTreeRow {
                padding : 4px 0px 4px;
                border-width : 1px;
                color : #333;
        }

        body#ttrssMain #feedTree.dijitTree img.tinyFeedIcon {
                position : relative;
                top : -2px;
        }

        #filterDlg_feeds select {
                height : 150px;
                width : 410px;
        }

        ul#filterDlg_Matches li div.dijitCheckBox, ul#filterDlg_Actions li div.dijitCheckBox {
                margin-right : 5px;
        }

        body#ttrssMain #feedTree {
                height : 100%;
                overflow-x : hidden;
                text-rendering: optimizelegibility;
                font-family : @fonts-ui;

                .counterNode.aux {
                        background : #f0f0f0;
                        color : #999;
                        border-color : #f0f0f0;
                }

                .counterNode {
                        font-weight : bold;
                        display : inline-block;
                        font-size : 9px;
                        text-align : center;
                        border : 1px solid @color-accent;
                        color : white;
                        background : @color-accent;
                        border-radius : 4px;
                        vertical-align : middle;
                        float : right;
                        position : relative;
                        line-height : 14px;
                        margin-right : 8px;
                        margin-top : 2px;
                        min-width : 23px;
                        height : 14px;
                }

                .dijitTreeNode .loadingExpando {
                        left : -3px;
                        height : 22px;
                        position : relative;
                        top : -3px;
                }

        }

        span.highlight {
                background-color : #ffff00;
                color : #cc90cc;
        }

        div.enclosure_title {

        }

        body#ttrssMain #headlines-frame .dijitCheckBox {
                border-width : 0px;
                opacity : 0.5;
        }

        body#ttrssMain #headlines-frame .dijitCheckBoxHover,
        body#ttrssMain #headlines-frame .dijitCheckBoxChecked {
                opacity : 1;
        }

        body#ttrssMain #feedTree .dijitTreeRow img.dijitTreeExpandoLeaf {
                width : 16px;
                height : 16px;
                vertical-align : middle;
                position : relative;
        }

        .dijitDropDownButton.attachments .dijitButtonText {
                font-size : 12px;
        }

        .dijitDropDownButton.attachments {
                display : inline-block;
        }

        #editTagsDlg{
                overflow: visible;
        }

        body#ttrssZoom {
                margin-left : auto;
                margin-right : auto;
                padding : 20px;
                max-width : 770px;
                background : #f5f5f5;

                div.postHeader div.postFeedTitle {
                        float : left;
                        text-align : right;
                        padding-left : 0px;
                        font-size : 11px;
                }

                div.postHeader a.postComments {
                        text-align : right;
                        padding-left : 0px;
                        font-size : 11px;
                }

                div.postHeader div.postDate {
                        float : none;
                        text-align : right;
                        padding-left : 0px;
                        color : #777;
                        font-size : 11px;
                }

                div.postHeader div.postTags {
                        color : #777;
                        font-size : 11px;
                }

                div.postHeader div.postTitle {
                        white-space : normal;
                        font-size : 16px;
                }

                div.postContent {
                        font-size : 15px;
                        line-height : 1.5;
                }

                div.postContent p {
                        -webkit-hyphens: auto;
                        -moz-hyphens: auto;
                        hyphens: auto;
                }

                div.postHeader {
                        margin : 10px;
                        border-width : 0px 0px 1px 0px;
                        border-style : solid;
                        border-color : #eee;
                        background : white;
                }

                div.postReply {
                        border : 1px solid #ddd;
                        background : white;
                        box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1);
                        border-radius : 6px;
                }

                div.footer {
                        margin-top : 1em;
                        text-align : center;
                }

                div.postContent img {
                        max-width : 730px;
                        height : auto;
                }

                div.postContent blockquote {
                        margin : 5px 0px 5px 0px;
                        color : #555;
                        padding-left : 10px;
                        border-width : 0px 0px 0px 4px;
                        border-color : #ccc;
                        border-style : solid;
                }

                div.postContent code {
                        color : #009900;
                        font-family : monospace;
                        font-size : 12px;
                }

                div.postContent pre {
                        margin : 5px 0px 5px 0px;
                        padding : 10px;
                        color : #555;
                        font-family : monospace;
                        font-size : 12px;
                        border-width : 0px;
                        border-color : #ccc;
                        border-style : solid;
                        background : #f5f5f5;
                        display : block;
                        max-width : 98%;
                        overflow : auto;
                }


        }


}