ヴィヴァルディ。 サイドバーからページのサムネイルとその他の設定を削除します

Vivaldiの新しいバージョンが火曜日にリリースされました。本日、このブラウザをもう少し使いやすくします。



設定を別のcssに転送し、サムネイルを削除し、ブラウザーの色を変更し、エクスプレスパネルで「ライブ」壁紙を作成し、カットのすぐ下にいくつかの小さなものを作成します。

CSSへの移行

少し前に、Vivaldiが毎週更新されることが知られるようになりました。つまり、 前の記事で行ったすべての修正がこすられることになります。

この場合、すべての変更を別のファイルで行うことをお勧めします。



Vivaldi \ Application \ 1.0.83.38 1.0.94.2 \ resources \ vivaldi \フォルダにあるbrowser.htmlファイルを開きます 。

これは、cssファイルとjsファイルを使用してブラウザーインターフェイス全体が構築される場所です。

私たちがすることは、行の後です：

<link rel="stylesheet" href="style/common.css" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

cssファイルもロードする行を追加します。 ファイルの名前を「custom.css」とし、browser.htmlの隣のフォルダーに配置します。

 <link rel="stylesheet" href="custom.css" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、css拡張子でこのファイルを作成する必要があります。

前の記事で確認したように、ホーム、リターン、トランジション、および検索ボタンのクラス名はそれぞれhome、rewind、next、およびsearchfieldです。

また、新しいクリーンファイルでは、1行だけを記述する必要があります。

 .home,.rewind,.next,.searchfield{display:none}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

自分用に何かを残す必要がある場合は、列挙からクラス名を削除するだけです。



これで、新しい更新により、common.cssに苦しむ必要がなくなります。 browser.htmlでのみ、custom.cssの行を再度追加するだけで十分です。

スケッチを非表示にする

次に、サイドタブのページのサムネイルについて説明します。





ここでは、左右のパネルのタブの高さを単純に減らします。

 #tabs-container.right #tabs .tab,#tabs-container.left #tabs .tab{height:26px;max-height:26px}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果が得られます。







私たちはスケッチ自体を取り除くのではなく、実際にそこに残ることに注意してください。 また、対応するソケットを引くと、それらは常に上部パネルと下部パネルにあります。



すべてが素晴らしいですが、私にとってタブの幅が広すぎるため、画面のこのような大きな部分を手放すことはできません。

私はそれらを小さくしたいので、私はcssに書いています：

 #tabs-container.left,#tabs-container.right{flex:0 0 100px}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

幅が今では私にとってボタンと一致しています。





また、タブにカーソルを合わせたときにサムネイルを削除するには、次のように記述します。

 .tooltip .tooltip-item .thumbnail-image{display:none}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ライブ壁紙の作成

次のトリックは弱いコンピューター用ではないことをすぐに警告したいと思います。

バックグラウンドビデオを埋め込みます。

これがどのように見えるかのデモです：

またはgifオプション（13 Mb）： i.imgur.com/IdnVbsW.gifv



したがって、背景に必要なビデオを* .webm形式で、たとえばVivaldi \ Application \ 1.0.94.2 \ resources \ vivaldi \ folderに配置します 。 開いている開始ページがあなたを驚かせないように、ビデオをミュートすることを強くお勧めします。

次に、 Vivaldi \ Application \ 1.0.94.2 \ resources \ vivaldi \ components \ startpage \ startpage.htmlを開き 、 body



行を挿入します。

 <video autoplay loop id="bg"><source src="/timescape.webm" type="video/webm"></video>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

timescape.webmの代わりに、ビデオの名前を書きます。

そして、ビデオがすべてのスペースを占有するように、これを挿入する必要があります。

 <style type="text/css"> video#bg { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; } </style>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ビデオはExpressパネルに挿入されますが、まだ表示されません。

背景画像を削除する必要があります。 custom.cssに次を追加します。

 .startpage{background-image:none}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ブラウザを開くと、ビデオはExpressパネルの背景に表示されます。

さらにささいなこと

ここでは、誰かに役立つと思われるものをさらに2つ書きたいと思います。

• たとえば、上部に幅の狭いタブを作成するには、次のように記述します。
  
  

   #tabs-container.top #tabs .tab{width:100px; max-width:100px}
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  下部のタブの場合、それに応じてtopではなくbottomがあります。
  
  
  非表示のテキスト

  
  
  
• システムボタンが大きすぎると思う場合は、それらを減らすことができます。
  
  

   #browser.win .window-buttongroup button.window-close{width:25px}
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  
  非表示のテキスト

  
  
  
• デフォルトのブラウザの色が気に入らない人は、好みに合わせて色を変えることができます。
  
  ここに、たとえば、私のオプションがあります。 ここのすべては暗い色で塗られています。
  
  
  
  

   #header{background-color:#1F262A} .toolbar.toolbar-addressbar{background-color:#1F262A} #tabs .tab.active{background-image:#1F262A} #tabs.tab-stacking-tooltip .tab.active .tab-group-indicator .tab-indicator.active{background-color:#1F262A} .favicon-current-background-color{background-color:#1F262A} .favicon-current-color{color:#1F262A} .favicon-current-border-color{border-color:#1F262A} #browser.popup{background-color:#1E1E1E}
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

• また、タブのサイドパネルをあまり白くしたくない場合は、タブの色を変更することもできます。
  
  

   #tabs-container.left,#tabs-container.right{background-color:#1F262A} #tabs .tab:not(.active):hover{background-color:#1E1E1E!important} #tabs .tab:not(.active){background-color:#1F262A!important;color:#FFFFFF!important}
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  ここでは、非アクティブなタブの色も変更し、それに応じてタブ内のテキストを白にしました。
• 開始ページのインターフェイスの色は、次の行で修正されます。
  
  

   .is-startpage .favicon-current-background-color{background-color:#777777!important}
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

• また、エキゾチックな愛好家の場合は、たとえば、 #header{display:none}
  
  
  
  てウィンドウタイトルを削除できます。

おそらくそれだけです。



これのいくつかがあなたにとって有用または有益であることを願っています。



自分のアイデアやアイデアがあれば、コメントしてください。



UPD：

コメント（ 1および2 ）で、彼らはツールを使用すると、開発ツールを介してインターフェースを編集できることを示唆しました。